Want to learn some super sweet design tricks to build your own custom homepage design using the Thrive Architect page builder plugin for WordPress?
Then watch the video above and read on to learn how to recreate several of the powerful homepage design features that Business Made Simple uses to maximize conversions on their own website.
Let’s begin…
More...
Disclaimer: Don't Copy Other People's Websites
Before getting started, we want to make it clear that Thrive Themes is not suggesting you copy your favorite web designs by building exact copies on your own website.
To the contrary, we're simply showing you how easy it is to take inspiration from other successful websites and create custom tailored versions of such designs to fit the unique needs of your WordPress website using Thrive Architect.
You can always “Steal like an artist”, but make sure any design you publish on your website is uniquely your own.
Tools You’ll Need to ‘Steal Like an Artist’
The following are some helpful tools you can use with the Google Chrome browser to decipher the font types, font styles, color hex codes and layout details (e.g. margins & padding) any website is using to help you recreate something similar on your own website…
Google Chrome’s Native Inspect Tool
Google Chrome includes a native feature called the 'Inspect' tool which you can use to diagnose how your favorite web page designs were built.
To access the Google Chrome 'Inspect' tool, just right click on the web page in question (with the Chrome browser open) and select 'Inspect' from the dropdown menu:
Right click on anywhere inside your Google Chrome browser window to open the dropdown menu and select 'Inspect'.
After selecting the 'Inspect' option in the dropdown menu, you can then click on the selection tool and hover over any design element to get more information about how it's styled:
Once Google Chrome's 'Inspect' tool is activated, you can click on the selection tool to begin investigating the different design elements on the page to better understand their layouts.
Use this handy Google Chrome feature any time you want to dig deeper into the layout details of a given web page.
Google Chrome Extension: Color Pickers
If there's a color you want to know the hex code for on a given web page, the best way to find it is with a Google Chrome color picker extension tool.
The two most popular color pickers in the Google Chrome extension library are:
Install one of them in your Google Chrome browser and you'll have the power to find the hex code for any color on the web.
Google Chrome Extension: Font Identifiers
Need help identifying a particular font that a web page uses?
Then just install one of the following Font Identifier extensions for Google Chrome to help make that job a synch:
With one of the font finder extensions installed, you'll have the ability to quickly identify your favorite fonts and how they're styled on any given web page.
Part 1: How to Build a Dynamic Homepage Top Section
Now that you've got the tools you need to better understand the fonts, colors and layouts being used for any web page, let's put them all to use.
Start by watching the featured video tutorial at the top of this post to see Hanne show you how to build a dynamic homepage top section like the website Business Made Simple uses:
The Business Made Simple Top Section design you'll build with Hanne in the feature video showcased at the top of this post.
In the tutorial video, you'll learn how to:
- Use a video background for your top section in the above-the-fold area
- Create a transparent 'Over Content' header design that becomes visually indistinguishable from your video background top section
- And complete the top section design by creating a 3-column, site benefits layout that overlays itself on the bottom of the top section
And once your Business Made Simple inspired top section is complete, you can move on to building yet another awesome design included on their homepage...
Part 2: How to Build an Interactive Content Tabs Design
Let's continue by building a very special content design, also inspired by Business Made Simple's homepage.
We like to call it a Content Tabs design. It looks and behaves like this:
Learn how to build a Content Tabs design like Business Made Simple uses on their homepage in the video below.
The Content Tabs design includes an interactive button box on the lefthand side of the design and a changing content box with different videos, text elements and call-to-action buttons on the right.
How do you build such an impressive content design using the visual editor inside Thrive Architect?
It might surprise you, but the trick is to use the Pricing Table element.
Watch Hanne's tutorial video below to see how she builds a Content Tabs design — just like Business Made Simple uses — in only a few minutes using the Thrive visual editor:
Pretty awesome stuff, right?
Your Turn to Build a Homepage Inspired by Your Favorite Conversion Focused Website
So now that you've watched both of Hanne's video tutorials above and built a custom Top Section and interactive Content Tabs element for your own homepage (inspired by Business Made Simple), what's next?
I bet you've still got some design work to do on your homepage to finish it up...
The good news is that you now you have the right skills to look around the web, investigate impressive page designs, and then visually recreate unique versions of them on your own homepage using Thrive Architect.
Or do you need a little more help?
Let us know what website(s) you'd like us to walk you through building with Thrive Architect in the comments below!
Hanna & Matt – Outstanding post and fantastic videos. I LOVE Donald Miller’s take on website design and how it must always serve conversion and sales. The Pricing Table hack is EXACTLY what I was looking for to display 6 key elements on my homepage, in a minimal amount of screen space. It looks great. I was able to duplicate your design almost completely, walking through the second video, step-by-step. The only snag I ran into was that Thrive Architect doesn’t seem to be allowing me to edit individual instances in the Pricing Table. So my design is not quite there yet. I will reach out to support and create a help ticket. Otherwise . . . great job!
Hi Steve,
Thank you and happy you liked the tutorial.
The “hack” to edit individual instances is to click on the green “lock” icon and unlock that instance from the group editing (you’ll see a red lock) 🙂
I might also offer another suggestion. This pricing table hack seems like a very useful design element. I plan to save it as a template and use it in other places on my site. You might consider coming up with some clever name for it and creating an “Element” that can simply be added to a design from the sidebar. That would save people the time of re-designing the Pricing Table.
hehe yes we thought about that already 😀 But didn’t want to wait showing this tutorial until that happened 😀
Hanne, I love how you teach this… nothing left out and really efficient. Great design tutorials. It’s great to be a Thrive Theme member when you can learn great design techniques like these. thank you!
Happy you liked it Dave!
Thank you! I was one asking for this tutorial on FB, and this is amazing. 🙂
Like Steve mentioned below, I’d love to see this as an element. If you all add that, will you let us know? Thank you again!
We sure will Jami!
Hello Hanne, Thanks for the wonderful video. I have a question: At approximately 31:15 of the video you add the background section and then a content box to hold the three column layout. When I add the content box, it is only about half as wide as the video in the first box at the top. How do I make the content box wide like in the video? I am new to Thive Architect. Sorry for the probably simple question.
Thanks! Chuck
I figured it out 🙂 Just needed to watch the rest of the video!
Happy to hear 😀
Hi Hanne
This tutorial has been fantastic and very helpful. I’ve now created a multi service Content Tabs Design
I’m struggling to link to any specific content tab though from another page. I have used a name as an ID in HTML Attributes and the URL of page name/#id-label just takes it to the button in question but does NOT open that button’s content.
How would this be done please
Thank you Hanne
Hi Steve,
ATM linking to a specific instance in the pricing table is not possible. I logged this as a feature request.