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:
- 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 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 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 WordPress dashboard, this will cover up your sidebar for the home page.
At this stage you should have an empty demo set with 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 https://www.elegantthemes.com/documentation/extra/module-post-slider/
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 2 column structure to make it look like the Extra demo, please refer below
Please refer to this for more detailed settings of this module 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.
Detailed overview of this module can be seen here https://www.elegantthemes.com/documentation/extra/module-posts-carousel/
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 https://www.elegantthemes.com/documentation/extra/module-posts/
e) The Fifth section uses the Tabbed Post Module in a full row, instead of 1/2 columns like we used before.
This 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.
4. Footer Area : 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!