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:
- A horizontal opt-in form
- A good looking testimonial section
- A call to action button at the bottom of the page that you can use to either send your visitors back to the opt-in form at the top of the page or to open a subscription lightbox.
- A menu in the footer of the page
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!
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.
Hi Detlev,
Thanks. And yes sometimes it takes multiple examples to really understand how a feature such as negative margins woks.
Gorgeous! I love it and I Love Thrive Themes!
Thanks Barbie, happy you like it 🙂
It doesn’t work with the latest version of Thrive Landing Page…
Hi Alexandre,
Sorry I couldn’t replicate this problem. Can you raise a ticket in the support forum so that our tech people can have a look?
Another Home Run! .. Thanks Hanne, and Happy Holidays to you & everyone at the Thrive Themes team!
Thanks Keith!
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! 🙂
Hi Ryan,
That’s done by our video guy in Adobe Premiere. It’s not a function in the screencast software.
Very pretty page and nice tutorial. Love the way Thrive works!
Glad to hear Felix
Thanks for sharing.
Always nice to see you build from scratch serie 😉
It gives us some more ideas how to build the best websites.
We’ll keep them coming then, Ray 🙂
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.
Hi Lewis,
Believe me, we are super excited about it too! But a release before new year is (unfortunately) not happening.
Thank you for the tuition and the ‘treat’
You’re welcome Bruce
Awesome!! thank you for doing this!! I always look forward to these!!
Good to hear Matt, helps us to keep them coming!
Great Job Hanne!
Thanks for the file and inspiration!
Best to you and the Team from Germany!
Achim
Thanks Achim
Thrive Themes is the best…nothing comes even REMOTELY close.
Thanks Tommy 🙂
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….
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 😉 )
Hi great tutorial. How do you fix the issue when the text in the header section gets behind the optin container?
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.
What a great video and it really showed how much I am under-utilising Thrive Themes. Absolutely loved it.
Hi David,
Good to hear (not the under-utilising part 😉 )
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.
Hi Chik, happy I could teach you something new!
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
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 🙂
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!
Hi Jay,
Thanks 🙂 Glad this was helpful for you!
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?
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.
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.
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
Thanks Hanne. How are you inserting the dummy text?
I’m copy/pasting text from an online lorum ipsum generator 🙂
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.
I’m glad you found us, Martin. Happy Holidays
Best video to date loved it, Was going to try to do that page and them boom its attached superb! Thank You
Thanks John, our designers will be happy to hear that!
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.
Thanks Martin 🙂
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!
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!
+1 for implementation Esta!
Thanks, great video!
Thanks Birgir
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
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!
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!
Hmm That’s a weird bug James… Maybe check the font settings?
If it persists you can ask our support team to have a look.
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!
Hi Justin,
You’re welcome. I’m happy that it was the right speed for you to follow along!
Awesome! Thanks Hanne!
Welcome George 🙂
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.
Thanks Luis, let us know how it goes 🙂
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?
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.
Lovely job. Thank you Hanne 🙂
Thanks Mary
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 🙂
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.
Nice. Thank you Hanne. Thrive Themes is really the best!
Thanks Kathrin 🙂
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!
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.
Thanks so much. Really so helpful. Appreciate it. 🙂
Thanks Geoff
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!
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!
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 ?
Hi Luana,
I’m sorry to hear that. Could you raise a ticket in the support forum, so that our tech support can have a look?
Thank you Hanne. Great work and a gorgeous site. Thrive Themes is the best.
Thanks John
Love how simply you make this look. Now to see if I can do it! Very nice and helpful.
Hi Kelly,
I’m sure you’ll be able to do it too (although practice does help 😉 )
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.
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
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
Happy to hear that Andy!
I always wanted to make opt-in forms that are in between sections. I cant believe it was this easy.
You guys are great!
I’m glad you found out how to do this now, Arthur
Thanks Hanne! I love watching your tutorials! Tons of value 🙂
Thanks Chris, happy you find them useful 🙂
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
Hi Kamran,
No video backgrounds are not possible for the moment in Thrive Landing Pages (but will be included in TCB 2.0)
hi Hanne, its so great to see, how easy it tu use TT, love it!
Thank you for your inspirational tutorials.
Thanks Matthias
hmmmm…The import is not working with the content builder.
Hi Jerry,
Sorry to hear, can your reach out to our tech people on the support forum? I’m sure they’ll be able to help you out!
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.
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 🙂
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.
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.
Hi, I need more RED NUMBERS!!!!!
Where do i get those images?
🙂
Thanks
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!
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
I definitely test before filming (and have notes next to me) but overtime you also get used to “feel” how much padding you can add 🙂
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
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 🙂
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
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 🙂 )
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
Happy to hear that Clay!
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?
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.
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 🙂
Thanks Charmaine, I’m happy to hear this template will help you out!
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
Hi Sergio,
Did you follow the steps outlined? If that is not working, you can ask our support forum for help!
Yes, I will contact support.
thank you
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
Hi Leon,
From your comment it seems you’re trying to install this as a theme instead of importing it as a landing page.
Can you follow the exact instructions here: https://thrivethemes.com/tkb_item/importing-and-exporting-custom-landing-pages/
If it then doesn’t work you can ask our support forum to take a look!
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.
Hi John,
Sorry to hear. Video is hosted on Youtube so not sure why that happened for you.
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.
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.
Thanks Nicholas, I’m glad to hear these tutorials made you a Thrive ninja 🙂
Do you have a list of previous downloadable templates?
Hi Anders,
Most of our templates are simply available in the templates clouds and these extra templates can sometimes be found in the landing page from scratch series (if we did not copy an existing page). I think the only other download that’s available at the moment is this one for an upside down homepage. But when we make more of these templates available we’ll certainly think about a way to make them easily available!
Wow!! That was fast. And so simply. It’s like magic. I love this process of making the landing page. “
Hi Joseph, glad you like these series (and enjoy building your own 🙂 )
Thanks a lot Hanne. I learned a lot from here. You guys rocks!
Thanks Arnold
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,,,,
Great! Happy to hear that, Bruce 🙂
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 🙂
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 🙂
Ah so it is – silly me! Thanks Hanne – downloaded and will start using – ideal for using on local client sites 🙂
Great Video, this has giving me more Ideas, Thank you
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.
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.
Great job Hanne! All the best ideas are borrowed after all. As Steve Jobs once said: “If you take something and make it your own… it’s your design and that is the dividing line between copying and stealing”
True 🙂 Thanks Tom