How to Create a One-page WordPress Website (10 min)

A one-page web site is a website with only one web page which the consumer can scroll by means of. A variety of one-page web sites nonetheless have a main menu. People can click on on the menu objects, however as a substitute of going to one other web page, they go to one other part on the identical web page. We already confirmed you ways to make a web site, however on this article, we’re going to present you ways to create a one-pager with WordPress!

The advantages

A one-page web site may be a good resolution when you’re in search of one thing quick. One-pagers have many benefits, for instance, the location doesn’t have to reload to get to one other part. Users can simply navigate between sections and discover what they need quick. With a one-page web site, you even have management over what order individuals see your content material. You might want to present all the advantages of your services or products first and on the finish present them the pricing, or perhaps the opposite method round.

Excellent resolution for small websites

The one-pager is right for websites that simply have to give a little details about every topic. Let’s say you could have six principal objects you need to speak about every with one or two paragraphs. If you divide this content material over six totally different pages, it might give the impression that your website is underdone.

Image-driven

Most one-page web sites use a lot of related photographs. Dividing these photos over totally different pages with only one picture on each can once more give the impression your website is a little bit underdone. As you may think about a one-page web site with totally different photographs related to every topic which the consumer scrolls by means of offers a method higher feeling.

Better cellular expertise

One-page web sites usually have a superb cell phone expertise as the location doesn’t have to reload after each web page transition. People can discover what they want on any system quick, and it’s not even a downside in the event that they disconnect while in your web site. Since the web page is already loaded, they are going to nonetheless give you the chance to go to the totally different sections. This method your website may even really feel like a cellular app as a substitute of a regular web site. As a matter of reality, there are apps within the App Store that use this technique.

When not to use a one-page web site

If you’re serving large quantities of content material, it might make your one-pager very lengthy and arduous to scroll by means of.

Creating a one-page web site with WordPress

If you assume a one-page web site is for you, then learn on. After this, it is possible for you to to create your very personal one-page web site.

Disclosure: FirstSiteGuide is supported by our readers. When you buy through hyperlinks on our website we could earn a fee. We check and check out all of the merchandise that we advocate. 

Setting up WordPress

Even if you’re not accustomed to WordPress and organising servers, don’t get scared. Getting your own hosting plan with preinstalled WordPress will take simply a jiffy of your time. But even earlier than that, you may arrange a native server with XAMPP and check out creating your one-page website with out spending a penny.

Yes, creating a native server has its advantages, but when that is your first time listening to about XAMPP, put together your self for a bit longer means of getting it prepared for WordPress. Still, when you comply with the steps we ready for you, you shouldn’t have any issues, and you can begin working in your personal WordPress set up in underneath fifteen minutes.

How to arrange XAMPP for Windows and set up WordPress

Before getting your arms soiled, it is best to know what XAMMP is within the first place. XAMPP stands for Cross-Platform (X), Apache (A), MariaDB (M), PHP (P), and Perl (P). It is a free distribution of software program that helps you run your personal personal servers. It incorporates server utility, database, and scripting language that you just want to set up WordPress efficiently. Usually, servers run by XAMPP are used for testing functions, as a way to freely follow your internet design expertise with out having to pay for internet hosting or letting everybody see your web site playground.

How to set up XAMPP for Windows

Now, let’s cease with the idea, and let me present you ways to arrange all the factor. Although the Cross-Platform a part of the identify signifies that the software program works on Linux and Mac computer systems as nicely, at present we’re going to give attention to Windows:

1. Go to Apache Friends website
2. Download the most recent model by clicking the button and put it aside to your laptop
3. Run the installer when downloaded
4. On the welcoming display screen, click on Next

On the subsequent display screen, the setup will ask you to choose the elements you need to set up. You can depart all the pieces as is and set up all elements. But when you simply need a fundamental WordPress set up, it will likely be sufficient to depart MySQL and phpMyAdmin choices chosen. Just in case you develop the necessity for every other part sooner or later, it is possible for you to to add ones afterward by means of the Control Panel. For the needs of this tutorial, you may uncheck all different choices as you gained’t want them for creating the one-page web site.

