• Home
  • Blog
  • Case Studies
  • How to Make Your Website Look ‘Just Right’ – with Examples from Real Thrive Themes Customers

How to Make Your Website Look ‘Just Right’ – with Examples from Real Thrive Themes Customers

“Build a beautifully designed website” they said...

“It’s easy to make it look good” they said…

But if you’ve ever jumped onto WordPress to 'whip up a page', you’ll know that’s a lot easier said than done.

Unless you’ve got a coder + designer background, or you’re some kind of WordPress dynamo, it seems almost impossible to get your pages looking right.

No matter what you do, they always seem to look… homemade.

So what is it? What’s that insurmountable thing that seems to determine whether a page looks ‘right’ or not?

More...

I’m going to let you in on a little secret. It has nothing to do with you level of WordPress dynamo-ness.

It’s about:

  1. Using the right tools, and
  2. Adhering to a few key design principles

Once you’ve got these principles down, you’ll be amazed at how everything else seems to fall into place.

With Thrive Content Builder you can create just about anything on your page without knowing a single line of code.

1. Using the right tools: check!

So let’s jump into the key design principles that will take your site from “Oh how nice, you built it yourself” to “Can I get your web designer's number?”

To help demonstrate these principles we’re using real designs sent in by our users.

Everything you see was built by Thrive Themes customers - not developers, not designers - just keen and creative do it yourselfers armed with our tools.

InnerCircle Sales Page

The InnerCircle is a piano tutoring membership site by Tim Topham.

Why it Works

From the moment you step onto the site it emanates elegance and professionalism. Why?

It’s simple, well laid out, but above all: it just looks clean.

Now, I know what you’re thinking. “Great. Thanks Steph. ‘Clean’. I can really do a lot with that…”

But clean is not some sort of metaphorical characteristic that can’t be defined. There’s one key factor adding to the ‘clean’ feeling of a site, and that’s color… or more accurately, lack thereof.

Using a clearly defined group of colors on a site, known as it’s color palette, is one of the most immediate indicators of good design.

Let’s take another look at the elements on the InnerCircle’s sales page.

The colors making up the logo are used throughout the entire page, ensuring a universal look and tying the site and it’s branding together beautifully.

How to Get Your Site’s Colors Right

The first step is choosing a color palette for your site. This means deciding on selection of colors that fit your brand.

Pick one or two ‘key’ colors for your site. These will serve as the highlight colors for your site.

Why only one or two key colors? Having no more than two key colors keeps your site looking clean.

The rest of the colors in your color palette should be made up of shades of black and white. The secondary colors provide a good base for elements like backgrounds and borders, and help add variety without adding too many overpowering colors to the mix.

Now when I say pick colors, I don’t just mean ‘red’ and ‘blue’. I mean exact color codes. For InnerCircle, it’s #6DAFC7 and #EB675E. Using color codes ensures you get the exact color you want, every time.

When using Thrive Content Builder, you just need to paste the color code into the color options of an element and it will apply the correct color. And to keep using the same exact color you can simply save it as a favourite color and you'll never have to worry about that code ever again.

One way to ensure the colors fit your brand is to use the colors from your logo, like InnerCircle did.

If you don’t have a logo yet, or using the colors from your logo isn’t an option, here’s a great tool to help you decide on a palette.

Find a photo that fits well with your business's style. Upload it to Pictaculous and it will generate a color palette for you.

Let's say you have a tour company based in New Mexico but don't have a logo yet. You do, however, have a great photo from one of your tours...

Uploading a photo to Pictaculous will give you a color palette.

If you’re struggling to find a second key color, use a complementing color tool like Paletton. It will generate a series of complementing colors from any color code you enter.

