How to Recreate the ‘Business Made Simple’ Homepage with Thrive Architect
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.
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:
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:
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:
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:
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!