Documentation

For a quick overview on creating a parallax effect and using core Five3 features, watch the welcome video below.

The rest of the articles provide more in-depth instructions for creating a beautiful parallax website with WordPress and the Five3 theme.

There is an article with instructions for changing the colour & typography on your site, setting a post’s alignment, adding background images to posts in order to create the parallax effect and finally, instructions for adding custom CSS and PHP code to Five3.

If you have a question not answered here, please use the forums or the contact form.

Loading

Create Parallax

parallax |ˈparəˌlaks|
the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.

Five3 adds a hint of magic to your site with the parallax effect.

Parallax refers to background images scrolling more slowly than the page content. This creates the illusion of depth on the page. For example, notice the clouds moving more slowly than the statue of liberty on this page?

To use parallax on your own site, simply add a background and/or overlay image to a post.

Five3 provides 3 levels of depth – background, overlay and content. Post content sits in the foreground. An image can be set to sit in the background and/or the space between the background and the content, referred to as the overlay.

For an example, refer to the freedom feature page where the blue sky and clouds are in the background and the statue of liberty is the overlay.

Setting Images

Set parallax images on the Edit Post screen.

To set an image, click the Set Background Image or Set Overlay Image link in the appropriate meta box. The media overlay will pop-up with the Post Backgrounds tab selected.

All images in your media library display in this tab. To set an image, click the Overlay or Background link under the Set Image as: heading.

The image will immediately be set as the background or overlay. No need to update or save the post.

Post Backgrounds Media Tab

Post Backgrounds Media Tab

Loading

Set Post Alignment

Variety is the spice of life and post alignment is one of the five-spices of Five3.

Being able to move a post to the left, center or right of the screen means you can use full-screen background images that have their objects positioned in the left or right of frame. Combining different alignments on a page adds another layer of motion to your site and when done well, can create the feeling that your content is dancing up the screen.

Choosing Alignment

On the Edit Post and Edit Page screen, Five3 adds an options meta box. Included within this meta box is the Post alignment option. To set your post alignment, simply choose left, center, right or full width. To save the new post alignment, you must update the post.

Post Alignment Metabox Screenshot

Loading

Include Child Pages

Want a parallax scrolling page that includes all of your pages?

Five3 makes it easy, and you’re about to learn how.

But before you continue, if you’re new to WordPress or you aren’t familiar with all the features of Pages in WordPress, head over to the WordPress Codex and have a read of the comprehensive guide to WordPress Pages. The rest of this article assumes you know all the intricacies of WordPress Pages.

Now that you know all there is to know about Pages, let’s learn how to make a parallax index page in Five3.

Custom Templates

Five3 provides two custom page templates: the Index of all Pages template & the Current Page & its Children template.

The first of these will display all pages on your site on the one page. The second will display the current page and all of its subpages. You can learn more about creating subpages in the organising pages section of the WordPress Codex.

To use one of these custom templates, choose it in the Page Attributes metabox on the Edit Page administration screen. For example, check out the Five3 Features page which uses the Current Page & its Children template.

Ordering Pages

Now you have an index of pages, but how do you customise the order of the pages?

Five3 works with WordPress’s built in Page Order feature. Notice that Order section in the page attributes screenshot above? Changing the number in that section will change the location a page appears in your page index.

To have a page appear last, set the order to a high number, like 100. To have a page appear first, keep its order value at 0.

When using the Current Page & its Children template, the parent page will always appear at the top and the child pages will appear in order from smallest order number to largest order number. When using the Index of all Pages template, you can set any page to appear at the top by giving it the lowest order value.

Loading

Set Color & Typeface

Colour and typography are fundamental to any well designed site. Five3 gives you a front-end Visual Designer to make it fast and fun to choose your site’s colour and typeface.The Visual Designer will help you experiment with different styles and find the look that suits your site.

Using the Visual Designer

Toolbar Option on Profile Page Screenshot

Step 0

To access the Visual Designer, you must first have the Toolbar set to display when viewing your site. To toggle the Toolbar on and off, visit the Users > Your Profile menu page.

Design Button on the Admin Bar Screenshot

Step 1

Once the Admin Bar is visible, click the “Design” button on the front-end of your site.

Visual Designer Screenshot

Step 2

A new box will appear with a text field for colour & selection of typefaces – this is Five3′s Visual Designer.

Screenshot of Colour Selection on the Visual Designer

Step 3

