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
- 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. - 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”. - 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:
- 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. - 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. - 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. - 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.