1. Choose a folder the place you need to set up XAMPP. It may be any folder you need, and you’ll depart the default one as nicely. Just keep in mind its location
2. On the subsequent display screen, uncheck “Learn more about Bitnami for XAMPP” possibility as a result of you’ll set up WordPress manually
3. Click Next

Now give the installer a few moments to switch all of the recordsdata and arrange the surroundings that you’ll use on your WordPress website. After a few seconds, the installer will unpack all the pieces and end the set up.

1. Leave the “Do you want to start Control Panel” possibility checked
2. Click Next

Hopefully, all the pieces went with out issues. If so, it is best to see the Control Panel opened with none crimson textual content exhibiting errors. You also needs to see that Apache and MySQL are marked in inexperienced which implies they’re up and operating. To examine in case your server is operating high quality, go to your browser and go to this URL: http://localhost.

If all the pieces is okay, it is best to see a easy internet web page welcoming you to XAMPP for Windows. If the web page has loaded, you may cease holding your breath as a result of that signifies that XAMPP is ready up appropriately and which you can transfer on to the set up of WordPress.

Unfortunately, different purposes that you just may need operating in your private laptop could intrude with XAMPP. For instance, Skype is understood for having issues with XAMPP so when you’re experiencing points, attempt shutting it down after which attempt to open the XAMPP Control Panel. Sometimes, it will likely be vital to open up a few ports for XAMPP to work appropriately, however sadly, that’s a entire different area and we will’t cowl all the pieces on this tutorial.

How to set up WordPress utilizing XAMPP

Alright. We can have to assume that you’ve the surroundings prepared. Now it’s time to set up WordPress in your native machine as a way to log in and begin constructing your one-pager. For starters, you want to create a database that WordPress makes use of to retailer all the knowledge:

1. Open XAMPP Control Panel
2. Click the Admin button within the MySQL part. This will open a new window with phpMyAdmin
3. Choose Databases tab on the top-left menu
4. Enter the identify on your database, for instance, WordPress
5. Click Create button

This half wasn’t that demanding, proper? You can now shut the browser window and put together for the subsequent step.

1. Download the most recent model of WordPress
2. Go to the XAMPP folder (the folder the place you put in XAMPP from the earlier steps)
3. Open the folder and navigate to htdocs folder
4. Unzip WordPress archive there

You ought to find yourself having a new WordPress folder within the htdocs folder. You can rename this folder to something you need. This may also be the a part of the handle of your native set up. For the needs of this tutorial, let’s name it WordPress which can open your website from http://localhost/wordpress. It doesn’t actually matter what identify you utilize, so be at liberty to change it to your liking.

1. Open that folder and discover wp-config-sample.php file
2. Rename it to wp-config.php
3. Open the file and discover the half with the details about MySQL settings (take a take a look at the screenshot)
4. Replace”database_name_here” with the identify of your database, which in my case is “WordPress”
5. Replace “username_here” with “root” and depart “password_here” empty
6. Save the file and shut it

Finally, you’re prepared to conclude the set up course of. Please open your browser and navigate to http://localhost/wordpress (or change the identify when you’ve got used one other one for the WordPress folder whenever you extracted it). WordPress will now ask you for the language which you want to choose. After that, click on the Continue button. Then enter the username and password particulars, and click on Install WordPress.

This is it! You can now lastly log into your check website and begin working in your first one-page web site. The first step will likely be selecting a theme.

Picking a theme

You can use any theme for a one-page web site. For this instance, We’ll be utilizing the free SiteOrigin North theme that may be discovered within the WordPress theme repository. Go to Appearance -> Themes -> Add New in your WordPress dashboard and kind in “SiteOrigin North”. It needs to be on the prime of the checklist now.

