Setup Parallax Pro theme

Setup Parallax Pro theme, I’ll assume you already have WordPress set up and have made some pages. If you want a blog section in your site, you might have some posts too.

If you need to know how to set up WordPress and install Genesis start here…

If you havn’t installed Parallax Pro theme yet go to…

WordPress Dashboard > Appearance > Themes
Click Add New
Click Upload Theme
Browse your computer and locate the Genesis zip file you downloaded from StudioPress.
Select and install Genesis then install Parallax Pro child theme.
Only ACTIVATE Parallax Pro, not Genesis.

Now you have Parallax Pro theme installed. And you have some pages in your WordPress site.

The pages I used in the video tutorial were…

Home
About
Services
Portfolio
Contact

Parallax Pro theme has a stripy home page.

Setup Parallax Pro theme to look the same as the StudioPress demo, this is not too difficult. All you need to do is put the correct widgets in the correct widget areas. Most of them are Text Widgets.

There are some background images and colours all ready set

After you add the text widgets the theme will automatically use the pre-set background images. This gives Parallax Pro theme the stripy effect.

If you want to use different background images on the front page when you setup Parallax Pro theme, you can select your own images by going to…

Dashboard > Appearance > Customize.
Click the down arrow in the Background Images tab.
Click any of the images to see a dialogue box that lets you remove the built in image and replace it with your own image.

The background images in the StudioPress demo of Parallax Pro are 1600×1050 pixels.
If you use your own images they must be at least 1150 pixels wide.

Four sections of the Parallax Pro home page have buttons that link to pages inside the site.

The pricing table has buttons inside it that could open a web page.

The Connect With Me section of Parallax Pro theme uses two widgets. A text widget and a widget from the Simple Social Icons plugin.

The widget areas used to setup Parallax Pro front page are…

Home Section 1 to 5
Footer 1

Setup the Parallax Pro theme homepage

First make sure you have 5 web pages.

These are the pages that open when users click one of the buttons on any section of the stripy homepage.

For each of your pages write some short teaser text to use on the homepage.

These are the pages I linked to from the homepage in the tutorial video.

Home
About
Services
Portfolio
Contact

And this is the text I used in the Text Widgets on the homepage.

Home Section 1 Widget Area…

Text widget Title: About Us

Text in the widget: We have a variety of skills and experience that make us ideally placed to
help small local businesses with their advertising and promotion.

Button text: About Us

Home Section 2 Widget Area…

Text widget Title: Our Services

Text in the widget: We offer a variety of services to the small business community.
If you’d like to learn more about what we do and
who we help, take a look at the Our Services page…

Button text: Our Services

Home Section 3 Widget Area…

Text widget Title: Portfolio

Text in the widget: Take a look at some of the businesses we’ve helped. We’ve worked with
a large variety of small local businesses. You could well know some of them.

Button text: Portfolio

Home Section 4 Widget Area…

On the Parallax Pro StudioPress demo, there is a 3 box pricing table in the Home Section 4 Widget Area.

If you want to make your homepage look similar you will have to copy and paste the provided html and change the text inside the code. If you have a basic understanding of HTML this is easy. If you don’t know any code you could probably work out what to do by reading through the code and looking for the text. Just replace the dummy text with your own words.

Get the code HERE

Home Section 5 Widget Area…

In my tutorial video this section has a text widget and a Simple Social Icons widget.

This is the text I used in the text widget…

Text widget Title: We’re Social

Text in the widget: We’re active on several social media platforms.
Keep right up to date by following us using the links below.

In the same widget area, just below the text widget add a Simple Social Icons widget.

Setting this widget up is easy. Just paste your social media page URLs into the relevant boxes.

You won’t have accounts with all of the services listed. Add the pages you have, leave the other boxes empty.

Footer 1 Widget Area…

Text widget Title: Contact Us

Text in the widget: If you’d like to find out more about our services and explore the possibility of us working together, get in touch. Our initial consultation is free. So you’ve nothing to lose!

Button text: Contact Us

How to add a text widget to a widget area.

Go to Dashboard > Appearance > Widgets

At the bottom of the list of Available Widgets, click the Text widget. (The boxes on the left are Widgets. Boxes on the right are Widget Areas.)

A drop down list appears. Click Home Section 1. Then click Add Widget. (If you’re using an old version of WordPress you may have to drag the widget in to your chosen widget area.)

Now you have a Text Widget in Home Section 1 Widget Area.

Click the down arrow to open the text widget.

Add your text.

Adding the button to the widget.

The easiest way to add a button to your text widget is to use the WordPress page editor to make a link. Then click the Text Tab to see the HTML code.

You need to edit this code manually adding a CSS class.

After the a type class=”button” Make sure there is a space before and after the code you type.

See the screen shot below.

Make sure you click the save button each time you add a widget to a widget area.

That’s it. When your widgets are in the correct widget areas. And you’ve pasted in your text and code, then configured the Simple Social Icons widget. Your home page is set up just like the StudioPress demo of Parallax Pro.