Gutenberg Accordion Block Tutorial

Premium Accordion Block for Gutenberg is one of the most important blocks that will help you to display Gutenberg content or blocks in small areas to save space. The name inherits from Accordion musical instrument because it expands like it. Premium Accordion Block for Gutenberg has a lot of customization options that will help you to build the sections you're looking for.

Check Gutenberg Accordion Block demo page from here.

Gutenberg Accordion Block
Gutenberg Accordion Block


Accordion Gutenberg Block Layout Settings

Set block main settings like title tag, directions, content type and much more

Gutenberg Accordion Block Content Options
Gutenberg Accordion Block Content Options

Title Settings for Gutenberg Accordion Block

  1. Title Tag: Set accordion title heading from H1 to H6.
  2. Direction: Set direction of accordion title and arrow: LTR or RTL. RTL is very common to use on RTL websites.

Content Settings for Gutenberg Accordion Block

  1. Type: Set accordion block content type Text or Block.
    1. Text: Insert text only in accordion tab.
    2. Block: Insert Gutenberg blocks in accordion tab as content.
  2. Align Content: Algin content to left, center or right.

Arrow Settings for Gutenberg Accordion Block

  1. Position: Set accordion arrow position In or Out of accordion title.

Style Settings for Accordion Gutenberg Block

Style Accordion block title, title, content and arrow.


Title Style for Gutenberg Accordion Block

  1. Typography: Set typography for title.
  2. Text Color: Set title color.
  3. Background Color: Set background color on title.
  4. Text Shadow
  5. Border
  6. Rows Gap: Set spacing between accordion item.
  7. Padding

Content Style for Gutenberg Accordion Block

  1. Typography: Set typography for content.
  2. Text Color: Set content color.
  3. Background Color: Set background color on content.
  4. Text Shadow
  5. Border
  6. Padding

Arrow Style for Gutenberg Accordion Block

  1. Size: Set size for arrow.
  2. Arrow Color: Set arrow color.
  3. Background Color: Set background color on arrow.
  4. Padding

Gutenberg Accordion Block Style Options
Style Gutenberg Accordion Block

Related Docs: