Step by Step: Create a Visually Stunning Homepage From Scratch
By popular demand, we continue the landing page from scratch series and this time we'll create a visually stunning homepage.
As usual you'll see all the steps from start to finish and discover some insider tricks on how to use Thrive Content Builder like how to create a beautiful blog post grid that updates automatically (at 15:33).
In this video, we replicate the homepage from Craftsy, an online learning platform for handy crafts. Their homepage design reflects the creative vibe of the website by using full width images but is also highly conversion focused with highlighted promo codes, links to important content and an opt-in form.
This is exactly the type of homepage we like: original, good looking AND conversion focused. Check out the video to see how it's done.
Discover All the Details
In this video, I don't go into detail in how to discover the exact colors or how to copy the images from the original website (because this is stealing!), you should use other homepages or landing pages as inspiration to create your own, original design.
That being said, if you want to discover the exact color or font on a website, you can check out this video. At 2:11 you'll see how to use the page inspector to discover the exact color used on the page.
Full Width Template Vs. Full Width Blank Landing Page
In the video at 0:58, I'm talking about the difference between a full width template vs. a blank full width landing page.
If you're using a Thrive Theme you'll be able to choose the "full width" template to start designing your homepage but unfortunately, not all themes have this option.
If you're using a theme that doesn't give you this possibility, you can start from the "Full width blank" landing page template that you can find in the templates cloud.
Using this template will strip out the menu on the top. To recreate the menu, check out this video. At 8:13 you'll learn how to add a menu to the top of the page.
Also, when using this landing page template you'll have to copy sections instead of placing new section elements on the page. The page section element is part of the options that will only be available if you're using a Thrive Theme but by copying the sections that are on the blank full width landing page, you'll get the exact same result.
Lead Generation Element Vs. Thrive Leads Forms
The last section of the homepage is an opt-in form. In the video at 20:44 I'm briefly talking about the difference between a Lead Generation element and a Thrive Leads Forms element.
Out of the box, Thrive Content Builder comes with a lead generation element built in. You'll be able to create a simple opt-in form (like the one shown in the video) and you'll be able to connect this to your email provider.
Now, if you're a Thrive Leads user, I highly suggest you use the Thrive Leads Forms element rather than the Lead generation element. This will allow you to:
- Get detailed statistics about the number of people who have seen the opt-in and the number of subscribers.
- Run A/B tests to make sure your opt-in forms are converting as high as possible.
To use a Thrive Leads Forms element, you will have to create a short code opt-in form within Thrive Leads dashboard first so that you'll see the opt-in form in the list of elements to choose.
Now it's your turn to create a visually stunning homepage.
Any questions about this homepage or suggestions for layouts you would like to see in future videos? Please let us know in the comments below!