How to Build a One-Page Website with WordPress (Step-by-Step)


Not every website needs a ton of pages and posts. In fact, with a clear focus, a one-page website may be sufficient for many use cases.

If you don’t have much experience building websites, creating your own single-page website is relatively simple, even without coding skills or a big budget. In this post, you’ll not only learn whether this format is right for you but also how to set one up using WordPress.com.

What is a one-page website?

As the name suggests, a single-page website consists of just one page containing all the important content.

A one page website for life coaching with Ava Reed with different sections for things like a podcast and a contact form
The CoachAva theme

Unlike traditional websites that divide content across multiple pages, a one-page site delivers all the information in a continuous experience. In order to do so, each section—like About, Services, Portfolio, Testimonials, and Contact—is arranged logically, guiding visitors from start to finish. Visitors can learn who you are, what you do, and how to contact you simply by scrolling.

Benefits of single-page websites

There are many good reasons for using a one-page website.

The first is simplicity. A one-page website reduces overwhelm, not just for you as the site owner but also for visitors who want information without having to click around to find it. Having only one page keeps your site simple and focused, without unnecessary clutter or complexity.

One-page websites are also a great option for simplifying the design process, especially if you’re building the site yourself. It eliminates the hassle of managing several subpages with different layouts and content types, and the content on single-page websites tends to be static, requiring minimal maintenance. 

Additionally, a singular page makes it easier to guide visitors toward a specific action—and they’re already in the right place for it. Everything on the page acts as reinforcement to nudge them to take whatever action you want them to take. This also makes a single-page design perfect for landing pages.

A one-page design is also an easy way to make your site mobile-friendly since you’ll only need to optimize one page. On small screens, scrolling is easier and more natural than tapping through menus.

Finally, one-page websites tend to load more quickly. They have fewer files and less content to download, and their simple architecture makes them easier to optimize. This is also great for SEO since website performance and its effect on user experience are both ranking factors.

Typical use cases for one-page websites

You can use one-page websites for many purposes. At the same time, there are a few types of websites that are especially suitable for this design approach.

Resume sites

The Luce theme

A one-page website allows employers to get an overview of your qualifications and experience quickly and in logical order. Plus, a resume site has a clear goal: get in touch. You can make this easy by including a contact form or contact information at the end of the page.

Business sites

A green and white website for The Stitchery with images of crocheted animals
The Stitchery theme

Businesses can also effectively use one-page websites. A shorter, more streamlined format allows you to highlight your company, services, testimonials, and contact information one after the other. This is a great way to provide a clear overview and desired action.

Portfolio sites

Similarly, freelancers and creators may want to use this simplified website design. On a one-page website, you can showcase your work and services in a smooth, uninterrupted layout.

Visitors can view your projects, read about what you offer, and contact you—all without clicking away from your one and only page. The scrollable design keeps people engaged and focused on what’s most important.

An interior design website theme with a red Work with me button at the top
The Margarethe theme

Personal sites

As a personal website, a one-page layout gives you just enough space to share who you are and what you’re about. You can include a short bio, links to your social media profiles, and a few highlights or fun facts in a simple, elegant format.

This layout makes your site approachable, easy to maintain, and ideal if you want an online presence without the pressure of running a full website. We have a detailed guide on how to build a personal website if you are looking for help in this area.

A simple black and white website with a black and white image of a woman
The Tú theme

Wedding sites

Organizing a wedding is stressful enough on its own; a wedding website shouldn’t add to the stress. A one-page layout keeps the focus on all important details, like the date, venue, and RSVP form.

A wedding website with a pink background and an image of two women in the top-right
The Blissed theme

Guests won’t have to click through multiple pages to find necessary information, and the simple structure makes it easier for you to share updates with your attendees.

Why use WordPress to build your one-page website?

There are endless ways to create a one-page website, but one of the best solutions is WordPress due to its ease of use, flexibility, and customizability.

WordPress offers a wide selection of mobile-friendly themes, many of which are designed to support one-page layouts and even come with pre-made design patterns. This gives you a great place to start.

A screenshot of the WordPress.com theme repository

The WordPress block editor also makes it easy to build out each section—like About, Services, or Contact—by simply adding and arranging blocks. Without writing any code, you can input text, images, videos, social media icons, contact forms, and other page elements. You have control over your site’s design and structure and can customize every section to match your brand.

