How to Make A Parallax WordPress Website – 2017!

Hi everyone! This text tutorial is on how to make a wordpress website using a free premium wordpress theme (Themify). I will show you how to build this wordpress website from scratch and we’ll go through each step together.

By the end of the tutorial, you’re going to a wordpress expert and will be able to make any wordpress website you want.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

As with all my tutorials, anyone can learn how to make a wordpress website or build and create their own website. You do not need to know any type of coding or programming whatsoever. You just need to allocate some spare time, get a domain and hosting and you’ll learn how to make your own parallax wordpress website 🙂

I will be providing you with a few links and content to help you make this wordpress website for free so if you need any images or text instructions – they are all provided below.

What You Need

For hosting, we’ll be recommending Hostgator. You can also use hostgator to get your domain which this tutorial covers. If you want to use another service like GoDaddy to get your domain – follow this link (to come) for step by step instructions.

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

Why Hostgator?

Hostgator Discount

Hostgator has allowed me to share a special discount code with you (the HIGHEST EVER!) – nyctech30– this is a 55% off coupon code (highest discount available on the web)

nyctech30 coupon code is an affiliate coupon code, which means Hostgator gives me a small commission when you use the code. It helps me run my website and helps me create these free tutorials for you, so please use it – it only helps you save money!!

In the next step, we’ll use the NYCTECH30 hostgator coupon code.

Step 1: Get Hosting and Domain

A domain is your web address. This is a MUST.

You need hosting in order to run your website and store all the data (content, images, video). Every website needs hosting. This is a MUST.

Go to Hostgator -> Click Get Started Now Button -> Choose a Plan -> Click Sign up now (doesn’t matter which, yet)

Type in a domain you want to register and push enter to see if it is available. If you found one that has a green check mark next to it, let’s move on!! :)

Make sure to use the discount code: nyctech30 to save 55% (highest possible!)

(its an affiliate link so hostgator also pays me a commission for helping you)

Disclosure: Hostgator and our other affiliates (Godaddy) pays us a commission if you use our link or coupon code. No charge to you, so thanks in advance.

  1. Decide what plan is best for you (if you only will have 1 website – choose hatchling plan, if you think you’ll have more than 1 website – choose baby plan)
  2. Fill in all the info (I suggest you choose a 12 month billing cycle)
  3. Unclick all additional services (they are unnecessary and extra money)
  4. Enter “nyctech30” for a 55% off coupon code (our very own special coupon code!)
  5. Agree to the terms and conditions and “Check Out”

Step 2: Go to Email Inbox

Now go to your email inbox. You should see an email from hostgator with all your login and account details

Use that information to do Step 3

Step 3: Go to Cpanel

This is where we are going to go to install wordpress, which we need to make our wordpress website for free.

  1. Pull up your new account email from Hostgator
  2. Click on the link that says “Your Control Panel”
  3. Login with the username and password from your email

Now the fun starts!

Step 4: Install WordPress

Now we need to install the platform we’re going to use to make it. The platform is called WordPress – it’s a content management system and super popular with a large community of users.

  1. Now that’re you’re logged in to your cpanel
  2. Scroll down to Software/Services section of the main page
  3. Click on the icon that says “QuickInstall”
  4. Click on WordPress on the left side menu
  5. Click Continue
  6. Enter an admin email (that you get email from), blog title (you can change this later), user name and other details
  7. Click “Install now!”

Sweet! Now we have wordpress installed and we are a step closer to learning how to make your parallax wordpress website! You can go to your domain address and see that we have just uploaded a website to your site (we’ll fix this whole thing and make it pretty – don’t worry!)

Step 5: Log into WordPress Website

You might have to wait 5-15 minutes before you can click to log into your new site. Take a break if you need.

There are two ways to log onto your site

  1. You can click on the link provided on the hostgator page after the quick install and use the username and password
  2. You can go to your email and open the new email you get with details about logging into your site (same info as above)