In the New Mexico example, other possible key colors for the Maroon (sorry, I mean #705251 ;-)) would be #5E684B and #314344

Once you have your exact color codes (even for your shades of near black and white), use them and only them in every element on your site. Never throw in new colors or different shades of the same color.

Reto Dieta Express Sales Page

Let’s take a look at a few screenshots from Reto Dieta Express’ sales page, a health and fitness based business that offers, among other things, digital products.

Why It Works

Using graphics such as icons, illustrations, product mockups and pictures in your page is integral for keeping your visitor engaged, highlighting concepts and breaking up walls of text.

However, miss matched images and icons can disrupt the flow of the page and bring down the overall quality.

So how do you make sure your graphics add to, rather than take away from, your pages?

Make them consistent!

All of the icons on the Reto Dieto Express sales page are in the same style. Dynamic cartoon style icons with long shadows. You’ll also notice she uses the same color palette throughout.

The icons look as if they were made for the page, providing an instant boost of professionalism.

Notice how even the simple elements like the play button stick to the page’s color palette.

Further down the sales page are product mockups. Images like this add to the perceived value of the product by helping the customer visualize what they get, especially if it’s a digital product.

While these sorts of images may seem unattainable for a small business, you’d be surprised. For as little as $5, you could have a 3D mockup or perfectly colored logo set for your site. Let’s take a look at how.

How to Impress with Graphics on Your Site

Icons

There is a huge selection of unique icon sets available on GraphicRiver. Using a set will ensure each individual icon looks good when used with others from the same set.

Here’s an example of some icons you can get:

Source: GraphicRiver Educational Icons Pack

Find a set that fits the color scheme and style of your site. Most cost between $5 and $15.

You can add these icons to your site the same way you’d add a regular image in Thrive Content Builder.

Product Mockups

If you have Photoshop, you can get mockup packs from GraphicRiver for around $7+. They usually include easy to follow tutorials on how to add your logo or images into the graphic.

Using a template to create a 3D mockup.

If you don’t have Photoshop, there’s an even simpler solution.

Fiverr is a website where you can pay someone $5 to do just about anything. Type “book mockup” or “product mockup” into the search bar and you’ll find plenty of people offering this service.

Search results from ‘book mockup’ in Fiverr.

Make sure to get a mockup with a transparent background so you can use it anywhere on your site.

Elite Tattoo Pro Long Form Sales Page

When you think of tattoos, you think of edgy, sketch, black, red & avant-garde. How do you translate that feeling into a sales page?

With clever use of content boxes, of course!

Why it Works

The style of these content boxes fits perfectly with the overall design of the Elite Tattoo Pro sales page. It calls to the target market with an edgy look and feel, attracting the right audience while polarizing the rest.

From the design alone you can tell Elite Tattoo Pro know who they’re talking to.

Again, you’ll notice they use a defined color palette and consistent graphics throughout the page.

How to Craft Content Boxes That Fit Your Site

Content boxes are infinitely customizable. No matter what your site’s look and feel is, you can create a content box to suit. Customization options include:

  • Inner & Outer Shadows
  • Title Sections
  • Background Transparency
  • Border Radius (Rounded Corners)

Transparent background, great for use over image backgrounds

Title Example


For anything content that needs a heading

Here's an example of what you can do with the outer shadows

An inner shadow can create a gentle 3D effect

Grab attention by using a mixture of shadows and color

CamperScanner Homepage

We’re about to take everything I just wrote about content boxes... and 10x it. This is the homepage for CamperScanner France

Recognize the boxes? That’s right! Content boxes, with a twist. The box on the left is an icon box, which is basically a content box with an icon on the top. It has a Thrive Content Builder HTML element in it, instantly turning a simple content box into a campervan search engine.

Why It Works

This example is here for two reasons:

  • Simplicity
  • Ingenuity

What is it about? What should you do next? What are the benefits of using this site over others?

All of these questions and more are answered in one eight word headline and two boxes. It’s simplicity at it’s finest, and it's most effective.

The ingenuity points come from taking advantage of an outside program within a Thrive Content Builder page.

Thrive Content Builder does not offer a campervan search engine as one of it's elements. Yet somehow, there it is. Thanks to the power of the HTML element.

You can add just about anything with a HTML code to a page built with Thrive Content Builder. Paypal buttons, live comment boxes, contact forms, SoundCloud widgets...

Rather than just awkwardly plonking it on you page, Thrive Content Builder allows you to integrate your HTML element seamlessly with the rest of your page design. The CamperScanner homepage is a great example of that.

How to Get All Macgyverey With Your HTML

First you need to get the HTML code of the object you want to add to your post or page.

We're going to use a SoundCloud audio track for this example. I want to add an interview I've uploaded to SoundCloud to a page built with Thrive Content Builder.

Step 1

Find the HTML code on the native site (eg. SoundCloud in this example). It's often under a 'share' or 'embed' option. ​Copy it.

Step 2

Drag the Custom HTML element onto your post or page in Thrive Content Builder​

Step 3

Click Insert Custom HTML, paste in the code and hit save.

You can then drag or reposition the HTML element anywhere you want it on the page. Add it to a content box, a page section, resize it with a content container. The possibilities are endless. (If you're not entirely sure when you should be using which one of these elements, check out this video. It explains the difference between the elements and how to use them to keep your designs mobile responsive.)

The HTML element within Thrive Content Builder editor.

Veggietarium Sidebar Opt In

Recipe and blog site Veggietarium opened our eyes to a whole new level of possibilities when it comes to opt-in forms.

Take a look at the attention grabbing sidebar opt-in form.

Why It Works

The rest of the site is very geometric and uniform. Everything is in boxes, apart from the sign-up form. It draws attention by breaking the norms of the rest of the site and using an element escaping design.

How You Can Create Element Escaping Opt-Ins

I’m not going to lie, this design sent me on a bit of an experimental rampage.

We’ve always known you can escape the borders of your Thrive Leads opt-in forms, but seeing Veggietarium’s design made us realize just how much potential this option has.

So, I did what any self-proclaimed tinkerer would; sat down with a bag of Doritos and got creating.

About 20 minutes, and let’s not talk about how many Doritos later, this is what I came up with...

My experimental element escaping opt ins.

To create you own attention grabbing, element escaping opt in forms you need an image with a transparent background. Use the negative margin trick shown at 11.10 of this landing page from scratch video to move the image over the top border of the form.

Some points to note:

  • This effect works best with the slide in opt in form type because it pops up over the existing content on your page
  • Use the ‘Slide in Set 002’ template, the drop shadow on the opt in box adds to the element escaping effect (see the first two examples above).

Snap Mentions!

Here’s a quick snapshot of more clever designs created by our customers:

Ketofix - Recipe Blog Post

Want to display nutritional information for your recipe posts without a boring table? Ketofix had a very clever idea on how to do this for their recipes.

Nutritional Information

Nutritional information per filled avocado half 

20 g Fat
7 g Protein
4 g Carbs

The percentage of calories (fat, protein, carbohydrates)

80 %
Fat
13 %
Protein
7 %
Carbs
Fat
Protein
Carbs

I’ve recreated the post here so you can see the elements animate.

This is done by using the data elements in Thrive Content Builder.

Life Skills Instructor - Online Courses

This design was sent in by Dr. Linda Barthelus of Life Skills Instructor. It’s an online curriculum.

She’s used a table element in Thrive Content Builder to keep everything inline and organized, and included buttons in each row linking to each lesson.

Note: table elements work best on desktop due to responsiveness. This is great for situations like an online course, where desktop computers are used most.

Email Sales Machine - Dynamic Blog Post

Email Sale Machine sent in an impressive blog post built for visual impact and scannability.

Their Drip Campaign Ultimate Guide post included multiple elements, but I’ve recreated some of our favorites below.

47 %

​"Nurtured leads make 47% larger purchases than those who were not nurtured." - Hubspot

These boxes are great for breaking up the article, keeping the reader interested and emphasizing certain statistics.

"Companies using marketing automation generate twice as many leads as those using just email software." (Source: Autopilot HQ)

With Marketing Automation
Without Marketing Automation

You can create them on your site by placing data elements inside content boxes.

It's Time to Jump Behind the Wheel

I hope you got some ideas, inspiration and design shortcuts from our users.

Now it's time to start putting theory into practice. Jump onto Thrive Content Builder and start playing around, create your site's color palette and get yourself some graphic goodies.

You'll be amazed at the difference these seemingly little things can make.

Let me know how how you go in the comments below!

Author: Stephanie Kelly

Stephanie is a slow traveler who loves anything that can be described as remote, country or outback. She dabbles in documentary making and seeks out unique experiences. With a passion for helping small business utilize the internet for growth, she enjoys demystifying the web for those who could benefit from it most.

56Comments

Karen McCamy Reply

Steph,
Fantastic and well-researched information! As always with Thrive articles!

I discovered the use of negative margins in one of Shane’s video courses/tutorials, and have actually explained how to use it (in the most basic way) to my coaching clients (WordPress beginners).

But, the example above does really take this “trick” to another super-level! Awesome and very useful… I can see how they were really “thinking outside the box!”

All of the tips are super-useful! TBH…I’m still trying to remember the differences between when I should use a Content Box & a Content Container (w/o having to keep checking the KB!) LoL!

Love Thrive tools…all of them, and love all of your incredible content!

Wow. Bookmarked!!

Great Article! I love these real world example/tutorial posts. Actually, I love everything that Thrive Themes offers and creates for their audience. You Guys are Awesome! Thanks

Can we get more importable templates? This will help with website creation.

    Stephanie K Reply

    Hi Benjamin,

    Are you a Thrive Themes Member? We just released a new content template download a few days ago. You can get it here (the link will only work for logged in members).

    If you’re referring to more the Landing Page templates, we’ve released less recently because we’re waiting for the release of TCB2.0. The reason for this is TCB2.0 will completely change what is possible for the designs. I promise the wait will be worth it :)

Josue L Reply

Hi Stephanie :D you or someone know how to make a testimonial slider like the inner circle page, it looks very nice. Thanks for all your nice content.

Danielius G Reply

Those form escaping images! *Goes on to copy this idea and test it out*

<3

    Stephanie K Reply

    Oh trust me Danielius, the experimenting didn’t end with the examples in the article. It’s actually ridiculous fun thinking of creative new ones :) Send a link to any you create!

