Gutenberg Accordion Block Tutorial

Introduction

If you’re working on making your WordPress site a bit easier to navigate, consider using Gutenberg Accordion Block. It’s part of Gutenberg blocks collection in the WordPress editor, designed to help you neatly hide away content until it’s needed. This feature is super handy for FAQs or any section where you want to keep things streamlined. First off, you’ll need to install Premium Blocks. This guide is here to walk you through the essentials, getting you set up without a fuss.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Accordion Block?

Gutenberg Accordion Block General Settings

General Section:
Collapse Others: Enable or disable the automatic collapsing of other accordion items when one is expanded.
Expand First Item: Enable to determine whether the first item in the accordion should be expanded by default when the page loads.
Title Section:
Title Tag: Selection of HTML tag options for the accordion title (H1, H2, H3, H4, H5, H6), allowing you to set the appropriate heading level for SEO and accessibility purposes.
Direction: Set the accordion’s opening direction, suggesting a horizontal or vertical layout or the direction in which the accordion unfolds.
Content Section:
Type: Choose between ‘TEXT’ and ‘BLOCK’ indicating whether the content should be treated as plain text or if it can include other blocks (like images, buttons, etc.).
Align Content: Options to align content within the block; likely choices include left, center, and right alignment.
Arrow Section:
Position: Toggle between ‘IN’ and ‘OUT’, which could determine the placement of an arrow icon within the block – possibly indicating if the arrow should be inside (nested within the content) or outside (next to the content but not nested within).

Gutenberg Pricing Table Block Style Settings

Title and Content Style:
Typography: Settings for font size and style.
Text Color: A color picker to select the text color.
Background Color: A color picker for the accordion background, also with transparency options.
Text Shadow: Tools to add and customize a shadow effect to the text, likely with settings for color, blur, and position.
Border: Options for the accordion border style, such as solid, dotted, or dashed.
Border Radius: Settings for rounding the corners of the accordion, with individual adjustments for the top, right, bottom, and left edges.
Rows Gap: A slider to adjust the spacing between accordion rows, with units in pixels, ems, or percent. ( This option is for the Title only )
Padding: Controls to set the space inside each accordion item, around the content, also adjustable for each side.

Gutenberg Accordion Block - Title Style — Gutenberg Accordion Block – Title Style

Arrow Style:
Size: A slider (currently set to 15) to adjust the size of the arrow.
Arrow Color: A color picker to select the color of the arrow.
Background Color: A color picker for the arrow’s background, also with a transparency feature.
Padding: A slider to control the padding around the arrow, providing space between the arrow and its container or neighboring content.

Gutenberg Accordion Block - Arrow Style — Gutenberg Accordion Block – Arrow Style

Conclusion

Adding something like Gutenberg Accordion Block to your WordPress site can make a noticeable difference in how visitors interact with your content. It’s all about making information easy to handle and nice to look at, which is where the Gutenberg page builder shines. Following this guide, you’ll be able to organize your site’s content more effectively, making your site not just more appealing, but also more intuitive to navigate. It’s a straightforward upgrade that can make your website feel more thoughtfully put together.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Accordion Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Accordion Block?

Gutenberg Accordion Block General Settings

Gutenberg Pricing Table Block Style Settings

Conclusion

Need Further Help?

Global Features

Help Center

Our Products

About Leap13