Results

Search Results for: content pattern

How To Find Awesome Free Images & Use Them Like a Pro On Your Website

We’ve all been there.

You’ve worked hard to write an amazing blog post or build a new homepage for your website…

...something your online followers are really going to love.

But now you're faced with the troublesome task of finding the perfect images needed to help illustrate your point.

Of course, you know better than to just swipe any image you find off of Google — you don’t want copyright infringement lawyers to come knocking on your door, right?

And on top of that, you’re already aware that bland stock images hurt your conversions

So how do you find compelling images to use in your online content that don’t cost money and keep you out of copyright court?

Well, this post is going to show you where — and then teach you how to weave them into your website like a design pro.

Ready to solve this visual content woe for your website? Awesome. Let’s get started…

How to Customize Your Website Header (Custom Color, Custom Image Background)

 Important!
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 article to find out how to customize the "Header Section" when using Thrive Theme Builder.

To change the style of your theme’s header, go to the “Theme Customizer” by clicking on “Appearance” and then, on “Customize” in your WordPress admin dashboard:

2014-06-18_0921

Once you access “Theme Customizer”, click on the “Header” section to open it:

At the bottom of the “Header” section, there are several options available, that let you change the header background. In order to access them, click on the “Header Type” field to open the drop-down:

Custom Color

Select this option to choose a custom color. You can do this by using a color picker or entering a color code in the field next to the “Select Color” box. The color that you choose here will display uniformly across the entire header background.

Background Pattern

Select this option if you want a pattern to be displayed as the header background. Click on the arrow next to the “Pattern” field  and choose one of the many included patterns that will be opened under it.

Background Image

Select this option in order to have an image used as the header background.

You can upload an image by simply clicking on “Select image”. Your WordPress Media Library will open. Choose the image you want to upload and then, click on “Choose Image”.

After the image is uploaded, you can set a header height (in pixels) in the “Header height” field to show more or less of the image.

Furthermore, there are two ways in which an image can be displayed in the header: “Full-Width” and “Centered”.

When you choose the “Full-Width” option, the image will be scaled to fit the entire width of the screen.

When you choose the “Centered” option, the image is shown at its full width and full height, centered in the header area. This will look best when the header image has the same width as the total content width.

Once you have set a header style you are happy with, you can use the menu link color pickers at the top of the “Header” section to make sure that the menu items are visible on the chosen background.

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

How to Use the Video Section Shortcode

 Important!
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.

YouTube

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: https://www.youtube.com/watch?v=I2Wrei2bXM4

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

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

​Vimeo

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: http://vimeo.com/28202814

Custom

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: 

<iframe
type="text/html"
width="640"
height="435"
src="http://vube.com/embed/video/wWjYQYK4bV?autoplay=false&fit=true"
allowfullscreen
frameborder="0">
</iframe>

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: http://vube.com/s/8744jr

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.

Image

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.

Pattern

​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.

Solid

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:​

0
  • by Hanne
  • on October 6, 2016

Blog Content

Content marketing can be a very important strategy for your online business, but you have to do it right. Creating boring content will not help your business grow.

​Our Method for Creating Better Blog Content

Use a Repeatable Format

The best way to create an engaging blog post is to use a repeatable format.

This works for list posts, but it works just as well for any other type of post.

You'll start with a teaser introductions, add a "Read More" tag and from here, you'll start your repeatable format.

In the demonstration we use the following format:

  • Title
  • Picture
  • Paragraph: What's good
  • Paragraph: What's bad
  • Summary box​: This is a Thrive Architect content box that you can save an re-use every time. This will save you time and help you keep the format consistent.

We end the blog post with a conclusion title and paragraph.

In the video, we show the pattern for a list post, but it can be used in any circumstances. You should always ask yourself: "How can I break this topic down in repeatable chunks?"

Mix Your Text Up With Visuals

To find free stock photos and icons, take a look at the guide: 25 Free Resources Every Content Creator Should Know About.​

If you're looking to learn how to use stock photos on your website without looking like everybody else, check out the post: How to Use Free Stock Photos on Your Website Without Hurting Your Conversions

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 your 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 Fix the ‘403 – Forbidden’ Error?

Issue
The ‘403-Forbidden’ error can occur while you are trying to save the content on your WordPress based website.

Sometimes a security layer of the website can be a little overaggressive and block genuine, harmless requests. This can happen because of server security settings, because of bad characters/patterns that trigger the firewall, or because the size of the request is too large.
In any of these cases, you will see the ‘403-Forbidden’ error displayed.