To customize and add content to your site, you will always log into the site with the following address: www.YourSite.com/wp-admin

So go ahead and log on!

Random sentence thrown into this tutorial to see if you’re reading this. Did you watch our old tutorial on how to make a wordpress website?

Step 6: Install WordPress theme (Themify)

You can choose any wordpress theme you want to customize on wordpress. But since we are making a parallax wordpress website, we’re going to be using a premium theme called Themify Ultra. This is one of the most popular themes in 2017.

This is a premium wordpress theme but I can offer it to you for free. All you have to do is download it. If you want the benefits of the premium membership click here (use discount code NYCTECHCLUB for 20% 30% off!)

**MAKE SURE YOU ZIP the Themify folder if it is downloaded and unzipped -> Compress it to a .zip**

  1. Download Themify Ultra Parallax WordPress Theme
  2.  On the left side, find the Appearance link – hover over it and click “Themes”
  3. On the upper left click the ADD NEW button or UPLOAD button
  4. Then click Upload Theme
  5. Click Choose File
  6. Find the Themify theme zip file and upload

Now we are going to be using a beautifully pre-designed wordpress theme for this website tutorial.

  1. So once you activate your themify theme, we are going to go the dashboard > themify ultra > themify settings > skins and demo
  2. Click to check the restaurant theme

Now check out your site and it should look pretty sweet. We’ll fix it in a bit.

Step 7: Add WordPress Plugins

Download And Install Required Plugins 

Make sure to zip all the plugin folders if they download and are unzipped -> Compress it to .zip

  1. Download the Themify Contact plugin
  2. Download the Themify Map Pro Plugin
  3. Download the Themify Portfolio Posts plugin

These are premium plugins that I am providing you for free for this WordPress tutorial. If you would like additional premium plugins, you can buy them at Themify by following this link (use discount code “NYCTECHCLUB” for 20% 30% off!) 

To install these plugins > go to your wordpress dashboard

  1. Click on Plugins
  2. Click on Add new
  3. Upload plugins
  4. Activate the plugins

Download and activate the following WordPress plugins

To find the plugins:

  1. Click on Plugins
  2. Click on Add new and search
  3. Find plugin and install
  4. Push Activate

Step 8: Change Permalinks

Let’s do some maintenance stuff before we get into learning how to building our wordpress website.

  1. Go to your wordpress dashboard
  2. Go to settings
  3. Go to General
  4. Add the www. to your URLs
  5. Click save
  6. You will have to log back in after you do this
  7. Now go back to your wordpress dashboard
  8. Go to settings
  9. Click on permalinks
  10. Choose the permalinks you want

Step 9: Download the Zip File with Images (plus Logo)

You don’t have to use my demo images for your parallax wordpress website. I just like to give them to you incase you need some as you make your parallax website.

THERE ARE TWO ZIP FILES (please download both for ALL demo content)

Demo Content – Folder 1

Demo Content – Folder 2

Please download both zip files and upload the content in the next step

Sometimes I don’t always give the exact images because of copyright issues but it shouldn’t matter since you’ll have your own images for your website.
photo credit: www.pexels.com

Step 10: Upload the media files on to your WordPress Website

  1. Go to your wordpress dashboard > click on Media > Add New
  2. Add files
  3. Now all of your files should be in your media library.

You can also upload these files individually on each page/post, when you need them. I’ll show you how in the video tutorial.

Step 11: Create Homepage

Now the fun begins. We’re going to start learning how to make wordpress website and our first wordpress web page (the homepage!)

  1. Add new page > Name it “Home”
  2. Scroll down to Page layout
    • Choose no sidebar
    • Hide page title
    • No comments
  3. Go to the Page appearance tab
    1. Select Horiztonal Header
    2. Show site logo and menu navigation
    3. Select transparent header
    4. Choose Footer block
    5. Show menu navigation, footer text and back to top arrow
  4. Click publish
  5. Delete sample page

