An easy thing sometimes can give one tough time. Likewise, our Elementor Custom Gallery Widget is not out of that. So, to lessen the tough part of the widget, I’ll include some instructions and pictures for the support of you.
Therefore, let’s start section by section.
To Insert Widget
Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the custom gallery inside your page.
Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.
This section will offer you two skins (Abetis, Fedara) with default one. You can go for any skin for the WordPress gallery.
After dragging and dropping the widget in a new section, you will get a list group. The list not limited, you can add a new list in the group just clicking on the ADD ITEM button.
In terms of getting the content with the same design, you can duplicate the item clicking on the duplicate icon and to delete clicking on the delete icon.
In addition, you can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Title, Image, Content, and especially Lightbox/Link included in the list item for the image gallery.
The most important thing is Lightbox / Link that will allow you to display something (such as website, video, YouTube, etc.)dimming out the whole page.
And for that, you’ve to go to the Content tab > Custom Gallery > and select anyone (like Selected Image, video, YouTube, Vimeo, Google Map) from the Lightbox / Link.
From this section, it is to say that you will be able to manage the layout of the gallery. For example, you can determine the number of columns, image size, and item height.
There is another option is Masonry that will allow you to display with a masonry effect for the Elementor Custom Gallery Widget.
Just, go to the Content tab > Layout.
In this section, a few controls will offer you selective options such as Overlay Animation, Title HTML Tag, Link Type, and Lightbox Animation and the rest will give you clickable options for example Title, Text, Lightbox animation, and Lightbox Autoplay.
Mostly, you can set any icon from the Icon control. Look at the Tilt Effect in preview mode.
Go to the Content tab > Additional.
It is time to work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you want to design.
Along with the setting of Column and Row Gap, you can set the Overlay Content Alignment and Vertical Position. Moreover, you may add Overlay Color and Gap.
Simply, go to the Style tab > Items.
Fedara/ Abetis Style
I hope you’ve noticed Fedara and Abetis are skin. Suppose if you select Fedara skin from the Content tab, then you’ll be able to style the Fedara skin. This way you can style the corresponding skin.
This section includes two modes (Normal and Hover). In terms Normal mode, you can add Icon Color, Background Color, Border Type and Radius. In addition, Box Shadow and Padding.
Just, go to the Style tab > Link Style > Normal.
But, regarding to Hover mode, you go for only Icon Color and Background Color.
Just, go to the Style tab > Link Style > Hover.
Finally, it seems that you’ve read this documentation and found it very useful. If you want to know more about the widget, you can watch the video on Custom Gallery by Element Pack and also go to our demo page.