The Outside-In Principle: Time Saving Tips for Setting Up Headings and Fonts

Do you ever wonder how people build websites so quickly?

Does it ever seem like other people can build entire websites in mere hours, while you’re sitting there taking days — or even weeks — to accomplish the exact same thing? 

Here's a little secret: It’s not that other people are web design geniuses (well, most people aren’t). It's much more likely that other people are just hip to a web styling methodology that saves tons of time and makes their workflow much, much easier. 

It’s called the Outside-In Principle, and this post is here to teach you how...

The Outside-In Principle is an extremely useful technique that can be applied to colors, responsive design, and more. In this article, we’ll explore how you can use the Outside-In Principle to style your website’s typography.

Now, we have to warn you: At the outset, the Outside-In Principle can seem a bit complex. However, once you master it, you’ll never look at building websites the same way again. 

But before we delve into it, there’s one key concept you must learn to help apply the Outside-In Principle effectively...

Theme Templates vs. Standalone Pages

Theme Templates

Theme templates are used to ensure that specific groups of pages on your site display the same header, top section, sidebar, bottom section, and footer design (or lack thereof). For example, if you want your About and Contact pages to display a page title in the exact same way, you could use a theme template to manage that:

If you aren’t familiar with templates at this point, think of them like using a cookie cutter to make star-shaped cookies.

When you serve the cookies to your guests, all of the cookies have the same star shape, but your guests won’t see the cookie cutter you used to make them (that’s hidden away in your cupboard). By the same token, your theme templates are hidden away inside Thrive Theme Builder and are not shown to your website visitors. All they see are the gorgeous pages that all have the same structure thanks to the template.