Wow. I had no idea this had so much power. Guess I know what I’ll be doing over the long holiday weekend! Great article. Thanks.

    Stephanie K Reply

    The more you look into it the more you realize what it can do. You really are only limited by your own creativity with TCB. That’s why I love it so much! Happy creating James :)

This is a great post .. love all the design elements. I use several content builders myself on my sites as well as clients. Seems technology is just getting better and better.

Hi…amazing post.
I have a question about the Veggietarium Website. Are they using a theme from thrive theme? I don’t know how to scroll from right to left the different images and besides with an bottom in the middle of the imagen falling from the top? It is located in the homepage of http://www.veggietarium.com/
My theme is pressive from thrive themes and I have all the tools from Thrive As I have to show many classes in my website I think that this is an excellent idea by veggietarium to show them without using all the home page for that.
Thank you, and I am following your posts….

    Stephanie K Reply

    Hi Juan,

    They aren’t using a theme from Thrive Themes, just Thrive Leads and Thrive Content Builder. A great tool for finding out what theme is being used on a website is What WordPress Theme is That, type in any website and it will give you all the theme and plugin details.

Inspired, thank you

Melonie Holmes Reply

Thanks for this valuable infk. I am just starting so this is very helpful.

aftab Reply

Mind blowing article. Goes beyond just features and benefits. Love it when somebody writes about how one could use features to reap the benefits, VISUALLY.

    Stephanie K Reply

    Agreed aftab, it makes it a lot easy to comprehend when you can see it rather than just read it.

