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.

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:

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!

Author: Matt Totten

Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • Steve G says:

    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!

    • Hanne says:

      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) 🙂

  • Steve G says:

    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.

    • Hanne says:

      hehe yes we thought about that already 😀 But didn’t want to wait showing this tutorial until that happened 😀

  • Dave Puckett says:

    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!

  • Jami Gold says:

    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!

  • >