Before beginning, please make sure that your website has a significant amount of blog entries because most of the ExtraTheme Features are Post Related Modules. Such posts are grouped into a few categories and featured blog posts added to it.
>> Read also our full review of Extra Theme here
Top of the bar
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-setting.png)
To disable/enable all the features of this menu bar, go to Extra > Theme Customizer > Header & Navigation Configuration > Header Element Settings, where you can choose what components you want in the menu bar.
Menu Bar
Next will be the menu location:
![](http://divitheme.com/wp-content/uploads/2020/10/Extra-Theme-Menu-Bar-1024x459.png)
For the logo component, you could move to Extra > Theme Options > General then import your own custom logo.
Then, the menu element comes in, you could create a customized menu by heading to the Appearance > Menu section and setting it as the main area to make a simple menu here.
In the Extra theme, you can see Three menu option styles
Style 1:
![](http://divitheme.com/wp-content/uploads/2020/10/Extra-Theme-Menu-Style-1-1024x406.png)
Style 2:
![](http://divitheme.com/wp-content/uploads/2020/10/Extra-Theme-Menu-Style-2-1024x406.png)
Style 3:
![](http://divitheme.com/wp-content/uploads/2020/10/Extra-Theme-Menu-Style-3-1024x336.png)
Style 1 and style 2 menu options can only be activated by using a category with in menu. As soon as you attach a category to your customized menu, you can see the option of selecting these menu styles.
Style 3 can be used on the website. Kindly refer to the following picture (you could right – clicking on gif file and view this in the new window to display it in full size):
![](http://divitheme.com/wp-content/uploads/2020/10/extra-mega-menu-1024x495.gif)
Content Element
Then here comes the primary content section of the Extra Theme Example, which will be generated by the Category Builder.
You must go to Extra > Category Builder, select Add New button to add an additional category layout.
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-content-elemetn-1024x514.png)
You could name any of this new layout, only ensure you have picked it as your main page layout by using checkbox seen in the picture below, and then update it.
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-new-layout-1024x479.png)
You will be shown the right sidebar option activated by default. You may modify it from the “Extra Settings” option if you’d like to change it.
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-setting-default-1024x417.png)
And in sidebar, you could add any widgets you like by navigating to the Appearance > Widget section of the WordPress admin area, which will replace your main website sidebar.
At this point, you should get an empty example setup with a sidebar as below.
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-sidebar-layout-1024x456.png)
Then we can simply fill out the design with the appropriate modules.
A) The first segment you see here in the Category Builder is the Featured Post Slider module .
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-feature-post-slider-1024x460.png)
And that is how you could add the module
![](http://divitheme.com/wp-content/uploads/2020/10/featured-post-slider-1024x495.gif)
b) The second part requires the Tabbed Post Module, we could add this in the same way like the first part, we only need to add this to the Two column layout to make it appear just like Extra Demo, please see below.
![](http://divitheme.com/wp-content/uploads/2020/10/tabbed-post-1024x495.gif)
(c) The third part is the Post Carousel Module, where you insert in a new row just below Tabbed Post Module.
![](http://divitheme.com/wp-content/uploads/2020/10/post-carousel-1024x574.png)
d) The fourth part has Three modules in a 1/3 + 1/3 + 1/3 line design.
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-post-module-1024x545.png)
e) The fifth part use the Tabbed Post module in a complete row rather than 1/2 columns as we used previously.
![](http://divitheme.com/wp-content/uploads/2020/10/tabbed-post.png)
this is what the full layout appears, with the all the modules:
![](http://divitheme.com/wp-content/uploads/2020/10/extra-theme-homepage-1024x631.png)
4. Footer Area: The Footer area is a regular widget footer, you could add a variety of widgets to make it appear like that portion.
0 Comments