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?
I’m going to let you in on a little secret. It has nothing to do with you level of WordPress dynamo-ness.
- Using the right tools, and
- 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 Architect 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 Architect, 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 favorite 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.
If you are unsure what makes a good logo, check out this post for guidance. It gives you an idea on how to land a versatile logo fast.
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
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:
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 Architect.
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)
For anything content that needs a heading
Here's an example of what you can do with the outer shadows
Grab attention by using a mixture of shadows and color
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 Architect 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:
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 Architect page.
Thrive Architect 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 Architect. PayPal buttons, live comment boxes, contact forms, SoundCloud widgets...
Rather than just awkwardly plonking it on you page, Thrive Architect 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 Architect.
Find the HTML code on the native site (eg. SoundCloud in this example). It's often under a 'share' or 'embed' option. Copy it.
Drag the Custom HTML element onto your post or page in Thrive Architect.
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 the Thrive Architect 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).
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 per filled avocado half
The percentage of calories (fat, protein, carbohydrates)
I’ve recreated the post here so you can see the elements animate.
This is done by using the data elements in Thrive Architect.
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 Architect 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.
"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)
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 Architect 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!