How to create a one-page website in WordPress with Rise Blocks

You will get exposure when you manage your business in online space. But what if you are just starting your business or doing freelancing jobs? or you have your close circle of clients? Managing the website, in this scenario, may not be logical and might be expensive. Thus, it sounds good to create a one-page website. So, what’s a one-page website? Let’s learn the key term.

One-page website

The one-page website is a website with just a homepage with all necessary sections. There are pros and cons of using a one-page website but it’s a good practice if you are running a new business or the clients are your close circle.

The important aspect while making a one-page WordPress website is a visually appealing WordPress theme and minimalistic Gutenberg Blocks. On installation of the latest WordPress, we get default blocks but they still lack functionality and layouts. Hence, you can install a Gutenberg Block plugin to enhance the beauty of your website. You can try themes from Rise Themes and Rise Blocks. They both are developed with minimalistic in mind. So, you are free from unwanted and unused codes.

Rise Blocks, a minimalistic Gutenberg blocks

With Rise Blocks, you can create multiple elegant layouts for your website. Since it is minimalistic and lightweight, you don’t have to deal with unwanted codes. Therefore, it helps to increase page speed and reduce bounce rate.

How to create a one-page website in WordPress

We believe you know how to install WordPress CMS, activate the WordPress theme and Rise Blocks plugin. If you are uncertain then you can follow this documentation to install Rise Blocks.

With the setup, follow these steps to create a beautiful single-page website.

Note: Please read an earlier article to learn how to create a custom homepage in WordPress as a single-page website has only one page which is a custom homepage.

Design your homepage with Rise Blocks

Here are the possible sections for your homepage.

Banner image section: People tend to scroll as the webpage loads. Hence, the above-the-fold section needs to be attractive and informative. You can display a banner with an awesome image with heading to attract the people. Section block equipped with the Advanced Heading block will help you to get the banner image section.

About section: It’s where you share about your business or yourself if you are a freelancer. It is important as the client seeks information about the business before they opt-in specific service. You can use Advanced Heading block along with Paragraph block to display information.

Services section: This section displays the services you provide for your client. You can use Icon Boxes block along with Advanced Heading block for the section title. It’s better to provide additional information on the description section.

Call to action section: This is a crucial section as it helps to motivate your client to contact you and get additional information on the services. You can use Call to Action block to get attractive section

Portfolio section: Through this section, people will find out your past works. It also helps to develop trust in your services. As online trust is crucial to get leads, you need to be cautious about how you portray your works. You can use Profile Cards block with Advanced Heading to display the section title. With the label feature available on Profile Cards block, you can categorize your works.

Review section: Reviews from your client is another factor that helps to develop online trust for possible clients. You can use Profile cards block along with Advanced Heading to display reviews.

Contact and social media section: Lastly, you need a contact section for further communication. You can use Advanced Heading block and paragraph block for contact details. Additionally, you can use Social Links block to display your social media links.

A Quick Tip: If you insert the above-mentioned blocks in a section block for all sections, you can do additional customization. 

Note: Rise Blocks documentation covers all information on blocks. So, please follow the guide to learn the steps to implement the blocks for an awesome layout for your website. You can also import the demo layout and then make necessary changes.

How to create a header menu for a single-page website

To create a Header menu, we should know what anchor and anchor links are. An anchor is a destination when anchor links are clicked. Anchors links are normal links that start with # character along with id assigned to the anchor. Hence, our anchors will be at the individual section title while anchor links will be in the header menu.

For example,

Anchor link - <a href="#about">About us</a>
Anchor - <h2 id="about">About us</h2>

Advanced Heading block has section id, so we don’t need to insert it manually. Just copy the section title and the id associated with it to create the header menu. You can follow these steps to get the id associated with the section title.

1. Click on the specific section title.
2. You will find three horizontal dots in the Block toolbar.
3. Click the dots and then find Edit as HTML.

4. Copy id associated with this section title, separately.

5. Do this for all sections.

You have the section title and id associated with it. Now, let’s create a header menu for navigation.

1. Hover on Appearance found on the left sidebar.
2. Find the menu and click on it

3. If you can’t find any menu to select then you can create a new menu. or
4. If there is a primary menu then you can select and edit it.

5. Name the menu and hit the create menu button.

5. Click on custom links available on the left side.
6. Add section title on the link text and section id that you copied on the URL. Then, click on the Add to Menu button. Do it for all the sections.

7. Now, set display location to primary and then click on the save menu to save it.

8. You now have a single-page website for your business.

Conclusion

With this article, you understood what is a one-page website? and when to use it. Additionally, you also learned how to create a one-page website in WordPress using Rise Blocks. Additionally, you can add smooth scrolling, sticky header, and a top button for visually appealing. If you stumble upon any issue while creating a one-page website or have any questions regarding Rise Blocks, feel free to leave a comment in the section below.