How to Create a One Page

Learn how to create One Page sites easily, including 3d pages.

Creating a "One Page" Video Tutorial

Learn how to create a One Page site using this video tutorial.

Creating a "One Page" Site

Creating_a_One_Page_Site.png

Creating a One-Page is very simple, using the Visual Composer, each Row you add to the page will act as a Slide / Page ( depending on how you want to describe it ). In this example, we’re going to create 3 Rows ( Slides ).

If you want ready made One-Page content, it’s recommended to import one of the demos that use a One Page setup.

To create one from scratch – ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

STEP 1.

STEP_1-5.png

Create Row ( Slide ) 1
Go ahead and create the first Row – if you’re not sure on how to add Rows, check out the Using Rows section.

  1. Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  2. Anchor Link Name – this option is important for the Menu later on in the section, enter intro for the first slide ( this needs to be a unique name to describe the Slide )
  3. Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  4. Click Save changes and Close
  5. Add some content within the Row e.g. Text Block element e.g. Slide 1 ( You can add more content later once the setup is complete )

STEP 2.

Create Row ( Slide ) 2
Go ahead and create the second Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter services for the second slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #E0E0E0 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 2

STEP 3.

STEP_3-5.png

Create Row ( Slide ) 3
Go ahead and create the third Row. The same process as STEP 1. – this time we need to enter a different Anchor Link Name and add a Different Background Color

  • Row Height If you’re creating a Normal One-Page ( Not 3d or Snap Single Page ), you’ll need to set the Row Height to 100%, otherwise set this to Default
  • Anchor Link Name – enter contactus for the last slide
  • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  • Add some content to the Row e.g. Text Block element e.g. Slide 3

As long as we’ve kept the Row Height as default, it should look similar to the diagram above.

Once we’re happy with the content, click Update and then click the Backend Editor button

STEP 4.

STEP_4-3.png

Choose what Type of Singe Page
Now we’re back in the Backend Editor, scroll down to the bottom of the Page and goto the Single Page tab.

  1. Animate Type – Choose the Animate Type – let’s use 3d Vertical for this example
  2. Bullet Navigation – enabling this option will show Bullet point icons to navigate through the Slides ( Does not work with Normal )
  3. Directional Navigation – If you’re having trouble with the visibility of the Directional Navigation, use the Icon + Background ( Only in rare circumstances is it recommended to disable them ).

STEP 5.

STEP_5-2.png

Configure the Header
To configure the Header, there are a number of options we can use to setup the page. For this example we’ll keep it simple and not make many changes, but I’ve provided some information about each option that’s relevant.

  1. Click the Layout tab
  2. If we’re not going to use a Menu or Logo, we can choose to disable the Header using this option
  3. If you’re using any of the Horizontal Animate Types, I’d recommend setting the Sticky Header option to Off
  4. Set the Horizontal Layout of the Logo & Menu for this page ( For a Horizontal layout like the Restaurant demo – use Menu Center + Logo Center )
  5. Set the Vertical Layout for the Logo & Menu for this page ( For a Header layout like the Restaurant demo – use Middle + 100% )
  6. If we want to change the Logo and Margin position for this Page only, we can use these fields to set the Margin values of the Logo and Menu
  7. Set the Floating Header option to Float + Transparent ( For a Header layout like the Restaurant demo – use Float + Transparent ) Please Note: Only set this option to Float or Float + Transparent if you want First Row ( Slide ) to have a Header Floating Over it.

STEP 6.

STEP_6_1.png

Create a Menu
Although a Menu is not essential, we’ll create one for this example.

To create a Menu, follow this guide:

  • Save the current page
  • Goto WordPress Admin > Appearance > Customize > Menus
  • Click Add a Menu button
  • Give the Menu a name e.g. One-Page
  • Click Create Menu
  • Once it’s created, assign the Menu to a location i.e. Main Navigation
  • Click Add Items
  • Click Custom Links and do the following for each Slide you’ve created:

            1. Enter the URL using the # character and the Anchor Link Name we assigned earlier. e.g. #contactus
            2. Enter the Link Text – this is the name that appears on the Menu e.g. Contact us
            3. Click Add to Menu
            

  • Click Save & Publish

STEP 6.

STEP_6-2.png

Assign the Menu
Once the Menu has been created, go back to the Single Page you’ve created.

  • Scroll down to the Page Option tabs
  • Locate and click the Layout tab again ( See STEP 5. )
  • Scroll down to the Menu option and select the menu you’ve just created e.g. One-Page

STEP 7.

STEP_7-3.png

Disable the Title & Breadcrumbs
It’s rare the Title & Breadcrumbs will be needed and in this example we’re going to disable them.

  1. Click the General tab
  2. Set the Display Title to Disable
  3. Set the Breadcrumbs to Disable

That’s it, we can now Save the page and checkout the result.

Finished Example

Finished_Example-2.png