aftab Reply

What email client does TT use?

Martin Hamilton Reply

Niiicceeee! Very nice post Stephanie. Lots of new ideas. Thrive Themes is world class and you’re not slowing down. Thanks for all the value you add to us members. This is high impact stuff.

    Stephanie K Reply

    Thanks for the kind words Martin! We’re definitely not slowing down ;)

joeldeperi Reply

Awesome!
I subscribed to the Thrive monthly membership last month. I am so impressed with everything you offer. You make creating a website so exciting. Thank you!
Joel D.

I am also a great fan of content builder I built this site , but will now review it http://www.holidaycampervansfrance.com/

    Stephanie K Reply

    Hi Eamonn,

    I see you were already using some of the strategies in this article. Starting off on a good foot! All that’s left is dialing in that color palette :)

Mark W Reply

Hi there Stephanie,

Thank you for this post. Do you have any idea when the new Content Builder 2.0 will released? Don’t have to be ‘exactly’ of course, but a ballpark time-frame perhaps? Thanks! Mark

    Stephanie K Reply

    I wish I did Mark, but any date I gave now would be at risk of changing. If you haven’t seen Shane’s update video, it sheds some light on when to expect TCB2.0. Sorry I can’t be more exact!

Hey Stephanie,

question that i think i can ask here a client wants me to build her a fitness website and i suggested different themes i want to show her examples what people build in the fitness niche with thirve themes any way to find out sites using thrive themes in the fitness niche?

