Hosting Tutorial & Guide

How and Why to Make a One-Page Website with WordPress

updated on Mar 03, 2015
How and Why to Make a One-Page Website with WordPress One-page web design refers to a website that only includes one page covering all content on the site. Visitors just need to scroll down the page and browse new information without jumping to other pages. And now, one-page site is recognized as a handy way to run a business and won warm praise by people running a small website consisting of few pages.

Since one-page website has been well received by more and more webmasters, you may wonder how to showcase all web content on one page and whether it is a great method to develop a website. To remove doubts, we would like to show you the way on how to make a one-page website and the benefits of doing so.

Why Make a One-Page Website

If you feel uncertain whether it is necessary to shape your website into a single page, a guide on the benefits of one-page design is shown to you upon several useful methods that are used to reach the target. Let's get started to have a rough idea on what a one-page site should be and when to enable it for your business.

Easy to Create & Manage
Single-page website is a boon for webmasters who neither wish to give a lot of care to create multiple pages nor plan to publish too much content on the site. That is to say, if you are running a small site consisting of a scanty few pages, making an one-page website can help you save a lot of trouble as well as show your visitors all information as planned.

Besides, if there is something wrong with your web page, you are able to seek it out at a glance rather than rummage through piles of pages to do so. Even for beginners, they are able to take full control of such a simple design with minimum effort.

Intuitive & Open-and-Shut
Intuitive Web Design In most cases, multifarious web pages make people out of patience because no one is willing to dig out a piece of information from a large heap of pages. Since single-page website enables visitors to search for any information on an open-and-shut page by scrolling down the slider, the one-page design is a solid option for you to enable great user experience for your visitors.

Note that, because all content is collected in one page, you are required to place a navigation bar on your website conspicuously. In this way, people are able to target anything as needed by searching the item via navigation.

Essential & SEO-Friendly
As we all know, Google has released Panda 4.1 algorithm on September 21, 2014 to punish websites which include a large amount of low-quality web content. The one-page design forces you to leave out any unnecessary details; instead, all content published on your website is essential and readable. Namely, you have to take a good use of the limited resource to showcase the essence of your site. In this way, you will never become a member of the punished. Undoubtedly, this is a good method to rank higher on the search engines.

Storytelling & Compelling
One-page website is just like a storybook, whose content is all linked with one another. Given that your web content is eye-catching enough, visitors are more likely to move on to the following information so as to arouse their interests. Honestly, it is a great method to reduce bounce rate and improve public praise.

Budget-Friendly
Budget-Friendly Choice Since one-page website forces you to leave out unnecessary information and only includes some essential details, it takes a fraction of resources to start up and develop. In this case, you just need to host your single-page website with a primary WordPress solution at affordable price instead of doing so with an advanced and costly one. There are some WordPress hosting providers releasing various cost-effective solutions for you, which are listed at the end of this article.

If you have seen the benefits of making one-page site through, you may eager to shape your multi-page into a one-page design right now. The following guide briefs you on two methods to this end, including the use of one-page theme and coding stuff.

Make a One-Page with a One-Page Theme

WordPress enables a large number of premium themes for users to create a unique and fascinating website. You bet this great site building platform can provide you with a bunch of beautiful one-page themes. Here, we would like to show you the first method to make a one-page design with WordPress theme. Note that, the selected theme is SinglePage, which is responsive and flexible.

Before everything, make sure that you have installed WordPress on your website and kept it running well. If everything is ready, you should log into WordPress dashboard > Appearance > Themes > Add New. Search for SinglePage and "Install" this theme right now. And then, activate SinglePage to make it work for your website availably.

Install SinglePage Theme

As we can see on the sample page, there are several sections included in a sidebar on the left available for you to zone the website. And also, this is where to showcase your menu bar. In this case, visitors are able to turn to the next section via the navigation or scroll down the slider on the right page.

SinglePage Sample

The SinglePage theme leaves you enough room to customize the appearance of your website. Go to Appearance > Customize to make some changes to your web design. There are several options available for you, including the ones shown in the following screenshot.

Cusotmize SinglePage Theme

Firstly, you are required to give your website a proper site title and tagline to make a first impression. The second mode called "Colors" is where to set the header text color and background color. Give those colors a try and make a subtle blend of various options. Besides, the "Header Image" option allows you to add a new header image to describe your website in a vivid way while the "Background Image" mode helps you create a unique web page by setting a fascinating background image.

You can add a menu to the homepage via "Navigation" option, which enables you to select a menu from the drop-down list or hide the active menu if needed. The last option is "Static Front Page", which is used to determine how to display the front page and that includes two choices.

Since you have complete those basic settings, you are required to customize all sections on the website one by one via Appearance > Theme Options > Home Page. You are allowed to customize the section menu title, content typography, background, background image width, Css Class, Content Image, and so on. Customize the given options one by one and make your website out of the ordinary. Finally, "Save Options" to confirm all settings.

Users Contact Info

Note that, the left three tabs included in the Theme Options interface are used to modify the basic settings, footer and typography. Take a good use of them according to personal needs. In addition to SinglePage theme, there are many other premium options available for creating an attractive one-page website, such as Divi, One Page, Onetake, and so on. If the SinglePage theme cannot satisfy your needs, you can turn to other recommended options at your own sweet will.

Take a Good Use of Coding Stuff

If the use of WordPress one-page theme is not a solid option for you, then the following methods can help you a lot. Here, we are going to introduce to you the way on how to create one-page website with HTML code, CSS and JQuery. You just need to copy and paste the given code to your web page and modify certain parameters according to personal needs.

