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.
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.
Element 1: Page Section (0:47 min)
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)
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)
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)
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)
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
- Check the mobile view
- Upload images in the optimal size
- Use margins and paddings with care
- Use column layouts for element alignments
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!