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.
Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Accordion Block to your Gutenberg editor. From there, you can easily use it and customize it to fit your layout.
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.
Gutenberg Accordion Block General Collapse Controllers
Title and Content Settings
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.
Title Direction: Set the accordion’s opening direction, suggesting a horizontal or vertical layout or the direction in which the accordion unfolds.
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.
Gutenberg Accordion Block – Title and Description Controllers
Title and Content Styling Controllers
Arrow 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 Accordion Block – Arrow Position Controllers
Gutenberg Accordion Block Style Settings
Title and Content Styling Controllers
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
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
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.
