We Show You How to Create a Unique Homepage (+New Landing Page Template)

We're back with another landing page from scratch video!

One of the questions we've been asked regularly with these landing page from scratch videos is: "How about copyright?"  

Our answer is always the same.

We show you how you CAN create the exact landing pages to show you the power of Thrive Architect but you should NEVER blindly copy other people's website design!​

That's why this time around, we're going to take inspiration from two different landing pages and make one, 100% originally designed homepage.

Check out this video, because you're in for a treat!​

More...

In Search for Inspiration

Sometimes you'll look at a webpage and see some elements you really like. Without necessarily being fond of the entire look of the page.

That's exactly what we experienced on the landing pages from Positionly and ​Frontdoor.

Lookout for Interesting Layouts

The first thing we're always on the lookout for are interesting page layouts. A good layout will make your page instantly look more professional.

The one that caught our eye on the Positionly page is this two column layout with a big image on the right side and a title, paragraph and button on the left side. This allows to show off features of a product and give a clear call to action.

The most interesting layout we discovered on the Frontdoor landing page is this unconventional 3-column layout. Instead of simply using a headline and paragraph layout, they play with different text sizes and icons. This creates a nice hierarchy in the information.

What Grabs Your Attention?

Some elements on a page will grab your attention right away. 

Keep an eye out for these. Because using them in strategic places on your own landing pages will allow you to guide your visitors to the most important conversion element on the page.

Exactly like Frondoor is doing.

The one element that instantly stands out on the Frontdoor homepage is this floating box. The box grabs the attention because it seems to be placed on top of the original page. This effect is created through shadow and by placing the box on the junction of two page sections.

Our 100% Original, Built from Scratch, Yoga Homepage

This is the result of our "inspiration" quest, built from scratch with Thrive Architect​:

As you can see, we've incorporated these 3 "inspiration" elements on the page. But that's not enough to make a good looking, conversion focused homepage.

We also added:

Bonus Time! I Promised You a Treat...

Now, because we didn't copy any existing design for this landing page from scratch video I can give you a little present...

This template is now available in your templates library in Thrive Architect.

Look for the set called "Bonus" and the template "Unique Homepage".

Your Turn!

Did you like this landing page from scratch "inspiration"? Did you find any cool elements on home pages or landing pages that you would like us to create?

