• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Genesis framework / Specific themes / Setup Parallax Pro theme

Setup Parallax Pro theme

Parallax Pro theme from StudioPress
Parallax Pro theme from StudioPress

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.

Setup Parallax Pro theme like this demoThe 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.

Setup Parallax Pro. Home page text widget settings

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

Setup Parallax Pro theme like this demoThese 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.

Setup Parallax Pro theme like this demoGo 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.

When you setup Parallax Pro theme add Class=button to make the button effect

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.

Slides showing how to setup Parallax Pro theme

Make a blog listing page for Parallax Pro
When setting up Parallax Pro theme the table goes in home section 4
Edit the HTML code in the table you copied from StudioPress
Setup Simple Social Icons plugin by adding your URLs here
Copy the HTML from StudioPress and paste it here
I setup Parallax Pro with eNews Extended plugin
To setup Parallax Pro put text widgets in these areas
Paste the text and HTML in to a text widget
Put text widgets in home sections 1-5 to setup Parallax Pro theme
Make a HTML text link with a class of button using the WordPress Editor
Put your custom menu in the header right Widget area
Manage menu location
Make a custom WordPress menu

Setup Parallax Pro theme like this demo

Sidebar

StudioPress and Genesis Tutorials
  • StudioPress and Genesis Tutorials
StudioPress themes Free with this hosting.

My StudioPress and Genesis Tutorials

  • StudioPress Sites Review
  • Genesis Responsive Slider Tutorial
  • Genesis Featured Post Widget Tutorial
  • StudioPress Core Skills
  • Simple Hooks Tutorial
  • Genesis Simple Edits Tutorial
  • Genesis Dambuster plugin basic settings
  • Beaver Builder Tutorial – The Basics
  • Elementor Tutorial: a Quick Start Guide
  • Changing the color scheme of Altitude, Magazine Parallax Pro themes
  • Basic StudioPress Theme Customization (Old Post)
  • Genesis Framework Widget Areas Tutorial
  • Genesis Grid Loop Tutorial
  • Simple URLs (plugin) Tutorial
  • Simple Sidebars Tutorial
  • Simple Social Icons Plugin
  • Customizing the WordPress Query
  • Category and Tag Archive Listing Pages
  • Adding an author box below posts
  • Choosing the right StudioPress theme (a review)
  • Genesis eNews Extended and Mailchimp
  • StudioPress Pricing Table
  • StudioPress Flexible Layouts
  • Genesis CSS learn how to tweak and customize your site
  • Icons used in StudioPress themes
  • Images in homepage text widgets
  • Using Genesis Column Classes To Build Layout Grids
  • Sticky Header or Menu in Genesis
  • Plugins used in StudioPress themes
  • Genesis Simple FAQ plugin
  • Strong Testimonials Plugin – The Basics
  • Cornerstone Content: a simple how to guide
  • Genesis Portfolio Pro
  • Setup Generate Pro theme
  • Setup Hello Pro
  • Set up Altitude Pro theme
  • Setup – Executive Pro Theme
  • Parallax Pro Theme Review
  • Setup Parallax Pro Theme
  • Changing Google Fonts in a Genesis child theme (Parallax Pro)
  • Setup Daily Dish Pro theme
  • Setup Metro Pro theme
  • Foodie Pro Overview
  • Smart Passive Income Pro Theme: set up guide
  • Academy Pro theme Setup Guide
  • Authority Pro Theme: setup guide
Install the Genesis Framework
  • Are you ready to take your first steps? Watch as I install WordPress and Genesis.

Rainmaker Platform – a Review

  • Discover if you need the Rainmaker Platform
FoodieProTutorials
Build your own Genesis child themes with Dynamik Website Builder

Genesis Design Palette Pro

  • Customize your theme with Genesis Design Palette Pro

DIY Webdesign with Dynamik Website Builder AND Genesis Extender plugin

  • Genesis Child Theme Tutorial with Dynamik Website Builder
  • StudioPress theme customisation with the Genesis Extender plugin
  • Dynamik Fixed Background Image

StudioPress Accelerator

  • StudioPress Accelerator, the budget-friendly way to get a seriously fast website.

Are you getting stuck setting up a StudioPress site?Please let me know if you get stuck.

Disclosure: I receive compensation from some of the companies whose products I review.

How my affiliate links work…

  • I only get paid if someone buys a product. Not because someone clicks a link.
  • You pay the same price using my links or the StudioPress site.
  • If I earn some commission I can spend some more time making more tutorials.
  • P.S. Thanks to all those folks who have bought through my links.
  • It's much appreciated :-)

Philip Gledhill web design

Philip Gledhill is a Bradford web designer and WordPress assistant.

Genesis Extender

Customise your Genesis child theme the easy way.

The Genesis Extender Plugin

Get The Genesis Framework

WordPress Hosting

WordPress Hosting, Which Deal is Best For You?

Genesis – StudioPress resources

There are many good websites where you can find information about the Genesis Framework.

I use the sites listed below on a weekly or even daily basis to find answers, solutions and basic information.

I hope you find them as useful as I have.

Bill Erickson
WordPress Consultant

  • Tutorials
  • Code

Designs by Nick the Geek
Genesis based WordPress development and tutorials for everyone

  • Genesis Explained a good introduction to the code that makes Genesis work

Greg Rickaby
Front-End Developer @WebDevStudios

  • Code Snippets

Christopher Cochran
web/tech/design/music

  • The Visual Hook Guide

Carrie Dils

Genesis Developer and Web Designer

  • Genesis Tutorials and Information

Carrie Dils course on Lynda.com

  • There are two Genesis courses on Lynda.com. Up and Running with Genesis and Customizing Themes. Both are well worth a look. And if you're new to Lynda.com you can usually get a 7 day free trial.

Sridhar Katakam

  • Loads of WordPress and Genesis tutorials. Well worth a look.

Genesis For Beginners

  • pdf book

StudioPress.tv

  • Some basic videos from StudioPress

Brian Gardner

  • Code snippets and info from the man behind StudioPress

Sure Fire Web Services Inc
Web Design Tips, WordPress Development Help,and Genesis Framework Tutorials

  • Useful Genesis links page

WP Smith

  • Genesis code snippets

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top