A screenshot of the WordPress editor and the interface

There’s also the extensive plugin directory that lets you extend the functionality of your site. One-page websites may not need plugins due to their simplicity, but they’re available should you want to use them.

How to create a one-page website

Now that we’ve covered the theory, let’s discuss how to build a one-page website step by step.

1. Choose a theme

Themes determine the overall look of your website. They contain styling information like fonts, colors, and dimensions, allowing you to change your design with just a click.

Two websites side-by-side showing content about productivity with two different themes
Same website, different themes

You can simply search the WordPress.com theme directory for themes with one-page capabilities. Access it from your website dashboard via Appearance → Themes. All themes you’ll find in the repository are mobile-ready by default.

An orange arrow and box highlighting a search for 'one page' under Appearance > Themes in the WordPress dashboard

Click on any theme to learn more about and preview it. You can use the Styles buttons to try out any available design variations.

An orange arrow pointing from a style variation to the updated theme preview window on WordPress.com for the CoachAva theme

Click the Preview button to see the theme in full-screen and test its design on tablet and phone screens.

An orange box around the Phone preview drop-down menu for a WordPress.com theme

Use Try and Customize to preview the design with your existing page content and try out changes in the WordPress Customizer. You can activate the theme from here, complete with any changes you’ve made.

The Previewing page on WordPress.com for the CoachAva theme

Alternatively, activate it from the Themes menu via the Activate button.

An orange arrow pointing to the blue Activate button on the CoachAva theme page on WordPress.com

If you are on a WordPress.com Business plan or above, you can upload and install third-party one-page themes by clicking Install new theme and then Upload theme.

An orange arrow pointing to the Install new theme button on the WordPress.com themes page

2. Determine which sections your site needs

Planning out your content before you start writing makes building your one-page website easier. Make a list of the key sections and information your visitors will expect to see. Common examples include:

  • Hero section (intro)
  • About
  • Services
  • Testimonials
  • Portfolio or Gallery
  • Contact

The exact content you need depends on your use case and goals, and you should arrange your sections in the order that makes the most sense for guiding your visitors toward your main call to action. Keep the number of sections manageable; too many can make the page feel overwhelming or cluttered, especially on mobile.

To create wireframes before you start building, you can use tools like Figma, Miro, Google Docs, or even a simple pen and paper.

3. Add your copy, images, and design elements

Once you have a plan, start building your site section by section. There are two ways to do this in WordPress.

The first is to go to Pages → Add New and build your content from scratch using the Page Editor.

The page editor page with the CoachAva theme activated on WordPress.com

Another route is to use the pre-configured layout many one-page themes ship with and simply adjust it to your needs. This happens in the Site Editor under Appearance → Editor and is a great way to learn how to put together layouts in WordPress.

A preconfigured blog home template on WordPress.com

Though the two editing experiences differ slightly in what you can accomplish with them, they work in basically the same way. Both use blocks as their basic design elements, and headings, paragraphs, images, buttons, and other page components are all separate blocks (find a full list here).

You can add new blocks via the Block Inserter (the big “plus” button in the upper left corner) and then by clicking on the names of blocks to add them to the page.

Orange arrows pointing to the image block and the block in the page editor on WordPress.com

Alternatively, click in an empty line and use the Add block button that appears (the small “+” button). Search for a block name and click to insert it.

An orange arrow pointing to the + add block button in the WordPress editor

Even easier, type a forward slash (“/”) and the name of the block you want to use from the list.

A screenshot the letters '/ima' and the block selector in WordPress

In addition, you can adjust block styling and functionality via the options that appear in the top bar and editor sidebar when a block is active.

Orange arrows pointing to the image block options and settings on WordPress

Use the Styles menu (the half-black, half-white circle icon) to configure basic styling options for your website, such as default fonts, colors, and backgrounds.

An orange arrow and box highlighting the Styles menu on WordPress

Add block patterns with the Block Inserter (via the Patterns tab). These are combinations of blocks for different purposes, like about and contact sections, testimonials, and more. They allow you to create entire parts of your page with a single click.

An orange arrow and boxes highlighting the Patterns tab in the block inserter

