Subtitle/H5

hero-row/h1

hero-column-one/hero-blurb

  • Full width fluid layout
  • Fonts sizes in rems (set to 1rem =10px)
  • Positioning in %
CALL TO ACTION

The most seen section. Give visitors clarity and a reason to care. Emotion sells more than logic.

Eyes rest here! What does the visitor need?  A picture of you, opening hours, a summary of what you do?

?text=hero-column-two

content-row/h2

?text=content-column-one

content-column-two/h3

The images on this wireframe page are added via URL from placeholder.com. The one in this row left looks like this:

https://via.placeholder.com/500x.500gif/000/fff/?text=content-column-one

500x.500gif sets the size and image type. 000/fff sets the colour and ?text= is where you add text. The great thing is you can change these in the page builder and get a live preview.

What the next logic visitor question. Do they "feel" the problem you solve?

benefit-row/h2

?text=300 x 180

benefit-column-one/h3

CSS bottom aligns modules (buttons) regardless of content.

Button
?text=300 x 180

benefit-column-two/h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet consectetur.

Button
?text=300 x 180

benefit-column-three/h3

The Box shadow here is added to the Layout CSS.

Button

What you do presented in way that visitors can image their lives being better.

Another CTA

second-content-row/h2

?text=second-content-column-one

second-content-column-two/h3

Make copy easy to scan:

  • Strong headers.
  • Short paragraphs.
  • Simple words
  • Not too many bullet points!

Unless an authority site avoid writing in the 3rd person. It's used for lazy selling that would sound arrogant in the 1st person.

We can avoid "I" and "we" by finding short or bulleted pointed ways to provide the information the visitors wants

This my link styling.

second-content-column-three/h3

Format for custom selectors:
.header-row
.header-column-one  | .header column-two  etc.

If both columns are styled the same use .header-column for both.

Most rows are only needed once on a page:
.hero-row  | .benefit-row |. feature-row | .testimonial-row  etc.

EXCEPT content rows which are named as:

.second content-row |  ..third-content-row etc.
The columns for each are named:
.second-content-column-one | ..second-content-column-two|

There's no plurals .

Optional. Some sites need to say more and show more images.

?text=second-content-column-four

feature-row/h1

feature-row/h2

This section helps with font size setting

feature-column/h3

?text=300 x 100px

heading 4

heading 5
heading 6

Lorem ipsum dolor si sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

feature-column/h3

?text=300 x 100px

heading 4

heading 5
heading 6

Lorem ipsum dolor si sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

feature-column/h3

?text=300 x 100px

heading 4

heading 5
heading 6

Lorem ipsum dolor si sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

feature-column/h3

?text=300 x 100px

heading 4

heading 5
heading 6

Lorem ipsum dolor si sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Another CTA

Your grabbed their attention, they feel the pain of problem, Your benefits show a better life. Now they need justifications to buy.  Now tell them more of they will get.

testimonial-row/h2

?text=^_^

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Pete Smith - Tech Wizard

?text=._.

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Pete Smith - Tech Wizard

?text=^_^

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Nancy Jones - Vet

Best with real and known people.  Cynically viewed, but can say things the site owner can not and show the type of customers you suit best.

team-row/h2

?text=^_^
Bob Smith
?text=^_^
Bob Smith
?text=^_^
Bob Smith
?text=^_^
Bob Smith
?text=^_^
Bob Smith
?text=^_^
Bob Smith

sp-row (social proof)/h2

?text=*****
?text=___
?text=*****
?text=___
?text=*****

Companies we work with / publications that have featured us/Even tools we use. Helps to create a connection/ familiarity.

cta-row (call to action)/h2

cta-column/h3

Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Augue neque gravida in fermentum et sollicitudin ac.

Amet porttitor eget dolor morbi. Quis commodo odio aenean sed adipiscing diam.

Get exclusive offers and information on upcoming events.

70% of visitor will never come back. Have you an excuse to get their email?

Folk need to know what to do next They browse in lizard brain mode. Wake them with a shiny button. Make it easy/irrisitable.

contact-row/h2

10% of people need detail and reassurances. A fat footer is a good place to share links and credentials for these people. 

CALL US
01234 -567-890
0800 -567-890

VISIT US
1a Acacia Avenue
London, NW1 1AZ

 

EMAIL US
email@ourdomain.com
info@ourdomain.com