Skip to content
HyperDAF editorialPage Builders

How to Build Landing Pages With Blocks (No Code)

Two years ago, a friend called me in a panic. He had spent a whole weekend inside a page builder plugin trying to build a landing page for his online…

Featured image for How to Build Landing Pages With Blocks (No Code)
Page BuildersEditor-curated guide
16 min9 sectionsIntermediate
Before you beginWhat this guide gives you
9Focused sections16Minutes to finishIntermediateExperience level9Article views
Start reading
Table of contents9

Two years ago, a friend called me in a panic. He had spent a whole weekend inside a page builder plugin trying to build a landing page for his online course, and the page looked like a ransom note. Fonts everywhere. Buttons that went nowhere. On his phone, the headline ran off the screen. He asked me the question I hear all the time: “Do I need to hire a designer, or learn to code?”

I am Maria Santos, and I have built more than sixty landing pages using nothing but the WordPress block editor. No code. No designer. No expensive plugins. Some of those pages now bring in thousands of email subscribers a month. The ransom-note page my friend made? I rebuilt it with core blocks in one evening, and his signups doubled the next week.

If you are scared your page will look cheap without a designer, or that “no code” means “no control,” I get it. That fear kept me stuck for months. Here is my exact promise: this guide walks you through the same six-step process I use on every landing page, from the blank canvas to the published page, and every step uses only the blocks that already ship with WordPress. If you can click, drag, and type, you can build a landing page that looks like a pro made it. Let’s start with the canvas.

You might be thinking core blocks are too basic for a real landing page. I thought the same thing until I tested it. A landing page built with core blocks loads faster, breaks less often, and is easier to edit six months later than most pages built with heavy add-ons. Simple blocks are not a limitation here. They are the whole advantage.

What You Will Learn

  • Start with a blank canvas so nothing distracts your visitor
  • Build a hero section that says one thing clearly
  • Add trust sections that do the selling for you
  • Place your call to action where eyes actually go
  • Make the page look perfect on phones before you publish
  • Track the one number that tells you if the page works

Ready? Let’s get started.

Abstract illustration of a full-width cover hero banner made of layered geometric blocks with one glowing green call-to-action block at the center.

Start With a Blank Canvas (Not Your Theme’s Layout)

My first landing pages failed for a reason that had nothing to do with design skill. I built them inside my theme’s normal page layout, which meant the header menu, the sidebar, and the footer all showed up. Every one of those elements was an exit door. Visitors clicked the menu, wandered off to the blog, and never came back. My conversion rate was basically zero, and I blamed my writing.

A landing page has exactly one job: get the visitor to take one action. Everything that does not serve that action is clutter. The first and most important step is removing your theme’s header, footer, and sidebar from this one page. This is not a design choice. It is a conversion choice.

Here is how I do it with a block theme. Create a new page under Pages, then Add New. In the right sidebar, find the Template setting. Choose the Blank template (some themes call it Landing or Canvas). This template strips away the site header, navigation, and footer, and gives you a completely empty page. If your theme does not offer a blank template, check under Appearance, then Editor, then Templates. Most modern block themes include one.

If you are using a classic theme without a blank template, you still have options. Set the page template to Full Width if one exists, which at least removes the sidebar. For the leftover header and footer, you can hide them on this page only with a small CSS rule targeting the page ID. Every WordPress page has a unique ID, and you can find yours in the page URL when you edit it. A rule like .page-id-45 header, .page-id-45 footer { display: none; } in the Customizer’s Additional CSS hides those elements on that page alone, without touching the rest of your site. I keep my logo visible, though. Visitors should always know whose page they are on.

Before adding a single block, I set two global rules for the page. First, a content width around 1200 pixels, so lines of text never stretch into unreadable long lines on wide screens. Second, section padding of 24 to 32 pixels between content blocks, so the page breathes. You set these in the block settings sidebar as you build, but deciding them now saves you from fiddling later. Consistency is what makes a page look designed instead of assembled.

Bonus Tip: Name your page clearly in the dashboard, like “Landing – Free Email Course.” Six months from now, when you have twelve landing pages, you will thank yourself. I learned this after publishing three pages all titled “Landing Page” and having no idea which was which.

With the canvas blank and your rules decided, you are ready for the part of the page that does the heaviest lifting: the hero.

Build a Hero That Says One Thing Clearly

I used to write hero headlines like “Welcome to my amazing website.” Nobody signed up. Then a mentor told me something that stung: visitors decide in about five seconds whether your page is for them. Your hero has five seconds to answer three questions: what is this, who is it for, and what do I do next. If it answers all three, people scroll. If it does not, they leave.

The Cover block is my hero workhorse. It is one block that holds a background image, a headline, a short subheading, and a button, all in one full-width section. Insert it with the block inserter, upload or pick a background image, and set the overlay opacity so your text stays readable. I usually set the overlay to around 50 percent with a dark color when the photo is bright. Readability beats beauty every time.

