How Never to Struggle With Your Landing Page Layouts Again

I'm sure you know those little yellow, red, blue and black building blocks... You've surely played with them as a child. But you've probably never managed to create something like the picture below. 

By Nathan Sawaya, The Brick Artist

Even though you "know" the blocks, you don't fully understand how they can form these complex statues but Nathan, the artist, can look at an existing statue and immediately see how he would build it with LEGO.

The same can be said about landing pages. You might have seen the different elements in the Thrive Content Builder sidebar but as long as you do not really understand how these elements work, you'll struggle to create landing pages that look exactly the way you want on desktop AND mobile.

The good news is that most of the elements and settings are easy to apprehend. There are only 3 elements and 3 settings that need some explaining in order to use them to their full potential and unlock any landing page layout. After watching this video you'll be able to look at any landing page and "see" how to build it yourself.

More...

Element 1: Page Section (0:47 min)

Learn how to create this exact landing page here

On any landing page, you can change the background color of the full page by going into the landing page settings and change the color or add a background image. This is fine if you're building a simple image background landing page like this one.

If you want a landing page with different background colors and images, you'll need to use page sections.

A page section allows you to have full control over the background of only that section.​

As you can see on the image above, page sections allow you to switch colors and also to add background images. To make sure your content stays readable when using a background image, check out this tutorial on how to create the perfect background image for your WordPress website.

Element 2: Content Container (3:05 min)

A content container allows you to adjust the width of any element inside the container

Each time you want to restrain the width of your content, you need to use a content container.

This element can be used inside a page section or any other element such as content boxes, column layouts etc.​ and you can add any element inside a content container to limit the width.

The reason why you want to use a content container to change the width of your elements is to keep them mobile responsive.

Element 3: Content Box (5:28 min)

Look at this nice, white content box... You can learn how to make this exact one here

Content boxes allow you to change the background and border of only the box (rather than the whole page or the complete section) and because you can add elements inside a content box you can do more very cool stuff with them!

You would typically use them to create an attention grabbing element on your landing page.

Setting 1: Margins (6:43 min)

Margins are applied on the outer border of an element

When you add margins, you add spacing on the outer border of the element.

​Margins are very helpful to:

  • Align a title on a background image
  • Create visual grouping ​by adding or removing white space in between elements such as text elements, images etc.

Setting 2: Paddings (8:32 min)

Padding allows you to add spacing on the inner border of an element

When you add paddings, you add spacing to the inner borders of an element.

Adding or removing paddings will be most useful when you're using an element that is most likely to contain another element, such as a column layout, a content box, buttons etc.

How About Mobile?

One thing to keep in mind is that margins and paddings are fix. They will apply even on smaller screens, this is why we suggest you only use margins and paddings for vertical spacing (top and bottom) and always use a content container to restrain the width of an element.

4 Steps For Mobile Responsive Landing Pages 

  1. Check the mobile view
  2. Upload images in the optimal size
  3. Use margins and paddings with care
  4. Use column layouts for element alignments

Watch the full video instructions for these steps here.

Setting 3: Line Height (10:56 min)

If you want to change the spacing in between the lines of text within the same paragraph, you'll have to adjust the line height.

You'll typically use this for titles or to style a specific text element to make it stand out.

If you want to add spacing in between text elements, you'll use margins or paddings.​

I Would Like to Know...

What do you find most difficult when building landing pages? Let me know in the comments below!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she’s not busy discussing high-level funnel design over cocktails with the equally geeky, you’ll find her discovering a place for the first time

Get Thrive Comments at Launch Price 50% Discount - Limited Time Only