The one pager: what is it? | How do you make that?

17 Apr 2022 | web design

jochem oomen | hoe one pager maken | Foto: Sander de Wilde

Sometimes you come across simple websites of one page at most that give you brief and concise information about a company. Such a site is called a one pager. These often look stylish and simple, but quite a bit of time can creep into making them. This article will give you answers to the questions “what is one pager” and “how to make one pager”.

As the word suggests, these are websites that consist of one page, namely a home page. On this page you will find the sections that you also find on a regular website: for example, about us, services or offerings, contact and reviews. So normally with a website you see that reflected on different pages, with the one pager it’s all on the homepage. With the one pager, you find out a lot on one page: often it is fairly long. Click here for an example of a one pager I made recently.

In addition to the word one pager, the term microsite is also in circulation. This is actually not the same as a one pager: a microsite is often part of a larger entity and may have a separate domain name. For example, the youth news website Bruzzket a microsite of the Brussels regional broadcaster Bruzz.

Advantages and disadvantages of the one-pager

Back to the one pager: should you consider making one, know well what you are getting into. Do you care about being found in Google? Then the one pager is not the most suitable option. You would be better off choosing a traditional website. In fact, single-page websites are less likely to be found by Google, simply because less content is created than a regular multi-page website. One way to address this is to publish a blog attached to your one pager.

In addition, in many cases you’re going to have to use code to make your one pager’s menu work. Fortunately, you can find a lot about that online. Below, I’ll explain how you can create your own beautiful one pager in the popular WordPress theme and builder Divi. Because let’s face it, beyond those drawbacks, a one pager is quite stylish. So that is a great advantage to this. Just like your visitor can find out all kinds of things about your business very quickly.

By the way, Divi theme and builder is one of my favorite tools. Curious about more? Discover my favorite tools for both web design and photography here.

How to create one pager in Divi?

If you do want to get started, you can find the step-by-step plan here. This roadmap is for Divi and this theme and this builder I can wholeheartedly recommend to create a one-page website. What you see is what you get: this theme works super visually, you see what you are doing all the time and you can also design the mobile version of your site right away.

Here we go. We begin with the general part:

  1. Register your domain name and buy your hosting.
  2. Install WordPress on your control panel, which is the back end of your website.
  3. Purchase a Divi license from Elegant Themes: either pay per year or pay life time access. And I can tell you from personal experience that that is a super good deal!
  4. Download the Divi theme and builder. You will receive a ZIP file.
  5. You upload this as a theme and activate it.
  6. Make this a child theme with, for example, the plugin Generate Child Theme, which is a plugin that works fine. You create a child theme for security: should anything change about your main theme (Divi in this case), your website will remain operational and accessible.

See, this was the general work. Now we get more specific:

  1. Create your own theme: click on Divi’s D in your WordPress dashboard and select “Divi builder.” This is where you create a header (top of website, which often consists of a logo and a menu) and a footer (bottom of website, which contains general information with credits) to begin with. Here you can read how to create a header in Divi. You don’t have to create the menu right away, you can leave that on default for a while.
  2. Once you have created your header and footer, you can start creating the body. That is the middle section of a web page. So this body will be our one pager. Click “body” and then click “build from scratch” again. We are going to start our one pager from a blank page.
  3. Good to know: Divi works with sections, rows and modules. Sections are large areas that contain rows and modules. The sections are going to be very important to have our menu referenced. So create sections now for the parts you definitely want on your website: for example, home page (the top part of your one pager), about me, services or offerings, reviews and contact.
  4. Once you have created these sections, then you go on to design them: using row you determine the layout for each section. You may want to subdivide it into columns: you can arrange that here. Then you add your texts and images and other things. You do that with modules. You will now continue to build your sections, rows and modules so that everything looks good. Feel free to search tutorials on YouTube for further information.
  5. Now that everything is created, we are going to link it to our menu. For each section, we are going to add CSS ID. That is code language to add extra. You can find this by pressing the cog in the section. Then open the “advanced” tab and add CSS ID. You can very easily use the same title as that of the section: so home page, about me, services, reviews and contact. Add that per section. Caution: avoid spaces and punctuation, otherwise the code may not work or may not work properly.
  6. Now that we’ve done this we’ll go out of Divi and into “menus” in the “theme customizer.” You can easily get there from the WordPress dashboard on the left or from the buttons that appear above your website.
  7. Once the back end of the menu opens up, we can add the CSS ID via “custom link.” You enter #homepage at the URL, which you can make appear at link text “Home.” Do the same for #overme, #services, #reviews and #contact. Adding the hashtags makes the code language do its job. Also, don’t forget to keep pressing “add to menu.” Furthermore, you can also change the order of your menu in this menu by clicking and dragging.
  8. Ready? Check that everything works. And have your one pager well checked by family, friends, colleagues or acquaintances before sharing it with the world.

What about additional content like a privacy statement?

Want to keep it really simple? Then you can add the legally required privacy statement as a pdf to your website. From your footer, you can link to that. Or you could still create a new page that you don’t put in your menu, but links to it from your footer.

I wish you good luck making a one pager!

And what do you prefer to see? A one pager or rather a traditional website consisting of multiple pages? And why?

This article contains an affiliate link. Look here for more information.

About Jochem

I am Jochem Oomen, web designer and photographer. My goal is to help sustainable entrepreneurs, organizations and schools gain more customers, participants or students. I do this through sustainable web design and minimalist photography. Read more about me here.

Did you find this article interesting? Share it via the buttons on social media!

Read more here

How to create a sustainable website?

Did you know that the Internet is one of the biggest polluters on the planet? And that websites have high energy consumption? So time to make your own website more sustainable. In this article you can read how to create a sustainable website yourself. Why are websites polluting?"If the...

How to photograph sustainably | 10 tips

Did you know that there is such a thing as sustainable photography? In fact, as a photographer, you can reduce your carbon footprint. But sustainable photography, how do you do that? You'll read about it in this article. Why is photography not always so sustainable?Since the arrival of...

Why opt for Ecosia?

With every online search you leave an ecological footprint. At green search engine Ecosia, this is compensated. Because, while you search, new trees are planted. How does this work? And why should you choose Ecosia? You'll read about it in this article.Why are search engines polluting?The...

error: Content is protected !!

Pin It on Pinterest

Share This