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.

More...

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.

Working from the Outside In

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

When applying the same styling to multiple elements, apply the styling to the parent container of those elements, starting from the biggest container working your way inwards to the smallest container.

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.

The Outside In Principle Applied to 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.

1. How to Style All Headings and Paragraphs on the Page

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.

The most outer container: Thrive Landing Page

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.

2. How to Make All Text Elements White on a Dark Background

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.

The Background Section is inside the Thrive Landing Page container

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.

3. How to Apply Styling on the Columns Element and Each Individual Column

Video time stamp: 04:57

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

The individual column element is inside the columns element. Both can be used for styling.

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.

4. How to Apply Styling to a Group of Elements: The Content Box

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. 

Warning: Why Inside-Out Doesn't Work

One thing that's crucial to understand is that styling applied to a smaller, inner container will always override the settings from the bigger, outside container.

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!

Styling and Mobile Editing.

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.

Useful or Rubbish?

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.

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

  • Christopher B says:

    Excellent. As always clear and concise presentation. A considerable time saver. Is there a way, for example, to copy (save) a content box with columns, text, images and then insert the copied (saved) content box into a new page? Thank you.

    • SupportThanks says:

      I just learned how to do this today, and maybe it’ll be another tutorial video. if you look up how to use Template/Symbols you’ll find exactly what you’re looking for. The use of the word ‘symbol’ is non-intuitive, but in this case it’s used to mean “thing you’d like to copy and repeat …” Hope that helps ;)

      • Hanne says:

        Hi,
        I’m happy you discovered this feature (it’s brand new for symbols) but it existed since a while and is called a “content template”.
        A content template is a template you copy and repeat, if you put the template on different pages, each template will be independent and you’ll have to update them separately.
        A symbol is a synchronize content template that will update all instances on all pages when you update the Symbol.

        We’re working on a full tutorial about Symbols, showing how and when to use it. It will be published beginning of next week!

    • Hanne says:

      Hi Christopher,

      Yes you can do that! You can save any element as a template (or as a symbol which is a synchronized template).
      Simply click on the element and you’ll see a little save icon next to the name in the upper left corner (in the latest version of Thrive Architect).

      If you’re on an older version, you can save a template by going to the “styles and templates” menu, click the save template button, give it a name and again click on the green save template button. (You won’t have the symbols option though, that’s brand new)

      Here’s the full tutorial on how to do that.

  • John C says:

    It’s always great to see these tips. For me it helps maintain a sense of security in Thrive Themes as a live and active supplier.

    • Hanne says:

      Very much alive and kicking, John ;)

  • Quentin Pain says:

    Such a good reminder Hanne. I’d never thought about your final point on in-line styling and the effect on different devices – and it explains why sometimes I could never get certain elements the way I wanted them when tailoring stuff to look good on mobile and desktop. All is now clear. Thank you.

    • Hanne says:

      Hi Quentin,
      Yes that’s not an obvious one at first but so easy once you know it :) Happy this will save you some frustration!

  • Artur Zygmunt says:

    Great content!

    When will we see the new theme?

    • Hanne says:

      Thanks Artur. We’re working hard on the new theme!

  • Johannes says:

    a post on how to use css to have same design and easy change on all landigpages would be great (color, logo, fonts,..) so that if there is a change in the corporate design it would be easy to change site wide not just on the blog but also on landing pages

    • Hanne says:

      Thanks for the suggestion Johannes. Keep an eye on an upcoming video (beginning of next week) I think you’ll like it :)

      • Johannes says:

        did i miss the video?

        cause i am in the redoing of the website and would like an easy way later on to redo my pages later on – currently i have to open every page and do the changeing – is there a way to use css or have an overall template which can be changed or something like this?

        thanks

  • Thanks Hanne, this is useful.

  • Barbara says:

    Thanks Hanne. Certainly very useful. I love how you share with us all the fundamentals. It makes the learning curve so much easier.

  • adriaan says:

    Thanks Hanne! I have been going back and forth changing all the individual elements a lot:). More fundamentals will be really appreciated!

    • Hanne says:

      More fundamentals coming up soon :)

  • José says:

    Simply… GREAT!!

    Thank you very much indeed!

  • Erik E says:

    Hi Hanne, are there other videos or web pages which you would recommend here on ThriveThemes that discusses principles for creating Landing Pages?

  • Cathryn Cade says:

    Hanne,

    thanks for this video! Super helpful for working on my site. I’ll use this principle from now on.

    • Hanne says:

      Perfect! Thanks Cathryn

  • David J says:

    Great Post! Very Helpful (Definitely NOT Rubbish!) :)

    • Hanne says:

      Phew happy to hear David!

  • Sandra says:

    Very helpful and well explained. Thank you!

  • Chris says:

    6:22: cockadooodlledoooo!!!!

    • Hanne says:

      Hahahah good observation skills Chris. I asked him to stop during my recording but he didn’t listen :p

  • Randy says:

    Thanks Hanne, always good stuff from you and Team Thrive!

  • David Moran says:

    Thank you for sending these time and effort saving tips.

    • Hanne says:

      You’re welcome David

  • Sande says:

    Thank you for this info. It explains some things causing frustration. Very helpful.

    • Hanne says:

      Hi Sande, hope that frustration is past time now!

  • Rajavanya Subramaniyan says:

    One of the best tips ever! Shows you guys are starting to understand how people like us use your tools day in and out.

  • Craig B says:

    This is great – just like Shane’s recent video on categories and tags – very basic info that many may not know! Keep up the great work. How’s the theme coming along! I’m getting antsy!

    • Hanne says:

      Thanks Craig. We’re working hard on the theme!

  • Joe says:

    Point of confusion: if you are using wordpress, have aLuxe theme, and start designing a ‘full width page”, does the ‘thrive landing page’ container exist?

    And if not, is there a way to add/include it?

    And a very helpful article. :)

    • Hanne says:

      Hi Joe,

      It does not. It will only exist when you start form a landing page template.
      But you don’t need it. You can start putting a background section on the page and that will be your most outer container.

      The fonts on the page are handled by the theme (they will automatically inherit your theme settings) which will make the page match your theme.
      If you want to change them, you can do it on the background section.

      Hope this clarifies it!

      • Joe says:

        Thanks. That is clearer.

        Though it does pose a stupid question – do the landing page templates work on a wordpress site with a Luxe theme?

        I am assuming so, but truthfully haven’t worked with any of them yet.

      • Hanne says:

        Yes they do. They work on any theme (Thrive or not Thrive)

  • Gabriela T says:

    Yes yes yes! I didn´t know this, and it´s really helpfull! Thanks a lot! :)

    • Hanne says:

      Glad to know Gabriela!

  • Bart says:

    Really useful!

  • John says:

    Yes this is definitely helpful and easy too. Follow the breadcrumbs. Thank you Hanne.

    • Hanne says:

      Ooo that’s a nice one “Follow the breadcrumbs”. I might “steal” that in an upcoming tutorial :D

  • Diane says:

    Hanne Thanks you so much! I just spent 2 weeks trying to do my first page… and fought with this for so many hours. It’s so frustrating when you change a font size, and for some reason the font color, type, and style totally change… for no reason that you can see. This will make a HUGE difference. “Just wish I’d known this sooner!”

    • Hanne says:

      Hi Diane,
      Sorry to hear you had to go through the frustration before but better later than never, right?

  • Lyn McNamee says:

    Very, very useful. And so obvious once explained. Also loved the onion video. Thanks for including that.

  • Stephane says:

    I didnt’ noticed it works like that. Thx Hanna. Clear !

    • Hanne says:

      Hi Stephane, I’m sure now you’ll see why certain elements didn’t really behave the way you wanted them before.

  • Jimmie says:

    Helpful! It is definitely a game changer principle. (And awesome earrings, Hanne!!)

  • Margherita Pescollderungg says:

    I noticed it but didn’t really use it. Thank you so much!!!!

    • Hanne says:

      I hope now you see the full advantage of using it :)

  • Maureen says:

    Oh my, I wish I knew this earlier. Thank you, Hanne!

  • I found this helpful Hanne. Thank you.

    • Hanne says:

      Thanks Tomas, great to know.

  • Ahrale says:

    Thanks Hanne,
    I somehow figured it out earlier (probablyfrom Shane’s videos), however you made it very simple clear. excellent tip post.

    • Hanne says:

      Hi Ahrale,
      Yes, Shane definitely mentioned this principle in one of the landing page from scratch videos because it is the easiest way to style a page starting from nothing.

  • Steve H says:

    Very useful post Hanne. This will save me hours of work in TA on my current work alone. Keep post like these coming. ????

  • George says:

    Useful!

  • mehdi b says:

    Thx Hanne ! Been using TA for years and didnt know about that :)

    • Hanne says:

      Great, hope it will help!

  • Keno says:

    Hey Hanne!

    Thanks for the great help.

    By the way:
    How do you create that circle in which you appear?
    Does anybody know if that can be achieved via Screenflow too?

    Thanks in advance and cheers from Hamburg:
    Keno

  • Clark says:

    Very useful reminder for me. I too often get caught up in the immediate change I want to make and I forget to go upstream and make the change their.

    • Hanne says:

      It seems quicker but in the end, you’ll spend a lot more time on it :)

  • Thomas S says:

    Hi Hanne

    certainly very useful – if it would only work for a given theme such as M- Nus I am right now working with. It would be a great feature to change the styling for titles(H1, H2 …) within Thrive architect – unfortunately doesn’t work here – tried to find the CSS file but wasn’t sucessful.

  • Michael D says:

    Now THIS is an amazingly useful piece of content, Hanne!

    To tell you the truth, I’ve picked up some of this here and there from other videos that you and Shane have put out, but this is a wonderful resource!

    I’m feeling like there’s nothing I can’t build now.

    Seriously, the only thing I’m avoiding is learning CSS in order to solve an occasional issue that I bother your support staff for.

    Thank you.

  • Gary Barclay says:

    Very useful tips Hanne. Like you said, I wish I had known this before. What a time save it would have been / will be.

  • Dean says:

    Hey guys!

    Any plans to allow a page to share a Thrive Comments thread (for video launch pages etc) – where the same comments are placed on several pages like FB comments can do?

    • Hanne says:

      Thanks for the suggestion Dean, this is not something we’re working on ATM.

  • Rick Macosky says:

    Very helpful. Thank you Hanne!

  • Jo says:

    Love this. More shortcuts like this please :)

    • Hanne says:

      Will do Jo! Glad you found it helpful

  • Mary T says:

    Wow, that really clarified a few things for me. Thanks

  • Chris says:

    What can I say? Another brilliant piece. Far from rubbish. Indeed just the right didactical approach.

    Teaching principles rather than techniques make the difference between empowering people and breeding lemmings.

    Hey Hanne, are you sure are no Krav Maga Instructor?

    Anyway, thrive on with all your superbness.

  • Debs says:

    omg! Why didn’t I know this sooner!! :)

  • Sophie says:

    Super helpful!

  • >

    Join Thrive University (it's FREE!)