Add and customize Accordions

Add and customize Accordions

In order to add an Accordion to your page, you can either import one of the available premade Accordion templates using pixfort Templates, or you can create your own Accordion using the Accordion element in the page builder you’re using.

Importing premade Accordions in pixfort Templates

You can easily import a premade Accordion templates using pixfort Templates in the page builder you’re using. For detailed information on how to access pixfort Templates you can check this article:

Where to find pixfort Templates

Important: Tabs are custom pixfort element in WPBakery. At the moment Elementor doesn’t support nested elements inside tabs, however, it has simple version of the tabs element.
View Tabs Element page

Create Accordions from scratch

You can add the Accordion element to your page from the elements list inside the page builder you’re using, after that you can edit the Accordion as following:

Using WPBakery
Using WPBakery

Below we’re using WPBakery Front-End editor, the same process applies to the Backend editor.

Useful information:

  • To add new content to your accordion tab, just click on the desired accordion tab then add new elements by clicking on the (+) icon in Pix Accordion Tab orange icons bar, or you can drag and drop elements from your page into the tab.
  • If you want to create a new tab, you can either duplicate an existing tab or you can create a new one by clicking on the (+) icon in pixfort Accordion orange icons bar.
  • To change Accordion Tab position, just drag and drop the desired accordion tab using the move button in the orange icons bar to change the order.
  • You can edit the text of each Accordion Tab by clicking on the desired tab that you want to edit then open the Pix Accordion Tab settings:
Image link

Open Single Accordion Tab Settings

Using Elementor
Using Elementor
Simple text Accordions

To edit the Accordion, just open the Accordion Settings and then from the left sidebar you will be able to edit the Accordion tabs content:

Image link

Open Accordion Settings in Elementor

Advanced Accordions using Elementor Templates
NewThis feature requires Theme version 3.2.5 or newer

If you’re looking to add advanced layouts to your accordion you can create Elementor Templates and then add them to your accordion tabs:

Add a new Elementor template

Open the Templates tab from the left sidebar in your WordPress Admin Panel then Add new Template:

Image link

WordPress Admin Panel > Templates > Add New

Choose template type as Section

Select the type of the template as “Section” and choose a name for your template.

Image link

Choose template type and name

Add content to your template

Now in Elementor page builder you can add content to your template as usual.

Image link

Add content to your template

Choose your Template in the Accordion element

After you finish creating your template, go back to the page where you have the Accordion element and for each item in the accordion you can choose the Content type as Elementor Template, after that the list of available Templates will appear and you can choose the desired template to show.

Image link

Choose the template you want to display in each accordion tab

Essentials support team

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts