Image Grid/Slider/Carousel
How to Configure and Style Image Grid/Slider/Carousel #
Elementor Image Grid, Slider, Carousel Widgets gives you the opportunity to add transition effects on how the Image carousel will appear and make it absolutely breath taking for your landing page. The purpose of this element is to let you organize and place your images in one place. With the help of it, you can nicely display the listing of your images.
How to Activate Image Grid/Slider/Carousel #
To use this Sastra Addons element, find the ‘Image Grid/Slider/Carousel‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Image Grid/Slider/Carousel’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with this step, this is how the element is going to look like.
How to Configure the Content Settings #
Under the ‘Content’ tab, you will be able to configure ‘Query’, ‘Layout’, ‘Elements’, ‘Media Overlay’, ‘Image Effects’, ‘Lightbox Popup’ & ‘Pagination’.
Query #
From this section, you can choose the ‘Selection’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your selection: Auto & Manual Selection.
After choosing your preferred ‘Selection’, you can filter your contents by ‘Author’. You have the flexibility to choose multiple options and add as many authors as you wish. If you do not want certain image to appear, you can simply ‘Exclude’ those contents as well.
Moreover, you can set the number of ‘Items Per Page’, ‘Offset’ and ‘Not Found Message’ as well.
Layout #
From this section, you can change your layout and image size. You can use toggle for enable / disable pagination, use the drop-down to select one of these as your animation: Default, Fade and Zoom.
Besides, you can use the drop-down to change columns number, horizontal and vertical gutter for supported all devices.
Elements #
From this section, you can use the drop-down to select element and change element location and display type. You can change horizontal and vertical align, use toggle for hide or display element supported all devices and enable / disable media overlay and animation transparency. Moreover, you can change extra text display (None, Before element and After element), extra icon position (None, Before element and After element) and select icon options.
Besides, You can set animation, animation duration, animation delay, animation timing and also change animation size as well. To add more elements, simply click on the ‘+ ADD ITEM’ button from the bottom.
Media Overlay #
From this section, you can change overlay width & height supported all devices. Use toggle for enable / disable for animation transparency.
Moreover, you can change animation, animation duration, animation delay, animation timing and amination size as well.
Image Effects #
From this section, you can change effects. If you can select animation then you can change animation duration, animation delay, animation timing and animation size as well.
Lightbox Popup #
From this section, you can change autoplay speed. You can use toggle for enable / disable autoplay slides, show progress bar, show caption, show counter, show arrows, show zoom button, show full screen button and show download button as well.
Pagination #
From this section, you can change pagination type, set load more text, finish text, select loading animation and alignment as well.
Click to see Live Demo #
How to Style Image Grid/Slider/Carousel #
To customize Image Grid/Slider/Carousel, click on the ‘Style’ tab, and you will find many different options here.
Grid Item #
From here, you can change background color, border color and padding. Moreover, you can styling to border and border radius as well.
Grid Media #
From here, you can styling to border and border radius as well.
Others #
From the ‘Media Overlay’ settings, you can you can set background color and border radius. On the other hand, customize your ‘Title’, ‘Caption’, ‘Date’, ‘Time’, ‘Author’, ‘Lightbox’, ‘Separator 1’, ‘Separator 2’, ‘Taxonomy 1’ and ‘Taxonomy 2’ from these settings.
Besides, you can also customize your ‘Navigation’ and ‘Pagination’ from these settings.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Image Grid/Slider/Carousel as per your preference.
This is how you can easily showcase your images and carousel styled content with an attractive & interactive layout using Image Grid/Slider/Carousel.
Getting stuck? Feel to Contact Our Support for further assistance.
