The Outside-In Principle: Time Saving Tips for Setting Up Pages and Posts

You know that feeling when someone gives you the tiniest bit of information, and suddenly everything makes so much sense?

For example, how do you usually crack your eggs? Many people have a habit of cracking their eggs on the rim of a mixing bowl, which produces small eggshell fragments that fall into your food.

Blech.

But, if you crack an egg on a flat surface such as a countertop, the shell cracks cleanly and without any fine particles. No more egg shell bits in your food!

Yes! Where has this tip been all my life?

The same thing can be said for the Outside-In Principle. You could get by without it... but once you know how to use it, you’ll never build websites the same way again!

When you see a page or post that uses a template published on a website, what you're seeing is actually coming from two different sources:

1. The theme template is responsible for the header, top section, sidebar, bottom section, and footer.
2. Individual post and page entries are responsible for the content, or the “meat” of the page.

• The content of the post or page can be customized separately. Fonts and colors are generally inherited from the theme and theme template levels, but customizations made to sections within the content can override the larger container levels. Individual posts and pages are accessible from the Posts and Pages tabs, respectively, inside of WordPress. 

Standalone Pages

The Outside-In Principle

The Outside-In Principle states:

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.

In general, smaller containers override larger containers.

And here is the container structure for standalone pages.

In this article, we'll be talking about how to use the Outside-In Principle with on-page elements. More specifically, we'll be talking about the practical applications of the Outside-In Principle after you've set up your theme fonts and colors, and you’re in the process of doing things like writing blog posts, and building sales pages.

1. How to Style Headings and Paragraphs on Pages or Posts that Use a Theme Template

As you customize a theme template or post/page content, you can assign headings to text elements using the text element floating bar dropdown menu.

If you would like to change one of your theme's default heading styles, you may do so by styling a specific text element to your new specifications, then use the floating bar dropdown menu to update the default heading. Note that this will update all text elements across your site that use this particular heading.

Custom Styling for Headings and Paragraphs within the Content Section 

If you would like to create new headings or paragraph styles just for use within the content section of a page or post, you can create custom styles using the text element floating bar dropdown. 

Custom styles are available site-wide, however, you can help describe the use of a particular style for a particular page or post by naming the style accordingly. In the example below, we’ll create a new custom H2 heading.

Start by assigning a text element as the default H2 heading (this sets up the right heading tag), and then style the heading to your liking. Next, navigate to the text element floating bar dropdown, and click the “Custom” tab. Enter a style name, and click “Save”.

You’ll see that a new style has been added to the custom style list. You can then assign this style to other text elements.

When a Standalone Page Becomes Necessary

Now, here's a scenario that you might run into: What if you want to edit the styles of all headings and paragraph text for the entire page or post — but only that one page — including sections that are governed by the theme template?

Remember, theme templates are meant to provide a consistent structure for specific groups of pages. For example, if you want all of your blog posts to display the header and top section in the same way, a theme template will provide that consistency. A change made to the theme template will reflect on all posts or pages that use that specific theme template. 

But in this case, because you want to change the styling of elements on just a single page , we recommend using a standalone page instead of modifying any theme page template settings. Alternatively, if you plan on using the new styling on multiple pages or posts, you can simply create a new theme template inside the Thrive Theme Builder dashboard.

2. How to Style All of the Heading and Paragraphs on a Standalone Page

Standalone pages have their own typography styling separate from the rest of your theme templates, posts, and pages on your site. To change the heading and paragraph styles for a particular standalone page, you can either use the Page Settings Typography tab, or the text element floating bar dropdown.

The Page Settings Typography Tab

The Typography tab under the Page Settings for a standalone page is handy because you can edit all your headings at once, and there’s a couple of typography settings that are available here that are not available in the text element floating bar dropdown (such as list items and hyperlinks). 

So, if you’re just starting to set up the typography for a standalone page, it’s best to start with the Typography tab. Here’s how to do it: 

Use the breadcrumbs to navigate to the Page Settings, open the Typography tab, and select “Edit landing page typography”.

Then, you can use the green container lines to select specific text element groups and edit all elements within the group. For example, you can select the middle container at the top of the page to select and edit all headings.

The options in the Typography tab on the left side of the page will change depending on the text elements that are selected. 

When you are finished making your edits, click the “Close” button, and all elements on the page will automatically update. 

The Text Element Floating Bar

As you customize your standalone page, you can use the text element floating bar dropdown menu to assign styles to your text elements. The headings and paragraph styles listed in the Landing Page tab apply only to the specific standalone page. The styles listed in the Custom tab of the text element floating bar dropdown are global, and can be accessed from any theme template, post, or page on your site.

In addition, you can update your headings and other text styles from the text element floating bar. Start by selecting an element that uses the heading you would like to update. Next, style the heading as needed. Then, navigate to the heading style name in the floating bar dropdown menu, and select “Update to match”. All of the headings on the page that use the particular heading will update as well.

3. How to Style All Text Elements within a Container

