Business Pro Theme Setup Guide

To set up Business Pro theme like the demo just follow this guide…

Finding the code you need

Several of the front page widgets contain code. You can copy and paste that code directly from the official Business Pro theme documentation page…

On the documentation web page, scroll down to find Front Page 1, Front Page 4, Front Page 5. Then copy the code and past it into your own website.

Don’t forget to change the link in the code for the button in Front Page 4 widget area. The button in Front Page 1 widget area is a jump link, you should not need to make any changes to that piece of code.

The plugins you need

After you install Business Pro theme, a message displays at the top of your WordPress editor. The message lists plugins the theme authors recommend you install if you want to set up Business Pro theme like their demo. I only install plugins if I have to. For instance, I don’t install WooCommerce if I’m not running a shop.

These are the plugins I installed when building the site used in this tutorial.

Display Posts
Display a listing of posts using the display-posts shortcode

Genesis Portfolio Pro
Adds default portfolio to any Genesis HTML5 theme.

Genesis Testimonial Slider
The Genesis Testimonials Slider is a simple-to-use plugin for adding Testimonials to your Genesis Theme, using a shortcode or a widget.

Genesis Widget Column Classes
Add Genesis (old Bootstrap) column classes to widgets

Icon Widget
Displays an icon widget with a title and description

WP Featherlight
A Simple jQuery Lightbox

To install any of the recommended plugins just click the plugin’s name in the list. The list appears at the top of your WordPress editor after you install Business Pro theme.

Adding the homepage title, intro paragraph and button

• Go to: Customise > Widgets > Front Page 1
• Add a Custom HTML widget to Front Page 1 widget area.
• Widget Title: Create your website with Business Pro
• Widget Content: Everything you need to create your own beautiful website.
• Button text: See Our Services

You can copy the button text directly from the Business Pro theme documentation page.

You do not need to change the demo code in the button. But you can if you want to.

The Jump link in the button is a section id. If you want to jump to any other section of the homepage you can find the section ids using Chrome’s inspector tool.

Setting the homepage header background image

Go to: Dashboard > Customise > Header Media

1. Paste a YouTube video page URL in the box
2. Add a header image, via the dialogue box, the same dimensions as the video. The demo site uses 1920x1080px.

Front Page 2 widget area (The Three icon widgets)

Because you installed the Genesis Widget Column Classes plugin, every widget has a width option and a tick box for the first widget in any row. Choose a width of one third for each widget and tick the First: box for the first icon widget.

1. Drag 3 icon widgets in to the Front Page 2 widget area. The icon sits above the widget title and widget content.
2. The icon size is 3x and you can change the icon, and icon bg colours if you wish. Choose align center, ignore padding and border radius settings.

All three widgets need a width setting of one-third. But only the first widget needs the First: tick box ticked.

Front Page 3 Widget area (services We Provide)

Front Page 3: contains four widgets

1. One Custom HTML widget above…
2. Three Genesis Featured PAGE widgets.

In the Custom HTML widget…

1. Type a title in the widget title box.
2. Type the introductory text in the content box.
3. Leave the width set to None.

The three Genesis Featured PAGE widgets

1. Set a width of one third. And in the first featured page widget, tick the First: box.
2. Leave the widget title box empty.
3. Select any of the pages you have already made, from the drop down list.
4. Show the featured image, with a size of (Portfolio 620×380).
5. Image alignment: center.
6. Show page title.
7. Show page content.
8. Content character limit: 150
9. More Text: the demo leaves this box empty. If you type into this box, the text will display inside a button linking to that featured page.

Front Page 4 widget area (photo background with video player button)

Front Page 4 widget area contains three widgets…

• An image widget.
• A Custom HTML widget.
• A video widget containing a YouTube URL.

Use the image widget to select the image you want to use as the background image for this row.

The Custom HTML widget contains a paragraph of text and two buttons. You must get the code right for the video button, or the video will show before you click the show video button. The best way to do this is to do this is to copy the provided code directly from the official documentation site.

You do not need to change the code you copy, just paste it into your own site.

You must include the show-video CSS class, for the video popup to work. And, internet security packages such as McAfee, may also prevent the the video from playing.

Place a video widget at the bottom of Front Page 4 widget area

In the video widget click the add video button.

When the popup appears, select Insert From URL.

Paste the YouTube URL of the video page you want to use.

Front Page 5 widget area (the portfolio section)

Front Page 5 widget area contains a single Custom HTML widget.

The Custom HTML widget contains…

1. Widget title: Our Latest Work
2. Paragraph of text: We solve business problems with creative solutions. Like these:
3. A shortcode (copy this from the documentation site)
4. Set the width to none.

Before you can add the portfolio section to your homepage, you must install the Genesis Portfolio Pro plugin and make six portfolio items. A portfolio item is just like a blog post but you make it by clicking the Portfolio Items tab in the WordPress dashboard, instead of the Post tab.

First make six portfolio items.
Make sure each portfolio item has a featured image attached. Portfolio items that do not have a featured image will not display in your portfolio section on the homepage.

To get the code go to the documentation page …
Scroll down to the Front Page 5 section and copy the code you need.

The documentation says you should use two Custom HTML widgets in front page 5 widget area. But their own demo content puts both pieces of code in a single widget. Either way will work.

Front Page 6 (the testimonials)

Install the Genesis Testimonials Slider plugin. Then…

Go to: Dashboard > Testimonials > Add New

Add several testimonials.

1. Type the name of the person who gave the testimonial.
2. Type the testimonial.
3. Type their company name or their job title.
4. Type the star rating they gave your service.
5. The demo does not include a photo, but it is possible to add one.

Then drag the Testimonials widget into Front Page 6 widget area. You do not need to configure this widget. Provided you’ve made some testimonials, and dragged the testimonials widget into the front page 6 widget area, the testimonials will display on your front page.

Before Footer widget area (text and button with image background, below the testimonials)

The before footer widget area contains three widgets…

1. An image widget containing the image that displays as the background of this widget area.
2. A Custom HTML widget that contains the headline for this row (the widget title), and a paragraph of text.
3. A second Custom HTML widget that contains the button with classes of “accent alignright”.

If you’ve installed the Widget Column Classes plugin, you can make the button sit to the right of the text. Choose a width of two-thirds for the first Custom HTML widget (containing the text). Choose a width of one-third for the second Custom HTML widget (containing the button code). And, for the first widget tick the small box that says First:

The three widgets in the Before Footer widget area in Business pro theme.

The first Custom HTML widget contains the headline and text on the left hand side of the Before Footer widget area.

The second Custom HTML widget contains the button code.

---

Some more useful tips…

Theme settings

Go to: Dashboard > Appearance > Customise > Theme settings

• Site Layout (sticky logo, navbar and header)
• Breadcrumbs
• Comments
• Content Archive (blog and archive page settings)

Image sizes

• Hero images: 1920×1080 px
• Featured images: 1280×720 px minimum
• Portfolio images: 620×380 px

Popup video in Front page 4 widget area

You must have the WP Featherlight plugin installed, and use the show-video CSS class for the video to popup when the round video icon is clicked.

Image backgrounds in widget areas

You can place image backgrounds in three of the widget areas.

To select the background image and video for the homepage hero header section go to…

Dashboard > Customise > Header Media

You can also place a background image in Front Page 4 and Before Footer widget areas. Just drag an image widget to the top of the widget area, then select the image to display.

Jump links

Each section of the Business Pro front page has a section id. You can use the Google Chrome inspector tool to find the id of any homepage section, then use a jump link to jump to that section.