Search Results for: content pattern
Search Results for: content pattern
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…
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:
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:
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.
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.
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 :)
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:
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: 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.
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
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
Set how many pixels you want you video to be maximum.
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.
This is the text that is going to appear under the Heading text. This text is much smaller than the Heading 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:
You can set whether you want the abovementioned texts and play button to appear in dark or light.
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.
Set where you want the video to appear in your post/page
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:
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.
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:
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?"
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
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.
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.
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:
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:
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 :)
This is day 1 of the Upgrade Opt-in Week!
Every day of this week we will unveil a new set of opt-in form templates that you can access right away, on your own WordPress website from within Thrive Leads.
Today’s template set includes various opt-in form types with a modern design, that feature a round image with vivid colors.
Check out the video demonstration.
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.
The first section from the left sidebar contains the "Style Options". You can use these options to do the following:
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.
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".
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:
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:
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:
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.
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:
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.
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.
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 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.
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.
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 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.
We optimize all of the theme code to keep it as lean and light as possible and we add speed-boosting features as well.
Everything about this theme is 100% mobile responsive, so your website will look great on any device & screen size.
The theme is built following SEO best practices, so your site is well-optimized and SEO ready out of the box.
Set custom colors, custom fonts, custom backgrounds and more, to suit the site to your exact needs.
Set detailed preferences for the style and behavior of your site. Options are available site-wide and on individual pages.
Choose from different header layouts and apply custom background colors, patterns or images to your site header.
Built-in features allow you to display targeted opt-in forms on your site & connect to your autoresponder.
Create pre-built pages with just a few clicks. The page generator means you can get your sites set up in no time.
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.
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: