The Outside In Principle: Gain Precious Time Building and Customizing Pages in Thrive Architect

Why did nobody teach me that sooner?

​That's what was going through my head watching this Gordon Ramsay video on how to finely chop an onion.

Knowing this technique saves me a lot of time and (literally) tears.

Often, discovering professional tricks like this feel like discovering a unicorn that was hidden in plain sight all along.

In this video, you'll discover such a technique for Thrive Architect.

Click - Customize - Click - Customize...

Because of the advanced customization options Thrive Architect offers, it's easy to waste a lot of time applying styles.

It can also be redundant (and boring). You click on a text element, center align it, click on the next element, center align it, etc.

This is not very efficient. Luckily, there is a better way! 

We call it the Outside In Principle.

The short explanation of the Outside In Principle is the following:

This Outside In Principle can be applied for any styling but in order to make it as clear as possible, this tutorial will focus on text styling.

Styling text can be a real challenge. On any given page you have tens or hundreds of paragraph and header elements.

Styling each of these one by one (which is called in-line styling) would be torture. 

Let's apply the Outside In Principle.

Video time stamp: 01:04

When you click on any element on a landing page template or when you start building a landing page from scratch, the very first container is the Thrive Landing Page container.

This is the outermost container that envelopes all other elements on the page.

Applying the Outside In Principle, this is the first container you will apply text styling on.

Because this container surrounds every element on the page, it allows you to apply styling to all the text elements on this landing page at once.

This is particularly useful to choose or change:

• Heading and paragraph fonts
• The font size for the headings and paragraphs on desktop, tablet and mobile
• The font colors for the text elements
• Alignments (eg. If all of your headings are center aligned)

Ask yourself: "What styles do all (or most) of my text elements have in common?" and then apply this on landing page level.

Note: If you're starting from a normal WordPress page as opposed to a landing page, the Thrive Landing Page container will not exist. In that case, font settings are handled by your WordPress theme. To change text styling only on the page you're currently working on, you'll need to apply the styling to other containers which we'll cover next.

Video time stamp: 03:06

Now that we applied styling on the outer container, the Thrive Landing Page, we can look at the next container in line.

Background sections are used to style the background (such as changing the color or adding a background image) but also to style all the text elements within that background section.

That's why all of our landing page templates have background sections and why when we build landing pages from scratch, we always start by adding background sections on the page.

Now, the advantage of the Outside In Principle is that the majority of the text elements on your page are already styled exactly the way you want them (because you applied the text style on the Thrive Landing Page) and only some elements will need to be changed.

Typically, you'll have a light page background with dark text on it, but you might have a dark background section or an image background section with a heading, subheading or other text elements on top of it.

In order for the text to be readable, it has to be white but the rest of the text elements on the page should keep their original color.

To do this, you'll apply text styling to the background section.

Video time stamp: 04:57

Inside the background section, you'll have other elements such as a column element.

If you want to apply a specific styling to the text elements within the column layout (that does not apply to other elements in the background section), you can apply styling on the "columns" element.

And if you want to apply a specific styling to just one column within the columns layout, you can click on "column" and apply styling there.

Video time stamp: 06:10

The content box is one of the most underrated elements in Thrive Architect. You can not only use it to visually put a box on the page (as you can see in the video), but you can also use it to group certain text elements you want to apply the same styling on. In that case you can use a transparent content box!

The transparent content box acts as an invisible container around multiple (text) elements. 

This is not a Thrive Architect restriction but a CSS rule (CSS is the design language of the web). 

For example, if you first click on the columns element and change the font color to pink and then you decide to change the color of all the text elements in the background section that contains the columns element to green, the pink text will stay pink. Because the pink styling is applied to a smaller container (in this case the columns element) and overrides the styling on the outside container (in this case the background element).

When you think about it, this is pretty logical. If the styling applied to inner containers would not override the styling from the outside container, it would be impossible to style certain elements. In fact, the great efficiency you see here in the Outside In Principle wouldn't be possible.

This is why, in order to style text as quickly and efficiently as possible, you should always start styling elements from the Outside In!

There is one last, very important note about styling containers versus styling each text element one by one and it concerns mobile editing.

Styling a single text element is called in-line styling.

In-line styling can not be changed on desktop, mobile or tablet only. It will always apply to all views.

Imagine you have 3 columns on your page and you want the text within the columns to be left aligned on desktop but center aligned on mobile.

If you apply the changes in-line (you go to the mobile view, click on a text element and center align the text element), this will also apply to the desktop view.

But if you apply the styling on the column element, you can have center-aligned text on mobile and left aligned text on desktop.

To learn more about this and about other rules for mobile editing, check out this video explaining how to create mobile friendly content.

This is not our usual tutorial showing how to build a specific layout from scratch... But understanding this principle is fundamental to building and customizing (landing) pages faster and more efficient which is why we thought this would be useful.

But we might be wrong!

Let me know in the comments below if this was helpful or not and if you want to get more of these "Thrive Architect Fundamentals" videos in the future.