Select a colour, either by clicking the colour wheel or entering a hexadecimal colour value.

Screenshot of Typeface selection box

Step 4

Select your typeface – change it as often as you like and have fun seeing your site with different typefaces.

Using the Theme Options Page

Theme Options Administration Menu Page Screenshot

If you do not want the Admin Bar showing on your site, you can use the less fun, but equally effective Theme Optionspage.Find the Theme Options page under the Appearance menu in your site’s administration dashboard.

The Theme Options page will only show if you do not have the Admin Bar showing on your site. To keep things simple, Five3 hides this options page when the Admin Bar is set to display.

Loading

Custom CSS and PHP Code

You may from time to time want to change how Five3 performs a certain task, or add something extra to Five3. There are two methods to extend Five3 – child themes & code snippets.

Child Themes

The absolute best option for customising Five3 is to create a child theme. You can learn more about child themes in the WordPress codex’s excellent article on creating a child theme.

Once you understand the concept of a Child Theme, the quickest way to create one is to use the One-Click Child Theme plugin.

If you edit Five3 files instead of creating a child theme, you will not be able to easily upgrade to new versions of Five3, which are released regularly with bug fixes, performance improvements and new features. It is strongly recommended that you invest the time to create a child theme from the start to save huge amount of time in the future.

Code Snippets

If you only want to add or change a single function, you can create a separate file for custom code without modifying core Five3 files.

To add code snippets:

  1. Create a file in the five3.me directory named custom-functions.php (this file does not exist by default, you need to create it)
  2. Add your code snippets to this file.
  3. Voilà, Five3 will include this file automatically.

Five3 will load the custom-functions.php file before its own functions.php. You can override core Five3 functions without editing a Five3 file by including a function by the same name in your custom-functions.php file.

When you upgrade Five3, remember to back-up your custom-functions.php to make sure you do not lose it.

Custom CSS

Although a child theme is preferred, if you only want to add a few small style modifications to Five3, you can use custom CSS.

To add custom CSS to Five3, you can either use the WordPress.com Custom CSS plugin or add a new custom.css file under Five3′s /css/ directory, for example /five3/css/custom.css.

Using the WordPress.com Custom CSS plugin avoids the possibility of having your custom.css file being lost when upgrading Five3; however, the plugin does not permit all CSS selectors and styles.

Loading

Creating a Hover Sub-menu

WordPress makes it easy to create multi-level menus with its built in Menu system.

Five3 takes advantage of this system for creating hover Sub-menu in the header.

Five3 Hover Sub-menu

Five3 Hover Sub-menu

Creating a Sub-menu

The WordPress menu editor provides a ‘drag and drop’ interface. To change the order of an item in your menu, drag the menu items up or down. To create sub-levels within a menu, drag a menu item left or right under a parent menu item.

Here are some more details instructions

WordPress Menu Page

The Menu Screen

  1. Position the mouse over a child menu item.
  2. Holding down the left mouse button, drag the child menu item to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button in the Menu Editor to save your changes.
Loading

Add Intra-page Links to the Top Menu

If you have created a parallax scrolling page index, you’ll see Five3 automatically generates an intra-page menu for navigating vertically between sections on the page. This menu includes smooth scrolling and it generates the URLs for each section automatically.

Screenshot of Five3's Intra-page Vertical Navigation Menu

But what if you want to add similar links in the menu displayed at the top of the page?

Custom Menu Links

When creating your site’s menu with WordPress, you can add a link to a post/page, category or other built in URL. None of these would work for intra-page linking because we need to include an anchor in the URL. Fortunately, WordPress also allows us to add a Custom Link.

Screenshot of WordPress Custom Links Metabox on Edit Menu Screen

Using a custom link, you can add a URL to a section within a page using an index template. For example, to link to the Beautiful Typography section of the Features page, we can use the URL https://five3.me/features/#beautiful-typography in a custom link. Five3 will add the smooth intra-page scrolling automatically.

Notice the last piece of the URL that comes after the hash (#)? That is the anchor of the section within the page. You don’t need to know HTML to find this anchor. Just click a link in the automatically generated vertical navigation menu and Five3 will automatically put the anchor in your web browser’s address bar. You can copy the entire URL shown in the address bar to be used as the custom link.

Intra-page Links in Content

You can also add these URLs as a link within page content, and Five3 will take care of the smooth scrolling for those links also. Just like this link which will smoothly scroll you to the top of the page.

Loading