accordion examples

Examples of WPBakery Accordion options

Below are three different examples of WPBakery Accordions.

This is using WPBakery Version 6.6.0 | By Michael M – Other versions may have rather different options.

first example

This is Style One of the WPBakery Accordion (Outlined Plus – Minus Style). Click on the + signs to open each line of the example.

First step

Select Accordion Title and then add Accordion Content. If the accordion is being used for a Frequently Asked Question (FAQ) page then the Accordion Title is the Question and the Accordion Content is the Answer.

Next step

To add a second accordion item, click on the + sign just below the original item and click the Accordion Item offered. In other words, the Accordion is a top level wrapper around a number of Accordion items.

Other uses

Accordion structures are also quite useful to explain technical terms and abbreviations in product descriptions.

next example

This is Style Two of the WPBakery Accordion (Outlined Plus – Minus Style) – Dark. The background colour green is set in the Design tab of the accordion, the open background colour blue comes from the theme colour unless separately set.

Technical Overview

In this example a company might put technical information, perhaps on the construction of a consumer good, like the WPBakery Accordion that this is displayed in.

Spacing things out

Use the margin/padding spacing options to change how items are spaced. Not yet clear how this works.

This is Style Three of the WPBakery Accordion (Solid Plus – Minus Style) – Light.

next example

Experiment One

Sometimes the settings on WPBakery accordion items can be quite confusing, but time spent in experimentation can repay itself.

Experiment More

Always worth noting that there are many different versions of WPBakery accordions. The general principles are the same, whatever the version. Users will like website pages made with accordions.