Content Controls
Content
This section allows you to populate your image accordion with rich visuals and text. You can upload multiple images, customize their presentation, add engaging icons, and provide titles, descriptions, and links to make each section informative and clickable.
- Images – Add and manage the images in your accordion.
- Image – Upload the individual images for each panel of your accordion.
- Image options – Further customize each uploaded image (only available if an image is set).
- Size – Choose the display size of your images.
- Alt – Input alt text for the images, enhancing site SEO and accessibility.
- Lazy load – Optimize page load speeds by enabling images to load only when they enter the viewport.
- Icon – Select an icon to represent or accompany each image panel.
- Title – Give each image panel a descriptive title.
- Text – Provide additional text for each image, giving context or extra information.
- Link – Attach a clickable link to each image panel, leading visitors to more content or different sections of your site.
Design Controls
Layout
This section lets you define the structural aspects of your image accordion. Adjust the width, height, and orientation to suit your space requirements and visual preferences, ensuring a seamless integration with your page layout.
- Width – Specify the overall width of the accordion.
- Height – Set a uniform height for all accordion panels.
- Orientation – Choose between a horizontal or vertical layout.
- Vertical At – Decide at which breakpoint the accordion should switch to a vertical layout (only available when the orientation is not set to vertical).
Image
Enhance the interactivity and visual appeal of your images with these controls. Add hover effects, overlay colors, shadows, and more to create a dynamic, engaging user experience.
- Expand On Hover – Determine how much the image should enlarge when a user hovers over it.
- Scale On Hover – Set a scaling effect to activate when users hover over an image.
- Overlay – Choose a color overlay to appear over images.
- Overlay Opacity – Adjust the transparency of the color overlay on your images.
- Shadow – Apply a drop shadow effect to your images for added depth.
- Transition Duration – Control the speed of hover effects and transitions.
- Border Radius – Round the corners of your images by setting a border radius.
Content
Customize the display of text and icons accompanying your images. Adjust visibility, color, size, and typography to match your brand’s styling and enhance readability.
- Hide Until Hover – Choose whether to keep text and icons hidden until someone hovers over an image.
- Hover Effect – Select an animation or visual effect for when users hover over the content (only available when ‘Hide Until Hover’ is enabled).
- Icon Color – Pick a color for the icons in your image accordion.
- Icon Size – Set a specific size for the icons.
- Title Typography – Customize the font, size, and style of your titles.
- Text Typography – Modify the typography settings for your descriptive text.
Spacing
Control the spacing in and around your image accordion to optimize readability and layout consistency. Adjust the gaps between images, text, and more for a polished look.
- Between Images – Set the amount of space between individual image panels.
- Below Icon – Adjust the spacing below the icons.
- Below Title – Define the space beneath each panel title.
- Wrapper – Manage the outer spacing of the entire accordion element.
- Margin Top – Add space above your image accordion.
- Margin Bottom – Insert space below your image accordion.
