How To Create One-Page Website

Last Updated on

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 Jupiter please click here.

In this article


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:

1
Add a New Page.  

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

2
Add a Title.  

Add a title for the page.

One Page Add Title

3
Add Page Section.  

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

One Page Page Section Add

4
Add 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).

x
Beware! Please keep the ID as simple as possible. Use only lowercase letters and avoid using non-english characters.

One Page Section ID

5
Add 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 Row Add

6
Add 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).

x
Beware! Please keep the ID as simple as possible. Use only lowercase letters and avoid use of non-english characters.

One Page Row ID

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

8
Publish the Page.  

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

One Page Publish

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

x
Note: Please also set the post’s page option to blank.

One Page 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:

1
Add a Menu.  

Go to Main Dashboard -> Appearance -> Menus.

One Page Menu Add 1

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

One Page Menu Add 2

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

One Page Menu Add 3

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

x
Note: If you use the one page system, it is not recommended that you have other pages on your website.. But if you wish to do so, you need to add your links like this: https://www.yourwebsite.com/#contact

One Page Menu Link 1

3
Set Menu Location.  

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

One Pge Menu Link 2

4
Done! 

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

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

1
Add a New Page.  

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

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

3
Add an Anchor Link.  

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.

Anchor

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket