Genesis Authority Pro Tutorial

You had asked me to create a tutorial to assemble the genesis authority pro template and here you have it 😉

authority pro It is the latest template that Genesis has released and it looks great, click on the following image to see it in full:

Authority Pro is a template that is optimized for WooCommerce and has all the power of Genesis templates.

You can template buy here or if you are premium member You have it available in the premium area 😉

Here is the video tutorial:

Before installing the template:

Before installing the template it is assumed that you have WordPress installed on your server.

Necessary plugins

If you want to do email marketing and have the field appear in the header to request the email, you have to install the free plugin eNews Extended

Optional plugins

If you are also going to set up a store with WooCommerce you will need:

• WooCommerce: Add store functionality to your website
• Genesis Connect for WooCommerce: Add the styles to make your store look good in Genesis templates

When you install Genesis Connect for WooCommerce do not activate it until you have the Authority pro template active or it will give you an error

Install Genesis Authority Pro

Like all Genesis templates you first have to install the Genesis framework and once you have it installed you can install the Authority Pro child template.

Remember that to install templates in WordPress you have to go to Appearance –> Themes –> Add new.

When you have it ready you will see something like the following:

Import Demo Content

With content it is much easier to see how our website is looking. It is very difficult to imagine an empty website.

Authority pro comes with demo content inside the template, to install it the first thing we have to do is unzip the template file and inside we will find the XML folder and inside the authority-pro.xml file

To import it we have to go to Tools –> Import –> WordPress

Once imported, we will have a lot of posts and pages to be able to assemble the template without any problem 😉

The most striking thing about this template is the main page, to obtain the final result that we see in the demo we have to configure the necessary home widgets and customize some options of the template.

Configure Authority Pro Home

To configure the home we have to configure the Authority Pro options and the areas of the Hero Section, Front Page 2, Front Page 3, Front Page 4, Front Page 5 and Footer widgets.

Hero Zone

We call the Hero Zone or Hero section the following part of the home page:

To configure it, it is done in 3 different places

Options Hero Portrait Section

Here we will configure the featured image, the title and the text that appears above the field to add the email.

In the administration area we click on Appearance –> Customize and select the “Authority Pro Settings” option –> Hero Portrait Section and here we can modify the text and image of the header:

Just below the email field, some highlighted logos appear. To add them we have to go to Appearance –> Customize and select the “Authority Pro Settings” option –> Hero Logo Section and add up to 6 logos, in the case of example 5.

From here we can configure everything except add the Email field, for this we have to go to the Widgets Hero Section area the Genesis – eNews Extended widget

Widget Zone Hero Section

To correctly configure eNews Extended depends on which tool we use to do Email Marketing, in this tutorial I explain how to configure it with Mailchimp

Front Zone Page 1

The following content will appear in the Front Page 1 area:

To add it, we just add a text-type widget to the Front Page 1 widget area, with the text we want:

Front Zone Page 2

The final result of this area is as follows:

To achieve this result we have to add three widgets:

Widget Image

We add the desired image, we have to be careful to select the size Home – Featured Image to make it the perfect size

Featured Page Widget

We select the page we want to highlight, we have to mark that the title appears, "Show Page Content", a character limit of 100, here you can see how:

In this area we only need to add the highlighted phrase, for this we add a custom HTML widget with the following code:

<blockquote>Melyssa’s course helped me to grow my email list from 500 to over 10,000 subscribers—all within 3 months!<cite>Jane, Food blogger</cite></blockquote>

Front Zone Page 3

The Front Page 3 zone is responsible for the following part of the home page:

It is configured in the same way as the Front Page 2 area, with the only difference in the order of the widgets, in this area we have to add the featured page in front of the image, the rest is identical:

Front Zone Page 4

The result of configuring this zone is as follows:

It is configured exactly to the Front Page 2 area, the only thing is that there is no highlighted phrase in this area, so there is no need to add the custom HTML widget.

That is the following widgets:

Front Zone Page 5

In this area we will add the featured blog articles:

This area is composed of two Widgets

Custom HTML Widget

In which we will add the following code:

<div class="one-half first">Build your authority by reading the premier publishing resource for online marketers and creative entrepreneurs.</div>
<div class="one-half"><a class="button" href="https://test.studiopress.com/authority/blog/">Read More Blog Posts</a></div>

Here you can see how to do it:

Widget Feature Post

We add a widget of the Featured Post type and 3 entries, so that the title is shown, "show post info", the content is limited to 100 characters and we mark that we want the featured image to be the size: blog-featured-image.

In this image you can see all the configured options:

footer zone

The result of configuring this zone is one last call to action on the main page, you can see it here:

To achieve this we have to add a "custom HTML" type widget with the following content:

<p>Grow your audience and build a profitable online business.</p>

<p><a class="button" href="#">Learn More</a>   <a class="button primary" href="#">Get Started Today</a></p>

You can see it in this image:

At this point we have our website almost personalized, we are only missing the menus of our page.

Specifically 3 menus.

Configure Authority Pro Menus

This template has 3 menus, the main menu in the header, the vertical menu on the side and the footer menu.

Main Menu

The main menu of our website will look like this:

Setting it up is very easy, we go to Appearance –> Menus, create a menu and add the items we want.

To appear in the header we have to check the “Header Menu” option

We are missing a detail so that our menu is perfect.

If we look at this menu it has a highlighted item with respect to the others, to do so we have to add the class highlight on the menu item we need to highlight:

It is possible that the "CSS Classes" field does not appear.

For the field to be displayed you have to activate the "CSS Classes" option in Screen Options:

Social Menu

It is one of the elements that I like the most about this template.

This menu remains fixed on the side of the web and you will see it like this:

We will configure it the same as we have done the main menu with the exception of selecting it to be seen in the Social Menu:

Footer Menu

This is the menu that will appear in the footer to the right:

We will configure it in the same way but selecting it to be seen in the Footer Menu.

And ready, if you have come this far you are brave and what is more important you will have your website as in the demo 😉

I hope you liked it.