Required Setup<\/h2>\n\n\n\n\n- Elementor FREE Plugin<\/a> installed & activated.<\/li>\n\n\n\n
- You need to have The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n
- Make sure the Gallery Listing widget is activated, to verify this visit Plus Settings \u2192 and Search for Gallery Listing and activate.<\/li>\n\n\n\n
- This is a Freemium widget, to unlock the extra features, you need the PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n<\/ul>\n\n\n\n
How to Activate the Gallery Listing Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
\n- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
![\"gallery](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-activate.png\")
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n\n- Three Source Types <\/strong>– You can choose from three source types Normal, Repeater<\/a>(Pro) and ACF Gallery<\/a>(Pro).<\/li>\n\n\n\n
- Multiple Style Options <\/strong>(Freemium) – You can choose from multiple styling options.<\/li>\n\n\n\n
- 4 Layouts <\/strong>– You can choose from four layout types Grid<\/a>, Masonry<\/a>, Metro<\/a> and Carousel<\/a> (Pro).<\/li>\n\n\n\n
- Box Link<\/strong> (Pro) – You can easily link gallery images to external links<\/a>.<\/li>\n\n\n\n
- Category Filter <\/strong>(Pro) – You can easily add category filters to image gallery<\/a> (except for the carousel layout).<\/li>\n\n\n\n
- Unique Carousel ID <\/strong>(Pro) – With the Unique Carousel ID, you can easily connect and control the image carousel with the Carousel Remote<\/a> widget.<\/li>\n<\/ul>\n\n\n\n
How to Create Gallery Listing in Elementor?<\/h2>\n\n\n\n
To create a gallery listing, add the Gallery Listing widget on the page. <\/p>\n\n\n\n
Layout<\/h3>\n\n\n\n
From the Style<\/strong> dropdown under the Layout<\/strong> tab, you can select from different predefined styles.<\/p>\n\n\n\nThen from the Layout<\/strong> dropdown, you can select the layout of your gallery. You\u2019ll find four options – <\/p>\n\n\n\nGrid<\/strong> – For creating a grid layout.<\/p>\n\n\n\nMasonry<\/strong> – For creating a masonry grid layout.<\/p>\n\n\n\nMetro<\/strong> – For creating a modern metro layout.<\/p>\n\n\n\nCarousel<\/strong> – For creating an image carousel slider.<\/p>\n\n\n\nSelect the appropriate layout option which fits your need.<\/p>\n\n\n\n![\"gallery](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-layout.png\")
<\/figure>\n\n\n\nIn the Popup Layout<\/strong> dropdown, you can select the image popup type. You\u2019ll find two options – <\/p>\n\n\n\nDefault Light-box<\/strong> – With this option, you can view all the gallery images in a popup slider. <\/p>\n\n\n\nNo<\/strong> – With this option, you can only view individual images in a popup.<\/p>\n\n\n\nContent<\/h3>\n\n\n\n
From the Select Option<\/strong> dropdown under the Content <\/strong>tab, you have to select the source of the listing. Here you\u2019ll find three options – <\/p>\n\n\n\nNormal<\/strong> – With this option, you can directly add images to the gallery<\/p>\n\n\n\nRepeater<\/strong> – With this option, you can add additional information like title, caption, category, custom URL and more while adding images to the repeater gallery<\/a>. <\/p>\n\n\n\nACF Gallery<\/strong> – With this option, you can create an Elementor gallery using the ACF Gallery<\/a> custom field. <\/p>\n\n\n\nHere we\u2019ll select the Normal<\/strong> option.<\/p>\n\n\n\n![\"gallery](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-content.gif\")
<\/figure>\n\n\n\nFrom the Add Images<\/strong> section, you can add images to the gallery from the media library.<\/p>\n\n\n\nColumns Manage<\/h3>\n\n\n\n
From the Columns Manage<\/strong> tab, you can manage the number of columns of your gallery listing on desktop, tablet and mobile separately.<\/p>\n\n\n\nYou can also manage the column gap from here.<\/p>\n\n\n\n
For the Metro <\/strong>layout, you can select the number of columns for desktop and tablet only, you can also select different styles for each device separately.<\/p>\n\n\n\nExtra Options<\/h3>\n\n\n\n
Then, in the Extra Options<\/strong> tab, you\u2019ll find some additional options.<\/p>\n\n\n\nDisplay Title<\/strong> – From here, you can show or hide the image title. You can also set different HTML tags to the title.<\/p>\n\n\n\n\nNote: For the Normal and ACF Gallery types image name will show as the title.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\n
Display Image Size<\/strong> – From here, you can select different image sizes.<\/p>\n\n\n\n\nNote: For <\/em>Carousel<\/em><\/strong> layout, you\u2019ll get <\/em>Featured Image Type<\/em><\/strong> option to adjust the image size.<\/em><\/p>\n<\/blockquote>\n\n\n\n<\/p>\n\n\n\n
Display Excerpt\/Content<\/strong> – From here, you can show or hide the image caption in the gallery.<\/p>\n\n\n\nBox Link<\/strong> – From here, you can add custom link to Elementor gallery images<\/a> for the Repeater type gallery only. <\/p>\n\n\n\nCategory Wise Filter<\/strong> – In the Repeater type gallery, you can add a category filter to create a filterable Elementor gallery<\/a>. <\/p>\n\n\n\n\nNote: Category Wise Filter option is not available in the <\/em>Carousel<\/em><\/strong> layout.<\/em><\/p>\n<\/blockquote>\n\n\n\nHow to Style Team Member Listing Widget in Elementor?<\/h2>\n\n\n\n
To style the Gallery Listing widget, you\u2019ll find all the styling options under the Style<\/strong> tab.<\/p>\n\n\n\nPopup Icon<\/strong> – From here, you can enable or disable the icon on the image. You can also set the icon or image for the gallery images, beside that you can manage icon size, colour etc.<\/p>\n\n\n\n![\"gallery](\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/06\/gallery-listing-style.png\")
<\/figure>\n\n\n\nExtra Icon<\/strong> – You\u2019ll see this option for the Repeater type gallery. From here, you can manage the extra icon size, colour, top and bottom space. <\/p>\n\n\n\nTitle<\/strong> – From here, you can manage the gallery image title typography, colour, top and bottom space. <\/p>\n\n\n\nExcerpt\/Content<\/strong> – From here, you can manage the gallery image caption typography, colour, top and bottom space.<\/p>\n\n\n\nContent Background<\/strong> – From here, you can manage the image content background for normal and hover states.<\/p>\n\n\n\nFeature Image<\/strong> – From here, you can manage the image overlay background for normal and hover states.<\/p>\n\n\n\nBox Loop Background Style<\/strong> – From here, you can add border and box shadow to each item in the listing.<\/p>\n\n\n\nCarousel Options<\/strong> – This option will be visible when you use the Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n\n- Unique Carousel ID<\/strong> – With the Unique Carousel ID, you can easily connect and control the image carousel with the Carousel Remote <\/a>widget. <\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Slide Speed<\/strong> – Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Now you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n\n- Columns <\/strong>– You can set the number of columns for the slide for desktop, tablet and mobile separately. <\/li>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slide Padding<\/strong> – From here, you can adjust the padding of your slider.<\/li>\n\n\n\n
- Draggable<\/strong> – Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n
- Multi Drag<\/strong> – With this option, you can allow users to drag multiple slides at once.<\/li>\n\n\n\n
- Infinite Mode<\/strong> – From here, you can turn your carousel into an infinite loop slider.<\/li>\n\n\n\n
- Pause On Hover<\/strong> – Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n
- Adaptive Height<\/strong> – If you have slides with uneven height with this option, the carousel navigations will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n
- Animation Type<\/strong> – From here, you can choose the animation type for your slider.<\/li>\n\n\n\n
- Autoplay<\/strong> – Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n
- Show Dots<\/strong> – From here, you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n
- Show Arrow<\/strong> – You can also add arrows navigation for your carousel slider and style them.<\/li>\n\n\n\n
- Center Mode<\/strong> – From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n
- Number Of Rows<\/strong> – From here, you can set the number of rows for your slider. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Post Not Found Options<\/strong> – From here, you can style the \u201cPlease select a multiple images gallery\u201d message. You can manage the message typography, colour, background, border etc.<\/p>\n\n\n\nExtra Options<\/strong> – From here, you can add unique styles to your gallery items. <\/p>\n\n\n\n\n- Tilt 3D Parallax<\/strong> – From here, you can add a 3d tilt effect on mouse hover<\/a>. <\/li>\n\n\n\n
- Mouse Move Parallax<\/strong> – You can add a mouse move parallax effect on mouse hover<\/a>. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Messy Columns<\/strong> – You can make a unique column alignment from here. Turn on the Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\nOn Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
How to Activate the Gallery Listing Widget?<\/h2>\n\n\n\n
Go to <\/p>\n\n\n\n
- \n
- The Plus Settings <\/strong>\u2192 Plus widgets <\/strong><\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n
<\/figure>\n\n\n\nKey Features<\/h2>\n\n\n\n
- \n
- Three Source Types <\/strong>– You can choose from three source types Normal, Repeater<\/a>(Pro) and ACF Gallery<\/a>(Pro).<\/li>\n\n\n\n
- Multiple Style Options <\/strong>(Freemium) – You can choose from multiple styling options.<\/li>\n\n\n\n
- 4 Layouts <\/strong>– You can choose from four layout types Grid<\/a>, Masonry<\/a>, Metro<\/a> and Carousel<\/a> (Pro).<\/li>\n\n\n\n
- Box Link<\/strong> (Pro) – You can easily link gallery images to external links<\/a>.<\/li>\n\n\n\n
- Category Filter <\/strong>(Pro) – You can easily add category filters to image gallery<\/a> (except for the carousel layout).<\/li>\n\n\n\n
- Unique Carousel ID <\/strong>(Pro) – With the Unique Carousel ID, you can easily connect and control the image carousel with the Carousel Remote<\/a> widget.<\/li>\n<\/ul>\n\n\n\n
How to Create Gallery Listing in Elementor?<\/h2>\n\n\n\n
To create a gallery listing, add the Gallery Listing widget on the page. <\/p>\n\n\n\n
Layout<\/h3>\n\n\n\n
From the Style<\/strong> dropdown under the Layout<\/strong> tab, you can select from different predefined styles.<\/p>\n\n\n\n
Then from the Layout<\/strong> dropdown, you can select the layout of your gallery. You\u2019ll find four options – <\/p>\n\n\n\n
Grid<\/strong> – For creating a grid layout.<\/p>\n\n\n\n
Masonry<\/strong> – For creating a masonry grid layout.<\/p>\n\n\n\n
Metro<\/strong> – For creating a modern metro layout.<\/p>\n\n\n\n
Carousel<\/strong> – For creating an image carousel slider.<\/p>\n\n\n\n
Select the appropriate layout option which fits your need.<\/p>\n\n\n\n
<\/figure>\n\n\n\nIn the Popup Layout<\/strong> dropdown, you can select the image popup type. You\u2019ll find two options – <\/p>\n\n\n\n
Default Light-box<\/strong> – With this option, you can view all the gallery images in a popup slider. <\/p>\n\n\n\n
No<\/strong> – With this option, you can only view individual images in a popup.<\/p>\n\n\n\n
Content<\/h3>\n\n\n\n
From the Select Option<\/strong> dropdown under the Content <\/strong>tab, you have to select the source of the listing. Here you\u2019ll find three options – <\/p>\n\n\n\n
Normal<\/strong> – With this option, you can directly add images to the gallery<\/p>\n\n\n\n
Repeater<\/strong> – With this option, you can add additional information like title, caption, category, custom URL and more while adding images to the repeater gallery<\/a>. <\/p>\n\n\n\n
ACF Gallery<\/strong> – With this option, you can create an Elementor gallery using the ACF Gallery<\/a> custom field. <\/p>\n\n\n\n
Here we\u2019ll select the Normal<\/strong> option.<\/p>\n\n\n\n
<\/figure>\n\n\n\nFrom the Add Images<\/strong> section, you can add images to the gallery from the media library.<\/p>\n\n\n\n
Columns Manage<\/h3>\n\n\n\n
From the Columns Manage<\/strong> tab, you can manage the number of columns of your gallery listing on desktop, tablet and mobile separately.<\/p>\n\n\n\n
You can also manage the column gap from here.<\/p>\n\n\n\n
For the Metro <\/strong>layout, you can select the number of columns for desktop and tablet only, you can also select different styles for each device separately.<\/p>\n\n\n\n
Extra Options<\/h3>\n\n\n\n
Then, in the Extra Options<\/strong> tab, you\u2019ll find some additional options.<\/p>\n\n\n\n
Display Title<\/strong> – From here, you can show or hide the image title. You can also set different HTML tags to the title.<\/p>\n\n\n\n
\n
Note: For the Normal and ACF Gallery types image name will show as the title.<\/em><\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
Display Image Size<\/strong> – From here, you can select different image sizes.<\/p>\n\n\n\n
\n
Note: For <\/em>Carousel<\/em><\/strong> layout, you\u2019ll get <\/em>Featured Image Type<\/em><\/strong> option to adjust the image size.<\/em><\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
Display Excerpt\/Content<\/strong> – From here, you can show or hide the image caption in the gallery.<\/p>\n\n\n\n
Box Link<\/strong> – From here, you can add custom link to Elementor gallery images<\/a> for the Repeater type gallery only. <\/p>\n\n\n\n
Category Wise Filter<\/strong> – In the Repeater type gallery, you can add a category filter to create a filterable Elementor gallery<\/a>. <\/p>\n\n\n\n
\n
Note: Category Wise Filter option is not available in the <\/em>Carousel<\/em><\/strong> layout.<\/em><\/p>\n<\/blockquote>\n\n\n\n
How to Style Team Member Listing Widget in Elementor?<\/h2>\n\n\n\n
To style the Gallery Listing widget, you\u2019ll find all the styling options under the Style<\/strong> tab.<\/p>\n\n\n\n
Popup Icon<\/strong> – From here, you can enable or disable the icon on the image. You can also set the icon or image for the gallery images, beside that you can manage icon size, colour etc.<\/p>\n\n\n\n
<\/figure>\n\n\n\nExtra Icon<\/strong> – You\u2019ll see this option for the Repeater type gallery. From here, you can manage the extra icon size, colour, top and bottom space. <\/p>\n\n\n\n
Title<\/strong> – From here, you can manage the gallery image title typography, colour, top and bottom space. <\/p>\n\n\n\n
Excerpt\/Content<\/strong> – From here, you can manage the gallery image caption typography, colour, top and bottom space.<\/p>\n\n\n\n
Content Background<\/strong> – From here, you can manage the image content background for normal and hover states.<\/p>\n\n\n\n
Feature Image<\/strong> – From here, you can manage the image overlay background for normal and hover states.<\/p>\n\n\n\n
Box Loop Background Style<\/strong> – From here, you can add border and box shadow to each item in the listing.<\/p>\n\n\n\n
Carousel Options<\/strong> – This option will be visible when you use the Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n
- \n
- Unique Carousel ID<\/strong> – With the Unique Carousel ID, you can easily connect and control the image carousel with the Carousel Remote <\/a>widget. <\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Slide Speed<\/strong> – Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Now you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n
- \n
- Columns <\/strong>– You can set the number of columns for the slide for desktop, tablet and mobile separately. <\/li>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slide Padding<\/strong> – From here, you can adjust the padding of your slider.<\/li>\n\n\n\n
- Draggable<\/strong> – Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n
- Multi Drag<\/strong> – With this option, you can allow users to drag multiple slides at once.<\/li>\n\n\n\n
- Infinite Mode<\/strong> – From here, you can turn your carousel into an infinite loop slider.<\/li>\n\n\n\n
- Pause On Hover<\/strong> – Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n
- Adaptive Height<\/strong> – If you have slides with uneven height with this option, the carousel navigations will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n
- Animation Type<\/strong> – From here, you can choose the animation type for your slider.<\/li>\n\n\n\n
- Autoplay<\/strong> – Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n
- Show Dots<\/strong> – From here, you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n
- Show Arrow<\/strong> – You can also add arrows navigation for your carousel slider and style them.<\/li>\n\n\n\n
- Center Mode<\/strong> – From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n
- Number Of Rows<\/strong> – From here, you can set the number of rows for your slider. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Post Not Found Options<\/strong> – From here, you can style the \u201cPlease select a multiple images gallery\u201d message. You can manage the message typography, colour, background, border etc.<\/p>\n\n\n\n
Extra Options<\/strong> – From here, you can add unique styles to your gallery items. <\/p>\n\n\n\n
- \n
- Tilt 3D Parallax<\/strong> – From here, you can add a 3d tilt effect on mouse hover<\/a>. <\/li>\n\n\n\n
- Mouse Move Parallax<\/strong> – You can add a mouse move parallax effect on mouse hover<\/a>. <\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n\n
Messy Columns<\/strong> – You can make a unique column alignment from here. Turn on the Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\n
On Scroll View Animation<\/strong> – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n
- Mouse Move Parallax<\/strong> – You can add a mouse move parallax effect on mouse hover<\/a>. <\/li>\n<\/ul>\n\n\n\n
- Next Previous<\/strong> – You can set the behaviour of your next\/previous slide movement from here. You can move one column at a time or all visible columns (depending on the number of columns set in the Columns<\/strong> dropdown).<\/li>\n\n\n\n
- Slider Mode<\/strong> – From here, you can choose your slider orientation, horizontal or vertical.<\/li>\n\n\n\n
- Multiple Style Options <\/strong>(Freemium) – You can choose from multiple styling options.<\/li>\n\n\n\n
- Search <\/strong>the widget name <\/strong>and turn on the toggle <\/strong>then <\/strong>click Save.<\/strong><\/li>\n<\/ul>\n\n\n\n