One Page Scroll WordPress theme manual
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
- 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.
- 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.
- Upload the Theme files to the new directory on your host server.
- 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.
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 )
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.
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)
Go to Appearance > Menus to create a menu, we name it One Page Menu.
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.
You can use this method to add menu items for every section.
You can also add links for other pages, for example , blog.
Finally, check the Home Page Sidebar Menu and click Save Menu to save the menu.
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.
Now open Home Page, you will see the result as the following screenshot.
If you want to set up a customized static front page, go to Appearance > Theme Options > Home page > Enable Featured Homepage to uncheck thecheckbox.
If you want to use the Blog list as Home Page, go to Settings > Reading > Front page displays, select Your latest posts.
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.
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 )
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.
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.
Step 3: Assign the menu to a Theme location, then save menu.
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.