Day 4 of the Upgrade Opt-in Week is here!
Today’s Thrive Leads template set is called Eccentric Lines - As the name suggests, it features a bold and yet, modern design language.
In this article we'll have a look at what exactly makes it so special.
More...
For the full experience, don’t forget to check out the video at the top of the page.
Let's Access the Template Set
First things first, let's go ahead and access the new set.
As any other template, we can access this one from the Thrive Leads dashboard.
Next, you can either create a ThriveBox, a shortcode or a Lead Group and add an opt-in form type (whichever one you please).
If you're not entirely familiar with this step, check out this tutorial: How to Create and Load a Thrive Leads Form Template.
In our case, we'll add a Lead Group and choose the Lightbox opt-in type. Then, add a form and click the “Edit Design” button:
Start using the opt-in form by clicking on the "Edit Design" button
Then, the Template Library will open right up.
We'll choose the Eccentric Lines 2-step template:
Select the 2-step version of the Eccentric Lines template
Ta-daaa!
Bold and modern design, mainly given by the predominant blue color
Right off the bat, the template has a certain character to it. This is mainly because of its straight lines and predominant color.
Can We Make it Even More Special?
Absolutely!
Here's how we can tweak the design of the template without making it lose its character:
1. Change the Image
You could use the default image, but most likely you would like to put a different image in there.
It's important to know what kind of image we can use, in order to avoid messing up the design.
We'll look for a similar image, not in color, but in style - Meaning that the image should also feature a predominant color.
On this template, the default image is placed inside a content box. To replace it, select the image, look for "Background Style" on the sidebar and select the image indicator:
Replace the default image from the Background Style
This is how our new image will look like on the template:
Upload an image that also has a predominant color
It looks like it doesn't belong there, right?
Don't worry, we're not done with the customization just yet.
2. Find the Code of the Predominant Color
The reason the new image looks out of place is because it is surrounded with elements that carry the color of the old image.
The next step is to update the color of the elements with the one from the new image. In order to do this we need the exact code of the photo color.
To do this, you can either use the Inspect Element option from your browser (as I explained in the video), or you could use a browser extension such as ColorZilla.
With ColorZilla, click on the extension and make sure the color picker is active:
Page Color Picker must be active
Then, simply click on the perdominant color from the image, and the color code is copied to your clipboard.
Once you have the color code, you can add it as a favorite color in the editor, this will make your job a lot easier. To do so click on the blue "plus" button:
Save the new color to favorites
Then, you can go ahead and apply it on all the elements that still have the old color. In our case, we will have the following outcome:
Apply the main color from the image on the other elements
Pretty cool, right?
Just like that, you can customize the entire template, without compromising its character.
When customizing your opt-in form, make sure to check out this Thrive University course, as well: How to Create Persuasive Opt-in Forms.
It's Your Turn
Now that you've seen how easy it is to customize this template set, make sure to try out new designs for it, on your own WordPress website.
This ends day 4 of Upgrade Opt-in Week - Stay tuned to discover the next templates that are coming your way!
- Day 1 - Round images: Surprise your visitors with an original, out-of-the-box design.
- Day 2 - Corporate: If you're looking for a slick, modern design this set is what you need.
- Day 3 - Personal Brand: These 2 sets of opt-in forms are perfect for a personal brand or professional service website.
- Day 4 - Eccentric Lines: This is the most original design you've ever seen on an opt-in form. If you want to impress your visitors with edgy forms, this is the design to pick.
- Day 5 - Overlay Patterns: My personal favorite! This design is bold, dynamic and perfect for a fitness brand.
- Day 6 - Typography: Fonts are stealing the show here. These two sets use original fonts to grab the attention and work perfectly for coupon opt-in bribes.
- Day 7 - Vertical Split: Nature inspired design to use on a travel or outdoors website.
Amazing new templates. Very impressive. I love all the designs.
Thanks Barbara. Our designers will be happy to hear that!
Awesome! Also, I used to pick colors using an extension on my browser. Now I can do this without it. lol! Thanks, David!
Haha no problem, Glen!
Although, I wouldn’t ditch the extension just yet 😀 Sometimes, it can be a bit more useful than the “inspect” tool.
Hmm.. the version with “inspect” doesnt work.. i don´t see the tab styles .. any sugestions?
Yes, it has some limitations… For example, it cannot detect what color code is used on an image, or on elements that are more complex, because it is based on the HTML and CSS.
If you use Firefox or Google Chrome, there is an extension called ColorZilla, you can add that one. It works quite well 🙂