Kadence Accordion Block Tutorial

See how to add and style the Accordion Block that’s in the Kadence Blocks plugin. It’s great for FAQs pages and more.

Video

A written tutorial is below the video too!

Example

Here I have an example of the FAQs page on one of BlogAid’s family of sites, eCreators Hub.

Take note of a few things that I’ll show you how to style in this tutorial:

• The block is not full width of the page
• The background and text colors match my branding.
• All of the accordions are collapsed to start
• There is space between each section

Take note of the clicking action:

• When you hover over one of the sections, the font changes
• When you click, the section background and the font change
• When you click another section, the previously clicked one collapses

Okay, let’s see how to make this!

Install Kadence Blocks

First, you will need to install the free Kadence Blocks plugin.

Add Row Layout Block

With Kadence Blocks, there is a way to control your structure by using a Row Layout Block as your wrapper.

So let’s add that first.

And choose Row Layout.

Add Accordian Block

Then let’s add the Accordion block inside this Row Layout wrapper.

Style

Here you can select the initial style for the block.

• Header with dark background color when it is highlighted, white content area, and then lighter background color when not highlighted. This is the one we’ll use in our tutorial.
• The others are variations of background colors in different places, and one has a line between the header and its content.

Block Parts

This block can be a little tricky to use.

So, let’s first get oriented to the different parts of this block, because that will cut down on your frustration with using it.

In Accordion Block Wrapper

The first thing to note is that you are in the Accordion block wrapper.

Title Content Pair

You have 2 title/content pairs nested in the wrapper by default.

You will add content to each of these areas separately.

Add More Items

Once you’ve used the 2 title/content pairs, you have a button to Add Accordion Item. That is what they call each instance of the accordion function.

But you will only see this button while you have the Accordion content wrapper highlighted.

Add 1^st Content

Okay, let’s start adding things.

(go to Word doc with content)

I have a little Word doc here so I can copy and paste.

Add Title

• Click in the far left of the Add Title field – you can’t click anywhere else to get in it.
  • Paste your text, or type it
    • I have mine in Bold font to give them a little more punch.
  • Notice that you are now in what’s called a Pane. That’s what they call the fields for each title/content pair.

Add Content

• Click in the content area. You will see a list of blocks, just like you would if you were adding a new block anywhere else on the page. That really opens up what you can include here, like images, buttons, lists, and more
  • Select the paragraph block
  • Paste in content

Add 2^nd Content

Now let’s repeat these steps for the 2^nd Title/Content pair.

• Add the Title
• But this one has the content area collapsed.
  • Click the + to expand the content area
• Add the content

Add Accordion Item

Now that we have both of the default Accordion items used, we need to add another one.

To do that, we have to highlight the Accordion block wrapper.

• Click just above the first item
• or click on Accordion at the bottom
• or however works best for you to return to that parent block

Now let’s click the button to Add Accordion Item.

And we have a new Title/Content pair

Add 3^rd Content

• Add the Title
• Click the + to expand the content area
• Add the content

Styling

Now that we have all of our content, let’s do some styling.

Return to the Accordion block so we can do styling for the whole thing.

General

Panes Open and Close

The first 2 settings are for opening and closing of the panes.

• Open panes close when new ones are opened is already on.
• And let’s turn on Start with all panes collapsed

Columns

You can have more than one column of these if you like.

Pane Title Trigger Icon

By default it is set to + when closed and – when open, and I suggest leaving it that way so visitors don’t have to guess about it.

Style

Let’s go to the Style tab.

Normal, Hover, Active

Note that you have tabs for what the Pane Title Colors are normally, when hovered, and when active.

• The Title Color is the font
• The Title Background is the field

See how these inactive ones changed?

Now let’s reverse these colors for the Active one

• Set title Active color font as white
• Set Active background as dark blue

Now let’s set the hover to something in between

• Set Hover color font to white
• Set Hover color background to darker gray

Border

You can add a border around the titles, if you like.

Font

You can also change the font of the title

Inner Content

You can also style the inner content area. This may be helpful if you have links or need special colors for it, but I would just let the theme styles do this job for you.

Advanced

Now let’s go to the Advanced tab for some of our alignment and spacing.

Pane Title Sizing

I would leave the padding as it is.

But, to get whitespace in between the Accordion Items, use the Pan Space Between slider.

It’s good to make the space be the same size as your content fonts. In most cases that is 16px.

Inner Content Padding

I would leave this at the default unless you changed your font or such, and need more internal padding.

Structure Settings

As you can see, this block goes the width of the page, and maybe we don’t want it to do that.

We can change this 2 ways

• With the Max Width setting here
• With the Max Width setting on the Row Layout wrapper

Let’s see the problem with doing it here.

• Change to 800
• But now it is aligned to the left.
  • We can try the block alignment too, but it will not move to the center.

Let’s set this back to nothing.

• Let’s highlight our Row Layout wrapper.
• Set that max width to 800

And now we have our Accordion smaller and in the center.

That’s It

I hope you’ve enjoyed this tutorial on how to work with the Kadence Accordion Block.

Be sure to Like and Subscribe to this YouTube Channel.

And visit BlogAid.net for more helpful tips, just like this one.