To make the header transparent (you need to do this on each page)

  1. Go to edit page
  2. Go to page appearance tab in the themify custom panel
  3. Select transparent background in the header background type
  4. Click publish

You need to do this for every page you want a transparent header.

This is a one page website so we will not be learning how to make additional pages – but its really simple…just kidding, we’re going to make a few other pages just to show you how to do it.

Step 12: Set WordPress Homepage

  1. Settings > Reading > set page
  2. Customize > Static Front Page

Step 13: Customize Themify Global Settings

What we are going to do now is customize our colors and layouts for our parallax wordpress website. Then we will make our website. But first, some maintenance items.

  1. Go to your wordpress dashboard and hover over Themify Ultra
  2. Click on Themify Settings

We are going to go through all of these setting tabs right now to set everything. It will be really quick if you watch the how to make a parallax wordpress website video.

General Tab

Default Layouts Tab

Portfolio Layouts Tab

Theme Settings Tab

Header Design 

Footer Design

Text for your footer (if you want): © Studio Designs

Social Links

Themify Builder

CLICK SAVE at the bottom

To add social media buttons in the footer

  1. Go Appearance > Widgets
  2. Find the themify social links widget > drag it to footer social widget
  3. Set the link to open in a new window
  4. Click save

To center the social media widgets correctly, we’ll add some Custom CSS below in the next step.

Step 14: Delete Sample Page and Post

  1. Go to your wordpress dashboard
  2. Hover over Post > click All post
  3. Delete the sample post (click on trash)
  4. Now hover over Pages > Click All Pages
  5. Delete the sample page

Now let’s go to our homepage so we can customize our parallax wordpress website with custom colors and spacing!