Let us know in the comments below!​

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she’s not busy discussing high-level funnel design over cocktails with the equally geeky, you’ll find her discovering a place for the first time

  • Detlev says:

    Thank you, Hanne. Great video giving me ideas (This time I really “get” negative margins). And thanks for the file to work with :)
    Happy holidays.

    • Hanne says:

      Hi Detlev,
      Thanks. And yes sometimes it takes multiple examples to really understand how a feature such as negative margins woks.

  • Barbie says:

    Gorgeous! I love it and I Love Thrive Themes!

  • Alexandre B says:

    It doesn’t work with the latest version of Thrive Landing Page…

  • Keith Agnew says:

    Another Home Run! .. Thanks Hanne, and Happy Holidays to you & everyone at the Thrive Themes team!

  • Ryan A says:

    Hi Hanne. I’ve just started watching this, and know I’ll learn a lot. In the meantime, I wondered what software you use for your video tutorial – in particular, how you get your lower left circular video. I use Screenflow, but can’t get a circle, as far as I’ve found. What about you?

    Thanks! :)

  • Felix E says:

    Very pretty page and nice tutorial. Love the way Thrive works!

  • Ray L says:

    Thanks for sharing.
    Always nice to see you build from scratch serie ;)
    It gives us some more ideas how to build the best websites.

  • Lewis says:

    Hey Hanne,

    First of all… AWESOME tutorial!

    I really love Thrive Content Builder for it’s versatility and it really shined through on this one. It feels like almost anything is possible and I’m sure that will apply even more so in TCB 2.0.

    And that brings me to my big question, can we expect a release before the new year? — I’m soooo excited :)

    Cheers,
    Lewis.

    • Hanne says:

      Hi Lewis,

      Believe me, we are super excited about it too! But a release before new year is (unfortunately) not happening.

  • Bruce says:

    Thank you for the tuition and the ‘treat’

  • Matt N says:

    Awesome!! thank you for doing this!! I always look forward to these!!

  • Achim Mette says:

    Great Job Hanne!

    Thanks for the file and inspiration!

    Best to you and the Team from Germany!
    Achim

  • Tommy says:

    Thrive Themes is the best…nothing comes even REMOTELY close.

  • Johan says:

    Again a great course Hanne !

    I was wondering in the demo you made the generate new landing page light box on the fly… But as you mentioned Thriveboxes can be more interesting since ‘seen’ and ‘subscribed’ counters are kept… Is it possible just as with light boxes to create Thrive Leads Thrive Boxes on the fly? Just asking….

    • Hanne says:

      Hi Johan,

      If you want to use the Thrive Leads Lightboxes (which I highly recommend because of all the powerful features you described above) you would have to:
      1. Create a Thrivebox from within the Thrive Leads dashboard
      2. When you select the event in the event manager for the button, choose Thrive Leads Thrivebox, the Thrivebox will be available so you can just click on it to link it up (easy peasy ;) )

  • John M says:

    Hi great tutorial. How do you fix the issue when the text in the header section gets behind the optin container?

    • Hanne says:

      Hi John,
      The only workaround for this for the moment is to make sure there is enough margin under the text so that they do not overlap.

  • David Parker says:

    What a great video and it really showed how much I am under-utilising Thrive Themes. Absolutely loved it.

  • Chik says:

    Hanne – this was great. I didn’t think I would learn anything new but thought I’d watch anyway. I’m glad I did. It’s the little things, like creating an ID for a form and jumping to that form. Or setting all the default fonts and styles. Two things I missed in the past. Using the content container to have more control over boxes, especially on mobile. Plus seeing you add the Ovation slider gave me some ideas for using that too. Keep up the great work! Thank you.

  • Christmas surely did come early!!

    I absolutely LOVE Thrive Themes. I would still be super scared of website building if it weren’t for your amazing video tutorials AND plugins.

    I recommend you guys to ALL my friends and clients ready to get their WordPress websites up!

    Hanne, I am So Grateful for this beautiful tutorial and early Christmas gift! I can’t wait to use it and create my own too! You really get me excited about what’s possible for my business when I am confident about being capable enough to bring my vision to LIFE. Thank you.

    Huge Huge Hugs,
    Katana

    • Hanne says:

      Hi Katana,

      Thank you so much for this comment. We love helping you build a better website so that you can concentrate on growing your business :)

  • Jay L says:

    Thanks, Hanne! I loved seeing the step-by-step explanations of how each section and features were built. The Thrive team delivers and exceeds expectations again!

  • Megan says:

    Thanks Hanne – great info (as always)!!

    I think you might need to adjust your numbers section for mobile users. If I visualise this page going to mobile, will the columns stack on one another with the numbers being seen in the order 1,3,2,4?

    • Jeff B says:

      Correct. Also, on a mobile device, the section with the text on the left and images on the right will appear with the text above the images. Is there a way to work around this? Thanks.

      • Hanne says:

        Oups :) You’re right Megan, I should keep to the 1 and the 2 underneath to have it look correct on mobile. Didn’t think about that.

      • Hanne says:

        Hi Jeff,

        Not sure what you mean with “work around this” the order will be Text/ image – Text/image – Text/image.
        If you want to switch this you can use the reverse column option

  • Jeff B says:

    Thanks Hanne. How are you inserting the dummy text?

  • Martin says:

    Thanks for another “How to” video. It was once again very useful.

    I’ve been struggling for years with my design and wish I’d have discovered Thrive Themes earlier.

    Happy holidays to you all at Thrive Themes and keep up the great work.

  • JOHN DEVLIN says:

    Best video to date loved it, Was going to try to do that page and them boom its attached superb! Thank You

  • Simply marvelous. This style page is the hottest and most up to date used on the internet today! Thanks for the downloadable file of the page you just created also. It will save me time and be an awesome addition to my sales funnel.

  • Juan G says:

    Ho Hanne
    I love a post of landing page from scratch video when is coming from you or Shane,
    I would like to change my actual homepage of my website for this one because my site is about classes as well. My actual homepage is a mess and it does not have any conversion, but it ranks on the first page in google search, according to the key words I have. My question is if I change it, could I lose SEO from the search engines? any suggestion?
    Thank you!

    • Hanne says:

      Hi Juan,

      Google does not really detect design so if you keep the page URL the same, the title of the page and keep the text the same you should be fine with SEO (as far as my knowledge goes…)

  • Excellent tutorial, Hanne! I learned a lot from it, and I’m going to implement one or two ideas from the tutorial. Thanks for all you do, Thrive Themes!

  • Birgir says:

    Thanks, great video!

  • Erez Keynan says:

    Hanne.what can i say but pure thank you for the video & the zip file, i just built a new site for myself the oth ed day and i wasnt so pleased with T he results.
    Im going to use this stracture and make the site new look avaliable for my costumers and new subscribers to come.
    Like i say again you guys are amazing people ! I wish your brand all the best from Israel

    • Hanne says:

      Hi Erez,

      I’m pleased to hear this comes at the perfect timing. If you stick to this design, I’m sure you’ll be able to make a site you’re happy with!

  • James P says:

    Great post and video! Quick question – does anyone know how to disable ALL CAPS? I imported this template, but I’ve noticed everything i type into a heading or paragraph is coming out in capitalized letters? Thanks!

  • Justin Shane Ritter says:

    Wow Hanne…Well done and it was awesome having a front row seat watching you create this page! Your pretty quick and were actually slowing it down a bit so it didn’t go by us like a major league Fast Ball. Really sweeet…Thanks for the early Christmas gift and I deserve it, I’ve been such a good boy in 2016…well that may be stretching it a bit, but Thanks none-the-less!

  • DrGeorge says:

    Awesome! Thanks Hanne!

  • Hanne,

    Thank you very much. You have the ability of teaching how to make complex things easy.

    This is a great conversion focused landing page/home page.

    I’ll give it a try myself.

    Regards,

    Luis.

  • Andrew H says:

    Hanne, another fantastic lesson.
    With the flexibility of Thrive Content Builder is there any advantage to one of the Themes from Thrive over another? Eg is there an something that you can do in Voice that you can’t do in Focusblog?

    • Hanne says:

      Hi Andrew,

      It’s true that TCB is super flexible but for the general look of your website (especially you blog pages) the easiest is to pick a theme that’s close to what you’re looking for. Eg. If you want round featured images, I would tell you to go for Minus and if you’re looking for an easy way to have full page layouts (without switching to a landing page) give Ignition or Squared a try.

  • Mary Phillips says:

    Lovely job. Thank you Hanne :)

  • Prerna says:

    Hanne!! LOVE this! Thank YOU :) I’m wondering if you know of a way to add a sticky bar to the top of a landing page that has text and a button which when clicked goes straight to the enrolment/sign up/buy section… I see that a lot these days and would love to know if I can replicate it with Thrive Landing Pages :)

    • Hanne says:

      Hi Prerna,
      That’s a cool feature indeed. This is not something you can do with Thrive Landing Pages unfortunately. But there are two ways to to this with Thrive Themes:

      1.If you use Thrive Leads for this. With Thrive Leads you can create a ribbon with a button and then you can link the button to the appropriate section.
      2. If you use one of the Thrive Themes, you can make your header floating and add a call to action button to the header section.

  • Kathrin says:

    Nice. Thank you Hanne. Thrive Themes is really the best!

  • Hazel says:

    Thank you Hanne! This is great tutorial, I have been trying to replicate a layout effect that is on this page yogaclub.me. If you scroll down to “Find Your Perfect Class”, you will see that there is a photo on the left that fits perfectly to the edge. (Here is a screenshot: http://www.screencast.com/t/4tfTaif8amb)

    I am unable to replicate this despite I have remove all the margins and paddings for my page section, columns and image. I also tried to add padding on one side to push the image to the edge. Though it looks like it sticks to the edge on desktop, the mobile version doesn’t look so (with obvious padding on another side).

    Any tips for that? Thank you!

    • Hanne says:

      Hi Hazel,

      It’s a bit hard to know what to do exactly without seeing the website but you should be able to replicate that with TCB.
      Make sure to take out ALL the margin and padding (that is around the column layout, around the section and around the image) and maybe check if a negative margin on the image can help.
      Ideally you would have to be able to add a background image to one of the columns but that is not an option that’s available in this version of TCB.

  • Geoff says:

    Thanks so much. Really so helpful. Appreciate it. :)

  • Paul G Bailey says:

    This was brilliant! I didn’t think I’d watch it all as it was fairly long, but this taught me so much and I’ve been using Thrive for well over a year. Great work!

    • Hanne says:

      That is a very nice compliment Paul :) I know these videos “demand” a lot of time so I’m super happy to hear you’ve learned some new stuff!

  • Luana M says:

    Thank you Hanne. This is fantastic and I love these walk through’s. I haven’t been able to upload the zip file despite having the latest version of TCB….any suggestions ?

  • John V says:

    Thank you Hanne. Great work and a gorgeous site. Thrive Themes is the best.

  • Kelly E. McClelland says:

    Love how simply you make this look. Now to see if I can do it! Very nice and helpful.

  • Katharina says:

    Great stuff, thank you. I noticed that when I use the template, the main headline is not visible in the responsive version as it slides underneath the sign up box. Is there a fix to it? Thank you.

  • Bodine B says:

    Truly an excellent instructional video, Hanne.
    And you are a great video instructor!
    I built the entire page along with you, and it looks great.
    This video really got me to understand how to use the TCB.
    I will now be following along with your other full-page-creation video tutorials.
    Thank you so much, Hanne!
    BODINE

  • Andy C says:

    Thank you Hanne, a really interesting and easy to follow video, it has certainly given me the impetus to get started with some of my own landing pages! Thanks again… Andy

  • Arthur Z says:

    I always wanted to make opt-in forms that are in between sections. I cant believe it was this easy.

    You guys are great!

  • Chris says:

    Thanks Hanne! I love watching your tutorials! Tons of value :)

  • Kamran says:

    Hanne,
    Great job done here.
    My question to you is…is it possible to have a homepage video playing in the background e.g. http://www.coverr.co

    • Hanne says:

      Hi Kamran,

      No video backgrounds are not possible for the moment in Thrive Landing Pages (but will be included in TCB 2.0)

  • Matthias J says:

    hi Hanne, its so great to see, how easy it tu use TT, love it!
    Thank you for your inspirational tutorials.

  • Jerry R says:

    hmmmm…The import is not working with the content builder.

  • Ambrose says:

    It’s great to see it built from scratch – now I actually know how to use these features should I ever need to customize something. Thanks for including the .zip download because I cannot (don’t have the patience to) do it from scratch.

    • Hanne says:

      Hi Ambrose,

      The zip file will save a lot of time, but knowing all the features will help you make the most use out of it for sure :)

  • Robin says:

    Beautiful design. What sucks though is it is not optimized for mobile. The above the fold text literally goes behind the optin box. The image is not responsive again. Sad.

    • Angie A says:

      Hi Althaf, I’m having the same problem too. The header looks great on desktop but on mobile it’s a big mess. :-(

  • Roger says:

    Hanne, thanks for a great video. If I want to have Menu on the top (few items) and few items in Footer, how to do that? Pro positionly and Frontdoor has menu on top as well.

  • Andrew says:

    Hi, I need more RED NUMBERS!!!!!
    Where do i get those images?
    :-)
    Thanks

  • Erik says:

    Hanne – thanks for your video today, very relaxing to watch. Quick question on SEO with Thrive Content Buidler – I have read that Thrive is a little on the clunky side with code. Is this true? Also from my experience the Yoast plugin does not recognize the content within the page. Thanks!

  • Mike K says:

    Amazing work as usual.
    I noticed something, that you always choose the perfect padding/margins.

    Did you trial and error before recording the video to get the exact pixels you’d like or is it just (incredibly accurate) guessing ?

    Many thanks,
    Mike

  • Dami C says:

    Hi Hanne, thank you! I learned a lot. Now I took you page and customized it for me. But I would like to run it as my homepage. And I do not find a way to add my menu. Could you help me with this? Thank you! Dami

    • Hanne says:

      Hi Dami,

      To make this page your homepage, you have to go into your WordPress settings ==> Reading ==> Select the page you created as your “static home page”.
      You can find full instructions here
      Hope this helps :)

      • Dami C says:

        Hi Hanne, thank you but I know this: My problem is that then there is no navigation and I need one…
        If it is not possible to bring a navigation on this page: Is it possible to build also a homepage like this from scratch.
        I tried to install the Ignition theme but it does not look remotly like the one you showed…. How can that be? Is there somethin I need to do that I can see the page like you showed as an example homepage…
        So many questions but I would be very grateful for your answer.
        Thank you, Dami

      • Hanne says:

        Hi Dami,
        Indeed on a landing page there is no navigation.
        You have two options:
        1. Add a navigation element (in TCB you’ll find an element that is called “widgets” and you can chose the “custom menu” this will allow you to add a custom menu. But this menu will not look exactly as the others in your theme.
        2. As you’re using ignition, instead of starting from a blank landing page, you can create a new page and in page attributes, chose the the “full width” template. This will allow you to start from an empty page, with a menu on the top and build the homepage following the same steps as in the video (you’ll not be able to use the zip template because this is a landing page, so you’ll have to build it yourself :) )

  • Clay says:

    Thanks Hanne, this helped me out a lot. Especially as a total noob to building my own pages. I have a much better understanding. There were some differences and options unavailable to me even though i have all the thrive options, however i still learnt a lot. thanks for taking the time to make this video

  • Gareth Naylor says:

    I really enjoyed this. Except that when I went to preview it my menu had disappeared. And so I had to use the revert button and lose everything. Have you any advice on how to keep the menu still?

  • Joey J says:

    awesome ‘tut’ Hanne, I was wondering how to create boxes which floated in between 2 sections. this tutorial was exactly what i needed. I also learned quite a few other “tricks” I can now implement on a couple existing pages so this was time (very) well spent. you guys rock. thanks.

  • Charmaine S says:

    This is a great video tutorial. Love the template. I will be using it to put together my Home Page featuring Life Coaching. This makes a huge difference for me because I am not tech savvy :)

  • sergio c says:

    Hello Hanne
    Great video, I am trying to upload the bonus file to my website through content builder but it doesn’t recognize it. Is there another file i can upload for the yoga homepage

  • Leon says:

    Hi Hanne, Today I wanted to use the free template but got this message:

    Unpacking the package…

    Installing the theme…

    The package could not be installed. The theme is missing the style.css stylesheet.

    Theme install failed.

    Is this free template not good anymore or what do I need to change?

    Thanks so much,
    Leon

  • John A says:

    Hanne, great article. I really want to watch the video now tho see how you build three different elements. Unfortunately, the video never finished loading.

  • Dickie Lim says:

    Thanks Hanne, it’s a great presentation I’ve learned a lot from you. Its give me a better ideas of building a good website. I like your presentation.

  • Nicholas says:

    Hanna,
    Your tutorials are spot on.

    It was a bit overwhelming at first, but watching as you build the demo sites, I am now able to make full use of Thrive Themes in building personal sites for my businesses.

    You are a good teacher, and a gem at Thrive Themes.

    Thanks.

  • Anders C says:

    Do you have a list of previous downloadable templates?

  • Wow!! That was fast. And so simply. It’s like magic. I love this process of making the landing page. “

  • Arnold Palmares says:

    Thanks a lot Hanne. I learned a lot from here. You guys rocks!

  • Bruce B says:

    Excellent,
    Thank you Hanne,,, You not only answered my question about background images on landing pages, but you presented it a fashion that made sense and brought it all together for me – THANKS – B,,,,

  • Ben says:

    WOW – learnt a few new things there and I’ve been using Thrive Themes for a while. I also didn’t know about Thrive Ovation, which looks ideal for my own site and also clients. Shame you have to purchase separately though. Looking forward to Thrive 2.0! Great video and nice looking landing page :)

    • Hanne says:

      Hi Ben,

      Happy you liked this landing page :) If you’re a Thrive Member, Thrive Ovation is included in your membership (if not you can buy it as a standalone plugin). In Thrive Content Builder, you have templates for testimonials, but Thrive Ovation is a complete testimonial management system :)

  • Ben S says:

    Ah so it is – silly me! Thanks Hanne – downloaded and will start using – ideal for using on local client sites :)

  • Christoph S says:

    Great Video, this has giving me more Ideas, Thank you

  • Bob B says:

    Hanne, I love your work and these new templates are brilliant. However, they do not appear in the DEFAULT section of my PRESSIVE theme site. They do appear in my TwentySixteen wordpress site. Are they available for Pressive. I am running Architect 20.0.13 in my sites.

    • Hanne says:

      Hi Bob,

      This is a landing page, so you will have to load a landing page in order to be able to use the template.
      If you want to use the template within your theme, then I suggest saving the background sections as content templates which allows you to import them. Please be aware that this might change certain elements, such as fonts or colors that have been added on the landing page template level.

  • >