Finally, via the Media tab, you can input royalty-free images from Openverse and Pexels, complete with attribution. Just enter a search term and click on a result you like.

An arrow showing how to insert an Operverse or Pexels photo for free into your WordPress.com page or post

Once satisfied, publish your changes via the Save/Publish button.

An orange arrow and box highlighting the blue Publish button on WordPress.com

By the way, if you built a new layout from scratch with the Page Editor, you still need to set the new page as your front page. 

For that, go to Settings → Reading. At the top, under Your homepage displays, switch to A static page. Pick the page you just created from the drop-down menu under Homepage, and save it at the bottom.

An arrow showing how to select a new page as your homepage on WordPress

4. Consider using a plugin to add scrolling animations

Scrolling animations can add polish and personality to your one-page site. They are especially helpful when you’re using anchor links to jump between sections (see next point) to make the transition feel less abrupt. You can also use animations, for example, to have page elements like images or calls to action appear smoothly.

Some themes include basic animation options; otherwise, if you are on a WordPress.com Business plan or above, you can add them via plugins. There are several options in the plugin directory that you can access via the Plugins menu. Simply search for “scroll animation.”

A search for scroll animations in the WordPress.com plugin marketplace

Click on a plugin that interests you, then on Install and activate to get it onto your site.

After that, it’s a matter of configuring the animations. Some will work automatically, and others need to be configured.

5. Set up anchor links and jump links in your navigation

