Step by Step: Create a Visually Stunning Homepage From Scratch

Author
Hanne   165

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!​

by Hanne  October 7, 2016

165

Enjoyed this article ?

You might also like:

Leave a Comment

  • 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

  • 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!

  • 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

      • 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 😉 )

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

  • 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…

  • 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!

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

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

    • 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.

      • 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.

  • 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

  • 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!

  • 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

  • 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

  • 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

  • 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.

  • 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….

    🙂

  • 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. 🙂

  • 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??

  • 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…