How to Configure and Style Image Accordion #
Image Accordion lets you display all of your images on your Elementor website with a stunning hover animation and effects. This element ensures perfect image quality and is guaranteed to amaze your visitors with an interactive, creative layout.
How to Activate Image Accordion #
To activate this Sastra Addons element, find the ‘Image Accordion’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. Drag and drop the element anywhere on the page.
After you have dragged and dropped the element into any empty section of your page, you should be able to see it on your site like this by default.
How to Configure the Content Settings #
To configure the content of your Image Accordion, switch to the ‘Content’ tab.
Settings #
From ‘Settings’ section, you will see several options to set the Image Resolution, Active image by default, Height, Active image grow, Gutter and many more.
Content #
From ‘Content’ section, you will add your images along with text and button. Moreover, you are able change image size(Cover, Contain and Auto), position(Center Center, Center Left, Top Center, etc…) and repeat options(Repeat, No-repeat, Repeat-x and Repeat-y).
Elements #
From ‘Elements’ section, you will add Elements. Moreover, you are able change Select Element(Title, Description, Button and Separator), Text HTML Tag, Select Animation, Animation Duration, Show in particular device with toggle button and many more options.
Media Overlay #
For the ‘Media Overlay’ section, you are capable of changing the overlay width, overlay height, animation transparency, Animation Timing, etc… You can even add animation on media overlay as well.
Image Effects #
From ‘Image Effects’ section, you will choose image effect from the Select Effect dropdown options. Also you can set Animation Duration, Animation Delay, Animation Timing and Animation Size.
Click to See Live Demo #
How to Style Image Accordion #
To style your Image Accordion, simply click on the ‘Style’ tab and you will see many different options.
Media Overlay #
Here you can adjust media overlay of your Image Accordion, choose a background color, shadow, border radius and even customize the overlay colors.
Others #
You can also change the margin, padding, border, font colors and typography for your image title from the ‘Title’, change the margin, padding, border, font colors and typography for your image description from the ‘Description’ section.
From ‘Button’ section, you will change image button style. Also you can set Background, Color, Image, Typography, Shadow, Animation, Icon spacing and many more. Moreover, you are able to separately control the styling for ‘button’ when its in normal and hover view.
You can also change the margin, border style, height, width and color for your image separator from the ‘Separator’ section.
Final Outcome #
By following these basic steps and changing these settings, you can create an amazing, interactive image accordion with Sastra Addons to display your content in an eye-catching way.
Play around with all the different settings and amaze your visitors by presenting your content in a unique way with Image Accordion.
If you require any help, feel free to contact our support for further assistance.
