Accordion Block Tutorial

Intro

User interface accordions refer to menus, content areas and widgets which expand like the accordion musical instrument. While they have grown in popularity over the last few years due to JavaScript and jQuery, you can now achieve the same results using our Premium Accordion Block for Gutenberg.

Without the need of coding, you can change color, and style options to fit your website overall design needs.

Gutenberg’ Premium Accordion Block is free for life. Go ahead and take a glimpse at working demos from here.

Her are the Key Features of Premium Accordion Block:

Key Features

  • Title
  • Arrow
  • Content
Accordion Block options.

1. Title Options

Title is the text shown at the top of the accordion that a user clicks to expand/collapse information. To change Title option for Gutenberg’s Premium Accordion Block, simply click on it, and select the corresponding options from the settings menu.

You can choose to change Title’s Tag, (H1, H2, etc.), direction of text, font size, color and weight. Here are all options available at your disposal:

  • Title Tag
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
  • Direction
    • RTL
    • LTR
  • Typography
  • Colors
  • Border
  • Text Shadow
  • Padding
Title Options.

Typography

Typography for Gutenberg’s Premium Accordion Block allows you to adjust Font Size, Font Weight, and spacing options. You can also adjust Letter Spacing and Line Height.

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Line Height (PX)

Colors

You can change the Text Color and Background Color by clicking on the pen arrow. Choose a color that aligns perfectly with your website design:

  • Text Color
  • Background Color

Border

In this option, you can select and adjust Border Type and Radius that will make a part of your title. You can also adjust the Radius to give it smooth edges around the corner. Here are all options that you can adjust:

  • Border Type
    • Solid
    • Doubled
    • Dotted
    • Dashed
    • Groove
    • None
  • Border Radius

Text Shadow

If you want to give a 3D look for your Title text, you can always set a shadow. Simply click on Text Shadow button, and select a Shadow Color of your choice. You can also change its Blur and orientation as follows:

  • Shadow Color
  • Blur
  • Horizontal
  • Vertical

Padding

With Padding, you can change the spacing of Title text from top, bottom, right and left from the sliders. Adjust the sliders to achieve desired padding for your Title. Here are all options:

  • Top (PX)
  • Bottom (PX)
  • Right (PX)
  • Left (PX)

2. Arrow Options

Arrow is situated on the extreme right side of the corner, and through this option you can adjust its Position, size and colors. You can also drag the slider to change Arrow’s size:

  • Position
    • In
    • Out
  • Size
  • Colors
    • Arrow Color
    • Background Color
  • Border Radius (PX)
  • Padding (PX)

Colors

You can also change the Colors of the Arrow as well as the Background Color, which will only change the color at arrow’s background, and not the entire Title:

  • Arrow Color
  • Background Color

3. Content Options

The Content options are for the text written in the accordion. The following settings are exactly the same, applying to the Title, however we shall go over them one by one.

  • Type
  • Typography
  • Colors
  • Border
  • Text Shadow
  • Padding

Type

Gutenberg’s Premium Accordion Block works only with one single item. This means, you can either change the settings for text, or the entire block. Here are the settings for Type that you can change:

  • Text
  • Gutenberg Block
  • Alignment

Typography

Premium Accordion Block for Gutenberg give you the ability to alter Font Size, Font Weight, and spacing options of Text. You can also adjust Letter Spacing and Line Height. Take a look at the following options:

  • Font Size (PX)
  • Font Weight
  • Style
    • Normal
    • Italic
  • Uppercase
  • Letter Spacing (PX)
  • Line Height (PX)

Colors

You can change the Text Color and Background Color by clicking on the pen button. Select a color that resembles your website’s overall theme:

  • Text Color
  • Background Color

Border

In this option, you can adjust Border Type and Radius for your Text. This gives you an added option to further customize the Accordion. Radius provides smooth edges around the Text corner. Here are all options that you can change:

  • Border Type
    • Solid
    • Doubled
    • Dotted
    • Dashed
    • Groove
    • None
  • Border Radius

Text Shadow

If you want to give a 3D look for your Title text, you can always set a shadow. Simply click on Text Shadow button, and select a Shadow Color of your choice. You can also change its Blur and orientation as follows:

  • Shadow Color
  • Blur
  • Horizontal
  • Vertical

Padding

With Padding, you can change the spacing of Title text from top, bottom, right and left from the sliders. Adjust the sliders to achieve desired padding for your Title. Here are all options:

  • Top (PX)
  • Bottom (PX)
  • Right (PX)
  • Left (PX)
Close Menu