People often ask us to create a template for this or that type of landing page they found online, and while we're always adding new landing page templates you don't have to wait for us to create them!
Thrive Architect allows you to create any landing page you like from scratch. The "Landing Page From Scratch" video series are here to show you exactly how to get the most out of your plugin.
In this video you're going to discover how to create an Upside Down Homepage.
More...
Bryan Harris from Videofruit has been talking a lot about the impact changing the design of his homepage to the Upside Down Homepage had on his list building. ​
You'll soon discover, the Upside Down Homepage is a lead generation page in disguise with no less than five 2-step opt-in buttons.
As Shane explained in his video How to Build the Perfect, Conversion Focused Homepage turning your homepage into a lead generation page will help get more subscribers so if the goal of your homepage is to turn your visitors into subscribers, you might want to test the Upside Down Homepage​.
1. Discover the Building Blocks
The Building Blocks of an Upside Down Homepage
When you want to replicate a landing page such as this Upside Down Homepage, you should look at the page and find the building blocks.
Ignore everything that is design and text and purely look at the formatting and layout of the elements on the page.
The Upside Down homepage has 5 different sections with specific elements.​
- A full width background image with a big title, a subtitle and a 2-step opt-in button
- Authority proof images
- A title above a 3-column layout. In each column we find a title, an icon, text and a 2-step opt-in button
- An big title, an image of the author and the name, paragraphs of text and another 2-step opt-in button
- The navigation menu
2. Create Your Own Version
Upside Down Homepage Thrive Template
Now that we've identified the building blocks, we can create our own version with Thrive Architect.
In the video you see me build the entire page, step by step.
You'll discover how to
- ​Transform a blank page into a full width landing page without top menu no matter what theme you are using (1 min 47 sec)
- Add a 2-step opt-in form button to create list building opportunities without cluttering your homepage with opt-in forms (4 min 30 sec)
- Create a 3 column layout in just a few seconds (9 min 58 sec)
- Limit the width of the content even on a full width page (13 min 50 sec)
- Transform any image into a round image, no need to Photoshop your images up front. (15 min)
- Add a custom menu anywhere on your page.
3. Use this Homepage Template (Coming Soon)
I hope you liked this tutorial, but you do not HAVE to build this page from scratch. You can simply download the template from the templates cloud in Thrive Architect.
How to load this template:
- Create a new page
- Save the page as a draft and edit the page with Thrive Archictect
- Go to "Page Setup" and "Choose a landing page template"
- Instead of picking the blank landing page, go to the set that's called "Bonus"
- Select the Upside Down Homepage
- This will load the Homepage AND the Thrive Lightboxes to your site!
To set this landing page as your homepage, follow these instructions.
Download Your Free Icon Illustrations
In the video, I'm referring to a free pack of icon illustrations. You download all of them for free here.
I hope you like these "Landing Pages From Scratch" video series (and the free template)! If you have any comments, questions or suggestions about landing pages you would like to see me create, you can leave them below.
Good evening Hanne, I changed my home page to something “similar” to the upside down concept. I have my home page where the navigation is at the bottom of the page. Since I changed it, my home page traffic has doubled and sales enquiries have gone through the roof. There’s a lot to be gained from doing things differently 🙂
Hi Sarah, this sounds very interesting. I really like the concept doing things different!
Thanks for sharing Sarah and interesting you’ve had such a good results!
Thx for sharing this Sarah. I’ve been playing around with the idea of updating my homepage for a while and I’ve finally been convinced to give it a try!
This is another fantastic post, Hanne – thanks very much. And what a great bonus to give us a landing page to import, so we can accelerate the process – thank you!
Thank you Matthew, happy I could make things faster for you!
great layout! Thanks for the tutorial 🙂
You’re welcome Nat
brilliant thank you … downloaded and going to try
Hi Andrew, let me know how it goes!
Great tutorial! So quick & easy. 🙂
Thanks Chris
This is what I was looking for Hanne, thanks!
Glad to hear Diego!
this is an 11 on a scale of 1-10.
Wow thanks Stan 😀
Great Tutorial, Hanna, thank you very much. I would to see more of this in the future. Keep on the good work!
Hi Karsten, thanks for the comment and if you have suggestions for landing pages don’t hesitate to send us a link 🙂 I’ll keep them coming!
Great tutorial. Is there a way to split test two home pages? One with top menu and one without? Thanks!
Hi Chik, for the moment that function is not build in (yet) but Shane explained in a post here how you can do it for free with Google Analytics.
As always, your content is simply superb. If one doesn’t learn from Thrivethemes.com, then most likely one will simply not learn from anyone else.
Thank you very much Luis Carlos!
Absolutely brilliant effort Hanne.
Is there no end to the talent and dedication of team Thrive?
I’m mighty impressed with all your concepts.
Happy you liked it David 🙂
Great tutorial. I used Thrive to create my upside-down landing page last fall. It’s worked great for conversion.
My question…Is there a way to use this landing page as a welcome gate so return readers are taken straight to the blog instead of seeing this page again?
Hey Robert, if you use Thrive Leads than you can use a screen filler lightbox to make this type of “landing page” and show it only to first time visitors.
Simply Amazing!! Thank you so much for this! I look forward to implementing it.
Thank you Robert!
I did this a couple of months ago. What I love most though is having the content easily available via content templates. Thrive really thinks of everything.
Joan, content templates can really speed up the process 🙂 Happy you like them.
Nice post. I didn’t know import of pages was possible.
Are there others we can import from your site?
Hi Philip, for the moment not yet, but you’ll see more of them in the future and of course we regularly add complete new landing page set in the template cloud
Very nice video, thrive content builder is the very best investment I’ve ever made.
Thanks
Octavio
That’s very nice to hear Octavio!
Love the simple easy to use features of the thrive content builder.
Thank you Steve, happy you like it
You’re a real asset to Thrive Hanne – and this tutorial is excellent. Thank you.
Thanks Quentin 🙂
Hanne, what an excellent tutorial! It couldn’t have come at a more perfect time for me. I’ve been struggling to create just such a homepage for my personal site. Thank you so much!
I’m happy it came at a good time for you Michael 🙂
Thank you so much Hanne! You all rock at Thrive Themes.
Curious, I’m using instructions to upload template, but get this error “This archive does not seem to be generated from Thrive Visual Editor – could not decode the configuration”.
Thank you for all you do.
Hi James, I double checked the file and for me everything is working. Could it be that you do not use the last updated version of TCB?
If the problem persists, you can ask in our support forum for help!
Hanne…simply brilliant. I’m a recent student of Bryan’s and I can attest to the quality of his work. His list building focus and lessons are literally second to none. The fact that you just made my life easier…much respect!
I’m guessing your apprenticeship is over, judging by the quality of posts you put out…as they say “all killer, no filler!” Thanks Hanne!
Hi Paul, love that “all killer, no filler”! Yes apprenticeship is over 🙂 and I would be honored if you could share this post with the other students of Bryan!
I already did 🙂
Very informative! I love all that you’re doing.
Thanks Joel
This is a great post, and something I’ve been wanting to implement. Currently, I’m using a modified version of Rise’s homepage, but I’m going to give this a try, too.
I’ve got a question: is it possible to set this up like a ‘welcome gate’, so people only see this page until they actually sign up?
Hi Samuel, if you use Thrive Leads than you can use a screen filler lightbox to make this type of “landing page” and show it as a welcome gate.
Hi Hanne,
You don’t use Heading for headers, but Paragraph style.
What’s the reason ?
Hi Marc-Eric,
The only reason is that this is a demo website and the CSS for the headings was not the style I wanted on the landing page 🙂
But you should use headings for SEO purpose!
“This archive does not seem to be generated from Thrive Visual Editor – unable to find the config file” – is there another way to import the page template?
Hi Carsten, I tested the file again and it’s working here. Do you have the latest version of TCB installed? If the problem persists you can ask our support forum to help you out
Ok, you can forget my previous comment.
The “” tags were from the different pop-ups showing up when clicking up the different buttons.
I have removed the event and it’s all perfect.
Thanks a lot for sharing the template with us 😉
Thank you Hanne, perfect timing with this topic. I’ve just wondering to do a little adjustments on my homepage and your screencast has motivate me to do an upside down homepage. Thanks!
I’ve written only one e-book, but I must consider to write different ones to generate more subscribers. This I learned from the your example.
Hi Richard, happy to hear this tutorial inspired you! Having multiple opt-in offers will help you get more subscribers. If you need some help with this, you can find here our “How to create an opt-in offer in 6 simple steps” guide
Hi Hanne, thank you for the tutorial. Loved it and the way you explained things.
Question, are there special ways to optimise the header and social proof area for mobile viewing.
While mine look great on computer they don’t look so great at all on mobile.
Maybe it’s the way I put it together.
Hi Rita, thanks. I’m not sure what you could do (depends on what you did already) but you can take a look at this video. Shane explains 4 simple steps how to make your content fully mobile optimized.
Thanks Hanne. Love the concept! thrive family is simply the best
Thanks Mark!
Hi,
Can we import and edit any html templates from thrive content builder. Lead pages gives a lot of free html templates so can we edit that templates ? thanks
Hi Amey, sorry the templates are only available to use in Thrive Content Builder.
Excellent tutorial Hanne!
And a great homepage design for me to try out later this year!!
Thanks David!
Excellent! Thanks!
My pleasure, George 🙂
Excellent Hanna. You teach so well.
Thanks John!
great idea on this upside down home page 🙂
Yes indeed, I can not take credit for that though 😉
Looking awesome…
Going to use it on my blog very soon…
Happy to hear that Hamim!
Hi, Hanne! You are so generous with all this stuff!
God bless you for all this gifts!
Thank you!
You’re welcome Adrian 🙂
Hi Hanne
Thank you so much for sharing this video. it helps us a lot for this.
Happy you like it!
Amazing job! I love these series. please keep them coming. I would love to see how to implement a one page layout where all links attached to a specific section on the page, for instance: if you click on “Services” it should redirect you to the section on the page with the services details, same thing goes for “Contact Us” link or any other link.
Hi Adam, Ok I will keep in mind. For now, just to help you out quickly:
1. Click on the section you want to link to to open the section menu
2. Add a name in the field “custom ID” (eg. services)
3. Select the text you want to link to the service section
4. To link to the section, put in the link field: #nameofthecustomid in this case #section
This will make a link to jump on the page to the section you want.
Hope this helps 🙂
As always, wonderful tutorial and at the leading edge. Thank you, Hanne. Am setting up a mindfulness site and this will be very useful.
Hi Celeste, thank you very much for your comment and good luck with the creation of the website!
These types of posts, especially with the resources included, are fantastic! Thank you!
Thank you Gareth! Happy you like it!
Thank you so much! How did you get the background image dark like that?
Hi Michael, to change the image, I used a dark overlay. If you need some guidance, in this video, I show you how to do it in Picmonkey.
Great tutorial! How do you get the “animated striped box” on the two step opt-in pop up window?
Hi Ron, we do not have an animated striped box option, but you can add a dynamic progress bar. Take a look at this post were I show you 5 ways to add animations to your opt-in forms.
This email arrived at the right time – I am just beginning to re-do my home page – YEA! What neat ideas you all have….Thank you!!
Hi Lynn, good luck with the redoing of your homepage!
Hi Hanna, Great video guide.
I’ve attempted to download the zip file and upload to my site but am getting the error message
“Sorry, this file type is not permitted for security reasons.”
Any ideas what I may be doing wrong?
Hi Gullian, first thing I can think of is a security plugin on your website? Or maybe from your hosting? You can ask our support forum , they might know 🙂
Absolutely brilliant. Well done Hanne, well done!
Thanks Alfred 🙂
Great video Hanne and I look forward to getting the most out of all of Thrives material to improve the layout of my site!
Looking forward to the next one and thanks!
Thanks Stephen!
Wow! This was awesome. I played a portion of your video and then I went and made those changes to my own upside down home page. And then did it again. I can’t wait to see the results. Thanks for make this super easy Hanne!
Hey Jennifer, I love how you directly implemented what I showed! Happy it worked 🙂
Hello Hanne,
What size of the background are you using? Mine, my head was cut
Hey Jan, I’m using 1920*1080 img but depending on how much text you put on it, more or less of the picture will show.
OMG, this is so fantasmagorical Hanne! I have a new client who isn’t aware of the new styles of home pages (and other pages) that are conversion focused instead of the traditional home page model. Whether I create it for him or he uses your tutorial. This is grand stuff and I look forward to seeing more of these tutorials. One of the reasons I adore and recommend TT is this…not just “here is a feature, have fun” rather it’s “here is what we’ve added/implemented, here is how to use it and here is WHY.” Have a grand one. MamaRed
Thanks MamaRed, happy you like these tutorials 🙂
Thank you for an excellent demonstration! Very helpful and educational!
You’re welcome Vlad
Will there also be a cookie feature, so that the landing page will no longer be shown once the visitor opted-in? Instead the blog (or whatever) shall be shown.
Hi Coen,
This is actually a homepage, so in this case no. This will stay the homepage on the website.
Very nice!
Facebook and Adwords approve this type of page?
Hi George,
Facebook for sure no problem, adwords will probably ask for more information (disclaimer link, privacy link etc.) although this is more “homepage” than lead generation page so might be Ok. Your should read and follow these instructions
Hanne, to extend George’s question, do you know if Google penalizes this landing page or if it the page performs well for Google’s criteria? Google’s own instructions leave a lot of unanswered questions about this specific application.
Hi Jacob,
As for my understanding (but like you say, they are not very specific about this). There is no problem for ranking as long as you have enough text on the page. This would be mainly in the 4th part of the homepage.
If you want to do PPC you have to make sure that you do not make any bold claims, that you have privacy links, about link, disclaimer and a logo that is also a link.
Hanne…this all looks terrific and I really want to try the sample landing page. I downloaded it, uploaded it to my themes directory, then went to activate it in WordPress. I got the following message —any idea what I’m doing wrong?
“Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.”
Hi Jacob,
This is a landing page template, not a theme. So you have to import it into Thrive Landing pages. You can find all the instructions here: https://thrivethemes.com/import-export-landing-pages/
So would I need a paid Thrive account?
You need our plugin Thrive Landing Pages yes
Thanks for this, Hanne. Can the upside-down home page only be used with Thrive? Not sure how to install it otherwise. Thanks for any help you can offer. I appreciate it.
Hi Wayne,
Yes the template can only be used with Thrive Landing Pages (but of course the concept of the page can be replicated otherwise, for example by your designer or developer)
Hi Hanne, thank you for a great article and in-depth tutoring on how to create the landing page using the template. I have tried downloading the template and because I have Content Builder, I have tried to import the landing page so I can recreate this for my own website – but each time I do this, I get an error message that I should try to import the landing page zip folder again later. Do you have any ideas why this could be?- thanks, Kerry
Hi Kerry,
This might be because you do not have the last version of TCB installed. If you have an updated version and the problem persists, please ask our support forum to help you out!
Nice, I’ll give this a try for sure. Thank you!
Cool Sean, let us know how it goes!
Hanne – Thanks for such a detailed, from-scratch tutorial! I love the idea of being able to do this from scratch (and it shows how awesome the Thrive CB really is). At the same time, thanks for giving us the template to make it even easier to implement – I’ll be trying this for my new home page. Please keep making from-scratch tutorials using Thrive tools. Could you do a course-and-lessons (video lessons) layout page (complete with course navigation to go to any other lessons of the course)? Again, thanks for this helpful tutorial!
Hi Kevin,
I think I have just the thing for you! Check out: Create a Complete Online Course Funnel in Minutes with This Landing Page Set
Excellent training. Thank you
Hi Hanne
I am trying to create an upside down landing page. I notice that any control I put inside my page section has a max width of 863 px. How can I increase that?
I am using the Pressive theme
Thanks!
Hello Raghav,
That would be the width of your content area. Thrive Content Builder works within the content area as defined by your theme and you can’t make stuff go wider than that. The exception is when you are on a full-width page with no side borders and you insert a Page Section element. This element will span the entire screen width.
Thank You so much for the free landing page template. I was almost about to start doing it myself from the scratch when I found this one thankfully
It does save a lot of time 😉
I love this upside-down concept, Hanne, but would it work for traditional B2B businesses like logistic companies? I can imagine their visitors would be confused if they didn’t see a menu at the top of the page.
It would depend on the goal of the page and how clear the call to action is on that page. If people would usually click the “contact” link to find the contact information, but now you put the info right on top of the page I believe it would be a big improvement.
Hi Hanne,
thanks for another great training! I am having trouble with the image though – I’ve set it at 1920*1080 png file as per your video but it’s all blurred on the page – is there a step that I’m missing?
I found the answer! It’s in the image settings, I needed to set it to display it at full size (it was set at small by default). Thanks again, I’m loving these videos.
Happy you figured it out Jane 🙂 Yes the “full height image” is the solution
Make sure that in the WP settings, the image is not loaded as medium or small. When you’re in your wp media library (the moment you upload or select the image) you can see a dropdown on the right side. This should say “full width”.
Hey guys. I am so glad I found this page. It is super helpful. However I am running into a problem. My url “xyz.com” (didnt want to spam the site) won’t let me edit the home page to make something like this. Its not “live” yet but I would like for them to still be able to get to my content once I start publishing. Any idea where my problem is?
Hello Robert,
Check out this article about how to make a homepage that is separate from your blog page. I believe that could answer your question.
I am requesting the same thing!!!
Updated video is now available 🙂 Hope you enjoy it.
The template will be available shortly in the templates cloud
I am unable to open the zipped files in thrive architect. I get the following message – “This archive does not seem to be generated from Thrive Architect – unable to find the config file”. Can you help?
Hi Mark,
New template is on it’s way. It will be available in the cloud (no need to download and upload zip files 🙂 )
If this is upside down, what would make it right way up?
The menu on top instead of on the bottom…
Has anyone figured out how to set up the footer menu to expand upward (for nested submenu items) on the upside-down homepage rather than the default which is downward?
I don’t see the button for “Apply to all headings” inside Landing Page Settings.
(screenshots)
https://imgur.com/prsvXy4
https://imgur.com/LmVqWj6
In your screenshot you can see the “headings” in the top menu (before heading 1) if you select that, it will apply to all headings.
Over the past few weeks upside down homepages seem to be all the rage. Looks pretty easy and pretty to do in Thrive!
Thanks Michael