All Collections
FAQ's and Troubleshooting
How to Build Extra Theme Homepage
How to Build Extra Theme Homepage

Looking to set up your Extra theme install to look like the demo page of Extra theme? Here is the tutorial

Cristi avatar
Written by Cristi
Updated over a week ago

Before starting, please ensure your site has sufficient number of blog post ( as most of the Extra theme modules are post based module), these posts are distributed among few categories and have featured posts assigned to them. 

You can follow the instructions from the below article in order to add sample content to your website:

  1. Top Bar 

To enable / disable all the the elements of this top bar, we need to go to Extra > Theme Customizer > Header & Navigation Settings > Header Elements Settings , here you can select what elements you need in the top bar.

2. Menu Area

Next area is the menu area:

For the logo part, you can go to Extra > Theme Options > General and upload your own custom logo there.

Now, comes the menu part, you can make a custom menu by going to Appearance > Menu section and set it as primary menu to make a simple menu there. If you are not sure how to make a custom menu in WordPress, please refer here

In Extra theme, you will see 3 types of menu items

Type 1 :

Type 2 :

Type 3 :

Type 1 and Type 2 menu items can be triggered only when using a category in the menu. As soon as you add a category in your custom menu, you will see the option to select these menu types.
Type 3 can be used with pages. Please refer to the gif below ( you can right click on gif and open in a new tab to see it in full size) :

3. Content Area 

Now comes the main content area of the Extra theme demo, which is created using the Category Builder, find more details about it here:  https://www.elegantthemes.com/documentation/extra/category-builder/

We need to go WordPress Dashboard > Extra > Category Builder, click on Add New button to add a new Category layout

You can name this new layout anything, just make sure you have selected it as the home page layout using the checkbox shown in the image below and then publish it

By default, it will be showing you the right sidebar option enabled. If you want to change it, you can change it from the "Extra Settings" box.

In the sidebar, you can add any widget you want by going to Appearance > Widget section of the WordPress dashboard, this will cover up your sidebar for the home page.

At this stage, you should have an empty demo set with a sidebar like below:

Now we can start filling the layout with the required modules.

a) The first section that you see is the Featured Post Slider module in the Category Builder.

This is how you can add this module:

For the detailed settings of this module, please refer to this tutorial:

b) The second section uses the Tabbed Post Module, you can add it in the same way as the first section, we just need to add it in a two-column structure to make it look like the Extra demo, please refer below:

For the detailed settings of this module, please refer to this tutorial: https://www.elegantthemes.com/documentation/extra/module-tabbed-posts/

c) The third section is the Post Carousel Module, which you add in a new row, below the Tabbed Post Module.

A detailed overview of this module can be seen here:

d) The fourth section has 3 Posts modules in a 1/3 + 1/3 + 1/3 column structure.

Detailed documentation of that module can be seen here:

e) The Fifth section uses the Tabbed Post Module in a full row, instead of 1/2 columns like we used before.

This is how the complete layout looks, with all the modules:

I have exported the whole layout created during this tutorial so you can use the same one if you need, just change your post categories and module settings if you want. Here is the JSON file of the exported layout.

You will need to upload the JSON file through Extra > Divi Library > Export and Import option first.

After that, you can load the layout to the category builder using the Load Library option after creating a new Category Page template.

4. Footer Area: The footer section is a standard widgetized footer, you can add various widgets to make it look like that section, here is a detailed tutorial for all the widgets the Extra theme supports.

I hope this tutorial helped you setup your site like our Extra theme demo!


Did this answer your question?