GenerateBlocks Accordion Design Walkthrough (Plus Adding Custom Open/Close Icons!)

If you’re looking to create a custom accordion design using GenerateBlocks, you’re in the right place. Today, I’ll walk you through the process of building an accordion block, inspired by a design I found on the Wave Apps website. This step-by-step guide will show you how to create a similar accordion, handle a few design tweaks, and adjust settings to get the desired look.

Step 1: Set Up the Page

Start by opening the page where you want to add the accordion. For this tutorial, I’m adding the accordion to the bottom of a homepage template from the GeneratePress site library.

1. Create a Container: Add a new container at the bottom of the page. You can use this container to hold your accordion block and any other content you want to include.
2. Add Padding: Add padding to the container to give it some breathing room. For example, you can add 60px on top and 20px on the sides.
3. Insert a Grid: Use a grid block to create a two-column layout. Set one column to 33% for the headline and the other to 66% for the accordion. Adjust the horizontal and vertical gaps as needed.

Step 2: Add the Accordion Block

Now, let’s add the accordion block. If you’re using GenerateBlocks Pro, you’ll have access to this feature.

1. Insert the Accordion Block: Search for the accordion block by typing “ACC” and add it to your layout.
2. Add Accordion Items: Start by adding your first accordion item. For this tutorial, I’m using some sample text from Wave Apps.
3. Adjust Content: Copy and paste your content into the accordion block. You can add additional accordion items by repeating the process.

Step 3: Customize the Accordion Design

To match the style you’re aiming for, you’ll need to make some design adjustments.

1. Remove Background Colors: Clear out the default background colors for both the title and content areas to match the transparent style we’re aiming for.
2. Adjust Text Style: Increase the font size of the accordion titles to around 20px and set the font weight to semi-bold for better readability.
3. Change Icons: Replace the default accordion icon with a custom SVG. You can add both a closed and an open state icon using SVG code, following the documentation provided by GenerateBlocks.

Step 4: Fine-Tune the Design

To enhance the overall appearance, we’ll add some padding and borders.

1. Add Padding: Select the accordion title and add padding—around 25px on the top and bottom should work well.
2. Add a Bottom Border: Add a subtle 1px bottom border with a light gray color to create separation between accordion items.

Step 5: Final Adjustments

Finally, tweak some additional settings to improve the user experience.

1. Set Accordion to Start Closed: In the accordion block settings, turn off the “Item Open by Default” option so that the accordion items start closed.
2. Enable Multiple Open Items: If you want users to be able to open multiple accordion items at once, enable the “Keep Multiple Items Open” option.
3. Responsive Design: Check how the accordion looks on mobile and tablet views. Adjust font sizes, padding, and margins to ensure everything looks great across all devices.

Step 6: Preview and Publish

Once you’re happy with your accordion design, preview it on the front end of your website. Make any final tweaks and hit publish when you’re ready.

Conclusion

Using GenerateBlocks Pro, you can create a highly customizable accordion block that fits seamlessly into your website’s design. With a few simple steps, you can replicate designs like the one found on Wave Apps, adjust the styles, and make sure it looks great on all devices.

Thanks for following along! I hope you learned something new and that this tutorial helps you create a fantastic accordion block for your website.