It’s a easy, however nicely designed, responsive theme that additionally works very nicely with BigCommerce and WooCommerce. It’s made by the builders of the web page builder plugin we’re going to use for the location on this instance. Again, be at liberty to use one other theme; the transition results whenever you click on a menu merchandise will work both method. We advise you to use a theme that has a sticky menu, so your website’s guests gained’t have to scroll to the highest of the web page once more to click on on a menu merchandise that brings them to a totally different part.

The plugins

Most necessary for creating one-page web sites are the plugins you utilize. We’re going to set up a web page builder named SiteOrigin and a widget extension for this plugin. Both are utterly free and hosted within the WordPress plugin repository. Go to Plugins -> Add New in your WordPress website’s dashboard and kind in web page builder by website origin. The plugin will seem on the prime of the checklist, set up and activate it. You can set up the widgets bundle plugin on the identical display screen, sort in siteorigin widgets bundle within the plugin finder. Make positive each plugins are activated.

Since model 2.3 of this web page builder, they added the one-page web site scroll characteristic. This is what we want to get the web site scrolling every time somebody clicks on a menu merchandise with the ID of a row as “href” attribute (hyperlink). We’ll clarify how this works later within the tutorial.

Start constructing!

Now you could have the plugins activated, and we’re prepared to construct our web page. First, add a new web page or edit a web page. Go to the tabs on the prime of the web page editor and click on on the newly added “Page Builder” tab.

SiteOrigin Page builder has many presets, so we gained’t want to construct a whole design from scratch. You’ll see some buttons above the web page editor, certainly one of them is the “Layouts” button, click on it.

You’ll now see a display screen with all types of layouts; these are the presets you should utilize. You may also import and export layouts, however we don’t assume you could have these but. For this instance we’ll decide the “Fitness Gym” design, in fact, you may decide any design you need or begin from scratch. Click on the chosen design and click on the Insert button within the backside proper nook. If you already had content material on the web page, you may select to insert it earlier than or after the content material or change it altogether. For us, it doesn’t matter since we have now an empty web page.

Go forward, save the web page and go to it. If all the pieces went proper, we might add our IDs. Switch to the “Live editor” mode by clicking on the hyperlink within the WordPress admin bar on the prime of the web page you simply created.

When you hover over the weather in your website, you may see precisely which widget represents which ingredient. Go to the primary row after the SiteOrigin hero on the prime, click on on the instrument icon, and edit row. On this display screen, go to “Attributes” and add your row ID. We’re going to give ours an ID of “activities”.

Give each row a totally different, distinctive ID. When you’re achieved, save the web page.

Configuring your menu

We’re not achieved but. We now have to create our menu objects, so when a consumer clicks on one of many objects, the web page navigates to that particular part of your website. Go forward and create a new menu in Appearance -> Menus in your WordPress dashboard. We’re solely going to create customized hyperlinks on this menu. In the picture beneath I’m creating one for the row I simply added the “activities” ID to.

You see that the URL of the customized hyperlink is now the identical because the ID of the row ingredient. SiteOrigin web page builder is programmed to acknowledge this and can know that it has to scroll to the required part.

My consequence

Congratulations! We’re achieved already, now you can construct your very personal personalised one-page web site straightforward and quick with simply two plugins and any theme. It will hold your website quick and really user-friendly. Building this website took us lower than an hour, it’s the simplest and quickest method we discovered to construct a stunning one-page web site. The smartest thing is that it’s free.

The fact is that organising your personal testing surroundings with XAMPP could take time and burn a few mind cells when you’re doing it for the primary time, however you’ll shortly be taught to admire the native server that may run WordPress. Then, simply by having two plugins and a theme of your alternative, even full learners will likely be ready to create their very own one-page web site.

If you could have adopted all of the steps from this tutorial, you should have no issues, and your one-pager needs to be up and operating properly. Once you efficiently create the web page, you can begin upgrading it and customizing it to your liking. Don’t overlook to examine our different WordPress articles and tutorials that may allow you to form your website in any method potential.