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.
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.
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.
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.
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.
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.
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 😉
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!
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.
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.
Very much alive and kicking, John 😉
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.
Yes that’s not an obvious one at first but so easy once you know it 🙂 Happy this will save you some frustration!
When will we see the new theme?
Thanks Artur. We’re working hard on the new theme!
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
Thanks for the suggestion Johannes. Keep an eye on an upcoming video (beginning of next week) I think you’ll like it 🙂
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?
Sorry, video got a little delayed. But it’s live now! You can discover the symbols feature here
Thanks Hanne, this is useful.
Happy to hear Nigel
Thanks Hanne. Certainly very useful. I love how you share with us all the fundamentals. It makes the learning curve so much easier.
Great to hear Barbara
Thanks Hanne! I have been going back and forth changing all the individual elements a lot:). More fundamentals will be really appreciated!
More fundamentals coming up soon 🙂
Thank you very much indeed!
Hi Hanne, are there other videos or web pages which you would recommend here on ThriveThemes that discusses principles for creating Landing Pages?
Any of the landing pages from scratch would be a good place to start.
Thank you, Hanne, this is exactly what I was looking for!
thanks for this video! Super helpful for working on my site. I’ll use this principle from now on.
Perfect! Thanks Cathryn
Great Post! Very Helpful (Definitely NOT Rubbish!) 🙂
Phew happy to hear David!
Very helpful and well explained. Thank you!
Hahahah good observation skills Chris. I asked him to stop during my recording but he didn’t listen :p
Thanks Hanne, always good stuff from you and Team Thrive!
Thank you for sending these time and effort saving tips.
You’re welcome David
Thank you for this info. It explains some things causing frustration. Very helpful.
Hi Sande, hope that frustration is past time now!
One of the best tips ever! Shows you guys are starting to understand how people like us use your tools day in and out.
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!
Thanks Craig. We’re working hard on the theme!
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. 🙂
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!
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.
Yes they do. They work on any theme (Thrive or not Thrive)
Yes yes yes! I didn´t know this, and it´s really helpfull! Thanks a lot! 🙂
Glad to know Gabriela!
Yes this is definitely helpful and easy too. Follow the breadcrumbs. Thank you Hanne.
Ooo that’s a nice one “Follow the breadcrumbs”. I might “steal” that in an upcoming tutorial 😀
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!”
Sorry to hear you had to go through the frustration before but better later than never, right?
Very, very useful. And so obvious once explained. Also loved the onion video. Thanks for including that.
Hihi thanks Lyn
I didnt’ noticed it works like that. Thx Hanna. Clear !
Hi Stephane, I’m sure now you’ll see why certain elements didn’t really behave the way you wanted them before.
Helpful! It is definitely a game changer principle. (And awesome earrings, Hanne!!)
I noticed it but didn’t really use it. Thank you so much!!!!
I hope now you see the full advantage of using it 🙂
Oh my, I wish I knew this earlier. Thank you, Hanne!
Yey 🙂 Thanks Maureen
I found this helpful Hanne. Thank you.
Thanks Tomas, great to know.
I somehow figured it out earlier (probablyfrom Shane’s videos), however you made it very simple clear. excellent tip post.
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.
Very useful post Hanne. This will save me hours of work in TA on my current work alone. Keep post like these coming. ????
Yes will do Steve
Thx Hanne ! Been using TA for years and didnt know about that 🙂
Great, hope it will help!
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:
We have a tutorial on how to create the bubble effect right here!
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.
It seems quicker but in the end, you’ll spend a lot more time on it 🙂
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.
Are you trying to change the fonts for your theme? This is done in the theme font customizer
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.
Yes, the landing page from scratch videos are a good way to pick up some of this by doing!
Very useful tips Hanne. Like you said, I wish I had known this before. What a time save it would have been / will be.
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?
Thanks for the suggestion Dean, this is not something we’re working on ATM.
Very helpful. Thank you Hanne!
Love this. More shortcuts like this please 🙂
Will do Jo! Glad you found it helpful
Wow, that really clarified a few things for me. Thanks
Happy to hear Mary!
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.
omg! Why didn’t I know this sooner!! 🙂
Happy to hear Sophie
Extremely helpful video. I would like to see a whole series of “Design Fundamentals”. Such as recommendations for image sizes for the web page components, but also Facebook, Instagram, etc. Also font size recommendations for responsive design. Use of colors, spacing, etc.
A section in Thrive University for the fundamentals would be nice. You all have great training videos, but it is sometimes hard to find them unless you know specifically what to search for. Some different topics with a list of associated video would be helpful.
Sometimes you all are so knowledgeable on design and the Thrive products, that it is hard to catch how you did something on screen. Shane is really quick on some of the things he does. I will replay a video multiple times to try to see how he did what he is feature he is showing us.
Additional videos showing how you all do things would be nice. For instance, how and what do you use to make your training videos and images.
Is there a way at the theme level to set the fonts for h1, h2, h3, etc for the different screens (full, tablet, mobile). Or is this just a landing page option.
If I change the fonts on the landing page, does this just affect just the landing page I am working on or all future pages? Does it affect the prior pages I have created? If not, how could I change all my pages if I did use the outside in principle?
Thanks again for all the great training and products you all do.
Hi, Thanks for the suggestions.
To answer your questions about fonts:
– When you change the fonts on landing page level (settings – fonts) this will only change for that one landing page.
– When you change the fonts on theme level (in the WordPress customizer options for your theme) it will change on all your WordPress pages and you can overwrite it with Thrive Architect on a per element level.
Another great tutorial. Why didn’t I think of this myself! Thanks.
This is great info. It also explains why I’ve struggled to successfully make changes to some of the templates.
I’m curious: in mobile view, does it apply to both the horizontal and vertical view? i.e. If I turn my phone from portrait to landscape, will the elements still present the same way?
Usefull!! Happy to learn that before starting using Thrive Architect. Thanks
Thank you Hanna. I just begin. It is good to hear this kind of possibilities
Hanne, this tutorial is amazing. I only wish I had watched it on day 1 of creating. Maybe the Thrive team can create a check list of essentials (like this) to be watched prior to creating content with Thrive.
Thank you so much!