One-page websites rely on link jumps to move users between sections of the same page. Since there are no other pages to visit, links in the navigation point to anchor points on the main page. These links include a hash symbol (“#”) followed by the anchor name in page URLs, like so:

https://wordpress.com/blog/2025/01/29/how-to-make-a-website/#give-your-website-a-voice

To add an anchor, click on the block you want to jump to. This should usually be a Group block or similar layout element. Use the Document Overview in the top left to see the page structure.

An orange arrow and box highlighting the document overview button on WordPress

Once active, in the Settings sidebar, open the Advanced section. Under HTML Anchor, type a unique ID, such as contact or about (just the word, without the # symbol). If you want your anchor to have multiple words, use hyphens (like about-me). Save the changes.

An orange arrow and box highlighting the HTML anchor box in the WordPress page editor for a group block

You need to link to your anchor from the Navigation block next. It’s usually located in the header.

An orange arrow pointing to the navigation block with the document overview window open on WordPress

Alternatively, you can edit your currently active header via Appearance → Editor → Patterns → Header.

The Appearance > Editor > Patterns > Header page on WordPress

Click the Navigation block (again, open the document overview to make it easier), and then add a new menu item or edit an existing one. In the Label field, enter what you want the link to say (e.g., “Contact”). In the Link field, type the anchor name with a # in front, like #contact.

An orange arrow and box pointing to the custom link block settings for link and text

Save your changes and go to your homepage. When you now click on a menu item, it should move down to that section (with smooth scrolling, if you’ve implemented it). Be sure that your menu adheres to the same order as your page sections.

6. Customize your footer

On a one-page site, the footer plays an important role—it’s where visitors often look for closing details or quick links, such as:

  • Copyright notice
  • Social media icons
  • Contact information
  • Secondary navigation links
  • Newsletter signup forms
  • Privacy policy or terms links

You can edit the footer in the Site Editor the same way as the header. It’s also in the Patterns menu under Footer. Add any blocks you need, for example, a second Navigation block that allows visitors to jump back to earlier sections or a link to your privacy policy.

Note that any changes you make here will appear across your site (even if you’re only using one page), so keep the design clean and consistent.

7. Include a contact form (if your site needs one)

On a one-page website, it’s common to place the form near the bottom of the page, just above the footer or in a dedicated “Contact” section. On WordPress.com, you can add a contact form using the Form block. Add it to your page and choose a form type to start with (e.g., Contact Form).

An orange arrow and box pointing to a secondary menu in the WordPress template editor

Use the block toolbar and settings in the sidebar to customize your form. Add or remove fields, edit field labels, configure the message for form submissions, and specify the address to send notifications to.

An orange arrow and box highlighting the contact form via the WordPress.com Form block

8. Add social icons with the Social Icons Block

Adding social icons makes it easy for visitors to find and follow you on other platforms. They are a great fit for the footer or the “About” section of your one-page website. 

Use the Social Icons block, then click the plus icon to search for the social network you want to link to.

The Social Icons block on WordPress

Click on the icon and paste your profile URL into the link field. This turns the icon into a clickable link.

A screenshot of a bluesky URL inserting a bluesky icon into a WordPress template

Repeat this process until you have added all of your important social profiles. Use the block settings to adjust alignment, icon size, and whether the links open in a new tab.

An orange box and arrow highlighting how to change the styling of the WordPress social icon block

Save your page to make your changes.

9. Write and optimize your title tag

Your website’s title tag is what appears in search engine results and browser tabs. It helps potential visitors understand what your site offers at a glance and is often the first impression people have of your website.

An orange box around the title tag in search results

For one-page websites, the title tag is especially important because you only get one page; you don’t have multiple pages to target different keywords or messages.

Go to Settings → General and update the Site Title field to edit your title tag.

An orange box around the site title setting in WordPress

You might also want to customize the tagline if it will be part of your title tag. You can customize the title format for your homepage and the rest of your site under Tools → Marketing → Traffic.

The Tools > Marketing > Traffic page showing configurable SEO formats on WordPress.com

You also have the possibility to customize your front page’s meta description, which is the snippet that can appear under search results, and preview how it will appear in search results and on social networks.

The front page meta description area in SEO settings on WordPress.com

You can also do this with an SEO plugin like Yoast SEO on plugin-enabled plans.

Additional considerations for one-page websites

Besides the benefits already covered, one-page websites also come with a few limitations to keep in mind as you plan and build.

  • SEO challenges: Unlike multi-page websites, you don’t have internal linking to help search engines understand your content better. With only one title tag and limited keyword opportunities, it’s even more important to be clear and focused with SEO efforts. Consider using well-structured headings, concise content sections, and alt text for images to improve your chances of ranking.
  • Scrolling fatigue: If your page is too long, visitors might lose interest or miss key information while scrolling. Keep your layout concise and break up content visually using clear sections, white space, and strong headings.
  • Limited growth opportunities: One-page sites work best for focused, minimal content. If you later want to add more details, products, or blog posts, you may need to redesign your site or convert to a multi-page layout.
  • Tracking user engagement: With everything on one page, it’s harder to know which sections users interact with most. If you’re on a WordPress.com Business plan or above, you can connect your site to Google Analytics and track custom events to monitor scroll depth, button clicks, or form submissions to alleviate this difficulty.

Use one-page websites the right way

One-page websites offer a focused, user-friendly way to share your content—whether you’re building a portfolio, business site, or personal landing page.

While they have some limitations, it’s important to remember that restricting yourself to one page isn’t about doing less; it’s about doing only what matters. When space is limited, your message needs to become sharper, your design more purposeful, and your site more engaging.

Ready to build your own? Get started with WordPress.com and bring your vision to life.



Source link

  • Related Posts

    Add Custom Domains and HTTPS Support to Your Local WordPress Development with Studio

    WordPress Studio continues to evolve with features that make local WordPress development more powerful and flexible. In Studio version 1.3.9, you now have custom domains and HTTPS (SSL) support. As…

    Improved Control for Your Newsletter with Categories and Subscriber Management

    We’ve been busy developing new features that make creating, managing, and growing your newsletter through WordPress.com easier. These features give you more control and better insights into your audience. As…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    How to redeem American Express Membership Rewards points for maximum value

    How to redeem American Express Membership Rewards points for maximum value

    Trump Administration Tallies Trade Barriers That Could Prompt Tariffs

    Trump Administration Tallies Trade Barriers That Could Prompt Tariffs

    B.C. NDP fast-tracking end of consumer carbon tax. Eby says gas to drop 17 cents

    B.C. NDP fast-tracking end of consumer carbon tax. Eby says gas to drop 17 cents

    Fashion startup CaaStle appears to be in trouble

    Fashion startup CaaStle appears to be in trouble

    Isco jokes crowdfunding is needed to keep Antony at Betis

    Isco jokes crowdfunding is needed to keep Antony at Betis

    All Upcoming Batman Comics and Graphic Novels Releasing in 2025

    All Upcoming Batman Comics and Graphic Novels Releasing in 2025