Inside the Cover block, I add three things and nothing more. First, a Heading block with the headline, kept under ten words, promising one specific outcome. “Double Your Email List in 30 Days” beats “Welcome to Our Newsletter” every single time. Second, a Paragraph block with one or two sentences that name exactly who this is for. “A free 5-day course for WordPress beginners who want their first 100 subscribers.” Third, a Buttons block with a single button whose text says what happens next: “Send Me Lesson 1,” not “Submit.” People click buttons that describe the reward.

Here is the rule I never break: one hero, one button, one action. The moment I add a second button (“or learn more”), conversions drop. Visitors do not want choices on a landing page. They want a clear path. If your offer genuinely needs explanation before the button makes sense, that explanation belongs in the sections below, not as a competing button in the hero.

Note: I avoid background videos in heroes. They look impressive in demos and slow the page down in real life. A compressed background image at a sensible size loads fast and looks just as good. Page speed is part of the design, not an afterthought. If you want the full method for keeping block layouts fast, my guide on how the block editor beats page builders on speed covers the details.

Once the hero is done, resist the urge to keep polishing it. The sections below are what turn interest into action.

Abstract illustration of three feature cards in columns with glowing icons above them, arranged side by side.

Add Trust Sections That Do the Selling for You

Here is something nobody told me when I started: visitors do not buy because your hero is pretty. They buy because something on the page makes them trust you. Every landing page I build follows the same section order, because it mirrors how people actually decide: first they understand the offer, then they look for proof, then they check the details, and finally they act.

Section one is benefits, not features. I use a Columns block with three columns, and inside each column I place an icon (the block editor has simple icon options via the List or Image block), a short heading, and two or three sentences. Each card answers “what do I get?” A feature says “12 video lessons.” A benefit says “Learn in 20 minutes a day without quitting your job.” I write the benefit version. Always.

Section two is social proof. Testimonials, review stars, subscriber counts, logos of places you have been featured, whatever proof you honestly have. I build these with another Columns block, one testimonial per column, using the Quote block for each one. A quote block with a name and a real result (“I got my first 200 subscribers in three weeks”) outperforms a paragraph of my own claims. If you have no testimonials yet, use honest numbers instead: “Join 2,400+ readers” is proof too, as long as it is true. Never invent numbers. Readers can smell fake proof, and it poisons everything else on the page.

Section three is the offer detail or FAQ. This is where you answer the objections that stop people from clicking: what exactly do I get, how long does it take, what if it does not work for me. I use Heading blocks for each question and short paragraphs for answers, or the Details block if I want collapsible accordions that keep the page tidy. Keep each answer to two or three sentences. This section exists to remove friction, not to add reading homework.

Bonus Tip: Do not build these sections from scratch every time. Open the block inserter, switch to the Patterns tab, and search for “testimonials,” “call to action,” or “features.” WordPress ships with ready-made section designs you can drop in and restyle in seconds. I built my last three landing pages this way and each one took under an hour. There is a deeper workflow for this in my guide to reusing content with block patterns, which saves me hours every month.

With trust established, there is one more element that ties the whole page together: the call to action, placed exactly where it counts.

Place Your Call to Action Where Eyes Actually Go

I once built a landing page with a beautiful hero button and then forgot to repeat the call to action anywhere else. The page was long, visitors scrolled, got interested, reached the bottom, and found nothing to click. They left. I had done the hard work of convincing them and then hidden the finish line. I never made that mistake again.

The rule is simple: repeat your call to action after every major section. Hero, benefits, testimonials, FAQ, final CTA. A visitor who is convinced after the testimonials should not have to scroll back up to find the button. I use the same Buttons block styling every time: same color, same size, same button text. Repetition builds familiarity, and familiarity builds clicks. Pick a button color that contrasts with your page background so it is impossible to miss.

The final CTA section deserves its own moment. I build it as a Group block with a colored background, a short heading that restates the offer (“Get the free 5-day course”), one sentence of reassurance (“No spam, unsubscribe anytime”), and the button. This is the last thing visitors see, so make it feel like a finish line, not another paragraph. Keep it short. By this point, the page has done the persuading. The final section just needs to make clicking easy.

Where does the button go? If your CTA is a form, you have two honest options with core blocks. For a simple email signup, embed your email tool’s form code with a Custom HTML block, or link the button to a dedicated signup page. For anything more complex, like a checkout, link the button to that page. What matters is that every button on the page leads to the same single action. One offer, one destination, no detours. If you are still learning the editor itself, start with the complete guide to the WordPress block editor to get comfortable with the building blocks first.

Buttons placed, page structured. Now comes the step most people skip, and it is the step that matters most.

Abstract illustration of testimonial quote cards floating in a gentle row with soft glowing edges.

Make It Look Perfect on Phones Before You Publish

Here is an uncomfortable truth from my own analytics: on most of my landing pages, more than half the visitors arrive on a phone. And here is the embarrassing part: for my first year of building landing pages, I never once previewed them on mobile before publishing. I designed on a big monitor, published, and wondered why conversions were flat. When I finally checked on my own phone, the hero headline was cut off, the columns were squeezed into unreadable slivers, and the button sat below three screens of scrolling.