Solution
Since the cause of this is almost certainly related to a security setting or a security plugin on your website blocking the request of saving your content, the solution is to white-list (to allow) the request.

Doing this depends on the type and the settings of security plugins as follows:

1. WordFence

If you have installed and set up the security plugin called “WordFence” on your website, then set it to “Learning Mode” in order to resolve this issue.
If you need details on how to do this, please check out this tutorial.

2. Other security plugins

If you (as a user) have installed other security plugins (that are not WordFence) on your website, you can try deactivating them, to see if this solves the error.

Note: This is only for debugging purposes, to see if deactivating the security plugin really solves the issue. You should not leave the security on your site deactivated. You are only doing this for a few minutes, to see if this is the actual problem.

In case deactivating the security plugin has indeed solved the issue, then try one of the following:

  • check the firewall rules, to see if you can set any exclusions for plugins (if so, then include the Thrive plugins there);
  • or see if you can find anything similar to a learning mode in the settings, (if so, then activate it).

If you do not find such settings or you are not familiar with them, then you should reach out to the developers of the respective security plugin. Tell them about the issue, send them the steps to replicate it and ask them to white-list the blocked request.

3. No known security plugins or settings

If you haven’t actually installed a security plugin on your website, and you are unaware of any such security settings, then, it is best if you contact your web hosting company.

Let them know about the error you have encountered and send them the exact steps to replicate it. Since they have access to all the settings and logs, they should be able to figure out the root of the error and the solution for it as well.

In case you still encounter difficulties, after trying all of the above mentioned troubleshooting tips, then please contact our support team by creating a new support ticket here.

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

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):

Image

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.

Gradient

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:

Pattern

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): 

Video

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 or Uploaded Video - from your own device) 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 :)

Voice

Voice

A unique blogging theme that puts your content front and center. Optimized for readability.

Let Your Voice Be Heard!

Voice is a theme that emphasizes content & authors. The unique, header-less design and the typography put your content in the spotlight. In addition, the post author is prominently displayed next to the content, making it ideal for personal branding (works for single author and multi-author sites). Alternatively, you can remove the author-focus and just display a logo instead.

The sidebar in this theme is kept narrow, to give more room to your content. It is also partially static and partially scrolling, so that you can keep your most important links instantly available, while adding lots of additional content, related content or other widgets in the scrolling section.

The result is a theme that is highly usable and easy to navigate for your visitors, makes your content shine and still comes with all the conversion focused features you're used to from Thrive Themes.​

Color Choices, Color Tones & Sidebar Options

Easily switch between multiple color styles to change the highlight colors and the overall look and feel of your theme. In addition, you can also switch between a "warm" or "cool" theme tone, to further customize your site.

You also have control over what to display in the sidebar area of the theme:

You can choose to display a default background image, dynamically change the background to reflect the featured image of the current post or page, set a custom color or set a custom background image.

Comes With All the Features You'd Expect From a Top-Notch Premium Theme (& Many More...)

Built for Speed

We optimize all of the theme code to keep it as lean and light as possible and we add speed-boosting features as well.

Responsive Design

Everything about this theme is 100% mobile responsive, so your website will look great on any device & screen size.

Search Engine Optimized

The theme is built following SEO best practices, so your site is well-optimized and SEO ready out of the box.

Visual Theme Customizer

Set custom colors, custom fonts, custom backgrounds and more, to suit the site to your exact needs.

Extensive Admin Options

Set detailed preferences for the style and behavior of your site. Options are available site-wide and on individual pages.

Customizable Header

Choose from different header layouts and apply custom background colors, patterns or images to your site header.

Grow Your Mailing List

Built-in features allow you to display targeted opt-in forms on your site & connect to your autoresponder.

Automatic Page Generator

Create pre-built pages with just a few clicks. The page generator means you can get your sites set up in no time.

Fantastic Support

Get your questions answered and get hands-on help with technical questions from our awesome support team.

And that's just scratching the surface. Further features in the theme include a speed-optimized related posts gallery, automatic image optimization, built-in floating social buttons, dynamic sidebar backgrounds, click-to-call phone numbers, a font manager with 600+ fonts to choose from, a wide array of short codes and much more.

If you've been looking for a way to make your blog more valuable for your visitors while also growing your mailing list or selling more products, Voice is the theme you've been waiting for.

Sold Out!

This was one of our first run of themes and we don't sell these anymore. All good things come to an end, as they say.

We are currently working on a brand new, visual theme builder that will replace all of our previous themes. Click the button below to learn more:

>