Creating a visually appealing and functional homepage is essential for capturing visitors' attention and providing a great first impression.
The Extra theme offers versatile tools and features to help you build a dynamic and engaging homepage that effectively showcases your content.
This article will guide you through the steps to create the Extra theme homepage as seen in our demo.
Tips:
Before starting, please ensure your site has sufficient blog posts ( as most Extra theme modules are post-based). These posts are distributed among a few categories, and featured posts are assigned to them.
If you are starting and your website lacks content, you can use the How to Add Dummy Text to WordPress (And Why You’d Want To) article to add some dummy content.
Header's Top Bar Layout
From WordPress Dashboard, go to Extra → Theme Customizer → Header & Navigation Settings → Header Elements Settings and enable/disable the following options:
Show Social Icons
Show Search Bar
Show Trending Bar
Navigation Area
To set up the Logo image, go to Extra → The Options → General Tab → Logo and upload your logo image
Go to Appearance → Menus and create your Menu
Set the Menu as Primary Menu
The Extra themes offer three different types for the Primary Menu.
Type 1
Type 2
Type 3
The Type 1 and Type 2 layouts can be triggered only when using a category in the menu. As soon as you add a category to 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 the gif and open it in a new tab to see it in full size):
Content Area
The Content Area (between the Header and Footer areas) is built using Extra's Category Builder.
Go to WordPress Dashboard → Extra → Category Builder
Click on the Add New button
Name the new layout
Check the option Use this layout as the home layout
In the first Row, add the Featured Post Slider module
Add a new Row with a two-column layout
In each column, add the the Tabbed Post module
For each Tabbed Post module, choose from which category posts will be displayed
Add a new Row
Add the Post Carousel module
Add a new Row with a three-column layout
In each column, add the Posts module
Add a new Row with a one-column layout
Add the Tabbed Posts module
Click on the Publish button.
The final layout should look like this 👇
Note: We have exported the whole layout created during this tutorial, so you can use the same one if you need to; change your post categories and module settings if you want. Here is the JSON file of the exported layout.
Import the provided Layout
Download the provided JSON file
Go to WordPress Dashboard → Extra → Divi Library
Click on the Export and Import button at the top
Choose the JSON file
Click on the Import Divi Builder Layouts button
Use the imported JSON layout
Go to Extra → Category Builder
Open the Layout that was created before
Click on the Load Layout option
Click on Your Saved Layouts tab
Click on the Load button
Sidebar Area
WordPress Widgets can be added to the Sidebar area.
Go to WordPress Dashboard → Appearance → Widgets
Drag and drop any Widgets you want into the Main Sidebar widget area
Footer Area
Go to WordPress Dashboard → Appearance → Widgets
Drag and drop any Widgets you want into the Footer Sidebar Left and Footer Sidebar Right widget areas.
You can check the Extra Widgets help article to learn more about the types of Widgets that Extra provides.