Sometimes, you'll find that you need to change all of the elements within a container to use a different font or color from the rest of the page. Instead of selecting each element one by one, you can simply select the container and apply the customization at the container level. All of the elements within the container will take on that customization (as long as individual elements have not been styled already).

For example, let's say you’ve set all of your typography for a standalone page to be dark grey. But then, you change one particular section of the page to a dark grey background. That means now you'll have to change the font color for this particular section in order for the text to be readable.

Instead of selecting and changing the color of each text element one by one, you can save time by making a single, section level edit. 

Using the breadcrumbs at the top of the page, select the entire Background Section element, navigate to the typography tab, and change the typography color to white for the entire section.

Then, if there are particular elements within the section that you want to stand out, such as the heading, you can edit them individually.

4. How to Align All Elements within a Container

Columns like this one are pretty common, especially on sales pages and landing pages.

But, what's the easiest way to edit the alignment of a set of columns such as this? Should you click each text element and edit it individually? Is there a better way?

Although you could edit each element individually, a much faster way would be to use the Outside-In Principle to apply the alignment specification to the container. Then, all of the elements inside the container will take on the specification.

Start by using the breadcrumbs to select the Columns element. Then, open the typography tab on the left and select the appropriate alignment setting.

What’s especially handy about this technique is that any additional elements that are added to the container will automatically inherit the alignment specification.

5. The Ninja Tool: Using a Content Box to Style a Group of Elements

In practice, not all of the sections on your pages will be as simple to customize as the ones we've shown so far. How can you use the Outside-In Principle if there are multiple elements or sections within a single section that you want to display a unique styling?

For example, here are several text elements inside of a background section. Let’s say you want:

1. The text inside the columns aligned center.
2. The text below the columns aligned left.

The container structure of this background section looks like this:

For the text elements inside of the Columns element, we can apply the alignment specification to the Columns container.

Easy enough, right?

But the Text elements beneath the columns aren't in a container by themselves. They share the Background Section container with the columns. Although you could apply the alignment specification to each Text element individually, you may want to use this "ninja" tool instead: Content Boxes.

Simply place the Text elements inside of a Content Box... 

...and apply the alignment specification to the Content Box.

Content Boxes are a great way to add structure to your layout when there isn't a convenient container surrounding elements that you want to customize. And we’re calling it a ninja tool because ninjas operate stealthily. Content boxes can be virtually invisible as well, lending a helping hand when needed, but otherwise blending into the background.

Then, if you change your mind and want this section center aligned, you can easily make that change for all of the elements within the Content Box in just a few clicks.

6. Styling for Mobile Devices

You may have noticed there are three buttons at the bottom of the Thrive visual editor that enable you to switch between desktop, tablet, and mobile editing modes.

Let’s go over two very important guidelines when making style specifications for mobile devices.

Styles Cascade Down to Smaller Screen Sizes (But Not Up!)

When you click through the various mobile device buttons, you’ll notice that the screen view changes, as well as some of the settings in the tabs on the left sidebar of the Thrive visual editor.

So, which view should you set up first?

Much like the Outside-In Principle, we recommend starting with the largest screen size — the desktop mode — then moving on to successively smaller screen sizes. This is because styles applied to larger screen sizes apply to the smaller ones as well, but styles applied to smaller screens do not affect the larger ones.

• Styles applied to the desktop mode will also apply to the tablet and mobile mode.

• Styles applied to the tablet mode will also apply to the mobile mode.

• Styles applied to the mobile mode will only affect the mobile mode.

In-Line Alignment Specifications Apply to All Modes

The second important rule for mobile optimization is that — if you would like particular elements to display different alignments on different sized devices, then you’ll need to apply the alignment specification to a container instead of the individual element. This is because in-line (i.e. styles that have been applied to individual elements) alignment specifications will always apply to all views.

Let’s look at an example. Here we have a 2-column element inside a Background Section. On desktop, this layout looks nice with the text aligned to the left. 

But let’s say you’d like to have the text aligned to the center on mobile. How can you accomplish this? 

Because in-line alignment specifications always apply to all views, we can’t specify different alignment settings for desktop and mobile. If we tried to click on the mobile view and apply the center alignment setting directly to the text element, the element would be center aligned in the desktop and tablet views as well. 

Instead, you should apply the alignment specification to the Column container. This will allow you specify left alignment on desktop and center alignment on mobile.

Here’s the resulting page on desktop and mobile:

Main Takeaways

You did it! Together with our previous articles about fonts and colors, you’ve learned all there is to know about the Outside-In Principle. 

Let’s quickly reiterate some practical Outside-In tips for styling your pages and posts with ease:

• Before applying a style to an individual element, consider whether applying the style to the container surrounding the element might save you a few clicks down the road.
• If you find yourself applying the exact same font specifications to multiple elements throughout a page, consider creating a new custom style instead.
• Don’t be afraid to use Content Boxes! They're super handy when the other container options aren't quite what you need.
• When editing for mobile, start your customizations at the largest screen size, then work your way down to the smallest screen size.
• When applying different alignments for different screen sizes, apply alignment to the container surrounding the element.

Let's Get Styling!