How to use Advanced Image Gallery Widget

element pack

How to use Advanced Image Gallery Widget

The sorting out and presenting images at times fall a user in problems of showcasing photographs, artwork, and images. 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

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

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

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).

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

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.

5. While Masonry is basically a building structure, it is mainly used to unit the images of different shapes. 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.

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.

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.

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.

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.

Style Tab

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


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.

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.

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.

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

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

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.

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.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec