Creating a One Page Website

Updated on January 12, 2018

One page websites are one of the state-of-the-art functionalities available in our themes. A one page website is designed in such a way that menu items link to sections of the same page, and clicking on menu items will trigger an animation which will scroll page down or up to the section of the page which is set as the content section of that link. To see a live demo of One Page Website in KEN please click here.


Preparing the One Page Website Page

To have a one-page website you need to add a special page which will act as your main and only page of the website. Please follow the steps below to add such a page:

1Add a New Page.  

Goto Main Dashboard Menu > Pages > Add New, to add a page which will be your one-page website.

2Add a Title.  

Add a title for the page.

one page website

3Add Page Section.  

Use Visual Composer tool to add Page Section shortcode by clicking on the + (plus) icon, and searching for Page Section.

One Page website Page Section Add

4Add Section ID.  

Click on the pencil icon of the Page Section shortcode to view Page Section Options. Find the Section ID option and add your desired ID for this section. For example: “contact” (exclude quotation marks).

One Page website Section ID

5Add Row.  

Alternatively, you can add a Row shortcode instead of a Page Section in step 3. Use Visual Composer tool to add Row shortcode by clicking on + (plus) icon, and searching Row.

One Page website Row Add

6Add Row ID.  

If you add a Row on your page instead of Section ID in step 4, you will need to add a Row ID instead. Click on pencil icon of Row shortcode to view Row Options. Find the Row ID option and add your desired ID for this section. For example: “about” (exclude quotation marks).

One Page website Row ID

7Repeat steps above.  

Repeat steps above to add all the section for which you want to have menu items. Then add your content inside those sections, whether those are Page Sections or Rows.

8Publish the Page.  

Use the Publish metabox at the top right section of the screen to publish your page.

One Page website Publish

9Set the page as homepage.  

Go to Main Dashboard Menu > Settings > Reading, set the homepage options to a static page and select the page which you published in previous step.

One Page website Homepage

Preparing One-Page Menu

The last step to finalize a One-Page Website is to add a proper menu. To do this, follow the steps below:

1Add a Menu.  

Go to Main Dashboard -> Appearance -> Menus.

One Page website Menu Add 1

Then click on the Create a New menu link to add a completely new menu for your website.

One Page website Menu Add 2

After that add a name for your menu and click on Create Menu button

One Page website Menu Add 3

2Add New Menu Items.  

Now use the left side meta box to add menu items. You need to use the Custom Link meta box and your menu item URLs should be like this: “#contact” (a hash followed by a lowercase word, exclude quotation marks). Repeat this step to add all of your menu items.

One Page website Menu Link 1

3Set Menu Location.  

In the bottom of the screen you will see an option to set menu location. Select the Primary Navigation checkbox.

One Page website Menu Link 2

4Done! 

That’s it! Now you have a One-Page Website.

How to Create Anchor Links

Besides the ability to have a One Page website, Jupiter and The Ken have the ability to have anchor links set for an individual page despite it being a One Page website or not. The following is an example of adding an Anchor to the same page:

1Add a New Page.  

Go to WordPress Admin Menu > Pages > New Page and add a new page.

2Add a Section.  

Use the Viusal Composer page builder to add a Page Section element and add whatever content you like to be linked to. In the options of the Page Section shortcode add a unique Section ID, in our case we add destination. For more information click here.

3Add an Anchor Link.  

one page website Anchor

Using the Visual Composer page builder add a Text Block shortcode, inside the options of the text block you will see the standard WordPress editor. Write the text of the link you want. For our example we add Go To Destination. Select the text you added and click on the Anchor icon of the WordPress Editor. Then add the link you want. You either can add the complete URL of a page or website or add the Section ID mentioned in step 2. To add the Section ID here you need to add a # prefix to the Section ID, the final added link should look like this: #destination.

one page website Anchor

4Check the Result.  

Now that you linked an anchor to a page section, upon clicking on the link, page will go to the destination page section.

Did this answer your question?