Image Accordion

How to use Image Accordion Widget of Sky Addons for Elementor

Sky Addons Image Accordion Widget is a widget that allows users to create interactive image galleries with expanding panels. It supports both static content from a repeater and dynamic content from posts, offering a visually engaging way to display information.

Description

The Image Accordion widget is a dynamic and interactive way to showcase images and content on your website. It allows you to create an accordion-style gallery where each panel expands to reveal more information when clicked or hovered over. This widget is perfect for portfolios, team member profiles, or any content that benefits from a visually appealing and space-saving presentation. With support for both static content via a repeater and dynamic content from posts, the Image Accordion widget offers flexibility and ease of use. Customize the appearance with various styling options, including colors, typography, and hover effects, to match your website’s design. As part of the premium Elementor addons, the Image Accordion widget enhances user engagement and provides a unique browsing experience.

Key Features List

1. Supports content from a repeater or dynamic posts
2. Customizable height and spacing
3. Option to show/hide title, category, and button
4. Adjustable animation easing
5. Click or mouseover activation
6. Styling options for layout, title, category, and button
7. Dynamic template support for posts
8. Control over active item on load
9. Disable close on click option
10. Responsive design

Insert Image Accordion Widget

1. Open Elementor Editor. In the Elementor panel, search for “Image Accordion”
2. Drag and Drop the Widget to the desired location on your page / editor.

Content Section

• Content Source – Select the source of content: Default Repeater or Dynamic Posts.
• Items (Repeater) – Add and manage individual accordion items with title, subtitle, image, button text, and link.
• Select Template – Choose an Elementor template to display within each accordion item (Dynamic Posts only).
• Show Title – Toggle to display the title.
• Show Sub Title / Category – Toggle to display the subtitle or category.
• Show Button – Toggle to display the button.
• Button Text – Set the text for the button (Dynamic Posts only).

Query Section

• Query Builder – Configure the query to fetch dynamic posts based on various criteria like post type, categories, tags, and more.
• Posts Per Page – Set the number of posts to display.

Additional Section

• Height – Adjust the height of the accordion.
• Title HTML Tag – Select the HTML tag for the title.
• Active Item – Set the item number to be active on load.
• Mouse Event – Choose the event to trigger the accordion: Click or Mouse Over.
• Disable Close On Click – Prevent the active item from closing when clicked.
• Animation Easing – Select the easing function for the accordion animations.

Layout Style Section

• Spacing – Adjust the spacing between accordion items.
• Border Radius – Set the border radius for the accordion items.
• Content Padding – Adjust the padding within the content area of each item.
• Content Position – Choose the vertical alignment of the content within each item.
• Background – Customize the background overlay for the content area.

Title Style Section

• Color – Set the color of the title.
• Hover Color – Set the color of the title on hover.
• Typography – Customize the font appearance of the title.

Category Style Section

• Typography – Customize the font appearance of the category.
• Padding – Adjust the padding around the category.
• Border – Set the border properties for the category.
• Border Radius – Set the border radius for the category.
• Normal/Hover States – Separate styling controls for default and hover states.
• Color – Set the color of the category text.
• Background – Customize the background of the category.
• Box Shadow – Add a box shadow to the category.

Button Style Section

• Padding – Adjust the padding within the button.
• Typography – Customize the font appearance of the button.
• Border – Set the border properties for the button.
• Border Radius – Set the border radius for the button.
• Normal/Hover States – Separate styling controls for default and hover states.
• Text Color – Set the color of the button text.
• Background – Customize the background of the button.
• Text Shadow – Add a text shadow to the button.
• Box Shadow – Add a box shadow to the button.
• Animation – Choose a hover animation for the button.

Style Customization

The Image Accordion widget offers extensive styling options, allowing you to customize the appearance of your accordion to match your website’s design. You can control the colors, typography, spacing, borders, and backgrounds of various elements, ensuring a cohesive and visually appealing presentation.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Images Not Displaying – Ensure that the image URLs are correct and the images are accessible.
2. Layout Issues – Check the spacing and height settings to ensure the accordion items are displayed correctly.
3. Dynamic Content Not Loading – Verify that the query settings are configured correctly and that there are posts matching the criteria.
4. Animation Problems – Experiment with different animation easing options to find the best fit for your design.

Conclusion

The Sky Addons Image Accordion widget provides a versatile and engaging way to display images and content on your website. With its support for both static and dynamic content, extensive styling options, and interactive features, you can create a unique and visually appealing browsing experience for your visitors. Whether you’re building a portfolio, showcasing team members, or presenting product information, this widget offers the tools and flexibility you need to create a standout presentation.

If you have any questions or encounter any challenges while using, please don’t hesitate to reach out to our dedicated support team at https://wowdevs.com/support/ where our expert team is ready to provide prompt and helpful assistance.