September 25, 2023

Display Dynamic Data in Vertical Accordion with Bricks Builder & AutomaticCSS

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

Dynamic data in vertical accordion setups can be a visually appealing way to present information on your website. Whether you’re showcasing features, services, locations, or team members, a vertical accordion can make your content stand out. In this WordPress tutorial, we’ll explore how to use the “Feature Romeo” frame from AutomaticCSS in combination with the Bricks Builder to create a dynamic vertical accordion.


Introduction to Feature Romeo

Feature Romeo is an advanced frame designed for showcasing content in a visually appealing vertical accordion format. The unique aspect of this frame is its vertical heading. When a user hovers over one of the feature cards, it expands, revealing a full view of the image, a real heading, and a description. This dynamic interaction can be used for various purposes, such as displaying features, services, locations, or team members.


Setting Up Feature Romeo

  1. Starting with a Blank Page
    Begin with a completely blank page with your Bricks Builder. For our example, we’ll assume we’re building a Yoga Studio website and need a classes overview page. Though Feature Romeo isn’t designed as a hero section, it can be adapted as one with minor adjustments.
  2. Accessing the Frame
    Navigate to the templates section. Here, you’ll find options like “Feature Section Romeo”, “Feature Grid Romeo”, and “Feature Romeo”. The modular nature of frames means you can use them in a section, grid, or standalone. For our purpose, select “Feature Section Romeo”.
  3. Inserting the Frame
    Once selected, the section will be inserted onto your page. Note that if you’ve pre-styled elements like accent headings, they’ll automatically adapt to the frame’s style.

Connecting Dynamic Data to Feature Romeo

To make your website more dynamic and reduce manual input, it’s recommended to connect your Feature Romeo frame to dynamic data sources. Here’s how you can do it:

  1. Using Custom Post Types
    On many websites, especially those built with WordPress, you might have custom post types (CPT Plugins: JetEngine, ACF, Pods, etc.). For our example, let’s assume we have a custom post type for yoga classes. Each yoga class can be an item in our vertical accordion.
  2. Setting Up the Loop
    Instead of manually adding content to each card in the accordion, you can use a loop to automatically fetch and display content from your custom post type. To do this:
    • Delete three of the default cards, leaving just one.
    • Select the remaining card, which will serve as a template for the loop.
    • Use the “Query Loop” feature to loop through your custom post type entries. For our example, we’ll loop through the yoga classes.
  3. Populating Dynamic Content:
    Images
    Delete the placeholder image in the card. Replace it with a dynamic image source that fetches the featured image for each yoga class. Adjust the image size to fit the card design.
    Vertical Heading
    Replace the static vertical heading with a dynamic source that fetches the title of each yoga class.
    Inner Content
    Inside the card, replace the main heading with a dynamic source that fetches the title of each yoga class. This title will also serve as a link, making the entire card clickable.
  4. Adjusting the Link
    The entire card is clickable thanks to the clickable parent technique. Replace the static URL with a dynamic URL that links to the detailed page of each yoga class.

Fine-Tuning the Dynamic Content

Once you’ve set up the loop and connected the dynamic sources, you’ll see that the accordion populates with the yoga classes from your custom post type. If you have four yoga classes, you’ll see four cards in the accordion.

Remember, the design remains responsive. Whether you have one class or ten, the accordion will adjust and display them without breaking.


Conclusion

Connecting dynamic data to the Feature Romeo frame allows for a seamless integration of content, making your website more interactive and user-friendly. By following the steps outlined above, you can display dynamic data in a vertical accordion, enhancing the overall user experience on your website.

Required Resources

AutomaticCSS Logo
Payment required
Bricks Builder Logo
Payment required
Credit to AutomaticCSS & Frames
The AutomaticCSS YouTube channel offers tutorials and guides on how to use their plugin with different page builders. From setting up the plugin to creating stunning designs, it's worth taking a look at their content to improve your WordPress website skills.
Visit
Display Dynamic Data in Vertical Accordion with Bricks Builder & AutomaticCSS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Menu
Give Feedback
Describe your feedback *
Rate Helwp
Share
Facebook
Twitter
LinkedIn
Reddit
Email
WhatsApp
Telegram
Pocket
Report
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.