HTML
Since navigation is an essential part of a one-page website and plays an important role in giving visitors right direction, we are going to show you the way on how to create a navigation bar at first. Note that, the following code is designed for this end.

<div id="nav">
     <ul>
         <li><a href="#section1">Section 1</a></li>
         <li><a href="#section2">Section 2</a></li>
         <li><a href="#section3">Section 3</a></li>
	 <li><a href="#section4">Section 4</a></li>
         <li><a href="#section5">Section 5</a></li>
     </ul>
</div>


You are allowed to include as many items as needed in the navigation bar. Each item is directed to a certain section with the help of href="#" and should be come with a proper name. For example, the code mentioned above enables 5 sections for your website.

And then, to showcase the newly created sections on one page and direct each of them to certain page, you should refer to the following code. Note that, you should insert the id that has been filled in the navigation.

<div id="page1">
  <a id="section1"></a>
    Section 1 content goes here.
</div>

<div id="page2">
  <a id="section2"></a>
    Section 2 content goes here.
</div>

<div id="page3">
  <a id="section3"></a>
    Section 3 content goes here.
</div>

<div id="page4">
  <a id="section4"></a>
    Section 4 content goes here.
</div>

<div id="page5">
  <a id="section5"></a>
    Section 5 content goes here.
</div>


CSS
The use of CSS also requires you to add specific code to your website. Firstly, the following code helps you add a header image and the navigation logo, which allows you to adjust the image size and make the navigation work for your site properly. You can upload any image as needed and copy & paste the image URL to the url section.

#nav 
{ 
    width: 410px; 
    float: right; 
    margin-top: 20px; 
}

#logo a 
{
    color: #fff; 
    text-decoration: none; 
    float: left; 
    font-size: 30px; 
    margin-top: 20px; 
    color: #fff; 
    font-family: "Wellfleet"; font-weight: bold; 
}

#nav ul
{
    list-style: none;
    display: block;
    margin: 0 auto;
    list-style: none;
}
 
#nav li
{
    margin-top: 9px;
    float: left;
    padding-left: 21px;
}
 
#nav li a 
{
    color: #fff; 
    opacity:0.6; 
    font-size: 16px; 
    text-decoration: none; 
    font-family: 'Wellfleet'; 
}

#nav li a.active 
{
    color: #fff;
    opacity:1;
    border-bottom: 2px solid #fff; 
}

#nav li a:hover 
{
    color: #fff; 
    opacity:1;  
}


And then, make some changes to each slide. Since we are going to create 5 sections on our one-page website, then there are 5 slides should be included in the following code. What's more, the code below enables you to customize the background image, color and size according to personal needs. Replace certain parameters if needed and make sure that all commands work well on your site.

#section1
{
    width: 100%;
    background:url('../img/slide1.jpg') 50% 0 no-repeat fixed;
    color: #fff;
    height: 600px;
    margin: 0;
    padding: 200px 0 260px 0;
    background-size: cover;
}
 
#section2
{
    width: 100%;
    background-color: #fff;
    color: #333333;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    padding: 200px 0;
}
 
#section3
{
    width: 100%;
    background: url(../img/slide3.jpg) 50% 0 no-repeat fixed;
    color: #fff;
    height: 600px;
    padding: 170px 0 0 0;
    background-size: cover;
}
 
#section4
{
    width: 100%;
    background-color: #fff;
    color: #333333;
    height: 300px;
    padding: 200px 0;
}
 
#section5
{
    width: 100%;
    background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
    height: 200px;
    margin: 0 auto;
    padding: 250px 0;
    color: #fff;
    background-size: cover;
}


JQuery
JQuery is also a good option to enable smooth scroll-up and scroll-down for your single-page website. Make a full use of such long code, which helps you create a one-page site without paying too much effort. There is no need to enable a jquery file on the website as well as no need to add anything to the header.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(".contactLink").click(function()
    {
        if ($("#contactForm").is(":hidden"))
        {
            $("#contactForm").slideDown("slow");
        }
        else
        {
            $("#contactForm").slideUp("slow");
        }
    });
});

function closeForm()
{
    $("#messageSent").show("slow");
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() 
{
    function filterPath(string) 
    {
        return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
    }

    $('a[href*=#]').each(function() 
    {
        if (filterPath(location.pathname) == filterPath(this.pathname)
            && location.hostname == this.hostname
            && this.hash.replace(/#/,'')) 
        {
            var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
            if ($target) 
            {
                var targetOffset = $target.offset().top;
                $(this).click(function() 
                {
                    $('html, body').animate({scrollTop: targetOffset}, 1000);
                    var d = document.createElement("div");
                    d.style.height = "101%";
                    d.style.overflow = "hidden";
                    document.body.appendChild(d);
                    window.scrollTo(0,scrollToM);
                    setTimeout(function() { d.parentNode.removeChild(d); }, 10);
                    return false;
                });
            }
        }
    });
});
</script>


Maybe now, you have had a rough idea on how to make a one-page website by means of the above methods. For the readers lacking understanding of coding stuff, the use of WordPress one-page theme is a great way to go. However, if you have known a lot about coding and wish to give it a try, then the use of coding stuff is created for you.

Best WordPress Hosting Company

Developing a one-page with WordPress is a great choice for people who seek after an easy way to achieve the goal and look for limitless possibilities. Since you have not determined which WordPress hosting company should go or plan to turn to a new provider, then we recommend the following choices which are fully tested by our editors.