How to Add Image Accordion in Bricks Builder using BricksFly

Image Accordion Element allows you to display images and content in an interactive accordion layout. You can customize each item with its own image, title, content, and link, while adjusting the layout, responsive behavior, alignment, and expansion settings to match your website design.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Image Accordion In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements. 
4. Under Advanced, toggle on Image Accordion.

Step 1: Configure Accordion Items

Items: Allows you to add, remove, duplicate, reorder, and manage the individual items displayed in the Image Accordion. Each item can contain its own image, title, content, and link. In this example, three items are added, but you can add as many items as needed.

Image Size: Selects the image resolution used for the accordion items, such as thumbnail, medium, large, or full size. In this example, Full Size is selected.

Step 2: Adjust the Accordion Settings

Title HTML Tag: Selects the HTML tag used for the item titles, such as H2, H3, H4, or another available tag. Choose the tag according to your page heading structure. In this example, the title HTML tag is set to H4.

Layout: Controls how the accordion items are arranged, such as horizontally or vertically. In this example, Horizontally is selected.

Stack Below (px): Sets the screen width below which the accordion items change to a stacked layout. This helps the element display properly on tablets and mobile devices. In this example, Stack Below is set to 768 by default, but you can enter any value as needed.

Expand On: Determines which interaction expands an accordion item, such as hovering over it or clicking it. For this example, Hover is selected.

Default Open Item: Selects which accordion item remains expanded when the page first loads. In this example, the value is set to 1, but you can enter any value as needed.

Note: In this example, the remaining settings are left unchanged at their default values. However, you can adjust them to match your design preferences or website requirements.

Height: Controls the overall height of the Image Accordion Element.

Horizontal Align: Controls the horizontal position of the item content, such as left, center, or right.

Vertical Align: Controls the vertical position of the item content, such as top, center, or bottom.

Text Align: Controls the alignment of the text within each accordion item, such as left, center, or right.

Step 3: Configure the Button

Link Type: Determines how the link is applied within the accordion item, such as through a button or the entire item.

Button Text: Sets the text displayed on the button, such as Learn More, View Project, or Explore Now. However, in this example, no button text is added.

Final Result