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:
Goto Main Dashboard Menu > Pages > Add New, to add a page which will be your one-page website.
Add a title for the page.
Use Visual Composer tool to add Page Section shortcode by clicking on the + (plus) icon, and searching for Page Section.
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).
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.
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).
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.
Use the Publish metabox at the top right section of the screen to publish your page.
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.
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:
Go to Main Dashboard -> Appearance -> Menus.
Then click on the Create a New menu link to add a completely new menu for your website.
After that add a name for your menu and click on Create Menu button
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.
In the bottom of the screen you will see an option to set menu location. Select the Primary Navigation checkbox.
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:
Go to WordPress Admin Menu > Pages > New Page and add a new page.
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.
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.
Now that you linked an anchor to a page section, upon clicking on the link, page will go to the destination page section.
