Most guides about freelance landing page design either sell you a service or show you pretty screenshots on Dribbble. Neither helps when you have a blank canvas open and four hours before dinner. This post is the opposite: a build order. Nine sections, in the sequence you should actually create them, with the layout reasoning behind each one and a clear list of what to delete when the page gets too long.

If you sell a service as a solo designer, developer, copywriter, video editor or consultant, this is the structure that turns a visitor into an enquiry. You can build it in one afternoon in Figma, Framer, Webflow, WordPress or plain HTML. The tool does not matter. The order does.

Why build order matters more than visual style

A landing page fails for one of three reasons: the visitor does not understand what you do, does not believe you can do it, or does not know what happens if they click. Visual polish fixes none of those. Sequence does.

When you design top down in the order below, every section answers the question created by the section above it. That is what makes a page feel “easy to read” even when it is long. Readers are not scrolling, they are being pulled.

• Headline creates the question “is that really possible?”
• Proof answers it and creates “how does it work?”
• Process answers that and creates “what does it cost?”
• Pricing answers that and creates “what if it goes wrong?”
• Objections answer that, and then the final CTA has nothing left standing in its way.

Skip a step and the visitor stalls at that exact scroll depth. That is usually where your heatmap goes cold. It is argued more carefully on peopleperhour.com.

The 9 sections at a glance

#	Section	Job it does	Rough height (desktop)	Cut priority
1	Hero: headline, subline, CTA	Says what you do and for whom	70 to 85 vh	Never cut
2	Proof strip	Buys instant credibility	120 to 160 px	Never cut
3	Problem framing	Shows you understand the pain	One screen	Medium
4	The offer	Defines the deliverable	One screen	Never cut
5	Work samples	Proves quality	One to two screens	Trim, do not remove
6	Process in 3 steps	Removes fear of the unknown	Half screen	Low
7	Pricing or packages	Filters out the wrong leads	One screen	Never cut
8	Objection block or FAQ	Kills the last hesitation	Half to one screen	High (collapse it)
9	Final CTA	Closes	50 to 60 vh	Never cut

Total target: 5 to 7 full scrolls on desktop, 9 to 12 on mobile. Anything longer and you are writing a sales letter, not a service page.

Section 1: The hero (build this first, and build it twice)

What goes in it

1. A headline naming the outcome and the audience
2. One subline of 12 to 25 words adding the mechanism or constraint
3. One primary button
4. One micro reassurance under the button
5. Optional: a single visual anchor (your best work, or your face)

Layout reasoning

Two column heroes look professional but they split attention. For a solo freelancer, a centred single column hero at 640 to 720 px text width converts more reliably because there is only one reading path. Use the two column layout only if your visual is a real deliverable that explains the offer faster than words can.

Keep the CTA above 700 px on desktop. If a visitor has to scroll to find out what to do next, you have already lost the impatient buyer, and impatient buyers are usually the ones with budget.

Headline formulas that work for service pages

Formula	Example
Outcome + audience	Landing pages that convert for B2B SaaS founders
Deliverable + timeframe	A designed and built landing page in 10 working days
Enemy + relief	Stop rebuilding your page every quarter
Role replacement	Your design team, without the hiring process

Write the headline last, but place it first. The reason I tell you to build the hero twice is simple: your first headline is always about you. After you finish sections 4 and 7, you will know what you actually sell, and you will rewrite it in 90 seconds.

Section 2: The proof strip

Immediately under the hero, before any explanation, place a thin horizontal band of credibility. This is the highest return per pixel on the whole page.

Pick one of these, not all:

• Four to six client logos in greyscale, equal optical size
• A single strong testimonial line with name, role, company and photo
• Three numbers: projects delivered, years active, average turnaround
• Platform ratings if you actually have volume there

Layout reasoning

Keep this band short, 120 to 160 px tall, with a subtle background tint so it reads as a separator rather than a section. It does two jobs: it validates the claim above it, and it visually confirms that the page continues, which encourages the first scroll.

No logos yet? Do not fake it and do not skip the slot. Use a one line testimonial from any paying client, or a specific number such as “31 pages shipped since 2022”. Specific beats impressive.

Section 3: Problem framing

Now you earn the right to talk. Describe the situation the visitor is in, in their words, before you describe your solution.

Format that works

Three short cards, or a two column “before and after” table. Each item is one line. No paragraphs.

Right now	After we work together
Traffic arrives and bounces in 6 seconds	A page built around one clear action
Three drafts, no decision	One direction, two revision rounds, done
Your developer is blocked waiting on design	Handoff files your dev can build from