thank you

    Stephanie K Reply

    Hi Gabriel,

    Unfortunately I don’t have any real world examples of our themes being used in a fitness niche, but take a look at this Yoga homepage from scratch post that shows a finished Yoga homepage. This is more related to Thrive Content Builder than one of our themes, since Hanne built the whole thing from scratch with TCB (meaning it wouldn’t matter so much which one of our themes you were using). You can even download this page and add it to you client’s site :)

Awesome Sauce and Cool Beans (that’s actually a recipe :-} )! I am always looking for new ideas in cutting edge design tips. You just gave me more life in my live customer tutorials. Thanks for these great tips!

Hey Stephanie,

I have been developing custom websites for so long and I always look for something new and unique.

I liked the examples you have given. InnerCircle and all the other landing pages are effective.

To make a design converting, it’s always recommended to maintain the simplicity with an elegant layout.

Thanks for sharing with us.
Enjoy your day.
~Ravi

Never thought I’d have my website featured as an example of great design. Wow – thanks guys. Means a lot!

I’ve been using Thrive since TCB was just a twinkle in Shane’s eye and owe much of my success (and ability to keep costs down by doing it myself) to you guys. Can’t wait to see what the future holds.

Tim (the Inner Circle guy!)

    Stephanie K Reply

    That’s so great to hear Tim! We loved the site design and the whole business. Hopefully Thrive Architect is a welcome addition for you. Keep killing it ;)

Hi Stephanie, thenk you so much for this post!

I’m super honoured to have been featured (I’m the Reto Dieta Express website owner ;) ) and the insights you extracted from it and the corresponding tools and advice are just precious!

I’m ThriveTheme’s biggest fan and a super happy customer. Thank you so much for having set such a high standard in what you deliver to your customers and the way you interact with us.

    Stephanie K Reply

    Hi Maricarmen,

    It’s so inspiring when we see sites like yours build with our tools. Customers like you are why we do this!

MamaRed Reply

Okay, this has GOT to stop or I’ll never get anything done! Love love love this article (and everything y’all do). The problem is keeping up with all of it and having those geek-out days with pretzels, coffee and a headset. Heaven help the person that interrupts one of those sessions.

Fantabulous stuff, I have a “thang” for color palettes and appreciate the new tools to help with that.

I have (finally, only been threatening to for a year), started updating my site. I just used the Consultant template to create a new home page. Definitely different than the base and having a place to start rocked socks. Thanks oodles and bunches. Hugs&Blessings. MamaRed.

    Stephanie K Reply

    Mama Red!

    That’s actually a great strategy – setting aside a geek out day. I might have to start doing that :) Glad this made it a little easier to update the site!

Jacob A Reply

In one of the Thrive University videos I would love to see you guys recreate this site using Thrive.
http://www.airforce1ac.com/

They are using a lot of really cool elements that all work really well together. I’ve been able to recreate most of it but there are few pieces that are a little tricky.

    Stephanie K Reply

    Thanks for the suggestion Jacob, this look like a job for the new version of TCB – Thrive Architect :)

Hey, thank you for this awesome article! I’m in process of building my website and I hope this will help me a lot :)

Love this post. So much inspiration. So much to do. Don’t know where to start ;-)

    Stephanie K Reply

    Hi Tasso,

    Yep this is definitely a common problem! If you’re building a homepage, check out this website review, it outlines the whole structure for you.

Sonya R Reply

Thank you for this excellent blog post! Regarding the Inner Circle website, can you tell me the feature in Thrives Themes used to create the “Our Community” section? I’m a Thrive Themes member and I’d like to see how to incorporate that style in to my website.

    Stephanie K Reply

    Hi Sonya,

    The Our Community section is made using a column layout, with an icon on the left and a text element on the right. He’s used one column per section of text, this helps keep the icon and text aligned. And he’s centered the whole column element so it is in the middle of the page.

    The column layout looks like a 1/4 – 3/4 split.

    If your having any troubles let me know!

Hi Stephanie, thank you for showcasing some of the sites that are using Thrive. I would suggest putting a gallery section of Thrive powered sites, so that others can find some inspiration for their web design project and also see the possibilities with Thrive.