One Page Scroll WordPress theme manual

Installation

1. Manually upload the theme zip file

  • Download the theme zip file from https://www.hoothemes.com/themes/one-page-scroll.html
  • Go to Appearance > Themes and click Add New.
  • Click Upload Theme.
  • Click Choose File  button and choose the file you just downloaded, then click Install Now.
  • Once it is installed, click Activate.

2. Installation via FTP

  1. Download the Theme archive and extract the files it contains. You may need to preserve the directory structure in the archive when extracting these files.
  2. Using an FTP client to access your host web server, create a directory to save your Theme in the wp-content/themes directory provided by WordPress. For example, the Theme named One Page Scroll should be in wp-content/themes/One Page Scroll. Your Theme may provide this directory as part of the archive.
  3. Upload the Theme files to the new directory on your host server.
  4.  Select the Active Theme(One Page Scroll Theme) for your site.
  • Log in to the WordPress Administration Panels.
  • Select the Appearancepanel, then Themes.
  • From the Themes panel, roll over the Theme thumbnail image for the Theme you are interested in to see      options for that theme.
  • You can view more information about any theme by clicking Theme Details.
  • A live preview of any Theme (using your blog’s content) can be seen by clicking Live Preview.
  • To activate the One Page Scroll Theme click the Activate.

Header Settings

1. Upload Logo and Favicon
Go to Appearance > Theme Options > Basic Settings to upload logo and favicon.(The recommended size of the logo is 260*90 px )

20150628223454

2. Header Title &Tagline
Go to Appearance > Header to set your Header title and tagline.

3. Header Image
Go to Appearance > Header to add an Header image by click Add New Image button.(The recommended size is 1690*250 px)

Setup Home Page Sections

Go to Appearance > Theme Options > Home Page, first select Enable Featured Homepage, then select the numbers of sections. (As you see in the picture, we select 4) Now, you can set up  sections 1-4.

one-page-scroll-1

Section ID: Set up a unique ID for each section, the ID can be used to set up homepage sidebar menu to scroll to                                pages. (See : Creating Menus)

Section Title: Name the title of the section and it will display above the section.

Section Sub-title: Name the sub-title and it will display under the section title.

Section Title Typography: Select font and color for the section title.

Section Sub-Title Typography: Select font and color for the section sub-title.

Section Content Typography: Select font and color for section content.

Section Background: Select color for background images and background color.

Section Css Class: Type the name of Section Css Class.

Section Content: Type the content.

Once every sections are set up, click on  save options button.

Create Featured Home Page (use home page template – PRO version)

step 1: Add a new page

20150920173626

step 2: add section content

20150920173810

step 3: set section ID

20150920174057

20150920174215

step 4 : select Home Page template

20150920174329

step 5: Select Nav Menu

20150920174422

step 6: Create custom menu ( go to Appearance > Menus)

20150920174826

step 7: Setup custom menu ( selected in step 5 )

20150920174944

Setup Menus

Go to Appearance > Menus to create a menu, we name it One Page Menu.

20150328161327

Upfold Links and add links for scrolling menus of Home page, fill in #section ID in URL,(The Section ID here is the Section ID we set up earlier in Section Options from Appearance > Theme Options > Home Page > section X) then click Add to Menu.

A menu item is created successfully.

20150328162706

You can use this method to add menu items for every section.

20150328162723

You can also add links for other pages, for example , blog.

20150328162755

Finally, check the Home Page Sidebar Menu and click Save Menu to save the menu.

20150328162807

 

Static Front Page Settings

First, create two pages and title them Home and Blog, leave the content blank.

Then go to Settings > Reading > Front page displays, select A static page(select below), then select Home for Front Page and Blog for Posts Page. At last, click Save Change button.

20150328163537

Now open Home Page, you will see the result as the following screenshot.

20150328163019

If you want to set up a customized static front page, go to Appearance > Theme Options > Home page > Enable Featured Homepage to uncheck thecheckbox.

20150328163956

If you want to use the Blog list as Home Page, go to Settings > Reading > Front page displays, select Your latest posts.

20150328164133

HTML5 Video Background

Go to Appearance > Theme Options > Homepage, there is an HTML5 Video Background Options, unfold it and we will see the pictures like below.

20150505203735

20150505203821

There are three types of videos for you to choose to play in your site, the thing you need to do is just to type in the video url. Make sure your video format is the above format, if not, you need to convert your video to MP4, ogv or webm video format.

Also, you can choose the Video Background Sections you like to display the video for your site.

Home Page Style Template ( Pro )

Demo Page: http://demo.hoosoft.com/one-page-scroll-pro/home-page-1/

Step 1: Add a new page, using shortcode -> section to wrap the content and set a unique section id for each section, select “Page Attributes/Template” to “Home Page”, publish page.

20160117161854

Step 2: Create menu for this page. Navagate to “Customize/Menus“, click “Add a Menu”, type in the “New menu name” and click “Create Menu”.
In the menu editing option, click “Add Items”, choose the “Custom Links”.
In the URL, type in “#section-id“. Don’t forget the “#“! Notice the menu only work on the onepage site, it would not work if you are on other pages. You could add your page url before the “#section-id”, like “http://your-page-url/#section-id”, but it will not have the onepage scroll effect.

20160117163358

Step 3: Assign the menu to a Theme location, then save menu.

20160117163543

Step 4: Return to the page you just created, scroll down to “Page Meta Box” -> General Options -> Select Nav Menu, select the theme location which has been assigned in Step 3, then update the page.

20160117165601