01 Nav SB7: CTA Required on Home
Logo, call number, five menu links and the main CTA button.
Placement shown: Left (recommended). Visitors look for the logo at the top left, and one row keeps the menu and the call button in reach. The width sentences below are the library's base layout.
Layout at 360: 360 px, logo and call number on the first row, the five menu items wrap to a second row of plain links, the CTA button full width on a third row.Layout at 390: 390 px, logo and call number on the first row, menu links on two short rows, CTA button full width; the menu items are always visible links.Layout at 768: 768 px (iPad portrait), logo left and call number right on the first row, five menu items and the CTA button together on a second row.Layout at 1024: 1024 px (iPad landscape, small laptop), a single row: logo, five menu items, call number and CTA button, no wrapping.Layout at 1280: 1280 px, a single row with the logo on the left, the menu centered, the call number and CTA button on the right.Layout at 1440: 1440 px wide, content max-width 1200 px centered, a single row inside the centered block while the header background fills the full width.
02 Hero SB7: Character Required on Home
H1 with the keyword, H2 with the offer, H3 detail, main CTA plus transitional CTA, proof photo. Passes the 10-second Grunt Test.
Placement shown: Left (recommended). The hero puts the text and CTA where the eye lands first, on the left at desktop widths, with the photo on the right. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: small H1 with the keyword, large H2 with the offer, H3 detail line, CTA button full width, transitional link under it, hero photo last.Layout at 390: 390 px single column: the four text levels stacked, CTA button full width, transitional link below it, then the proof photo with its declared size.Layout at 768: 768 px (iPad portrait), two columns: H1, H2, H3 and both CTAs on the left at 55 percent, the proof photo on the right.Layout at 1024: 1024 px (iPad landscape, small laptop), two columns at 50 percent each: text and CTAs on the left, photo on the right, H2 set larger than on a tablet.Layout at 1280: 1280 px, two columns: text block 600 px wide on the left, photo 560 px wide on the right, CTA and transitional link on one row under the H3.Layout at 1440: 1440 px wide, content max-width 1200 px centered, two columns inside the centered block, the photo never grows past its declared size.
H1: the keyword, who it is for
H2: the offer in one line
H3: one detail line that finishes the 10-second test
%3C/text%3E%3C/svg%3E)
03 Value stack SB7: Success Required on Home
The three quick wins the customer gets.
Placement shown: Center (recommended). Short, punchy content (a heading and three one-line wins) reads best centered. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: three win cards one under the other, each with an icon, a short title and one line of subtext.Layout at 390: 390 px single column: three win cards stacked with 16 px between them, icon left of the title, subtext below it.Layout at 768: 768 px (iPad portrait), three cards in one row of equal width, icon above the title, subtext under the title.Layout at 1024: 1024 px (iPad landscape, small laptop), three equal cards in a row with 24 px gaps, icon above the title.Layout at 1280: 1280 px, three equal cards in a row, each 360 px wide, icon above the title and subtext under it.Layout at 1440: 1440 px wide, content max-width 1200 px centered, three cards in a row inside the centered block, the side margins stay empty.
Heading: the three quick wins
Win 1
One line of subtext.
Win 2
One line of subtext.
Win 3
One line of subtext.
04 Stakes SB7: Problem Required on Home
What the customer wants, what stops them, the restated problem, one philosophical line.
Placement shown: Left (recommended). It holds a list and several lines, and longer text and lists read best left-aligned. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: the lead line of what the customer wants, the list of what stops them, the restated problem, the philosophical line, CTA button full width.Layout at 390: 390 px single column: list items at body size with 12 px between them, the philosophical line in larger type, CTA button full width at the end.Layout at 768: 768 px (iPad portrait), one text column 600 px wide and centered, the list under the lead line, CTA and transitional link on one row at the end.Layout at 1024: 1024 px (iPad landscape, small laptop), two columns: lead line and philosophical line on the left, the list on the right, CTAs under both.Layout at 1280: 1280 px, two columns: the statement and restated problem 480 px wide on the left, the list 600 px wide on the right, CTAs below.Layout at 1440: 1440 px wide, content max-width 1200 px centered, two columns inside the centered block with the CTAs under them.
Lead line: what the customer wants.
- What stops them, item 1
- What stops them, item 2
- What stops them, item 3
The restated problem, in one sentence.
One philosophical line: it should not be this way.
05 Value proposition SB7: Guide Required on Home
The services or three benefits, one sentence each, link to the services page.
Placement shown: Center (recommended). One heading, three one-sentence cards and one CTA is short content, so it reads best centered. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: the heading, three service cards one under the other (icon, name, one sentence), a link to the services page, CTA button full width.Layout at 390: 390 px single column: three service cards stacked with 16 px between them, services link, CTA button full width.Layout at 768: 768 px (iPad portrait), service cards in two columns with the third card full width below, the services link and CTA under them.Layout at 1024: 1024 px (iPad landscape, small laptop), three service cards in one row, the services link and CTA centered under them.Layout at 1280: 1280 px, three service cards in one row, each 360 px wide, the services link and CTA centered below.Layout at 1440: 1440 px wide, content max-width 1200 px centered, three cards in one row inside the centered block, the link and CTA below.
Heading: what we do for you
Service 1
One sentence on the benefit.
Service 2
One sentence on the benefit.
Service 3
One sentence on the benefit.
06 Guide SB7: Guide Required on Home
Empathy statement, authority statement, testimonials with photos, client logos.
Placement shown: Right (recommended). It has photos, so it takes the opposite side from the hero (testimonial photos on the left, text on the right), which starts the zig-zag. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: empathy statement, authority statement, each client photo with its testimonial one under the other, client logos in two wrapped rows, CTA button full width.Layout at 390: 390 px single column: empathy and authority statements, testimonials stacked with the photo above each quote, logos in two rows, CTA button full width.Layout at 768: 768 px (iPad portrait), statements in one column 600 px wide, testimonials in two columns, logos in one row of five, CTA under them.Layout at 1024: 1024 px (iPad landscape, small laptop), statements on the left half and testimonials on the right half, logos in one row under both, CTA below.Layout at 1280: 1280 px, statements 520 px wide on the left, two testimonials side by side on the right, one row of five logos under both, CTA below.Layout at 1440: 1440 px wide, content max-width 1200 px centered, the same two-column arrangement inside the centered block, logos in one row.
Heading: why you can trust us
Empathy: we understand what you are facing.
Authority: what we have done and for how long.
Testimonial quote, one or two lines.
Testimonial quote, one or two lines.
07 Plan SB7: Plan Required on Home
Three steps: step 1 is the CTA, step 2 what we do, step 3 the success.
Placement shown: Center (recommended). Three short steps and one CTA read best centered in a row. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: three numbered steps one under the other, each with an icon and two lines, step 1 holds the CTA button at full width.Layout at 390: 390 px single column: three numbered steps stacked with 20 px between them, the CTA button full width inside step 1.Layout at 768: 768 px (iPad portrait), three steps in one column 640 px wide with the icon on the left of each, CTA button in step 1.Layout at 1024: 1024 px (iPad landscape, small laptop), three step columns in one row, number and icon above each, CTA button under step 1.Layout at 1280: 1280 px, three step columns in one row, each 360 px wide, number and icon above the text, CTA button in step 1.Layout at 1440: 1440 px wide, content max-width 1200 px centered, three step columns inside the centered block, CTA button in step 1.
Heading: how it works in three steps
1
Step 1: take the action
Short line on the first move.
2
Step 2: what we do
Short line on our part of the work.
3
Step 3: the success
Short line on the result they get.
08 Packages and pricing SB7: Plan Optional on Home
Package cards with price and a short description. Only when the site shows prices.
Placement shown: Center (recommended). Three short cards and one CTA read best centered. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: three package cards one under the other, each with the name, the price in large type and a short description, CTA button full width at the end.Layout at 390: 390 px single column: three package cards stacked with 16 px between them, price directly under the name, CTA button full width.Layout at 768: 768 px (iPad portrait), two package cards in a row with the third full width below, CTA button centered under them.Layout at 1024: 1024 px (iPad landscape, small laptop), three package cards in one row of equal width, CTA button centered under them.Layout at 1280: 1280 px, three package cards in one row, each 360 px wide, price above the description, CTA button centered below.Layout at 1440: 1440 px wide, content max-width 1200 px centered, three cards in one row inside the centered block, CTA button below.
Heading: choose a package
Package 1 name
Price (only when the site shows prices)
Short description of what is included.
Package 2 name
Price (only when the site shows prices)
Short description of what is included.
Package 3 name
Price (only when the site shows prices)
Short description of what is included.
09 Explanatory paragraph SB7: Guide Optional on Home
Logo, H2 summary, one-liner and a narrative in rich text for search.
Placement shown: Left (recommended). Long narrative text reads best left, and the logo on the right keeps the zig-zag going after the Guide section (right, then left). The width sentences below are the library's base layout.
Layout at 360: 360 px single column: company logo, H2 summary title, the one-liner, then the narrative inside a closed details element the visitor opens.Layout at 390: 390 px single column: logo above the H2 summary title, the one-liner, and the narrative in a closed details element the visitor opens.Layout at 768: 768 px (iPad portrait), logo on the left at 30 percent, title and one-liner on the right, the narrative in a details element below.Layout at 1024: 1024 px (iPad landscape, small laptop), logo on the left at 25 percent, title, one-liner and narrative on the right in plain text.Layout at 1280: 1280 px, logo 280 px wide on the left, title, one-liner and the full narrative as plain text on the right at 640 px.Layout at 1440: 1440 px wide, content max-width 1200 px centered, logo left and text right inside the centered block, narrative as plain text.
H2: one-line summary of the company
One-liner: what we do and for whom.
Narrative (opens on tap)
Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.
Narrative placeholder: a few plain sentences about who the company is, what it does and where it works. This is the rich text that search engines read.
10 Lead magnet SB7: CTA Optional on Home
A free resource in exchange for an email. Needs an approved pack change (the form pack fills only name and phone).
Placement shown: Center (recommended). One title, one line, a short form and one button is short and punchy, so it reads best centered. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: the offer title, one line on what the guide covers, the form fields full width with 48 px inputs, the download button full width.Layout at 390: 390 px single column: offer title and one line, form fields full width with 48 px inputs and a visible error beside each, download button full width.Layout at 768: 768 px (iPad portrait), the offer title and line centered above a form 520 px wide, fields stacked, download button full width of the form.Layout at 1024: 1024 px (iPad landscape, small laptop), offer title and line on the left half, the form on the right half with stacked fields.Layout at 1280: 1280 px, offer title and line 480 px wide on the left, the form 560 px wide on the right, fields stacked, download button under them.Layout at 1440: 1440 px wide, content max-width 1200 px centered, title left and form right inside the centered block.
Offer title: the free guide
One line on what the guide covers.
11 Failure reminder SB7: Failure Optional on Home
H2 on the cost of not acting plus the CTA. Last block before the footer.
Placement shown: Center (recommended). One heading, one sentence and one CTA reads best centered. The width sentences below are the library's base layout.
Layout at 360: 360 px single column: H2 on the cost of not acting, one supporting sentence, CTA button full width.Layout at 390: 390 px single column: H2 on the cost of not acting, one supporting sentence with 16 px above the CTA button, CTA button full width.Layout at 768: 768 px (iPad portrait), H2 and the supporting sentence centered in a column 600 px wide, CTA button centered under them.Layout at 1024: 1024 px (iPad landscape, small laptop), H2 and sentence on the left, CTA button on the right of the same row.Layout at 1280: 1280 px, H2 and sentence 640 px wide on the left, CTA button on the right of the same row, band background fills the width.Layout at 1440: 1440 px wide, content max-width 1200 px centered, H2 and sentence left and CTA button right inside the centered block.
H2: what waiting costs the customer
One supporting sentence.