fbpx

Table Of Contents

Advanced Image Gallery Widget

How to use Advanced Image Gallery Widget

Using Advanced Image Gallery widget in the Elementor page builder, the sorting out and presenting images, showcasing photographs, and artworks are not a problem anymore. If it is possible to make the images an integral part of repository content, I think that will be obviously great for the users. Therefore, Advanced Image Gallery widget gives its hand a user to represent or showcase his contents.

In the guideline below, I will guide you on how you can showcase your photographs/ images using the Advanced Image Gallery Widget developed by Element Pack.

Content Tab For The Advanced Image Gallery Widget

Advanced Image Gallery Widget for WordPress

1. Open the Elementor dashboard and Insert Advanced Image Gallery Widget in the section.

wordpress gallery settings

Then, you will have to add images from the Add Images section (basically not selected)

gallery widget settings

2. To make images gallery, first, go to Image Gallery ➤ Skin(Default, Hidden, Carousel) ➤ Add Images ➤ Image Size(set as your requirement form the field, as such Full, Custom).

column settings

3. If you need to add a gap between the images or to determine the number of images column you want to showcase, then, work in Gallery LayoutColumns Column & Row Gap

gallery mode

4. you can showcase images in different modes like Normal, Masonry, or Justified from the Gallery Mode.

Here you will be able to set Image Height too.

gallery layout controls for the gallery widget

5. While Masonry is basically a building structure, it is mainly used to unit the images of different shapes for the WordPress gallery widget. As you see in the above screenshot.

Just follow Gallery Layout Gallery Mode(Masonry) ➤ remember, to have the Masonry design, first, you have to add images(as you need) from the Image Gallery section.

more layout controls

6. There is another way of showcasing photographs is Justified. To get the design, you’ll need to active Justified Button from the Gallery Mode.

Advanced Image Gallery Widget lightbox button

7. Here, in the Advanced Image Gallery, you’ll be able to show your image in Lightbox(filling the screen and dimming out the rest of the web page) mode.

icon selection
text link

8. You can add Text or Icon from Link Type. And if you want to choose another icon, just select Icon from Link Type or Text from the field.

animation controls
preview animation of the wordpress gallery widget

9. Tilt means to make something move into a position where one side is higher than the other. To get this effect in your design, go to Additional ➤ Tilt Effect(switcher button Yes/ No) ➤ Lightbox Animation(Slide, Fade, Scale) ➤ Lightbox Autoplay(switcher button Yes/No).

Mostly, you can use the Spotlite Mode switcher button to get the Spotlite effect. That’s all of the controls for the Advanced Image Gallery widget for Elementor. Now, let’s move forward.

Style Tab For The Advanced Image Gallery Widget

Hopefully, you’ve understood the act of Content Tab. Now, it is time to work with Style Tab. Let’s have a journey.

overlay animation style


1. Come to the Style Tab and here you find Items and Link Style section.

If you want to set animation, you will be able to set 15 animations as such Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left and so on.

previews

2. Where you need to put a border around the items. Just follow Border Type ➤ and set Solid, Double, Dotted, Dashed, Groove or none ➤ Width.

border radius control

you can also put border radius like Top, Right, Bottom, or Left from the Border Radius. unchecking the Link Icon button you can put a single value for border radius.

overlay color map for the advanced image gallery widget

3. There is scope to add overlay color from the Overlay Color section as well as overlay gap from the Overlay Gap section.

link style

4. You can give a style to the icon, simply follow Link Style ➤ Color ➤ Background Color and set the value.

more link styles

5. On the other hand, for adding a border, width, color, borde- radius, box-shadow, padding or Typography, only go to Border TypeWidth Color Border RadiusBox ShadowPaddingTypography.

hover settings for the gallery widget link button

6. And finally, having a hover effect on an icon, go to HoverColor Background ColorBorder Color Animation(Pulse, Grow, Shrink, Push, etc.)

That’s all. I hope this guideline has helped you a lot to learn about the Advanced Image Gallery widget.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.