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.
More...
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.
We integrate with tons of services through API and if your favorite service is not in the list, you can integrate through HTML.​
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.
Your Turn!
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!​
Thanks Hanne! Wow that’s using lots of elements and covering about anything we could imagine. One thing I’m working on is creating full funnels with one click upsells and downsells. You recently posted a video on How To Create a Webinar Funnel. I think it would be similar but just with buy buttons on the funnel pages. I would use either paypal or stripe. Any suggestions?
Hi Martin, thanks for your comment.
Indeed for the upsell and downsell pages, I would use buttons with a link to the payement processor and make sure that the page people see after the first sale is the upsell and have a link on the upsell page that goes to the downsell if they choose not to take you up on the offer.
These have to be the most helpful videos of all. I learn something new every single time …great work
Stoked to hear that Craig!
That was an excellent tutorial, I really learned alot. I usually just use the premade homepages that come with the themes but they have some restrictions. I never really used page sections before.. this is brilliant. My homepages are going to be awesome now. Thanks again Hanne you are awesome!
Hi Jay, thanks 🙂 I’m happy you liked this tutorial and you’ll see, page sections are very useful.
One question I have if I do this is using thive theme and woo Commerce is there a way to display The Checkout alongside the menu at the very top please
Hi Craig, sorry I don’t know if this is an option in Woocommerce… A quick Google search came back with specific plugins for this or changing code so this might not be a possibility with Woocommerce right out of the box…
Thanks for the video. One question: how will this look on mobile? Will the background image page sections be chopped for mobile or scaled to fit mobile screen? Thanks
Hi Sam,
Background images are scaled on mobile.
Hmm…. Cant see how to do this? whenever I use an image as a background in a page section it always cuts the image and never scale. is there a trick to this? Is the site you created live somewhere so i can look on my mobile device? thanks!
Hi Sam,
Did you check the box “full height image”?
And sorry the page is not live (because I copied all the elements shamelessly 😉 )
Hi,
It’s very nice video, will try it soon.
Thanks!
Thanks Joinal
Hi,
It’s very nice video, will try it soon.
Thanks!
Congratulations Hanne and many thanks for that tutorial! It’s very wellcome but unfortunly, you forgot to build the Meniu section!
In other way, I want to ask you if is it in library any tutorial for a ecommerce site? Or maybe you have some recomandation for how to use woocommerce with thrive? Also, can you recommend a special theme for?
And a last question … how can we make a carousel with image or video in page?
Thank you very much and best regards all of you!
Adrian
Hi Adrian,
I didn’t exactly forget to build it 😉 As you can see, I’m using a full width page template so my top menu is still on the page.
I don’t think we have specific tutorials for woocommerce but if you have questions you can ask our support forum.
And to answer your question about the carousel, I suggest you read this article and you’ll understand why we think you should not be using them 🙂
Thank you very much, Hanne!
Hanne, this was a brilliant tutorial! I wasn’t aware I could put together a post grid layout like the one you made. I’m swiping that for my home page!
Great to hear Daniel!
Where is the video you’re referencing in the opening paragraph/header? The very first link doesnt work, and the rest go to other videos…
The video is on top of the page Amy
Hanne,
Thank you very much for a succinct yet detailed video tutorial on creating this home page. Brilliant! I love, love, LOVE it! Your teaching style is methodical, organized, easy to understand, and a pleasure to watch and listen to! I am building my home page this weekend, so your video comes at the perfect time. Thank you again!
Thank you Christine! I’m glad this came at the right time for you
Hello Hanne- I see more and more traffic coming onto the site from mobile devices. Would you be able to show what the mobile experience is of the homepage you created in the video above? Also, are you able to provide a mobile first design video? Thanks!
Hi David,
Image backgrounds are not the best for mobile experience. You would have to make sure that the text over the image stays readable on mobile.
We’re working on some big changes for TCB and mobile will be very important so keep your eyes open for that 🙂
Great tips. Especially the blog post grid! Would love to see you guys tutorial a fitness page too…
Hi Nick,
Thanks for the comment. Do you have any cool looking or interesting fitness pages that you think we should do a landing page from scratch video for?
Hi Hanne, yes this one here,
http://reggiecfitness.com/
or this one
http://summersfitness.com/
Thanks Nick, will take a look at those 🙂
Thank You… That was awesome!
Thanks George
How would you take their page and make an AMP version for mobile?
Here’s an article I just read with an interview from google on AMP http://rocksdigital.com/mobile-web-amp/
Hi David,
For the moment I wouldn’t and in general I don’t think that’s the way to think about AMP (taking a page and making an AMP version).
This is still in the very early stages and there is not a lot we can do with it yet, so most of the elements on this page would simply not be possible in an AMP version of the page.
We’ll have to see how the AMP project evolves and what elements they’ll make available to use 🙂
Es wäre gut eure Seiten in deutscher Sprache zu lesen, da der Text von
google nur schlecht übersetzt wird.
Hi Bonnie, sorry I don’t speak German so that would be hard to do.
Hello, nice as usual. One question : how to get rid of the underline below the links ? I run a thrive theme template (pressive).
David, to remove the underline on a link in your theme you will need to modify the CSS. In your Chrome browser, depress Shift+Crtrl+I to bring up the “Element Inspector”. Then, click on the icon that is a square with an arrow pointing to the top-left corner.
This will allow you to select any element on your page and will show the respective CSS in the right box of the inspector window. It will most likely look something like this:
.cnt article a {
text-decoration: underline;
}
To remove the underline, you will need to log into your WP dashboard, click on the “Thrive Dashboard”, select “Theme Options”, then select “Style & Layout Settings”. Near the bottom will be a box labeled “Custom Css”. In this box, copy the existing CSS code and change the “text-decoration: underline;” to “text-decoration: none;”. It should look something like this:
.cnt article a {
text-decoration: none;
}
Click the “Save All Changes” button at the bottom. Go to your home page or whatever page you were on, refresh and verify that the underline on the link is removed.
If you need further help, feel free to reach out.
Hi David,
Like Patrick so kindly explained you would need to use some CSS.
If you have any trouble, you can ask our support forum for assistance.
Hello Patrick and Hanne, thanks a lot for precise answers. I am awfully bad with css so this spoon fed comment is nailing it 🙂
Thanks !
Awesome tutorial Hanne, my wife do have a craft related site and this will be really helpful for her and other sites too.
Perfect Sachin!
Thank you for this demo! Thrive Themes is the best! Your latest lessons on building from scratch have been very helpful! I am still confused about one thing. I see you are dragging a paragraph/text element onto a background image. I see you do it, but when I try it, it doesn’t work. It wants to place the text above or below the image. In this video you performed the drag and drop twice onto an image and just can’t seem to make it work. Is there a way you can describe this better or slow down on how you are doing it. I’ve stopped the video and played it over and over and can’t see how to make the paragraph text element stay on the image.
Thank you.
Hi Mark,
To make sure this is working you need to add a page section on the page first (if you’re starting from the full width blank landing page template you’ll have to copy a page section).
Next you need to apply a background image to the section (click on the page section and on background image)
Now you’ll be able to add text onto the image.
From your explanation, it feels as if you’re putting an image on the page rather than putting a page section and applying a background image to it.
When you put an image element, you will not be able to put text over it.
Hope this helps!
Not a bad tutorial but I would have liked to see you resize the screen to a smaller size in order to see how it looked responsively. So many times I make something that looks great on desktop, but not so much on mobile. I wish you would add more features for responsive design such as easily being able to hide/show elements depending on device.
Hi Dante,
Full width background images are not the best choice for mobile, it will still look good (I mean the image will scale) but you can not really control where the text will be so you have to make sure the text stays readable.
We’re working hard (behind the scenes) on improving TCB and mobile design is a huge part of that!
Thanks Hanne.
Excellent tutorial for setting up a home page. I really like what we already have but I have lots of opportunities to create landing pages so this will be very helpful.
Best, Leelo
Hi Leelo, I’m happy this gave you some new ideas 🙂
As always, you are very clear and helpful in your video tutorials. Love the step by step instruction and promise it will be used! Thanks!
Thanks Kelly, happy to hear you love these tutorials
Very well done. How did you get the very top bar menu again? Is that there automatically because you chose a theme?
Hi Brent,
The menu bar is part of the theme I used (Squared) and to make the homepage I used a full width template.
This is an option in a Thrive Theme, not all themes offer this possibility.
Awesome Tutorial Hanne! 🙂 I became a fan of you now!
You made it so clear to understand the whole concept!
Thanks! Expecting more tutorials from you! <3
Thanks Avinash
Hanne, great video. I learn a lot just by watching the steps and techniques you use. Thanks.
Glad to hear that Joseph, that’s exactly what we’re aiming for with these tutorials 🙂
Hi Hanne, your tutorials are awesome 🙂 l learn a new Thrive trick each time & lets face it there are so many Thrive goodies that refresher tutorials are an excellent way to keep on top.
Keep these coming!
Cheers Alison
Hi Alison,
Thanks for your kind comment. I’m happy you find these tutorials useful!
Great tutorial! I noticed that you didn’t do the navigation at the top or the footer at the bottom. it would be great to understand how you would style these too. Are there any issues that you would encounter with these sections?
Hi Nhut,
I didn’t do the tutorial on the menu because I used a full width template so the top menu is still there (no need to recreate) and the bottom menu is just a four column layout with text links, I didn’t think this would be very useful to show.
But in this video at 8:13 you’ll see how to do it.
Really outstanding. Thank you so much for these tutorials. I get so many of my questions answered by watching you folks zip through these. Keep up the good work
That’s music to my ears Bob 🙂
Great tutorial! Thank you!
Thanks Sarah
Hi Hanne – as with all your stuff that was helpful, thanks. I wasn’t aware before about how to set up the blog post grid which I’m now going to use.
One thing you did which, from an SEO perspective, I suggest not doing is using header tags for styling purposes. Whilst not as important as it once was, ideally the document hierarchy should feature just one H1 for the primary page heading with H2 – H6 tags be applied to secondary and sub-headings as appropriate.
Cheers, Mark
Hi Mark,
You’re 100% right for the headings. I did use the heading 2 as being a real heading 2 on the page but I shouldn’t have used the second H1 😉
Great content Hanne. Thanks heaps. The question I have is around your themes. With the flexibility of the Thrive platforms is there any benefits or differences that you get with one theme over another? From what I have seen in this tutorial and others you can pretty much make the pages look however you need them, unlike other themes where you are locked into the items and elements that the theme makes available.
Hi Andrew,
Indeed you can make the page look exactly as you want it to.
The difference between the different themes would be more visible in the blog options (eg. how the featured image will look).
And it will always be easier to choose a theme that is as close to the final look you want for your website but for all of your pages you can pretty much to anything with Thrive Content Builder 🙂
Thank You Hanne ! As always awesomeness…
I liked especially The Post grid with the automatic shuffling to get the most recent post on the left.
But overall an eye opener for me.
Thanks Johan!
Always Awesome! Thanks for the help you give us.
My pleasure Donna
Great tutorial – Thank you
This has clarified a number of issues.
Happy you found this helpful Stan
Hanna… MANY THANKS!
As a Newbie to Thrive, I’ve just learnt more in 20mins watching your vid, than in three days messing around myself & trying to gleam info from the “Members Knowledge Base”.
Let’s have some more….
🙂
Hi Stephen,
I’m happy this video was helpful. If you want more of them, you can check out the other landing page from scratch videos
Thank you Hanna for the interessting Tutorial!
I like to fix the Menue on the Top, so that I can see it also when I scroll.
Is this possibel? Wen yes- how I can do it? Or can I do it with an other Templet from Thrive Themes?
Best Wishes
Susanne B.
Hi Susanne,
If you’re using a Thrive Theme you can find the option in the Thrive Theme options under “Style and layout settings” and choose for floating navigation.
If you need help, you can ask our support forum for assistance.
Thank you Hanne, you have a hypnotic voice and a fabulously simple way of teaching the steps at just the right pace. This tutorial was very helpful. Not sure if this is the right place to ask but I have re-designed all of my pages with TCB on a non-Thrive theme. If I purchase a Thrive Theme will the transition be simple or would I need some tech help? I’m reasonably WP savvy.
Hi Joan,
Thank you very much 🙂
For the transition, all your pages designed with Thrive Content Builder should stay exactly as they are (what might change is the top menu) but the page content shouldn’t move.
What might change is your blog layout depending on the theme you were using.
Woah. The page section is great, but the post grids are badass! Didn’t know that it was possible to layout the posts as in the magazine themes. This shows that the limit of design is bounded by your imagination. 🙂
Hi Thomas, glad you discovered something new 🙂
Great tutorial! Thanks so much! Is there a way to add a 3D effect to an element in the opt in (as seen at therisetothetop.com) using Thrive Content Builder?
Hi Betsy,
Thanks. For the 3D element. Are you referring to the book sticking out of the section?
In that case, you can do this by applying a negative margin to the image so that it “sticks out” of the section and overlaps the previous section.
Hope this helps
Superb tutorial Hanne, you made it look so simple and swift.
BTW, what theme was that you started off with??
Hi Donald,
Thanks, I started off with the theme Squared
Thank you! I created a ‘template’ along with your video. What a great help.
Hi Elisabeth,
That’s super cool! Glad to hear you could follow along.
I believe I built a beautiful site using all your products. But now Google is telling me it takes way too long to load and docking me points from getting indexed. I think I may have to start over with just a simple theme and leave it at that.
Hi Randy,
All our themes and plugins are optimized for speed so they should not slow down your site at all.
Two things that come to mind when talking about optimizing a website for speed are:
-Images: Are you using a lot of heavy images? Make sure to check out this article about image optimization.
And the second one is hosting. If you’re on a slow hosting, no matter what your website will load slowly…
This is AWESOME, I just redid my home page and it looks great.
So happy to hear that Lee!
Hi Hanne, great post, can I ask you; why do you have a page section at arbitrary places in the page. I use no sections – is that a disadvantage?
The, by trial end error, I find that text and images “stick together” better in mobile view in a content container, you seem to just drop text elements into the background image; what are the advantages/disadvantages of the two approaches?
Hi Peter,
Page sections are useful when you want to have different backgrounds on different sections of your page.
So if you want to have a page with a background image, a colored background, a background image again and so on you’ll need to use page sections to get this effect.
For content containers, I use them when I want the text to be smaller than the full width of the section I’m in. I would have to see an example of when you use them to keep text and image together in mobile because I can not really think of a use-case of when this should be better 🙂
If you want to learn more about mobile responsiveness with Thrive Content Builder, you can check out this video that goes more into depth about the different principles to apply to keep a page mobile optimized.
Thanks for another very useful tutorial, Hanne!
Great use of the Grid-function.
Could have thought of it myself.
But I didn’t. 🙂
So thanks for showing that as well!
Hi Renée,
I only thought about using it like this when I saw the Craftsy homepage and figured it would be cool to teach you how to do this too 🙂
Wonderful tutorial, thank you!
Glad you liked it Rebecca!
Another great tutorial…thanks Hanne. These are always a fantastic source of inspiration and knowledge and I love that we can access them at any time and follow along:)
Thanks for the nice words Luana!
Thanks so much for doing this. I love Thrive Themes and all of the other programs that go with it, but knowing HOW to create a great looking page and which elements are used to accomplish that was a shot in the dark. This really helps clear all of that up. I’d love to see more tutorials like this in the future. Great job.
Hi Tony,
Thanks, we’ll keep them coming 🙂
This is so timely for me. Thank you so much!
Happy to hear that, Esta
Hanne, I noticed you use MailChimp as your email client. Is TT still using ActiveCampaign, or have you switched to MC?
Thanks for the tutorials. They’re very helpful–please keep them coming!
Hi Hans,
This is a demo website and the first API in the list was MailChimp 🙂
We still use and recommend Active Campaign!
Hi Hanne,
Thanks for a super tutorial. These page construction videos are really useful. I liked the Post Grid section; I didn’t realize you could separate the posts in that way. Cool.
One observation. I noticed you multiple ‘H1’ headings on your page. From an SEO point of view would it not be better to just use one ‘H1’ at the top, and then use ‘H2’ afterwards, even if you adjusted the size?
Mea culpa David. Yes that would be better 🙂
How to include the “check box” Send me useful tips… at the bottom of the page. https://www.craftsy.com/
There home page is slightly different from the video.
Hi Raj,
Yes this is different because the opt-in form they have is to create an account (and not to subscribe to a mailing list) that’s why they have an extra checkbox.
If you’re using a normal opt-in form you do not need the extra checkbox.
Great tutorial. I have one question though:
If I have a theme (not a thrive theme), can I create a homepage just like you did and use it as my homepage instead of my theme’s actual default homepage ? If so, how do you overwrite the theme’s default homepage ?
Many thanks for taking the time to do this.
Hi Mike,
You can override the default homepage with Thrive Content Builder. Depending on the theme you’re using you’ll have to use the Blank Full Width landing page to start from or the “normal” page from your theme.
Hey Mike,
Here’s a tutorial about crating a custom homepage for WordPress (works with any theme), that you might find useful.
Thanks you Shane and Hanne.
What I love about you guys, beyond the truly outstanding products you have, is the customer service you provide.
Never mind. I just found it. I can’t believe how many times I simply did not see it….
happy you found it Sylvia 🙂
Hi Hanne,
I try to go the same steps like you, but…
On my website I dont use thrive themes, only the thrive content builder. My first step was to get a page section and fill it with a picture. I use “Full height image”. The pictures size ist 960 to 300. But I can not see the hole picture, only if I change the desktop size in my browser. What can I do, to fix the visibility of the full picture? What ist the best size for a full width picture? Thanks Thomas
Hi Thomas,
I’m guessing here, but probably your theme does not have a “full width template” in that case the page section will always take the width of the theme options.
To overrule this, you can start with a blank full width landing page (you can find this template in the thrive templates cloud).
For the size of the full width image, I would choose an image that is 1920px wide.
Hi
Now, I learned how to play with content container. I would like to learn some tricks with event manager and how images appear suddenly when scrolling down the homepage.
Thank you!
Hi Juan,
That’s a good suggestion 🙂 Will see what I can do
Thanks so much for your tutorial Hanne. I learnt so much that I can apply to future projects. Your teaching style makes it easy to follow the method. The training videos on the website are good, but showing how to reproduce an actual layout is really helpful. Looking forward to the next tutorial. Keep them coming.