Building a website can feel overwhelming when you’re starting out. Multiple pages to design, a navigation structure to plan, dozens of decisions to make before you’ve written a single word of content.
A single-page WordPress website removes most of that complexity. One page, everything in one place, one goal. And with a page builder like Divi, you can build something genuinely professional without writing a single line of code.
This guide walks you through the entire process from scratch — from buying a domain to going live — with every step explained clearly. If you’ve never built a website before, you’ll be able to follow this. If you have some experience, you’ll pick up the Divi-specific details that most guides skip.
By the end, you’ll have a fully functional single-page WordPress website with proper anchor navigation, a mobile-responsive layout, and basic SEO set up correctly.
Before you start building, it’s worth reading the complete single-page website guide if you haven’t already — it covers whether this format is right for your specific goals, what sections to include, and what the SEO limitations are.
Building the right kind of website starts with knowing whether a single-page format is actually the right choice for you.
Who This Is For
This guide is ideal for freelancers, consultants, local businesses, portfolios, personal brands, and small service websites that only need a focused online presence.
What You’ll Need Before You Start
Before touching WordPress, you need three things sorted:
- A domain name — your website address (for example, yourname.com or yourbusiness.com). You’ll register this through a domain registrar or your hosting provider. Keep it short, memorable, and easy to spell. Avoid hyphens if you can.
- A hosting account — this is the server where your website lives. Without hosting, your WordPress site has nowhere to be accessed from. For a single-page WordPress site, shared hosting is more than sufficient.
- A clear idea of your sections — what content are you putting on this page? Having a rough outline before you open the page builder saves a lot of time and aimless clicking. More on this shortly.
Also Read: WordPress for Beginners: How to Launch Your First Website (Step-by-Step Guide)
Step-by-Step: How to Create a Single-Page WordPress Website
Step 1: Choose and Set Up WordPress Hosting
Your hosting provider is the foundation of your site’s performance. For a single-page WordPress site, you don’t need anything expensive or complex. A quality shared hosting plan with a LiteSpeed web server and server-side caching handles everything a single-page site needs and gives you good Core Web Vitals scores out of the box.
Hostinger is a solid choice for beginners — affordable, reliable, LiteSpeed-based, and the hPanel interface is straightforward to navigate. Their WordPress hosting plans include a free domain for the first year, which simplifies the setup process.
When setting up your hosting account, choose the data centre location closest to where most of your visitors will be. If your audience is primarily in India, choose a Singapore or Mumbai server. If primarily in the UK, choose a London or European server. This reduces server response time and improves your Core Web Vitals scores.
Make sure SSL/HTTPS is enabled before building the site. Most hosting providers enable free SSL certificates automatically through Let’s Encrypt.
Once your hosting account is active, install WordPress using your hosting panel’s one-click WordPress installer. In Hostinger’s hPanel, go to Websites → Add Website → WordPress and follow the prompts. The installation takes about two minutes.
Step 2: Plan Your Sections Before You Open the Page Builder
This step is skipped by almost every tutorial online, and it’s the reason so many first-time site builders end up with a cluttered, unfocused page.
Before you open Divi, grab a piece of paper or open a notes app and write down the sections you want on your page — in the order they should appear. Each section needs a name and a one-sentence description of what it does.
A typical single-page website for a freelancer or small business looks like this:
- Hero — Who you are and what you do, in one clear sentence. Your primary call to action button.
- About — Your background, experience, and why clients choose you over someone else.
- Services — What you offer. Keep this to 3-5 services maximum. More than that and a single-page format starts to feel cramped.
- Portfolio or Work Samples — Examples of your work. For a designer this might be a gallery. For a consultant, brief case study summaries.
- Testimonials — 2-4 client quotes or reviews. Social proof that addresses the trust question.
- FAQ — 4-6 questions you commonly get asked. This section has SEO value as well — FAQ content can appear in Google’s People Also Ask results.
- Contact — A simple contact form, your email address, and optionally a phone number or booking link.
Once you have your sections listed, write a CSS ID for each one — this is a short, lowercase, hyphenated identifier you’ll use to create your anchor navigation. For example:
- Hero → home
- About → about
- Services → services
- Portfolio → portfolio
- Testimonials → testimonials
- FAQ → faq
- Contact → contact
Keep these simple and descriptive. You’ll enter them in Divi shortly.
This planning step takes 10 minutes and saves an hour of aimless building later.
Step 3: Install Divi
Divi is a premium WordPress theme and page builder from Elegant Themes. It gives you complete visual control over your page layout without writing code. For single-page websites specifically, Divi’s section-based building approach maps perfectly to the one-page format — each Divi section becomes one section of your page.
To install Divi:
- Log into your Elegant Themes account at elegantthemes.com
- Go to Members → Account → Downloads and download the Divi theme zip file
- In your WordPress dashboard, go to Appearance → Themes → Add New → Upload Theme
- Upload the Divi zip file and click Install Now, then Activate
Once Divi is activated, go to Divi → Theme Options in your WordPress dashboard and enter your Elegant Themes API key (found in your account dashboard). This activates automatic Divi updates.
A Note on Divi 5
If you’re installing Divi recently, you’ll likely be using Divi 5, which has a significantly updated visual builder interface compared to Divi 4. The core concepts are the same — sections, rows, modules — but the interface panels have moved and the performance is noticeably improved. This guide uses Divi 5 terminology and interface references.
Also Read: Divi vs Elementor (2026): An Honest Comparison from a Divi Developer
Step 4: Create Your Homepage
In your WordPress dashboard, go to Pages → Add New. Give the page a title — “Home” works perfectly. Don’t worry about any content in the WordPress editor itself; you’ll build the page entirely in the Divi builder.
Click Edit with Divi to open the visual builder.
The Divi visual builder opens as a full-screen editor overlaid on your page. This is where you’ll build your entire single-page site.
Starting From a Blank Page vs Using a Template
Divi gives you two options when you open the builder on a blank page: start from scratch, or load a pre-made layout from the Divi Layout Library.
If this is your first Divi build, I’d recommend loading a layout from the library as a starting point rather than staring at a blank canvas. Go to the purple Divi icon at the bottom of the screen → Load Layout → browse the library for a single-page or one-page layout that roughly matches your industry. You don’t have to keep the design — you’re just getting a structure to customise rather than starting completely from nothing.
If you’re comfortable with Divi, starting from scratch gives you more control. Click the grey + button to add your first Section.
Step 5: Build Your Sections in Divi
In Divi, your page is built from three nested elements:
- Sections — the top-level containers. Each section of your single-page site (Hero, About, Services etc.) should be its own Divi Section.
- Rows — the layout structure inside each section. A row defines how many columns your content is divided into.
- Modules — the actual content elements. Text, images, buttons, forms, galleries, testimonials — all added as modules inside rows.
Build one section at a time, working from top to bottom.
Setting Up Section CSS IDs (Critical Step)
For your anchor navigation to work — so that clicking “Services” in the menu jumps to the Services section — each Divi Section needs a CSS ID that matches the ones you planned in Step 2.
To add a CSS ID to a Divi Section in Divi 5:
- Hover over the section to reveal the section settings
- Click the Settings icon (gear icon) to open section options
- Go to the Advanced tab
- Find CSS ID & Classes → CSS ID
- Type your CSS ID without the # symbol — for example: about not #about
- Save the section
Do this for every section on your page. These IDs are what your navigation menu will link to.
Building the Hero Section
Your hero section is the most important part of the page — it’s the first thing every visitor sees. It needs to communicate what you do clearly within 3-5 seconds. If a visitor can’t understand what you offer from your hero, many will leave without scrolling.
A typical hero section in Divi contains:
- A full-width section with a background image or solid/gradient background colour
- A headline module — your primary value proposition in one sentence. Specific beats vague. “Web Designer Helping Small Businesses Get Online” is better than “Welcome to My Website.”
- A subheading or short paragraph module — one or two sentences expanding on what you do and who you do it for
- A Button module — your primary call to action. “Get in Touch,” “Book a Call,” “View My Work” — whatever the main action you want visitors to take
For background images in the hero section, go to Section Settings → Background → add your image. Important for performance: disable lazy loading on this image (the hero image is almost always your LCP element) and ensure the image is compressed and in WebP format before uploading. A slow-loading hero image is the most common cause of poor Core Web Vitals on single-page sites.
Building the Remaining Sections
Work through each section from your plan, one at a time. Some practical Divi tips for common sections:
Services section: Use a 3-column row with a Blurb module in each column. Each Blurb module has an icon, heading, and text — perfect for presenting 3 services side by side. For 4 or 6 services, use a 2 or 3 column grid with two rows.
Portfolio or Gallery section: Divi’s Portfolio module or Gallery module both work well here. For a minimal gallery, the Image module in a multi-column grid gives you the most design control.
Testimonials section: Divi’s Testimonial module includes a quote, client name, and optional photo. Add multiple testimonial modules in a row, or use Divi’s Slider module if you have many testimonials and want to conserve vertical space.
FAQ section: Divi’s Toggle module is ideal — click to expand answers. This creates a clean, scannable FAQ section and the accordion format works well for the structured data schema you’ll add during SEO setup.
Contact section: Divi’s Contact Form module includes fields, spam protection, and email notification settings built in. Configure the recipient email address in the module settings. Keep the form simple — name, email, and message is sufficient for most enquiry forms. The more fields you add, the lower your conversion rate.
Step 6: Set Up Anchor Navigation
This is what makes your site actually work as a single-page site. Your navigation menu needs to link to the sections you built, not to separate pages.
Create the Navigation Menu
In your WordPress dashboard, go to Appearance → Menus → Create a New Menu. Name it “Main Navigation” and check the Primary Menu location.
Now add your sections as Custom Links:
- In the left panel, find Custom Links and expand it
- In the URL field, type # followed by your CSS ID — for example #about or #services
- In the Link Text field, type the menu label — for example About or Services
- Click Add to Menu
- Repeat for each section
- Arrange the menu items in the order you want them to appear
- Click Save Menu
Your navigation should now appear on your page and clicking each item should scroll to the relevant section.
Enable Smooth Scrolling
By default, clicking an anchor link jumps abruptly to the section. Smooth scrolling animates the scroll, which feels more polished. In Divi 5, go to Divi → Theme Customizer → General Settings and enable smooth scrolling if available. Alternatively, add this CSS snippet to Divi → Theme Options → Custom CSS:
html {
scroll-behavior: smooth;
}
Make the Navigation Sticky
On a single-page site, the navigation needs to stay visible as visitors scroll — otherwise they have no way to jump to other sections without scrolling all the way back to the top.
In Divi 5, go to your Header settings in the Theme Customizer and enable the Fixed Navigation option. This makes your navigation bar stick to the top of the screen as visitors scroll down the page.
If your design uses a transparent header over the hero section (common on single-page sites), enable the Hide Nav Until Scroll option — the navigation stays transparent and blends with the hero, then switches to a solid background colour when the visitor starts scrolling.
Step 7: Set Your Homepage in WordPress
By default, WordPress shows a blog post feed as the homepage. You need to tell it to show your designed page instead.
Go to Settings → Reading in your WordPress dashboard.
Under “Your homepage displays”, select “A static page.”
In the Homepage dropdown, select the page you created (“Home”).
Leave the Posts page dropdown blank — you’re not using a blog with this single-page setup.
Click Save Changes.
Visit your domain in a browser. Your designed single-page site should now appear as the homepage.
Step 8: Install and Configure a Caching Plugin
A caching plugin is essential even for a single-page site. It stores a pre-generated version of your page so WordPress doesn’t have to run PHP and query the database on every visit. This directly improves your page load speed and Core Web Vitals scores.
Since you’re on Hostinger with LiteSpeed hosting, install LiteSpeed Cache — it’s free and integrates directly with the LiteSpeed server for the best performance results.
Go to Plugins → Add New, search for LiteSpeed Cache, install, and activate it.
In LiteSpeed Cache settings, enable:
- Page Caching
- Browser Cache
- CSS and JS Minification
- Image Optimisation (WebP conversion and lazy load — but remember to exclude your hero image from lazy loading)
- GZIP Compression
After configuring, go to LiteSpeed Cache → Purge → Purge All to clear any cached content and let it rebuild with the new settings.
Step 9: Set Up SEO for Your Single-Page Site
A single-page site has one URL and one opportunity to rank in search. Getting the SEO basics right from the start matters more here than on a multi-page site where you have many pages to rank.
Install Rank Math
Go to Plugins → Add New, search for Rank Math SEO, install, and activate it. Run through the setup wizard — connect your Google Search Console account if you have one, set your site type to Personal or Business depending on what it is, and complete the basic configuration.
Set Your Page’s Meta Title and Description
In the WordPress editor for your homepage, scroll down to the Rank Math panel. Click Edit Snippet and set:
Meta Title: Your primary keyword and brand name. For example: “Web Designer in Kochi | Sangeetha M” or “Freelance Web Designer & Technical SEO | Your Name.” Keep it under 60 characters.
Meta Description: One or two sentences describing what you offer and who you serve. Include your primary keyword naturally. Keep it under 160 characters. This appears as the description under your link in Google search results — write it to encourage clicks, not just to describe the page.
Focus Keyword: The primary term you want this page to rank for. For a local freelancer this might be “web designer [city]” or “freelance [service] [city].”
Add FAQ Schema
If you built a FAQ section, adding FAQ schema markup tells Google to potentially display your questions and answers directly in search results as rich snippets. In Rank Math, go to the Schema tab in the post settings and add an FAQ schema block for each question and answer in your FAQ section.
Add Your Business Schema
If this is a business website, go to Rank Math → Titles & Meta → Local SEO and set up your business details — name, address, phone, opening hours. This adds LocalBusiness schema to your site, which helps Google understand your business context and can improve visibility in local search.
Submit to Google Search Console
Go to Google Search Console and add your domain as a property. Verify ownership using the HTML tag method — Rank Math has a dedicated field for this in its General Settings → Webmaster Tools section. Once verified, go to Sitemaps in Search Console and submit your XML sitemap URL (yoursite.com/sitemap_index.xml). This tells Google your site exists and asks it to crawl and index it.
Step 10: Check Everything Before Going Live
Before you announce your site or add it to your business profiles, run through this checklist. Issues caught before launch are much easier to fix than issues caught after you’ve shared the URL everywhere.
Anchor Navigation Test
- Click every item in your navigation menu — does each one scroll smoothly to the correct section?
- Does the active menu item highlight as you scroll through different sections? (Divi’s active link styling handles this, but worth confirming)
- Does your navigation stay visible (sticky) as you scroll down the page?
Mobile Responsiveness Test
- Open your site on an actual mobile device — not just the browser’s responsive mode. The experience can be different.
- Does the hamburger menu work and open correctly on mobile?
- Is all text readable without zooming?
- Are buttons large enough to tap easily?
- Do images scale correctly without overflowing the screen?
- Does the page scroll smoothly on mobile?
In Divi’s visual builder, switch to the Tablet and Phone views using the device icons at the bottom of the screen to preview and adjust your mobile layout before testing on a real device.
Contact Form Test
- Submit a test message through your contact form
- Confirm the submission confirmation message appears
- Confirm you receive the notification email at the address you set in the form settings
- Check your spam folder if the email doesn’t arrive — hosting-level PHP mail can sometimes be filtered. If emails aren’t arriving reliably, install WP Mail SMTP and configure it to send through your email provider’s SMTP server
Performance Test
- Run your homepage URL through PageSpeed Insights
- Check both Mobile and Desktop tabs
- Note any specific issues flagged — particularly around image sizes, render-blocking resources, and LCP
- Address the highest-impact issues before going live if possible
Basic Content Check
- Read through every section for typos and grammatical errors
- Confirm all links work — especially the CTA buttons
- Check that all images have descriptive alt text (important for accessibility and SEO)
- Confirm your contact details are correct
- Check that the meta title and description you set appear correctly when you paste your URL into a social media post or messaging app (this tests your Open Graph tags)
Step 11: After Launch — What to Do in the First Week
Going live is not the end — it’s the beginning. These steps in the first week help Google find and index your new site quickly.
Request indexing in Google Search Console. Go to Search Console, paste your homepage URL into the URL inspection tool at the top, and click Request Indexing. This doesn’t guarantee immediate indexing, but it signals to Google that the page is ready to be crawled.
Set up Google Analytics. Install the free Google Analytics 4 plugin (Site Kit by Google is the easiest option) and connect it to your Google Analytics account. Even a single-page site benefits from knowing how many visitors you’re getting, where they’re coming from, and how long they stay.
Add your website to your Google Business Profile. If you have or plan to create a Google Business Profile for your business (recommended for anyone serving a local area), add your website URL there. Google Business Profile is one of the most important sources of local search visibility for single-page sites that can’t compete on organic search keywords with multi-page sites.
Share your URL. Add it to your LinkedIn profile, Instagram bio, email signature, business cards, and any other profiles you have. Social links back to your site are not direct SEO signals but they drive traffic, which over time generates real user experience data that Google uses for Core Web Vitals field data.
Check Search Console after 2-3 weeks. By this point, Google should have crawled and indexed your site. Check that your homepage is indexed (URL Inspection tool), that there are no coverage errors, and that your Core Web Vitals report is starting to populate.
Frequently Asked Questions
Do I need to know how to code to build a single-page WordPress site?
No — Divi is a fully visual page builder. Every section, row, module, and style setting is adjusted through point-and-click interface panels. The only “code” involved in this guide is adding a CSS ID to each section (which is just typing a short word) and optionally adding one line of CSS for smooth scrolling. No HTML, PHP, or JavaScript knowledge is required.
How long does it take to build a single-page WordPress site?
For a complete beginner, setting up hosting, installing WordPress and Divi, building the page, and configuring SEO and caching typically takes 1-2 full days spread across a few sessions. If you have some WordPress experience, the build itself takes 4-6 hours. Having your content — text and images — ready before you start building dramatically reduces the time, since the most common delay is figuring out what to write while staring at an empty section.
Can I add a blog to my single-page WordPress site later?
Yes — WordPress makes this straightforward. Create a new page called Blog, go to Settings → Reading, and assign it as the Posts page. Your homepage stays as your single-page design and your blog lives at yourdomain.com/blog/. Your navigation can include a link to the blog section. This hybrid approach — single-page homepage with a separate blog — works well for small businesses that want the focused homepage experience but also want to publish content for SEO.
What’s the difference between building a single-page site in Divi vs Elementor?
Both are capable of building excellent single-page sites. Divi’s section-based building model maps very naturally to the one-page format — each section is a distinct visual container with its own background, spacing, and layout. Elementor uses a similar structure (sections/containers, columns, widgets). The primary practical difference for a beginner is interface familiarity — if you’re already in the Elegant Themes ecosystem or plan to use Divi for client work, building your own site in Divi makes sense for developing your skills. If you’re using Elementor on client sites, use Elementor. The process and concepts in this guide apply to both.
My anchor navigation links are jumping to the wrong section — what’s wrong?
The most common cause is a mismatch between the CSS ID you entered in the Divi Section settings and the URL you added to the menu item. Check that the CSS ID in the section (without the #) exactly matches what you entered after the # in the menu item’s Custom Link URL. Both are case-sensitive — “About” and “about” are different. Also check for accidental spaces before or after the ID — these are invisible but break the link.
My page looks fine on desktop but has layout issues on mobile — how do I fix it?
Open the Divi visual builder and switch to Phone view using the device icon at the bottom. Most layout issues on mobile come from one of three things: text that’s too large (reduce font sizes specifically for mobile in the module’s typography settings), columns that are too narrow to display side by side on a phone (Divi stacks columns vertically on mobile by default — adjust padding and spacing for the stacked layout), or images that overflow the container (set image width to 100% in the Advanced tab for mobile). Always test on a real device after making adjustments — Divi’s phone preview is a guide, not a perfect replica of every device.
Your Single-Page Site Is Ready — What Comes Next
A single-page WordPress site built in Divi is genuinely achievable for any beginner who’s willing to work through the steps. The process is more logical than it looks from the outside — hosting, WordPress, Divi, sections with CSS IDs, anchor navigation, static homepage setting, caching, SEO basics. Each step builds on the last.
The most important thing once your site is live is to keep it updated. Keep Divi and all plugins on the latest versions, test your contact form monthly to confirm it’s still working, and check Google Search Console occasionally for any crawl or performance issues.
If you’ve decided a single-page site is the right starting point but want to understand its SEO limitations in more detail — and how to get the most out of a single URL in search — the full guide on whether a single-page website is good for SEO covers everything you need to know.
And when your business grows and you need more pages — more services, a blog, dedicated landing pages — WordPress and Divi make that expansion completely manageable. You’re not locked in. You’re starting from a solid foundation that can grow with you.
