What is the Image Accordion widget?
The Image Accordion widget is a dynamic tool for showcasing images with interactive content. It presents a series of images side-by-side, which expand to reveal a title and a description when a user hovers or clicks on them. This creates a visually engaging and space-saving way to display a gallery of products, portfolio items, or services, adding an element of surprise and interactivity to your website.
Common use case
A common use case for the Image Accordion widget is to display a product line on an e-commerce website. Each image in the accordion can represent a different product, and when a user interacts with it, they can see the product’s title and a brief description. This allows the business to showcase multiple products in a single section without cluttering the page.
Additional use cases
- Team member profiles: Show team photos that expand to reveal their name and title.
- Service highlights: Present different services offered, with a description of each.
- Portfolio projects: Display a visual portfolio where each image expands to show a project’s title and a short summary.
- Step-by-step processes: Illustrate a process or a series of stages with an image for each step.
Requirements
- You need the Marquee Addons plugin installed and activated on your website.
- You can find detailed installation instructions in our dedicated installation blog post.
- Make sure that this addon is enabled so you can find it in the Elementor editor.
- Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.
Drag and drop image accordion
- On the left side of the screen, you’ll see the Elementor widget panel.
- Scroll through the panel Marquee Addons and select Image Accordion.
- Click and hold on the widget you want to use, then drag it from the panel.
Image Accordion Contents
We’ll guide you on how to add or customize an image accordion, including the image, title, active behavior, and both horizontal and vertical alignment.
Images:
- Images: Use this repeater field to add and manage the individual accordion items. Click “Add Item” to include more.
- Choose Image: Upload an image for the accordion item.
- Title: Enter a title for the accordion item.
- Active Behavior: Choose how the accordion expands, either on Click or Hover.
- Title Horizontal Alignment: Set the horizontal alignment for the title.
- Title Vertical Alignment: Set the vertical alignment for the title.
Image Accordion Styles
We’ll show you how to adjust image height, set spacing between images, customize overlay colors for normal and hover states, and configure title typography, color, position, and padding.
Images:
- Height: Set the height of the accordion using the slider or input field.
- Gap: Adjust the spacing between each image.
- Overlay Color: Set the color of the image overlay for both normal and hover states.
- Background Type: Set the background type.
- CSS Filters: Apply CSS filters to the images.
- Image Title:
- Typography: Customize the typography for the image title.
- Image Title Color: Set the color of the image title.
- Title Position: Set the position of the title (e.g., Horizontal).
- Padding: Adjust the padding around the title.