Constraint: maximum three problems. Four looks like guessing. A visitor needs to nod once, not read a diagnosis. For the wider picture, see Landing Pages Jobs for September 2026.

Section 4: The offer, spelled out

This is where most freelance pages collapse into vague adjectives. Be boring and concrete instead. State exactly what the buyer receives.

• Deliverables: number of pages, number of breakpoints, source files, copy included or not
• Timeline: in working days, not “fast”
• Revisions: a number
• What is not included: one honest line, it increases trust more than any badge

Layout reasoning

Use a bordered box or a distinct background so this section reads as a contract, not marketing. Left align the list, keep the icons small or drop them entirely. Icons at 64 px next to one line of text create the “template” look that makes buyers assume you are a reseller.

Section 5: Work samples, curated hard

Three projects. Not nine. Nine says “choose”, three says “this is my lane”.

For each sample include:

1. One image, cropped to the interesting part, not a full page screenshot shrunk to 300 px
2. Client type in three words
3. One outcome line, ideally with a number

Layout reasoning

A three up grid on desktop, stacked on mobile. Fix the image aspect ratio across all three so the row reads as a set. If your samples are visually very different, that inconsistency screams louder than the quality of each piece, so unify with identical crops, identical device frames, or no frames at all.

If you have no client work: build two speculative pages for real companies you would like to work with and label them honestly as concept work. Buyers care about your thinking, not your invoice history. What kills trust is pretending.

Section 6: Process in three steps

Buyers hesitate because they cannot picture the next two weeks. Draw it for them.

• Step 1: a 20 minute call, you send a brief
• Step 2: first design in 4 working days, one revision round
• Step 3: handoff and build, live within 10 days

Layout reasoning

Horizontal on desktop with numbers as the dominant visual element, vertical on mobile with a connecting line. Keep it under 40 words total. Three steps is the sweet spot: two feels sloppy, five feels bureaucratic.

Section 7: Pricing, or at least a number

This is the section freelancers delete first, and it is almost always a mistake. A page without a price attracts everyone, which means it attracts mostly the wrong people. You then spend your week on discovery calls that end with “we were thinking more like 200”.

Three ways to handle it, in order of effectiveness for solo sellers:

Approach	When to use it	Layout
Two fixed packages	Your scope is repeatable	Two cards, one marked “most chosen”
Starting from price	Scope varies a lot	Single centred block, one line of what changes the number
Day rate or weekly rate	You sell time, not projects	One number plus minimum engagement

Layout reasoning

Never build three columns as a solo freelancer. Three tiers imply a team, a support layer and an enterprise process you do not have. Two options with a clear recommendation produces a decision. One option produces a yes or a no, which is also fine, and faster.

Put a secondary CTA inside each pricing card. This is the second highest converting click zone on the page after the hero.

Section 8: Objection block

List the four questions you get in every single email. Answer them in one or two sentences each. Use an accordion so it costs almost no vertical space.

Typical set for a service page:

• What if I do not like the first draft?
• Do you write the copy too?
• Can you work with my existing brand or CMS?
• What do you need from me before we start?

Bonus: a collapsed FAQ block using proper markup also gives the page a shot at rich results, which matters when you compete against marketplace listings from Upwork and Fiverr for the same search.

Section 9: Final CTA

Repeat the promise from the hero in different words, add one line of risk reduction, then one button. Nothing else on screen. No navigation, no footer links competing for the click, no social icons.

• Button label states the action, not the aspiration: “Book a 20 minute call” beats “Get started”
• Under the button: response time, availability, or a no obligation line
• Give this section its own full width background colour so it reads as an ending

One CTA type per page

Pick a form, a calendar link or an email. Offering all three looks generous and converts worse, because choice at the decision moment produces delay. A short form with three fields maximum (name, email, one line about the project) beats a calendar embed for cold traffic. A calendar wins for warm referral traffic.

The one afternoon build order

Here is the actual sequence I follow. Roughly four hours if you already have your samples exported.

Time	Task
0:00 to 0:30	Write all nine sections as plain text in a single document. No design.
0:30 to 0:45	Set the type scale, spacing scale and two colours. Lock them.
0:45 to 1:30	Build sections 1, 2 and 9. The page is now technically functional.
1:30 to 2:30	Build 4, 5 and 7, the offer, samples and pricing.
2:30 to 3:00	Add 3, 6 and 8 if the page still feels light.
3:00 to 3:30	Mobile pass. Reorder, shrink type, check tap targets at 44 px.
3:30 to 4:00	Form test, analytics, compress images, publish.

