Tag: 3d single page

  • Home
  • /Posts Tagged ' 3d single page '

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 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.

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.

  • 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 – 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 )
  • Design Options – click the Design options tab and add a Background Image or Color ( example #ffd300 )
  • Click Save changes and Close
  • 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.

    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.

    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.

  • Animate Type – Choose the Animate Type – let’s use 3d Vertical for this example
  • Bullet Navigation – enabling this option will