Essence pro theme looks great. But you must work with the theme’s design, not fight against it. Start every page with a big bold headline and a paragraph of text. You can use three column grids and full width images below the fold, on the second screen, as the user scrolls down the page. But your page will look more professional if you keep it simple above the fold.
The image above is the homepage, the image below is a single blog post.
The page already has a large featured image at the top, so don’t try put more images at the top of a page. They look bad squeezed into the stepped header gap. Start the page with a big bold headline and only use images below the fold.
All you need to do is choose a good looking featured image for the header, then start the page content with a headline and a paragraph.
Great design is surprisingly simple.
No adornment necessary
Because the header section of Essence Pro uses such a big hero image, building an image intensive web page below the header would be overwhelming. More importantly, Essence Pro looks beautiful out of the box. It doesn’t need filler or fluff images. Just add good content and only use images where necessary.
The homepage displays blog posts
The top of the homepage displays a group of five blog posts. The first two, each span 50% of the screen. Under those are three more posts each spanning 33% of the screen.
Use the setup wizard
The homepage is built from a combination of Genesis Blocks in the content area of the web page, and widgets in widget areas. Setting these up manually takes time, but the setup wizard does it for you in minutes. If I was you I’d use the setup wizard and save myself a lot of messing about.
Widget areas in Essence Pro
- Sidebar.
- Front Page Featured widget area.
- After Content Featured widget area.
- Footer CTA.
- After Entry widget area.
Front Page Featured widget area: displays on the front page only.
After Content Featured widget area: on the demo site this widget area displays a row of three Genesis Featured Page blocks. (About, Ebook & Shop.) This content displays on all pages and posts including the front page.
Footer CTA: content in the Footer CTA widget area displays on all pages and posts including the front page.
After Entry Widget Area: content in this widget area displays below the web page content and above comments, (if you have comments enabled) on individual blog posts. It does not display on pages, only posts.
Below I list the widget areas and widgets used to set up the homepage of Essence Pro. I recommend you use the setup wizard which will setup the homepage for you.
Why do all this extra work when you don’t have to?
How the Essence Pro front page is built
- To set the homepage hero text go to: Dashboard > Appearance > Customise > Essence Pro Settings > Front Page Hero Settings.
- This is a Genesis Post and Page Grid block in the body of the page. It uses two posts in two columns.
- This is a Genesis Post and Page Grid block in the body of the page. It uses three posts in three columns.
- This is a divider button wrapped inside a container block. This is inside the content of the page.
- This section is built from headline, paragraph, and email newsletter blocks wrapped inside a container block. This is in the content of the page.
- This row is made from three Genesis Featured Page widgets in the After Content Featured Widget area. You add this content via the widget areas, you do not add this content to the web page itself.
- This quote is added to a widget area called the Front Page Featured widget area. You add this content via the widget areas, you do not add this content to the web page itself.
- This text and button is added to a widget area called Footer CTA. The demo site uses a Custom HTML widget here, you could also use a text widget. You add this content via the widget areas, you do not add this content to the web page itself.
