Hello guys,
Today I bring you a tutorial that you have asked me several times, to create a page like mine.
In this tutorial I explain how to configure this wonderful template step by step: newspro
News Pro is a daughter template of Genesis. If you follow me you will know that I am in love with the Genesis template.
It is not a template as simple as DIVI or any other that uses a content builder but for me it is pure gold 🙂
To follow this tutorial you need the Genesis FrameWork and the NewsPro child theme.
You can buy it here or download for free from the Premium Zone.
Here is the video tutorial:
Subscribe to my channel:
The final result that we are going to achieve is the following:
The first thing we need is to have WordPress installed. If you don't know how to do it in the Premium Zone you have a WordPress course.
Once we have WordPress installed, we install the Genesis parent template and then the News Pro child template.
To do this we go to Appearance –> Themes –> Add new:
At this point many people get frustrated as they install the template and realize that the website still doesn't look like the demo. Don't worry, we still have a lot to configure 😉
The next thing we are going to do is add demo content since this way it is much easier to see how the web is going.
To do this we go to Tools –> Import –> WordPress and run the importer.
Where do we get the demo content from? The demo content comes in the News Pro template itself, to find it we unzip the template and notice that there is a folder called XML and inside a file called "news-pro.xml".
When executing the importer, it will ask us for a file and we add that:
Once imported, we will see that a lot of entries, pages, menus have been added.
Now what we have to do is place all that content.
Menu settings
As we have imported the demo content, several menus have been imported that we will use.
We just have to go to Appearance -> Menus and select "Secondary Navigation", click on Choose and check the option "Before Header Menu"
Now we choose the “Primary Navigation” menu and check the “After Header Menu” option
The result would be the following:
Header Banner Settings
In the Header Right area we add a text widget with the banner we want. In order for it to look like in the demo, the image has to be 728×90 pixels in size
Main screen configuration of our website
The home is configured with the widgets.
If we go to Appearance -> Widgets, we will see that there are some areas called: "Home - Top", "Home - Middle Left", "Home - Middle Right", "Home - Bottom".
If we do not add any widget in these areas, what will appear on the main page will be the latest articles.
As soon as we add a widget to one of the mentioned areas, it will be replaced by what we add.
Let's add the Widgets to get the result of the demo:
Home-Top Zone:
As we can see in the image, in this area we are going to add the Fetured Tabs widget and we are going to choose the categories that we want to appear in the tabs of the main image of the web.
We are also going to check the “Show Featured Image” option and select the size: home-top (740×400). We are also going to mark “Show Post Title”
The result would be the following:
Actually, as in the import it replaces the images with gray rectangles, what we will obtain will be:
When we add our own images we replace them and that's it 😉
Home Zone – Middle Left:
We add the “Genesis – Featured Posts” Widget and select a category, mark “Show Post Title” and select “Show Featured Image” with the size “home middle (348×180)”
The result would be:
Zone Home – Middle Right:
We add the «Genesis -Featured Posts» Widget, we select a category, in «Number of Posts to Show» we select 5, we mark the «Show Posts Title» option.
The result we get is:
Home Zone – Middle Bottom:
In “Number of Posts to Show” we put 3, we mark “Show Post Title” and we mark “Show Featured Image” with the image size: “thumbnail (150×150)”
The result would be:
Primary Sidebar
The main side will be the same for the main page and the inner pages.
In this area we will add the following Widgets:
Searcher:
We simply add the Search Widget
Genesis Featured Posts
In this widget we mark “Show Post Title”, “Show Category Archive Lingk” and “Show Featured Image” with the size “home-middle (348×180)”
Simple Social Icons
Here we add the url of each social network that we want to appear.
If you do not put the url, the icon of that social network will not appear.
Banner
The banners that appear in the demo have been made with a Text Widget and the following code has been added inside:
<div style="text-align: center;"><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a><a href="http://demo.studiopress.com/news/"><img class="ad" src="http://demo.studiopress.com/news/files/2013/07/ad-125x125.png" /></a>
You would have to replace those images with your own.
To finish off the page we need to configure the footer.
The result we are looking for is the following:
We have 6 zones for the Footer.
In the first 5 we add a personalized menu, with the menu that we want, I show you the example of two but you have to do it in Footer 1, Footer 2, Footer 3, Footer 4 and Footer 5
In Footer 5 we are going to add the subscription form, for this we are going to use the “Genesis – eNews Extended” widget
If you would like to set up eNews Extended with Mailchimp here's a tutorial
I hope you liked it 😉