How to Create Parallax Home Page in Quality Theme

The demand and use of single page templates are increasing day by day. It is a good concept for mobile devices or small screen devices as well as on desktops. So,we have added homepage parallax in Quality Theme along with the normal front page template. One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground. Now I will tell you, How to setup Parallax Homepage in Quality WordPress Theme. Below find the step by step instructions to configure this parallax / single page scroll home page.

1. Create Home Page using Parallax Template.

Go to => WP-Menu => Pages=> Add New

Firstly, Create a normal WordPress Page by selecting  Home Page Parallax  template and  publish the page. Refer attach screen shot.

2. Setup Front Page.

Go to => WP-Menu => Settings=> Reading

Here, you can set your page as front page. Refer attach screen shot.

3. Creating Custom Menu

Go to => WP-Menu => Appearance=> Menus

Now, We will create custom link menu for parallax home page. Refer attach screen shot.

Note: You can’t change link #ID. We have fixed section #ID for home page sections. See below all sections #ID.

4. Setup the slider.

Here you can find the instruction to set up the slider. Click Here 

5. How to Manage About Us Section?

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => About Section Settings

Here you can change content of About Section like Title and Description. We have managed this section content with the help of WordPress Page. Create a About page  / WordPress Page and add your content. Now  to display about content refer  attach screen shot.

• Enable About Section – You can enable or disable this section.
• About Section Title – Change your section title.
• About Section Description – Change your section description.
• About Section Content Page – Select your page for this section.

6. How to Manage Service Section?

1. First, you need to create few services to display in section. Click Here to create service.
2. How to Change Service Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Service Section Settings

Here you can change content of Service Section like Title and Description and the number of services to show on front page. See below this step. Refer attach screen shot.

• Enable Service Section – You can enable or disable this section.
• Service Section Title – Change your section title.
• Service Section Description – Change your section description.
• Number of service show on service section – Enter no. of display service number.

7. How to Manage Portfolio Section?

1. First, you need to create few projects to display in portfolio section. Click Here to create portfolio.
2. How to Change Portfolio Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Portfolio Section Settings

Here you can change content of Portfolio Section. Refer attach screen shot.

8. How to Manage Blog Section?

1. First, you need to create few posts to display in section.
2. How to Change Portfolio Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Blog Section Settings

Here you can change content of Blog Section. Refer attach screen shot.

• Enable Blog Section – You can enable or disable this section.
• Blog Section Title – Change your section title.
• Blog Section Description – Change your section description.
• Select Blog Category  – Select your posts category.
• Button URL  – Enter you button link.
• Button Text – Enter your button text.

9. How to Manage Testimonial Section?

1. First, you need to create few testimonials to display in section. Click Here to Add Testimonial.
2. How to Change Portfolio Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Testimonial Section Settings

Here you can change content of Blog Section. Refer attach screen shot.

• Testimonial Section Title – Change your section title.
• Testimonial Section Description – Change your section description.

10. How to Manage Team Section?

1. First, you need to create few team to display in section. Click Here to Add Team.
2. How to Change Team Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Team Section Settings

Here you can change content of Team Section. Refer attach screen shot.

• Team Section Title – Change your section title.
• Team Section Description – Change your section description.

11. How to Manage Client Section?

1. First, you need to create few client to display in section. Click Here to Add Client.
2. How to Change Client Section Title & Description? See below step.

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Client Section Settings

Here you can change content of Client Section. Refer attach screen shot.

• Client Section Title – Change your section title.
• Client Section Description – Change your section description.

12. How to Manage Contact Section?

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Contact Section Settings

Here you can change contact section details. Refer attach screen shot.

13. How to Footer Callout Section?

This section is very useful to display your flash offer and Signup offers. You can promote easily your product and service.  Click Here  to add footer callout.

14. Layout Manager for Parallax Page?

Go to => WP-Menu => Appearance => Customize => Parallax Template Settings => Manage Section Settings

Here you can change your sections, sequence. There are 8 sections in this panel. You can select the sections, the sequence  in which you want to show them. Refer attach screen shot.

15. How to Import Dummy Data?

If you want the exact replica of our demo site than  import  the dummy data. Below find the steps to import it.

Step 1-  Go to => http://webriti.com/themes/dummydata/

First you need to download and extract  the XML file. Click Here (After clicked on link you can find quality-parallax.zip file).

Step 2-  Go to => WP-Menu => Tools => Import => WordPress =>

• On the Import screen, click on WordPress and a new popup window will appear asking you to install the WordPress importer plugin. After installing and activating the plugin, you will be redirected to the importer asking you to upload a WXR (.xml) file.
• Upload the XML file you downloaded earlier. Then click on the Upload and file import button and select the checkbox Download and import file attachments and click on submit button. It will take some time to import XML file.  If everything goes well than you will get  a message will as  “Have fun!” Click here to read more about the import process.

Step 3-  Go to => WP-Menu => Pages => All Pages => Edit Page by the name “Home”

You need to select a Home Page Parallax Template then click on the Update button. Refer attach screen shot.

Step 4-  Go to => WP-Menu => Appearance => Menus

The Dummy Import data will give you the set of links which you need to run the parallax template. You can change the label for sure but do not edit href of the links. Here you need to check on Primary Menu then click on Save. Refer attach screen shot.

Step 5- Go to => WP-Menu => Settings=> Reading and make Home Page as front page of your site.

Here, you can set your page as front page. Refer attach screen shot.