Search Results for: content pattern/&paged=3

Lesson 9: Design Modules

When it comes to conversion focused design for your sales page, understand that purpose is ALWAYS more important than presentation.

The 4 Primary Design Modules

  1. Text
  2. Illustrations
  3. Lists
  4. Pattern Interrupts

1. Text Modules

Text modules usually include a heading, subheadings and a few short paragraphs. Follow these rules when designing your text modules:

  • Include 1 to 2 headings per screen height
  • Make your paragraph sections short and concise (short paragraphs = short, easy to digest ideas)

2. Illustration Modules

Illustrations are any graphical element that help make a point and add visual interest to your page. Follow these rules when designing your illustration modules:

  • Ask "Can this be more effectively communicated with an illustration?"
  • Don't use images as filler
  • Don't use graphics or visual elements that don't make sense with your brand or purpose of your page/website
  • Not every illustration has to be important, but EVERY illustration had to add information

3. List Modules

Lists allow you to present more information in less space while forcing you to be more concise about the point you're trying to make. Lists are also:

  • Skim friendly
  • Imply simplicity
  • Demonstrate volume ("look at all this stuff you get!")
  • Provide structure, order & clarity to the point(s) you're communicating

Most lists are made up of the following elements:

  • A graphical indicator
  • Title (optional)
  • Text content

4. Pattern Interrupt Modules

When it comes to design, a pattern interrupt breaks the established visual pattern to try and grab the reader's attention. Visual pattern interrupts can include:

  • Highlight boxes
  • Changes in Background Section color
  • Large or stylized text (e.g. for quotes)
  • Illustrations

Note: Be careful not to place multiple visual pattern interrupts close together as this will reduce their attention grabbing impact. Try to re-establish the original pattern first before using another pattern interrupt.

Secondary Modules

There are other design modules you'll need to include on your sales page. These include:

  • Product sections (where you introduce or showcase your product)
  • Pricing sections
  • Testimonial sections
  • About the Author/Expert sections
  • Guarantee sections
  • FAQ sections (use Toggle buttons)

The Outside-In Principle + Global Colors: The Ultimate Color Customization Combo

WordPress themes have come a long way, haven’t they? Back in the day, you couldn’t choose your theme color or your font — you were stuck with what the theme developer gave you. 

Today, Thrive Theme Builder allows you to choose any color you want for any element on your entire website

It’s jaw-droppingly customizable.

But with great customizability can come great confusion. What’s a global color? Why didn’t this update like I thought it would?

In a past article, we covered how to use the Outside-In Principle to customize your website’s typography. In this article, we'll explore how using this exact same principle will allow you to take complete control over your website's colors and create gorgeous pages more quickly than ever.

Once you start using this method, you’ll wonder what you ever did without it. 

How Kaye Putnam uses Quizzes to Sell Her Online Course… and You Can Too!

Online quizzes are just a bit of fun, right?

Something to pass the time and test your knowledge.

They can’t possibly bring over 100,000 people into your marketing funnel...

… or can they?

Today, we’ll share the secrets of Kaye Putnam’s quiz-focused marketing funnel, and how it powers her highly successful online business, so you can learn how online quizzes can drive leads, grow your email list, boost your social media presence, and sell products by the bucketload.

You’ll discover:

  • Kaye’s self-supporting social strategy she uses to get over 100k people to take the quiz
  • How to balance giving value with building an email list
  • The intelligent way she's using just the right amount of personalization in her email follow-up sequence.

The Content Writing Formula Part 1: Structure

“Every content piece is a list. Even if it is not a list”. Shane’s method to structure content helps you to create content that is clear and fun to read.

Structure turns raw information into approachable and engaging content.

The structure of your content will be:

  • Hook
  • List
  • Call to Action


We start every article with a hook or teaser, which is meant to hook the reader in and keep them reading. This is where we can satisfy the search intent: Give them what they are looking for or tell them when they can expect an answer to their search query.

The 'list' content

The list is the main part of your content. This is not a listicle but a content pattern. You can deepen your understanding of content patterns on the Thrive Themes blog.

The list also allows to respect the hierarchy of headlines within your content, which is something that Google really cares about.

Do this:

Not this:

Find yourself picking headlines by design and not hierarchy?