Notice that sections 1, 2, 9, 4, 5 and 7 come first. Those six are the page. The other three are amplifiers.

What to cut when the page gets too long

Length is not the problem, dead weight is. Cut in this exact order until the page is back under seven desktop scrolls.

1. The About Me paragraph. Move your story to a single line in the final CTA or a separate page. Nobody buys your journey on a service page.
2. Any “why choose me” grid of six icons. Redundant with the offer and the proof strip.
3. Testimonial carousels. Keep two static quotes, delete the slider. Carousels past slide one are essentially unread.
4. Long case study text. Reduce to one outcome line and link out.
5. The tools and stack logos. Buyers do not hire based on your plugin list.
6. Problem framing (section 3). If your headline already names the pain, this becomes repetition.
7. Process (section 6). Compress into three short lines inside the offer box.
8. FAQ. Collapse it, or move the two real questions into the pricing section.

Never cut: hero, proof, offer, pricing, final CTA. Those five can stand alone as a working page, and honestly, a five section page with a real price often outperforms a nine section page without one.

Mobile ordering, because that is where the traffic is

Desktop order and mobile order are not always identical. Two adjustments worth making:

• Move the hero image below the headline and CTA, or drop it entirely. On a 390 px wide screen an image above the fold pushes your value proposition off screen.
• Move the price up, just after the samples. Mobile visitors scroll fast and abandon fast, so front load the qualifying information.
• Add a sticky bottom bar with the primary CTA after the visitor passes 40 percent scroll depth. Keep it 56 px tall maximum.

Pre publish checklist

• Page tells a stranger what you do within 5 seconds, tested on someone outside your field
• One primary action repeated three times: hero, pricing, final CTA
• Form submits and you receive the notification, tested from a real device
• Largest image under 200 KB, hero image preloaded
• All images have alt text describing the deliverable
• Title tag and H1 mention the service and the audience
• Analytics event on the CTA click, not just page views
• No stock photo of a handshake anywhere on the page

Common mistakes in freelance landing page design

Designing the page as a portfolio

A portfolio invites browsing. A landing page forces a decision. If your page has a gallery of 12 thumbnails and no price, you built a portfolio and mislabelled it.

Writing for other designers

Your peers admire the typography. Your clients want to know the timeline. Write for the person signing the invoice.

Hiding the CTA behind a full screen hero animation

Motion that delays the message costs conversions. If your hero needs 1.5 seconds to assemble itself, the impatient buyer has already left.

Using one page for every service

One page, one offer, one audience. If you sell both branding and web development, build two pages. A page that speaks to everyone converts nobody, and it also ranks for nothing specific.

FAQ

How long should a freelance landing page be?

Five to seven full desktop scrolls, or roughly 600 to 900 words of visible copy. Higher priced services justify more length because the buyer needs more reassurance. If your service costs under 500, shorter almost always wins.

Should I put my prices on the page?

Yes, in some form. A fixed package, a starting from figure or a day rate. Prices filter out unqualified enquiries before they reach your inbox, which is worth more than a slightly higher raw conversion rate.

Do I need a landing page if I already use Upwork or Fiverr?

Yes. Marketplace profiles rank well for hiring searches but you do not control the layout, the competing listings beside your profile or the fee. Your own page is where you send referrals, outreach replies and ad traffic, and it is the only asset you fully own. There is more on it in Freelance Landing Pages: 9 Examples & Inspiration.

What converts better, a form or a calendar link?

A short form for cold traffic, a calendar for warm traffic. Cold visitors are not ready to give you 30 minutes of their day. Three fields, then you qualify by email and send the calendar link afterwards.

How many work samples should I show?

Three, chosen for consistency rather than variety. If they all look like the same type of client problem, the visitor concludes you specialise, and specialists command higher rates.

Can I build this on a page builder instead of custom code?

Absolutely. The structure is the value, not the technology. A well ordered page in a WordPress builder beats a beautifully coded page with the sections in the wrong sequence every time.

How do I know if the page is working?

Track two numbers: CTA click rate and enquiry rate. If clicks are low, your hero or offer is unclear. If clicks are high but enquiries are low, your form or your price is the friction point. Fix one section at a time and give each change at least 300 visitors before judging it.

Final thought

Good freelance landing page design is mostly ordering and subtraction. Build the five load bearing sections first, add the four amplifiers only if the page feels thin, then cut anything that does not help a stranger decide. You can do the whole thing this afternoon, and you can improve it one section at a time for the rest of the year.