In this step-by-step guide, we’ll show you how to create a dynamic image accordion using Bricks Builder. When we say “dynamic,” we mean fetching content like WordPress posts, pages, products, or media and displaying it in an interactive accordion—without any coding needed!
We’ll be using the Max Addons’ Image Accordion element for this tutorial. Max Addons is one of the best addon for Bricks Builder, featuring over 30 unique and creative elements that make building beautiful WordPress websites a breeze.
Before proceeding to our guide, let’s see an example of using the dynamic image accordion.
Example of Dynamic Image Accordion
Let’s say you have a travel blog and want to display your latest posts in a creative way. Instead of manually adding each blog post into an accordion, a dynamic image accordion can automatically grab the post titles, images, and excerpts, and display them in a visually appealing, expandable accordion format.
So, whenever you publish a new post, it’s automatically added to the accordion.
How To Create a Dynamic Image Accordion With Bricks Builder and Max Addons
Without further ado, let’s see how you can create a dynamic image accordion with Bricks Builder and Max Addons’ Image Accordion element.
Step 1: Install and Activate Max Addons
Before you start building your accordion, you need to install and activate the Max Addons plugin.
To do that head over to the WordPress Dashboard and navigate to Plugins >> Add New Plugin. On the plugin’s directory page search for “max addons for bricks builder” and click the Install Now button.
Once the installation is complete, click “Activate”
You can also download a zip file of Max Addons Lite from wordpress.org
Step 2: Create or Edit a Page
With Max Addons installed and activated, the next step is to create or edit the page where you want to display your dynamic accordion. This could be a new page you’re working on or an existing one where you want to add the accordion.
Navigate to Pages >> Add New in the WordPress dashboard and create a fresh page.
If you already have a page ready, go to Pages >> All Pages, select the one you want, and click “Edit with Bricks”. Once you’re in the Bricks editor, you’re ready to add the accordion.
Step 3: Add the Image Accordion Element
Now that you have your page ready, it’s time to add the Image Accordion element.
In the Bricks editor, use the search bar to look for “image accordion”. Once the element shows up, drag it onto your page.
Make sure the element has the “MAX” tag in the top-left corner. This tells you it’s the Image Accordion from Max Addons.
Step 4: Enable the Query Loop
When you add the Image Accordion element, it’ll show a basic, static accordion layout with default content.
Since we want to display dynamic content, we need to enable the Query Loop option, which lets us fetch data automatically.
On the left-hand side, where you can adjust element settings, under the Content tab, locate the toggle switch for Query loop. Turn this toggle on to start pulling in dynamic data from WordPress. Once enabled, you can choose what type of content you want to display.
This feature allows you to display posts, pages, products, or media without needing to manually input the data.
Step 5: Set Query Options
Now that the Query Loop is enabled, the next step is to tell the element what type of content to pull. This is done by configuring the query options.
- Choose Type: The first field lets you select the type of data to pull. For example, if you chose “Posts,” you can select any custom post type or built-in ones like pages or products.
- Post Type: After selecting the type, you’ll also choose the specific post type. Here we will posts to display our website’s blog posts in accordion. You can also choose:
- Pages: If you want to showcase specific pages.
- Products: Great for showcasing WooCommerce products in the accordion.
- Media: Perfect for fetching images or media files.
Step 6: Define Dynamic Tags for Accordion Content
Once you’ve set the query options, it’s time to customize the accordion items. Each accordion item (like “Accordion Title 1”) needs to display dynamic content from the posts you’re fetching.
To do this, we use dynamic tags.
- Title: For the title of each accordion item, use the tag post_title. This pulls in the title of each post automatically.
- Content Field: For the content inside each accordion, use either post_excerpt or post_content, depending on whether you want to display the post’s excerpt or the full content.
- Image: Add tag featured_image to dynamically pull the featured image of each post into the accordion.
- Show Button: If you want to display a button inside the accordion, toggle on Show Button. You can then customize:
- Link: Add a URL or a dynamic link to the post.
- Button Text: Customize the button text.
- Button Icon: Add a button icon for extra visual appeal.
- Icon Position: Choose where the icon should appear—Default, Left, or Right.
Step 7: Configure Accordion Settings
Max Addons offers powerful settings to control how your accordion behaves and looks. Here’s a closer look at each setting.
- Default Active Item: This option lets you pick which accordion-item should be expanded by default when the page loads. For example, you can set the first or second item to be active initially.
- Height: You can adjust the accordion’s height to make sure it fits perfectly within your page layout.
- Accordion Action: Decide how users interact with the accordion:
- On Hover: The accordion expands when the user hovers over it.
- On Click: The accordion expands when clicked.
- Orientation: Choose whether you want the accordion to display Vertically or Horizontally. With Max Addons’ Image Accordion, you can easily create both Vertical Image Accordion and Horizontal Image Accordion with just a single click.
Step 8: Customize Accordion Items
Next, you’ll want to customize the individual accordion items to match your design preferences. Max Addons gives you control over:
- Spacing Between Items: Adjust the spacing between accordion items to create more or less visual separation.
- Border: Add a border around the accordion items to give it a more defined look.
- Box Shadow: Apply a box shadow to give your accordion a sense of depth and visual interest.
- Overlay Color: Set an overlay color that appears when hovering or when the accordion item is expanded.
Step 9: Tailor Accordion Content
Further, you also get plenty of options to customize the content inside the accordion:
- Title HTML Tag: Select the HTML tag for the accordion title (e.g., H2, H3, etc.).
- Title Typography: Adjust the typography settings for the accordion title, including font size, weight, and line height.
- Title Spacing: Control the spacing between the title and the rest of the content.
- Content Typography: Customize the typography for the accordion content (i.e., the text that appears when the accordion is expanded).
- Background: Set a background color or image for the accordion items.
- Border: Add a border around the accordion content.
- Vertical Align: Align the accordion content vertically (e.g., Middle, Top, or Bottom).
- Horizontal Align: Align the content horizontally (e.g., Left, Center, or Right).
- Padding: Adjust the padding inside the accordion content to control the space around the text and images.
Step 10: Style the Accordion Button
If you’ve enabled the Show Button option in the earlier steps, you can now customize how the button looks and behaves. Here are the available options:
- Size: Choose from Small, Medium, Large, or Extra Large buttons.
- Style: Select the button style—Primary, Secondary, Light, Dark, or one of the many other predefined styles.
- Circle Button: Enable this option to make the button a circle.
- Outline: Add an outline around the button to make it stand out.
- Typography: Customize the typography for the button text.
- Button Spacing: Adjust the spacing around the button for better positioning.
- Background Color: Set a custom background color for the button
Dynamic Image Accordion: Final Output
After configuring all the settings, this is how your dynamic image accordion will look on the live page:
Vertical Image Accordion
Horizontal Image Accordion
Wrapping Up!
And that’s it! You’ve now created an interactive image accordion on your Bricks Builder website using Max Addons. You can create sleek, functional, and image accordions with posts, pages, and more—without writing a single line of code!
You might also be interested in learning how to create image gallery with ACF in Bricks Builder.
Max Addons offers over 20 unique elements to supercharge your website-building process. These elements can streamline your workflow, saving you valuable time and resources. Are you ready to elevate your website creation journey? Get Max Addons today!
If you found this helpful tutorial, please share your thoughts by commenting below!