And the icing and sprinkles you add to each star-shaped cookie are different (that's like the unique content you create that gets displayed within the structure of a theme template).

When your website visitors view a page or post that uses a theme template on your website, what they see is a marriage of two entities: a theme template + content:

You can edit your theme templates by going to the Templates tab in Thrive Theme Builder:

You can create and edit content for pages by going to the WordPress Pages tab:

And you can create and edit blog posts by going to the WordPress Posts tab:

As you build and customize your website, it may be helpful to know:

• All blog posts use a theme template.
• Pages may or may not use a theme template.

Pages that use a theme template do not have any special designation in Thrive Theme Builder; pages that do not use a theme template are called standalone pages (also called “landing pages”).

Standalone Pages (a.k.a. Landing Pages)

Standalone pages are typically one-off pages. As you create your website, you would typically use a standalone page for structurally or stylistically different pages that need to standout from the rest of your website — like a lead generation page, sales page, homepage, etc.

For example, you might create a sales page for an e-book you wrote. Standalone pages allow you to hide distracting theme controlled sections like your header and sidebar on such pages to help keep attention on your sales copy. And since this page is structurally different from any other page on your website, it makes sense to use a standalone page instead of a theme template.

Standalone pages also allow you to easily assign customize fonts and colors to really set that page apart from the rest of your website — and that’s where the Outside-In Principle comes in...

Categorizing Pages

Now that you’re familiar with the difference between theme templates and standalone pages, let’s look at a basic website setup:

We have a Homepage, an About page, a Contact page, a Services page, a Blog List (also known as a blog feed, blog reel or blog archive), a couple of individual blog posts, and a Sales Page. Pretty standard, right?

Understanding which pages are standalone pages and which pages were built using a theme template will help us use the Outside-In Principle to style our typography with the fewest number of required clicks.

Homepage: In this example, the Homepage is set to be a standalone page (although you do can set your Blog List page as the homepage in Thrive Theme Builder if you prefer).

About, Contact, and Services pages: These all have the same header, top section, and footer, so it makes sense to use the same theme template for these pages.

Blog List page: A "list" or "archive" theme template that displays your blog posts in chronological order. 

Blog Posts: Individual posts display the same theme template controlled design, but load unique, dynamically populated content within it.

Sales page: Since sales pages need to be structurally and stylistically different from the other pages on a website, it usually makes sense to create them as standalone pages.

This is quite a lot of information to keep track of, so don’t worry if it hasn’t all sunk in yet. The important thing to remember is that every web page on your site either uses a theme template, or is a standalone page. 

With that, let's learn how to use...

The Outside-In Principle

Here’s the gist:

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

In general, smaller containers override larger ones.

The Outside-In Principle comes from Cascading Style Sheets (CSS), so if you’re a developer, this may already be familiar to you.

For the rest of us, let’s start by defining our containers. 

Again, we have our basic website:

It may be a bit difficult to see in these tiny thumbnails, but most websites use a specific set of fonts and colors throughout the entire site. Across-the-board customizations like these are typically done in your WordPress theme settings. 

So, the largest “container” to which we can apply style choices is at the WordPress theme level. Let’s draw a container now to represent this theme level (you’ll see where I’m going with this in a second):

Next, you might recall that some groups of pages use a template. You can customize templates to use specific fonts and colors, and those customizations will show up automatically on all posts or pages where the template has been assigned.

Let’s draw a container around those pages to represent the template used to create them:

Can you see the containers starting to take shape?

Every post or page that uses a template has a content section. And within that section, you can have Background Sections, Content Boxes, Columns, and more. If you want a specific section to stand out from the rest of the page it's on, you can set a different font and font color just for that section:

Finally, within a section, let’s say you want one particular text element to have its own, uniquw style. You can apply style customizations to individual elements:

And there you have it! Those are the Outside-In container levels for pages and posts that use a theme template.  

But what about standalone pages?

The container levels for standalone pages are virtually the same, but instead of making customizations at the theme template level, you can make customizations at the standalone page level instead:

In Thrive Theme Builder, there are 4 container levels to which you can apply your style customizations:

1. Theme
2. Theme Template or Standalone Page
3. Section
4. Individual Element

The very first step in applying a customization to a page of your website — such as a font style — is asking yourself: "Which container level makes the most sense to apply this customization to?"

For example, if you want the customization to appear consistently throughout all of your website’s pages, then the theme level would be the most appropriate; if you’re designing a standalone page that you want to look stylistically different from the rest of your website, then the standalone page level would make the most sense. 

Using the Outside-In Principle

Generally speaking, the most efficient way to use the Outside-In Principle is to work your way inward through all the levels — starting with the theme level.

For example, to ensure that all of the headings throughout your site use the same font, size, and color, you should establish your theme level typography settings in Thrive Theme Builder using the Typography tab:

Then, you would customize each of your theme templates...

… then individual posts and pages as needed:

The benefit to establishing your font styling this way is that you can set up your typography in as few clicks as possible — saving you precious time and effort! 

Now you might ask: "Must I set up fonts at the theme level before setting them up at the section level?"

Nope! With Thrive Theme Builder, you can start working at any level you wish. We simply suggest that you start with the theme level and work your way inward through the containers because it tends to be easier, less confusing and save you lots of time — especially when you need to make design changes to your site in the future. 

And, there’s one more detail that might encourage you to always begin your customizations at the theme level...

Smaller Containers Override Larger Ones

Before we get into the nitty-gritty of applying the Outside-In Principle, it’s important to note that customizations made to inner containers will override customizations made to the outer containers.

For example, when you set up fonts at the standalone page level, and then set up fonts for a specific section on that page, the customizations made at the section level will override the font settings made at the standalone page level:

"And what if I then go back and change the fonts at the standalone page level?" you're asking?

You’re all good; the customizations made at the section level will not change because they still override any standalone page level customizations.

Using the Outside-In Principle to Style Fonts on Your Website

Now that you’re familiar with the Outside-In Principle concept, let’s see exactly how to apply it across your website.

1. The Biggest Box: Setting Up Fonts at the Theme Level

To set up the global default typography for your website, you can use the Typography tab in Thrive Theme Builder dashboard. The specifications you set here will reflect throughout your website, including on:

• The Active Homepage
• Default post and page templates
• All single content templates
• All list templates
• All WooCommerce templates

Using the Typography Tab

When you click on the Typography tab, you'll be greeted with the active set of fonts for your website. To edit these typography selections, start by clicking on the pencil icon in the lower right hand corner of the box to open the typography settings editor:

In the typography settings editor, notice that the elements on the page are surrounded by nested containers. You can even use the Outside-In principle here to save time as you edit your theme level default typography. How?

• Selecting the outermost container, or All Elements from the breadcrumb menu, will allow you to customize the font, color, and shadow settings for all typography elements at once (except for the pre-formatted text element at the bottom of the editor). This is handy if you want all of your headings and your paragraph text to use the same font: 

• Then, you can take one step inward to edit grouped elements such as All Headings, All Texts, or the List element. Use the breadcrumbs at the top of the page, or hover over grouped elements to select the appropriate container. The options on the left will change depending on which group is selected:

• Finally, you can select individual elements by clicking anywhere inside the individual element container:

And that's it! With just a few clicks, you've set up the theme level fonts for your homepage, your page templates, and any posts or pages that have theme templates assigned.

If you’d like to make any changes to default fonts, you can simply re-visit the Typography tab in the Thrive Theme Builder dashboard to do so. Changes made here will be reflected throughout your entire site — excluding on your non-ShapeShift, pre-built landing pages and on other Thrive Themes tools that have their own settings that override your theme level settings.

Exceptions to Typography Tab Styling

There are a couple of exceptions to be aware of when specifying text styles using the Typography tab inside the Thrive Theme Builder dashboard:

Exception 1: The text styling in the Typography tab does not apply to non-ShapeShift pre-built landing pages in the Landing Page Library (we’ll go into more detail on this in a moment).

The non-ShapeShift landing pages in the Landing Page Library will not inherit the fonts you set in the Thrive Theme Builder dashboard Typography tab. Instead, they use the fonts set by our wonderful designers who custom-designed these landing page templates. However, you can easily change the fonts for the entire page of a non-ShapeShift landing page at the standalone page level.

Exception 2: Some ShapeShift sections do not honor color settings set in the Typography tab for headings. 

Although this might initially sound like a let down, it’s actually very intentional for your benefit. 

Let’s take a quick look why.

Here's a set of fonts I've specified in the Thrive Theme Builder dashboard (notice how I've made the H1 and H2 heading colors really standout):

And here's a resulting blog post using those theme level typography settings without any additional customizations applied:

Notice that the H2 heading uses the color  I specified in the Thrive Theme Builder dashboard, but the H1 heading is not — instead of pink it's white. That's because the H1 color was specified by our designers to make sure that this page would look good no matter what theme level typography settings you established. 

Why? Well imagine how pink H1 text would look on that featured image background...

Not so great, right?

Our designers realized that theme level typography settings might end up clashing when applied to certain theme template designs, so specific colors were set (especially for H1 designs) on various theme template designs in Thrive Theme Builder.

However, you can easily change such specified settings on theme template designs by selecting individual text elements and customizing the Typography options for it in the left sidebar of the Thrive visual editor:

Using the Text Element Floating Bar

Whenever you want to customize text within the Thrive visual editor, you'll notice a handy floating bar that pops up when you select an individual Text element:

You can use this floating bar to assign a variety of attributes to your individual text elements. Within the floating bar, you'll also find a paragraph and headings dropdown menu that allows you to assign different paragraph text or heading settings to text elements on the fly. 

Notice that the styles available in this dropdown list are exactly what you established back in the Typography tab of the Thrive Theme Builder dashboard:

Changing Global Default Typography

Sometimes, it isn’t very convenient to exit the page that you’re working on and navigate to the Thrive Theme Builder dashboard to modify your global typography settings.

If you’d like to make theme level changes to your typography settings without having to bounce back to the Thrive Theme Builder dashboard, you can do that easily using the text element floating bar inside any Thrive visual editor.

For example, if you want to change the styling for all the theme level H2 headings on your website, start by styling any random H2 heading to your liking. Then, select “Heading 2” from the dropdown menu and click the option “Update Heading 2 to match”.

And here's what the result of that update looks like across your landing page:

Voilà! 

All of the H2 headings on the page (and anywhere else across your entire site that uses the theme level H2 setting!) will automatically update. 

And the next time you access the Typography tab in your Thrive Theme Builder dashboard, you’ll see the default H2 heading has updated there as well.

Creating Global Custom Typography Styles

In addition to changing your global default typography, you can also use the text element floating bar to create custom typography styles.

These custom styles do not replace your theme level defaults. Instead, this feature allows you to create a list of frequently used custom styles available for quick use in your text element floating bar. 

But like your theme level default styles, custom styles are global. That means they any changes you make to your saved custom styles will update automatically, anywhere they are in use on your site.

So let’s take a look at how to create a custom typography style now.

In this example, we’ll create a custom H3 heading.

Start by selecting any text element with that you would like to become a custom H3 heading. Use the paragraph and heading dropdown menu inside the text element floating bar to select and apply the default H3 heading first. From there, style the text element to your liking:

Next, go back to the paragraph & heading selector dropdown menu in the text element floating bar and click on the “Custom” tab. Enter a new style name when prompted and click “Save”:

And that’s it! 

You’ll see that a new style has been added to your custom list. You can now assign this custom H3 heading to any text element on your website.

Changing Global Custom Typography

If you would like to change a custom heading, you can do so using the same set of steps that we used to change a default heading. Any text element on your site that uses the custom heading will be automatically updated as soon as you save the change.

Start by selecting an element that uses the custom heading and making your style changes. Then, click the paragraph & heading dropdown menu from the text element floating bar, click the “Custom” tab, and navigate to the custom heading that you would like to change. 

Click “Update to Match”:

2. The First Inner Level: Setting Up Fonts for both Theme Templates and Standalone Pages

The Theme Template Level

After setting site-wide specifications for your typography, you can move on to customizing individual theme templates so that all pages or posts that use that theme template will display those modifications.

For example, you might want your blog posts to use a different font for the H1 title. In this case, the correct place to make this customization is at the theme template level.

When editing typography at the theme template level, you should focus only on the header, top section, sidebar, bottom section, and footer. The content section will be addressed at the section level.

So if we just want to specify a new font style for the title of our blog posts, we should begin by opening our default blog post template (located in the Templates area of the Thrive Theme Builder dashboard). From here, you can proceed in one of two ways:

Method 1:

If you plan to use this new H1 style only on blog posts (and nowhere else on your website), then in the Thrive visual editor of your default blog post theme template you can simply select the post title text element, and modify its typography settings in the left sidebar:

Upon clicking the “Save Work” button, all your individual blog post pages that use this particular theme template will now reflect these changes when loaded.

Note that using this method will override the default typography that was originally applied to this element.

The Standalone Page Level 

Regardless of which standalone page type you choose, the customization process is the same for all of them.

Once your standalone page loads in Thrive Architect's visual editor, use the breadcrumbs to go to Page Settings, open the Typography tab options, and click “Edit Landing Page Typography”:

Then, use the Outside-In Principle to select all elements, groups of text elements or individual text elements so you can customize them using the Typography options in the left sidebar.

The customizations you make here are only for this particular standalone page and will apply page-wide. Note that if you make any customizations at the section level or individual element level, these smaller container changes will override the customizations made at the page level.

Pre-Built Landing Pages

Before we move on to the next container level, there’s a few things you should know about how typography works with pre-built landing pages. 

Pre-built landing pages are a type of standalone page. They’re useful because they come in pre-designed sets, so you can choose a theme that resonates with your brand and use individual templates within that set to create various pages in a funnel (such as an lead generation page, a thank you page, a sales page, etc.)

Note that Pre-built landing page templates inside the the ShapeShift theme set will inherit the theme level typography settings you established in the Typography tab of the Thrive Theme Builder dashboard. 

Non-ShapeShift pre-built landing pages, such as the ones indicated below, will not inherit the typography settings you set in the Thrive Theme Builder dashboard and will instead use their own pre-set fonts that are specific to the landing page set:

Like other standalone pages, typography edits can be made by opening the Page Settings and accessing its Typography tab options. Again, such edits will only affect the standalone page being edited.

3. The Section Level

Once you begin creating loads of content for your website, the section level is where the Outside-In Principle comes in extremely handy and can save you tons of time.

Let’s say there’s a section of a page or post where you’d like the majority of the text elements in that section to use a unique style different to the rest of design.

Instead of customizing each text element one-by-one, you can simply select the section level container and apply typography customizations just to it. All of the text elements inside that section level container will automatically reflect those changes — except for headings and text elements that have been styled at the individual element level.

Using the breadcrumbs, you can navigate to and apply your section level typography customizations to several different Thrive visual editor elements.

Section level elements usually include Background Sections…

Columns…

… and Content Boxes:

Even if there are just a few individual text elements inside a section level container you want to apply a unique style to, the Outside-In Principle stipulates you should style the section level container first. You can then style any individual element exceptions if needed after that.

Let’s look at an example of this scenario...

Here’s a standalone page where we’ve customized the typography at the page level.

From there, if we want the "Why Choose Us" section of the page to standout, we can quickly and easily customize all of the text in that section level. 

We do this by highlighting Background Section breadcrumb, opening the Typography tab in the left sidebar, and modifying the typography settings as needed:

Using the Outside-In Principle, we're able to change the font styling for all the text inside an entire section level container in just a few clicks. If we had opted to customize each element individually, it would have taken waaay longer.

Note that if you make any customizations to individual text elements, those changes will override any customizations made at the section level!

4. Individual Elements

Finally, we’ve made it to the innermost container: individual elements. 

No matter what customizations we’ve made to the theme, page, or section levels, every text element can be customized on its own and will take priority over the larger container levels it lives in. 

There are two ways to style text at the individual element level:

Method 1:

Highlight an individual element, and change the Typography tab settings in the left sidebar...

You can also apply any custom styles that you set up and saved from previous page, post or theme template customizations:

Now You’re an Outside-In Insider