Step 15: Set Theme Customization Options (PASTE IN CSS AND CHANGE HEX #)

This is where we are going to go to set all of our colors, font sizes, and spacing options

  1. Hover over appearance and click on Customize
  2. Make sure you are on the advanced tab
  3. You can make any sort of customizations you want

What I have done to simply this entire tutorial is created CSS that we will just paste in to set all the settings like the demo.

Text version of Custom CSS
PDF version of Custom CSS

You can choose your color codes here: http://htmlcolorcodes.com

You can also change colors by going to (we’ll go through these in the video)

Here is a text tutorial on exactly how to change the colors for the custom css

Step 16: Create and Upload Custom Logo (OPTIONAL)

Not everyone wants a site logo. Some people just want text like we use. But if you need a custom logo for free then you can go to logomakr.com

Once you make your logo, save it and let’s up load it.

  1. Go to your wordpress dashboard
  2. Hover over appearance
  3. Click on Customize > Themify Options > Site Logo

If you want to have a text logo or edit the text you can also do the following: 

  1. Go to your wordpress dashboard
  2. Hover over appearance
  3. Click on Customize > Themify Options > Site Logo

If you want to upload a favicon:

  1. Hover over appearance in your wordpress dashboard and click on customize
  2. Click back to the basic settings
  3. Click on site identity
  4. Upload favicon
  5. Click save

Step 17: Creating Slider / Hero Image on Homepage

If you’re using a slider – make sure you set it to full image and full cover in the drop downs

To upload an image – MAKE SURE you click on browse library so it doesn’t resize your image

Pro tip: If you want to modify the color of your slider image than all you need to do is go back to your styling options

  1. Add a overlay color. #000000 0.55
  2. Change the gradient overlay color for the header menu if you want to make it stand out more.
  3.  the font style and size (if you want) – #fffffff 1.0
  4. Center align the font
  5. Click save

Click save on the builder…and after that, let’s move on to the next section 🙂

**We added some custom css to make the slider text look beautiful and professional**

Step 18: Create About Section

Now let’s add a title for this section

**The CSS was added earlier to clean up this section 🙂
.maketable .fork-icon, .module-fancy-heading .maketable .fork-icon { background: url(url-to-the-new-icon) no-repeat center; }

Step 19: Create Services Section

Now go down to the next row

  1. Change row layout to two columns so we have two sections
  2. Go to the settings tab for the entire row area and make them full width
  3. Select NONE for gutter space
  4. Anchor the row
  5. Go to the animation tab and select SlideInUp

Now let’s customize each of these sections

  1. Go to the options tab for one of the columns
  2. Add background images for each column
  3. Change the padding for the column to 5%
  4. Click save

Now let’s add some text to the box

  1. Add an text
  2. Add 10, 7, 7 % for top, right and left padding
  3. Change the background color to #2b2b2b or #ecf2f4
  4. Change font color #ffffff or leave it as the default #525252
  5. Add a button
  6. Select Yellow for the color to get a button designed for the theme layout
  7. Add background color to the button area
  8. Font center
  9. Add 10% padding to the bottom
  10. Save

Button color codes for #1

Button color codes for #2

Step 20: Create Description Section

  1. Anchor the row
  2.  In the style options we are going to change the background color to #ecf2f4
  3. And then add 8% and 7% to top and bottom padding
  4. Change animation to slide in up
  5. Click save
  6. Now go and change the row columns to the 1/3 + 2/3 option
  7. Add a text box to the 1/3
  8. Add your text and change the text animation to slide in left
  9. Add a button and change the button animation to slide in left
  10. For the button – go to the button link and add the following color codes
    1. background color: #ecf2f4 0
    2. background hover: #525252 1
    3. link color: #525252 1
    4. color hover: #ffffff 1
    5. border color: #525252 1 1px
  11. Image widget to the 2/3
  12. The width I use is 789px by 453px
  13. Or do whatever you want 🙂 This is your about section
  14. Add your image and change the width and height if you want
  15. Change the image animation to slide in right
  16. Click save when done 🙂

MAKE SURE CUSTOM CSS IS ADDED FOR THE FONT TO LOOK RIGHT

 Step 21: Create Image Gallery Section

  1. In the settings change the anchor man to portfolio
  2. Change background color if you want (color code: #fbf9f4)
  3. Change the padding to 4% for top and bottom
  4. Add animation if you want (slide in up)
  5. Click save
  6. Add a fancy heading module and change it to H2
  7. Make sure you go to the styling tab for this entire section and change the font to Center
  8. Add an image module – click save
  9. Now change the layout to 3 columns
  10. Now go back into the add image
  11. Change to Image Overlay option
  12. Add image
  13. Change the dimensions to 360 x 275
  14. Add a title for the image if you want
  15. Link image …then click out of it, so you can choose lightbox
  16. Go to the styling tab and change the font to centered
  17. Add 38 px to bottom padding
  18. Add as many images as you want (repeat steps above)
  19. Click save

Now let’s add a button to bring people to the portfolio page if they want to see more images or your work

  1. Add a button for View More and add a link
  2. Button options for parallax wordpress demo website (normal, squared)
    • Normal
    • Squared
    • Yellow
    • Font – Center
    • Background color #dfa300 1.00
    • Background hover #ffffff 1.00
    • Link Color and Link Hover – #ffffff, #dfa300
    • Border color #dfa300
  3. Click save for the builder

Step 22: Create Blog Posts

You should have already selected your blog post layout. But if not, you can follow the directions below.

  1. To modify the look of the blog posts
  2. Go to dashboard > themify ulta > themify settings
  3. Click on the Default Layouts tab
  4. Go to Default Single Post Layout section
  5. The options are there
  6. Make sure you click save if you change anything
  7. In the advance options in the customize tab you can change some additional blog post title options
  8. You can also edit the side bar font and colors
  9. Same with the forms (for comments)

Now what we really want to do here is create some blog posts

  1. So go to your dashboard
  2. Hover over posts and click add new
  3. Title your blog post
  4. Put in your content
  5. Add a featured image and a category name if you want
  6. And click publish

Repeat these steps if you want to create more blog posts.

We’ll fix the sidebar for the blog post pages and other pages later. Right now, I think we should stick with finishing making our homepage for the parallax wordpress website.

We will be adding custom CSS to make the header menu area a solid color with transparent after scrolling

Step 23: Create and Modify Sidebar

You will see all the different places to put widgets on the right. On the left are your widgets.

For this parallax wordpress tutorial, these are the only widgets we will have for our wordpress website.

Step 24: Create Blog Post Section

Once you’ve written at least one blog post (otherwise nothing will show up in this section), go back to your homepage and turn on the themify builder.

  1. Anchor the row with the word blog
  2. Go to the styling tab and give this section 4% top and bottom padding
  3. Add animation if you want (slide in left) and change background color
  4. Click save
  5. Add a fancy header and put in subheadline and headline
  6. Change the html tag to H2
    1. we will add custom CSS to format the fancy header correctly for the entire site
  7. Add a post module below
  8. Select Grid 3 layout
  9. Change number of posts to show to 6
  10. Change display to NONE
  11. Put in image width and height of 240 x 150
  12. Hide post meta and navigation
  13. Click save when done
  14. Add button below if you want to link to more blog posts page
  15. Choose normal and squared button
  16. Add in the text and link
  17. Click center for font
  18. Go to the button link tab
  19. Put in #dfa300 #ffffff, #ffffff, #dfa3000, and #dfa300 for the border
    1. we’ll put in custom CSS to modify the font to look professional
  20. Click save
  21. Save builder

Step 25: Create Contact Us section

  1. Anchor the section
  2. Click on row options > styling > background image > browse files
  3. Find the image you want and insert
  4. Select Parrallax scrolling for background mode
  5. Add an overlay color #000000 and opacity to 60%
  6. Change the font color to #ffffff and centered
  7. Add some padding – scroll down – 8% top and 8% to bottom
  8. Click save
  9. Add a fancy header and add subheadline and headline
  10. Change it to H2
  11. Click save
  12. Now add an text widget
  13. Change the text to 3 columns
  14. Now text
  15. You can format each of these text widgets to have white font (#ffffff) and link color yellow (#dfa300)
  16. Add text to each column
  17. Add a button for a contact us page
  18. Select Normal and Squared
  19. Put in the text and link URL
  20. Center the text
  21. For the button link colors choose #fffffff (make it 0 for transparant), the hover background color #dfa300, the color for the link and hover #fffffff and the border #dfa300
  22. Click save when done

Step 26: Add a Map

  1. Anchor the row (if you want)
  2. Select full width
  3. Click save
  4. Now add a map pro widget (we added a plugin earlier for this)
  5. 100% width
  6. Set height to 445px
  7. Type in your address
  8. Zoom into 15 or so
  9. Scroll down to the bottom and add your address again to get the marker to show up (must do!)
  10. Click save
  11. Now to get the map to show up > go to your dashboard
  12. Hover over themify ultra and click on themify settings
  13. Find the google map tab and click on that
  14. Now you need an API key. Click on the link that says generate API key
  15. Log into google account and click on button that says get key
  16. Create new project
  17. Click create and enable API
  18. Copy the code
  19. Go back to your wordpress dashboard and paste in the API and click save

Now the map should show up

Step 27: Set Row Anchors (if you didn’t do this during each row)

  1. Click on each row option tab
  2. Put in the name for the Row Anchor

Step 28: Make Main Navigation Menu (header menu)

If you haven’t created your parallax homepage header menu. Then follow these instructions.

  1. Turn on the builder on the homepage
  2. Go to each style option section on your homepage and title each row anchor
  3. Save everything
  4. Go to your WordPress Dashboard
  5. Hover over appearance > click on menus
  6. Create a menu name
  7. Click on Create Menu

This first menu we are making is for our main navigation (homepage)

Now what we are going to do is create custom links for our homepage since this is a parallax website (we want to go to the different sections).

  1. Go to the custom link tab and expand it
  2. For each URL type in #anchor (ie. #home, #about, #blog, #portfolio, #contact)
  3. Add each
  4. Click save menu

If you want a highlight button for any of your items, go to the top of the page and click on Screen Options on the upper right

  1. Click on the box that says CSS Classes
  2. Now go back to the custom link you added to your menu and type in “Highlight-link” in the css class for the item you want to highlight
  3. Click save again 🙂

We will add our menu for our other pages later in this tutorial.

Step 29: Create About Page

  1. Create new page and title it About
  2. Change the page options: No side bar / Full Width Content width
  3. Hide page title
  4. Go to the page appearance tab and select Transparent header
  5. Publish page

Now to to the page and turn on the builder

  1. Go to page options and change it to full width
  2. Add background image and select parallax scroll
  3. Add overlay #000000 0.50
  4. Change padding to 14% and 8% for top and bottom padding
  5. Add animation (if you want)
  6. Add fancy header and put in subheadline and headline (H1)
  7. You can add font colors for the header (#ffffff) and subheadline (#dfa300) if you want but we will add css

Now the next section – we do not have any animations on this page in the demo. You can put them in yourself if you want.

  1. Create a new module for your description section
  2. Go to the row options > styling tab and add 4% and 4% padding to top and bottom
  3. Add a text widget
  4. Save

Now let’s create the team section

  1. Add another row for a separator
  2. In the page options go to the styling tab
  3. Add background image and select parallax scrolling
  4. Add overlay and hover overlay (#000000 0.60)
  5. Add padding – 12.25% and 8% for top and bottom padding
  6. Add a text widget for a section title change it to H2
  7. Change the font to #fffffff 1
  8. Center the font
  9. Click save

Now create a section for your employee photos

  1. Change the column settings to the number of columns you want (4)
  2. Go to the page options and add 6% and 4% to top and bottom padding
  3. Now add some employee images > click and add an image
  4. Select centered image option
  5. Change the width and height to 260 x 200
  6. Title the image and add a caption for the name and job title
  7. Go to the styling tab and click CENTER for font
  8. Click save
  9. Add icon widget to add social media buttons
  10. Select Normal, Squared, Horizontal options
  11. Select icons and links for social media links
  12. Go to the styling tab and select center for font
  13. Go to the styling tab and put in 10% for bottom padding
  14. Add a text section for description
  15. Go to the style tab and center the font
  16. Click save

Now we are going to add another section for our parallax wordpress website (optional). This is a services section or image section to describe the business more.

  1. Add another two column row if you want with text and image
  2. In the module section click on the styling button and put in a background color #f0f0f0 1
  3. Go to the style tab and add 5% to the top padding and 4% to the bottom padding
  4. Now add a fancy header (H2) and text box on one side
    1. we will add css to make this look nice
    2. Go center the font for the module
  5. And an image on the other
    1. Put in 560×400 for the height and width
    2. Click save

Now the last thing we’ll do is add a contact us section

  1. For the box select one column
  2. Add the following background color #242424 1.0
  3. Add padding 3% to top and bottom padding
  4. Add a text section and center it and change the font to white
  5. Add contact Us button section
    1. Select normal and squared
    2. Go to font section and center
    3. Background color #000000 0.00
    4. Background hover #ffffff 1.00
    5. Link color #ffffff 1.00
    6. Color hover #000000 1.00
    7. Border color #ffffff 1.00 1
  6. click save

Make sure you click save on the builder!

Step 30: Create Blog Post Page

This page for your parallax wordpress website is the blog post page.

  1. Go to your wordpress dashboard
  2. Hover over pages and click Add New
  3. Title your blog page
  4. Scroll down to page options
    1. Choose no side bar
    2. Content width – default
    3. Hide page title
    4. Choose your navigation menu
  5. Go to page appearance
    1. Select transparent header menu
    2. Hide site logo and footer widgets (show the others)
  6. Go to query posts
    1. Select all categories
    2. Choose your options (you selected these options in the themify settings earlier so updating this section won’t hurt)
      1. Grid 3
      2. Post Content Layout – Polaroid
      3. Post Masonry – Enable
      4. Infinite Scroll – Enable
      5. Posts Per Page – 9
      6. Display Content – None
      7. Image Dimensions – 365 x 0
      8. Hide Post Meta – Author, Comments, Tags
  7. Click Publish

Now let’s go to the page and make out the blog page for the parallax website

  1. Turn on the themify builder
  2. In the first row click on the styling options
  3. Add 10% for top padding
  4. Click save

Add a title for your blog post page

  1. Add a fancy header and add your subheadline and title for the page
  2. Keep it H1
  3. Click save

Step 31: Create Portfolio Page

The page we are going to make is for our parallax wordpress website gallery page

Create a new page

  1. Title it whatever you want (or gallery)
  2. Go to page option tab and select the following –
    1. Select no sidebar and full width
    2. Hide page title
    3. Choose your navigation menu
  3. Go to page appearance and select transparent menu or add background color #000000
  4. Publish the page

Now go to the page so we can start building our parallax wordpress gallery page

  1. First go to the row options and change the row to full width
  2. Go to the styling tab and put in 10px for the top padding
  3. Add a fancy header and change it to H1
  4. Click save

Now we are going to add our gallery

  1. Go to a new row and click on page options
  2. Drag a gallery underneath the fancy header
  3. Add images that you want to show
  4. Settings:
    1. 9 images per page
    2. 250 x 200
    3. 3 columns
    4. Link to media file
  5. Add slide in up animation
  6. Click save

Now the last thing we’ll do is add a contact us section

  1. For the box select one column
  2. Add the following background color #242424 1.0
  3. Add padding 3% to top and bottom padding
  4. Add a text section and center it and change the font to white
  5. Add contact Us button section
    1. Select normal and squared
    2. Go to font section and center
    3. Background color #000000 0.00
    4. Background hover #ffffff 1.00
    5. Link color #ffffff 1.00
    6. Color hover #000000 1.00
    7. Border color #ffffff 1.00 1
  6. Click save

Make sure you click save on the builder!

Step 32: Create Contact Us Page

  1. Create a new page and title it Contact
  2. Go to the page options and select no side bar, full width, hide title
  3. Choose the main navigation menu
  4. Go to page appearance and select the transparent header option
  5. Publish the page
  6. Go edit the page
  7. Turn on the page builder
  8. For the first row click the row options
  9. Add a background image if you want and change it to full cover
  10. Add an overlay color: #000000 with 0.50
  11. Change the font color to #fffffff 1 and center it
  12. Add top and bottom padding of 14% and 8%
  13. Add a fancy header box for contact us set it to H1

Now let’s create the section for our contact us form

  1. In your next row, go to the styling options
  2. And add 4% and 2.75% for top and bottom padding
  3. Click save
  4. For the inner module add 17% for the right and left padding to center everything
  5. Inside the module add a text box
  6. Add another text box for Follow Us and change it to H4
  7. Add an icon widget
    1. select xlarge, none, horiztonal
    2. center font everything in the styling tab
    3. you can change the link/hover color to black #242424 if you want (icon tab)
  8. Click save
  9. Drag in a contact widget and select the options you want. You can center the text if you want
    1. Select the first layout option (style 1)
    2. Check captcha and subject if you want (we only check captcha)
    3. We will add some custom css to make this look amazing
  10. Click save when done

Save the builder also!

Step 33: Create Menus for “Other” Parallax WordPress Pages

To create header menus for your parallax wordpress website for the other pages you make

  1. Go to your wordpress dashboard
  2. Hover over menus > click add new
  3. Name the menu and click create new menu
  4. Now add the pages or links you want
  5. Click save
  6. Now go to your other pages and make sure you set the navigation menu to this one that you just created (by name)
  7. Make sure you click update on each of the pages!

Step 34: Make Sure All Your Buttons Are Linked

And Done! Congratulations!!