Blog

How to make single page website using Elementor & WordPress

A single page website is a website containing one and only one HTML page. There are no additional pages involved. Single page websites are easy to design and easy to navigate. In this blog, we will show you how to make single page website using Elementor and WordPress.

Why do you need a single page website

Single page websites are made to deliver the exact amount of information to the readers. All the information is loaded on the initial page, making it easy for visitors to see all they need to see. The top menu bar will move the readable screen to the corresponding section of the site. So, it is easy to navigate and easy to read content on a single page website. Because there isn’t any other page involved, visitors can enjoy a continuous reading experience.

Developers design single page website in WordPress for minimal websites like portfolios, cooking site, specific information site, poster sites, etc. Single page websites has some pros and cons. The good side about it is-

  • Single page website is easy to digest
  • It provides a linear navigation flow to the readers
  • It is a good practice to increase the conversion rate
  • Highly mobile responsive and relatively faster loading speed

The downside about single page website is-

  • Single page sites are not good for SEO ranking
  • It is not suitable for growing brands or big industries
  • You can’t link your social media sites or google analytics to it

So, considering the pros and cons, creating a single page website using Elementor and WordPress is best for small scale direct-read websites. Although there are facts about everything, it is you in the end to choose.

Make single page website using Elementor & WordPress instantly

In this blog, we will be direct about the process of making a single page website using Elementor and WordPress. In this case, we assume that you already know the basics of designing a page on your own. But for your concern, we have created such tutorial blogs already. So, we will add those links below.

Let’s head to the main part.

Create and design your single page website

Single page website using Elementor & WordPress

First, create a blank page from your dashboard with a title you like. Make sure that, the Template option is showing Blank Page from the page settings.

Single page website

Now, design your page using widgets from the widget menu on the right side. This section is the hero section that your visitors will see first. We made it using a couple of widgets like Advanced Heading, Advanced Button, and Video Player. In this case, we have used widgets from Element Pack and Elementor. Of course, a good website definitely needs good tools. So, we made our single page website using Elementor and WordPress. Let’s have a couple of insights about Element Pack quickly.

Element Pack – Elementor’s most favorite add-on for designing custom website

Element Pack - single page website using Elementor & WordPress

Element Pack is the most optimized add-on based on the WordPress Elementor plugin for creating your premium website. 

It has a vast inventory ready to be deployed on your website. Also, With 100+ plugins, 140+ ready to use pages, over 1000 unique blocks, Element Pack has made it to the position of Top 6 worldwide.

What every successful website designer wishes for is premium and optimized tools. And Element Pack responds confidently to that wish. So, don’t hesitate too much and make a run for it!

Now, let’s finish up our website design. Element Pack has quite a number of useful widgets so, we won’t be needing much from Elementor itself except the Inner Section widget. Let’s place our minds into the design.

feature section

Below the hero section, the use of a feature section is a common thing. So, we have made similar setup as trends follow. In this case, the Fancy Slider widget from Element pack is all you need.

fancy slider

One of the most fantastic thing about the widget by Element Pack is, you will get tonnes of options for customization. You can make anything as far as you can imagine. So, finish up the single page website real quick using Elementor & WordPress.

Finalizing the settings

This is the main part of a single page website and that is to link sections to the navigation menu. See carefully what we are about to show you.

ingle page website using elementor & wordpress

For this part, click on the section settings icon and open the settings window. Here, on the Advanced tab, name your section from the CSS ID. We have named all our sections according to their features. However, naming is only for marking advantage and you can name anything you want. This setting is crucial for making a single page website using Elementor & WordPress.

Finalizing settings

Now comes the last part. Create a suitable header for your site. We have used the Scroll Navigation widget for the menu part. On the widget settings, you will see a menu list. From there, name your menu according to your section. Next, open each menu item and change things as below-

  • Give a suitable title from the New Title option
  • Insert the link for the section which would be in this format- yourwebsite.com/your-one-page/#section
  • Add ‘#‘ on at the end of the link, before the section CSS ID
  • Save and refresh

That’s it.

one page website

Now, you will have a single page website that has an inner-section linked menu. You can publish it right now or add more features to it.

Conclusion

Single page websites are easy to make. Just because the application it provides is limited, people often stick to multi-page websites. But the truth is, both of them have places to suit. This blog aims to let you know how you can do this yourself.

Visit this page for a full guide of designing a website from scratch.

This blog is brought to you by Prime Slider, the leading ready-to-deploy Slider for Header in Elementor.

Thank you for reading this blog.


Leave a Reply

Your email address will not be published.

*


Made with love by

bdthemes | Built with Rooten Theme & Elementor.