The block editor makes mobile checking easy, and there is no excuse to skip it. In the editor toolbar, click Preview and switch between Desktop, Tablet, and Mobile views. Go through the whole page in Mobile view and check four things. One: the headline is fully visible without horizontal scrolling. Two: columns stack vertically instead of squeezing side by side. The Columns block does this automatically on small screens, but verify it. Three: the button is reachable within the first screen or two, and it is big enough to tap. Four: images are not overwhelming the text on a narrow screen.

Then do what I call the real phone test: publish the page as a draft, open the preview link on your actual phone, and load it over mobile data, not Wi-Fi. This shows you what a real visitor experiences, including load speed. If the hero image takes four seconds to appear, compress it. If you have to pinch and zoom to read anything, increase the font size in the block settings. I fix every issue I find before the page goes live, because first impressions only happen once.

Note: Font sizes set on desktop do not always behave on mobile. In the block settings sidebar, check the typography size for your headings and bump them up if they render small on phones. A headline that looks bold on a 27-inch monitor can look timid on a phone. When in doubt, go one size larger than feels right on desktop.

A page that looks great on phones is ready for visitors. But how will you know if it is actually working? That needs one number.

Abstract illustration of a smartphone displaying a landing page layout floating next to a desktop monitor showing the same page, connected by glowing lines.

Track the One Number That Tells You If the Page Works

For months I judged my landing pages by how they looked. Then I started judging them by one number, and everything changed. That number is the conversion rate: the percentage of visitors who take the action. If 200 people visit and 10 sign up, your conversion rate is 5 percent. That is the only score that matters. Traffic without conversions is just expensive window shopping.

Set this up before you send a single visitor to the page. Connect your form to your email tool so every signup is recorded. Then mark the form submission as a conversion in your analytics so you can see which traffic sources bring signups and which bring bounces. Test the whole flow yourself first: fill in the form with your own email, confirm you receive whatever the visitor should receive, and check that the thank-you page or confirmation appears. I once ran ads to a page for two days before discovering the form was not connected to anything. Those signups are gone forever.

When the number is low, do not redesign the whole page. Change one thing at a time and wait. Make the headline match your ad more closely, and watch for two weeks. Then try cutting a form field. Then try moving a testimonial higher. Changing one variable at a time is slower, but it tells you what actually helped instead of leaving you guessing. This patient approach has lifted my pages more than any redesign ever did.

Bonus Tip: If this page will only receive ad traffic and you do not want it competing with your main pages in search results, set it to noindex in your SEO settings. Ad landing pages and SEO pages have different jobs. Let each do its own job. For a broader speed and SEO foundation, the 2026 WordPress speed checklist pairs well with everything in this guide.

You now have the full process. Before you go build, let me answer the questions I get asked most.

Frequently Asked Questions

Can I really build a professional landing page with only core blocks? Yes. Every section in this guide uses blocks that ship with WordPress: Cover, Heading, Paragraph, Columns, Buttons, Group, Quote, Image, and Details. I have built more than sixty landing pages this way, and the limitation is never the blocks. It is always the clarity of the offer and the copy.

Do I need a special theme for landing pages? You need a theme that offers a blank or full-width page template, which most modern block themes do. The theme matters less than you think. A blank canvas from any decent block theme works. Spend your energy on the headline and the offer, not on theme shopping.

How long does it take to build a landing page with blocks? Your first one will take two to three hours because you are learning. After that, using saved patterns for your sections, I build a complete landing page in under an hour. The writing takes longer than the building, which tells you where the real work is.

Should the landing page appear in Google search results? It depends on the page’s job. If it targets a keyword and earns organic traffic, let it be indexed. If it exists only for ad campaigns, set it to noindex so it does not compete with your main pages. Decide this before you publish, not after.

What is the biggest mistake beginners make with block landing pages? Adding too many sections. Beginners build eight sections because they can. Every extra section is another chance for the visitor to lose interest. Start with hero, benefits, proof, FAQ, and final CTA. Add more only when your conversion data tells you something is missing.

Final Thoughts

Building landing pages with blocks taught me something bigger than a skill. It taught me that I did not need permission, a budget, or a developer to put my ideas in front of people. A blank page, a clear offer, and an hour of focused work is enough to start collecting real signups from real visitors.

You now have the exact six-step process: blank canvas, clear hero, trust sections, repeated calls to action, mobile check, and one tracked number. Nothing here requires code. Everything here works.

Go build your first one today. It will not be perfect, and that is fine. Mine weren’t either. Publish it, watch the number, improve one thing at a time, and tell me in the comments how it goes. I read every single one.

Written by

Maria Santos

Maria writes documentation that users actually read. Her 6 years documenting software products shape her articles on knowledge bases, onboarding flows, and reducing support load with great docs.

6 published articles
View all articles

Related articles

View all articles

Join the discussion

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

Keep comments relevant and respectful.