Essence Pro Setup Guide

To setup Essence Pro theme you use the WordPress Customiser and WordPress Widget areas.

This is what the end product looks like

1. The Hero Section: Customise > Essence Pro Settings > Hero Section
2. Widget area: Hero Section widget area containing a Genesis eNews Extended widget
3. Widget area: Front Page 1 containing Genesis Featured Post widget showing 2 posts
4. Widget area: Front Page 2 Genesis Featured Post widget showing 3 posts
5. Widget area: After Content Featured widget area containing 3 Genesis – Featured Page widgets
6. Widget area: Front Page Featured widget area containing a Custom HTML widget blockquote and cite tags
7. Widget area: Footer CTA containing a Genesis eNews Extended widget

Video Setup Essence Pro theme by StudioPress

We’ll deal with the customiser first go to…

Dashboard > Appearance > Customise > Essence Pro Settings

Here you will see three sub tabs

1. Basic Settings
2. Header Background Image
3. Hero Section

Basic Settings

The basic settings tab has one option.
Enable the “intro” paragraph style on single posts?
Check the box to automatically apply the “intro” font size and style to the first paragraph of all single posts.

Header background Image

The default header background image is displayed on the front page and all posts and pages where a unique featured image is not available.

Hero Section

Here you can type the text that displays in the front page hero section of your website’s homepage.

There are two text boxes, hero title and hero intro paragraph.

Type your homepage, Hero Title, in the first box and type your homepage introductory paragraph into the second of these two boxes. Then click the blue Publish button to save your changes.

If you do not want to use the hero section, you can untick the box, and the homepage hero section will not display.

The other settings in the WordPress Customiser are standard settings that you will be familiar with if you’ve used WordPress before.

Setting up the main body of the Essence Pro homepage

If you’d like to setup your site like the Essence Pro demo website, you will need to add the content that displays beneath the homepage hero section. To do this you add widgets to widget areas. Although you can do this via the customiser, I prefer to go to…

Dashboard > Appearance > Widgets

To setup the Essence Pro homepage, you drag widgets from the left hand side into widget areas on the right hand side. Then configure the widget settings. When each widget is configured make sure you click that widget’s blue save button.

The homepage widgets and their settings as used in the Essence Pro demo site

Hero Section (widget area)

The demo uses a Genesis eNews Extended widget in the hero section widget area. I’ve made a comprehensive tutorial about setting up the eNews widget. This is the newsletter sign up box inside the hero header section.

Front Page 1 (widget area)

1. If you have multiple categories, choose one
2. Featured POST widget showing 2 posts
3. Set a featured image of 800x400px centred
4. Show the post title and post info
5. Set a content type of show content limit then set a content limit of 110 characters
6. Do NOT tick the box to show category archive link.

Front Page 2 (widget area)

Featured POST widget showing 3 posts

1. If you have multiple categories, choose one
2. Show 3 posts
3. If you choose the same category as used in Front Page 1, offset by 2 posts. This avoids displaying the same posts twice
4. Set a featured image of 800x400px centred
5. Show the post title but do not show post info
6. Set a content type of no content
7. This time do tick the box to show category archive link. This displays the big square button that says Read More Posts

After Content Featured (widget area)

Do not confuse this widget area width the Front Page Featured widget area!

In the demo, this is the row of three post titles on top of three featured images. This widget area displays on all posts and pages including the front page.

Drag 3 Featured PAGE widgets into this widget area

Open each of the 3 Genesis Featured PAGE widgets and configure the settings

1. We are editing one of the 3 Genesis Featured PAGE widgets in the After Content Featured widget area of Essence pro theme
2. In each Featured PAGE widget, select a page to display. The demo site uses About, Ebook, and Shop. You’ll have to choose pages that you have made inside your own site.
3. Show a Featured Image of 800×400.
4. Show the page title, but NOT content.
5. Save your settings before configuring the next Genesis – Featured Page widget.

Front Page Featured (widget area)

This is the large text quote, below the Ebook row on the front page of Essence Pro theme.

To add a quote like this to your site…

• Drag a Custom HTML widget into the front page featured widget area.
• Type your quote.
• Wrap the quote in blockquote tags.
• Wrap the name of the person who gave the quote in cite tags.
• Don’t forget to save your settings.

Footer CTA (widget area)

The Footer CTA widget displays on all posts, pages and archive pages. The demo uses the Genesis eNews Extended widget. I’ve made a comprehensive post explaining how to set this up.

Other widget areas

Primary Sidebar

The front page does not display a sidebar. If you set inner pages to display sidebars put any widgets you choose in the Primary Sidebar widget area.

After Entry (widget area)

The after entry widget area displays after the post content on all single posts. It does not display on pages or archive pages. The demo does not use this widget area. If you want to use it, drag any widget you like into the after entry widget area.

Image sizes used by Essence Pro theme

• Featured Images for posts and pages: 1600x800px.
  Image sizes used in the featured post and featured page widget 800x400px.

Navigation bars used in Essence Pro Theme

1. If you go to Dashboard > Appearance > Menus
2. Manage Locations you will see three menu locations.

Header Menu: displays under the site title
Footer Menu: displays above the footer credits
Off Screen Menu: displays a hamburger icon and the text “Menu” on the same row as the site title. When you click the hamburger menu, the menu takes over the full screen. This off screen, or full screen, menu will scroll if you have more links than can fit on the screen at once.

Essence Pro Theme