Often times, people choose H2, H3 or H4 depending on what looks best on the website in terms of design.

Keep in mind that the headlines are meant to establish structure within your content. If you are not happy with the design, this is how you can fix it.

For blog posts you can update header and body fonts here:

How to Use Custom Fonts in the Theme Customizer

For further styling, you will have to use in text edits:

For each page you can customize all headlines in the page settings:

How to Customize your Landing Page Settings with Thrive Architect

Call to Action

And lastly, don’t leave your users hanging. Tell them where they can sign up, contact you or shop in your store. Every page should end with a “call to action.”

I personally love using Dynalist to create simple bullet point lists that allow me to structure my thoughts when writing content.

This content is for members only

How to Use the Video Section Shortcode

Please note that our Legacy Themes have been replaced by new Thrive Theme Builder Themes. While our Legacy Themes are still functional, we are no longer actively developing them. Check out this course to find out how to switch your site to Thrive Theme Builder.

We now have a separate article about how to use the "Video" element, which might be helpful.

You can easily add a video to your content by using the Video Section shortcode.

First, got to the Editor in your Dashboard. Click on the ThriveShortcodes drop-down menu and select "Video Section".

As you click on it, a new window will pop up with the following shortcode options:

1. YouTube / Vimeo / Custom

Here you need to set where has you video been uploaded to. Tick the box before "Custom" if the video is uploaded to a website different from YouTube or Vimeo.


If the video you want to add to your page/post is uploaded to YouTube, here are the options you need to set: 

The Video URL looks like this:

You can set other options, for example hiding YouTube logo, title, related videos.

You don't need to add the video's embed code.


As you tick the box before 'Vimeo', the following options will appear:

Here you only need to add the Video URL. It’s important that you add the full URL of the video (including the “http://” part), like in this example:


This is the option you need if the video you want to add to your post or page was not uploaded to YouTube or Vimeo. Here are the options you need to set:

Unlike in the previous cases, first you need to add the embed code of the video. The embed code starts with <iframe . Here is an example for an embed code: 


Then you need to add the Video Custom URL. It’s important that you add the full URL of the video (including the “http://” part), like in this example:

2. Maximum Video Width

Set how many pixels you want you video to be maximum.

3. Heading Text

There is going to be a background with maximum three different texts before your video is played. The Heading appears on the top and it is the biggest one. Adding a text is not obligatory.

4. Subheading Text

This is the text that is going to appear under the Heading text. This text is much smaller than the Heading text.

5. Call to Action Text

This is the third type of text you can add. This will appear right under the play button with an arrow pointing to it, just like in this example: 

6. Text and Play Button Color

You can set whether you want the abovementioned texts and play button to appear in dark or light.

7. Background Type

Before you start the video, there is going to be a background with a play button and optional texts above and below it. You can have an image, pattern or solid background.


As you tick the box before 'Image', these are the options you will see:

By clicking on 'Upload', you can choose an image as background from your Media Library. Delete the chosen image with the 'Remove' button.


Here are the options you will see if you decide to choose a pattern as background:

Click on the drop-down below 'Select Pattern' and choose a pattern you would like to add as a background to your video.


Here are the options for adding a solid background:

Click on 'Select Colour' and choose a colour you like. 

9. Default / Top of the Page / Bottom of the Page

Set where you want the video to appear in your post/page

10. Insert

Once you are done with all the settings, click on 'Insert' and the video will be added to your content. 

Here is an example for the Video Section:


Please note that in order to use the Shortcodes as they are described in this article, you have to install the "Classic Editor" plugin. Check out this article to find out more about how to install and use the plugin.

Your 5 Step Strategy To Create Better Content Faster

Who doesn’t want to create better blog posts, faster

Consistent content creation is a big challenge for solopreneurs and if you want to publish quality work at a pro pace, then building this skill should be one of your top priorities.

So in this video post, we’re going to teach you a 5 step content creation process that uses 3 of our flagship Thrive Themes products (Thrive Theme Builder, Thrive Architect and Thrive Leads) to not only help you create professional looking blog posts more rapidly, but help grow your email list too!

The method you’re about to learn relies heavily on leveraging the rapid implementation power of templates across these 3 tools, and by the end of this post — you’re going to going to be a pro at all of them.

Ready to get started? Let's go!

TQB Surveys: The Deceivingly Easy Way to Discover Exactly What Your Customers Want

Wouldn’t it be great to have a crystal ball that told you the exact content your audience wants from you?

Or a tool that helped you better understand your customers and cater to their needs?

Well in this post, we’re going to show you how the latest quiz type now available inside Thrive Quiz Builder can help you do – just that.

We’ll even show you how we’re using this feature at Thrive Themes to customize our LIVE webinar training sessions for attendees, before the event begins.

Ready to learn how to start reading the minds of your audience? Keep reading...

8 Fundamental Web Design Principles for Better, High Converting Websites

From web designers to marketers, customers to CEOs, everyone has an opinion on web design.

That's what makes the web so diverse and interesting!

But a good design strategy can't rely solely on personal opinions while hoping for the best. Sure, your website will be creative, but will it be effective?

Today we'll show you how your website can be both, using the underlying web design principles.

How to use the Background Section element

The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.

With the help of the "Background Section" element you can add backgrounds with various styles to your page and customize them to your liking. Here is how to do that:

Start by clicking on the plus sign from the right sidebar to open the list of elements. Then look for the "Background Section" element and when you have found it, drag & drop it to the desired place on the page:

At first, you will see no major changes, only a blank element added to your page.

You will need to use the options of the element that opened in the left sidebar to customize the background section to your liking and then, add content to it.

1. Style Options

The first section from the left sidebar contains the "Style Options". You can use these options to do the following:

  • save the style of the "Background Section" element (after you have customized the element) and use it later, on the same page or on other pages
  • apply a specific style you have previously saved for the "Background Section" element.

Save the style as a Global Style

You should do this only after you customize the "Background Section" element, as described below, using the "Main Options" from the let sidebar. When you are satisfied with the way the "Background Section" element looks like, you can save its style for later use.

In order to do that, click on the "Save as Global Style" option (file and globe icon) next to the field from the "Style" section:

This will open a drop down with the help of which you can save the style:

All you have to do here is to give a name for this style (write it in the "Background Section Style Name" field) and then click on the "Apply" button.

After this is done, the style of the "Background Section" element will be saved as ‘global’, thus you will be able to apply it on any other background section from the same page, or other pages of your website, that you edit with Thrive Architect.

If you want to find out more about how to save and use global styles on "Background Section" elements, check out this article.

Apply a specific style

If you have used the "Background Section" element before and you have saved specific styles for it, then you have the possibility to re-use these on your current element as well. In order to do that, click on the field from the "Style" section in the left sidebar:

This will open a drop-down with the available styles you can apply to your element. If you are using a landing page, then you will see the "Template Styles" that belong to the landing page in the drop down. 

Moreover, if you have previously saved a style for a "Background Section" element, then that style will also be available in the "Global Styles" section of the drop down:

In order to use a "Template Style" or a "Global Style" from here, simply click on the respective style and then on the "Apply" button:

Once you do this, the style that you have selected will be applied for your "Background Section".

2. Main options

The next section of the left sidebar contains the "Main Options" of the "Background Section" element. You can use these options to customize the element, to make it fit your website, as follows:

Inherit from landing page

If this option is active, then you will not be able to change the width of the "Background Section", since this will be inherited from the landing page that you are using.

By default, this option is active. If you want to customize the width of the "Background Section", then you will have to deactivate the "Inherit from landing page" option by clicking on the switch next to it:

Content Maximum Width

If you have deactivated the "Inherit from landing page" option, then the "Content Maximum Width" option will appear, along with the "Content covers the entire screen width area" option, which may also be activated by default.

If you do not want the content that will be placed in the "Background section" to cover the entire screen width and you would rather adjust the width yourself, then deactivate the "Content covers the entire screen width area" option, by clicking on the switch next to it:

This will make the "Content Maximum Width" option available and you will be able to adjust the width of the "Background Section" by either dragging the slider under this option or entering a value manually into the box next to it:

Section Minimum Height

With the help of this option you can adjust the height of the "Background Section".

Note: When you add the element, the default minimum height is 150px. You can, however, change it to a value of your choice.

To modify the height, simply drag the slider under this option or enter a value manually in the box next to it:

Moreover, you can also hover over the section, grab the bottom of it, and drag it higher or lower, to adjust the height:

In case you want the height to match the screen, all you have to do is to click on the switch next to the "Match height to screen" option, to activate it:

Activating this will make the "Section Minimum Height" option unavailable, since the height of the background section will match that of the screen.

Vertical position

Customizing the "Vertical Position" is another option that you have here. You will see the changes regarding this option, after you have added some content to your "Background section".

The "Vertical Position" option allows you to choose how to align the content that will be in the "Background section". You can choose to position the content at the top, bottom or center inside the background section, by clicking on the preferred position from this section:

3. General options

Besides the "Main options" the more general options are also available for the "Background Section" element. We have separate tutorials about each of these in our knowledge base. So, if you need detailed instructions on how to use these, please consult our tutorials here

Here are is an overview of some of these general options to give you an example of how they can be used.

The Background Style option

Out of these general options, the "Background Style" is very important when it comes to the "Background Section" element.

This option allows you to add different types of layers to your "Background Section". You can add a "Solid color", an "Image", a "Gradient", a "Pattern" or even a video as a background. Furthermore, you can add "Background effects" as well:

These work well on their own, as stand alone backgrounds; but they can also be used in a more complex way. The 'Solid color', the 'Gradient' and the 'Pattern' could serve as effects for an image background for example.

Solid color

In order to add a "Solid Color" as a background, click on the color option (first option from the "Add layer" section). A color picker will open. Select the color you would like from it (a) and then, start to drag the line (b) to set its opacity.

When you are satisfied with the color and its opacity, just click on "Apply" (c):


To add an image as the background style click on the second option from the "Add layer" section. Then, click on the "Choose image" section (a) to add the image from your Media Library.

Once the image is added, you will be able to choose where to display it (b), using the "Image Display" drop down (click to open it and then select the "Image Display" option you want to use), as well as the option next to it (click on the desired position from the layout box).

Furthermore, you will also be able to choose whether or not you want it as a static background (c) by either checking or leaving the "Static background image" option unchecked:

Note: If you choose to make the image a static background then, the image itself will not move when visitors will scroll down on your page.

Only the content will be dynamic, whilst the background will be static. This is very similar to creating a parallax effect.


If you wish, you can choose to add a gradient as your background style as well. In order to do this, click on the third option, which is the "Gradient", from the "Add layer" section.

The gradient that you add can be linear or radial. Select it from the "Orientation" section (a) by opening the drop down and selecting the preferred option. If the effect is linear, you can also choose its angle (b).

You can also set a color and its opacity using the color picker (c), in order to make your background suitable for your needs:


Last, but not least, you also have the possibility to add a "Pattern" as a layer for your background. You can choose a pattern, from the "Select pattern" section (a), and you can also set its color, as well as opacity, if you click on the "Color" option here (b): 


The "Background Style" also lets you add a video to the background section. In order to do this, first turn on the "Video Background" option, by clicking on the switch next to it.

Then, select the source you want to upload the video from (YouTube, Vimeo, Wistia, Externally Hosted Video, Uploaded Video or VooPlayer/Spotlightr video) and follow the steps that will be required depending on the source you have chosen:

After you do this, the video will be played in the background.

Tip: If you wish the video to be even more visible, you can increase the "Minimum Height" of the "Background Section".

If you want to find detailed information on how to use the "Background Style" option, then please read this article.

The Decorations option

This is another general option that is important when it comes to the "Background Section" element. This option allows you to customize the sides of the background section. You will have to select which side you want customized (a), then, the decoration type you want to add to it (b):

This can be either a "Slanted edge", a "Pointer", a "Divider" or a "Fancy Divider". Each of them come with their own set-up options (like width, height, tilt, invert etc.) that you can use to further customize them.

If you would like to find out more about how to use the "Decorations" option, as well as the set of options for each decoration, please click on this link.

Adding content to the 'Background Section'

When you have finished customizing your background section, you can start adding content to it. This is pretty easy. All you have to do is select the element(s) you wish to add and then, drag & drop them inside the "Background Section".

Tip: Make sure the content you add is visible and you do not use too intense colors when setting up the background itself.

If you wish to find out more about the Thrive Architect elements, please click here.

Hopefully this article was useful for you. If so, please give us a smile below :)