Upside Down Homepage Step by Step + Free Template

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

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

  1. A full width background image with a big title, a subtitle and a 2-step opt-in button
  2. Authority proof images
  3. A title above a 3-column layout. In each column we find a title, an icon, text and a 2-step opt-in button
  4. An big title, an image of the author and the name, paragraphs of text and another 2-step opt-in button
  5. The navigation menu

2. Create Your Own Version

Upside-Down-Homepage-Thrive-Architect

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.

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

  • Sarah Arrow says:

    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 :)

    • Karsten K says:

      Hi Sarah, this sounds very interesting. I really like the concept doing things different!

    • Hanne says:

      Thanks for sharing Sarah and interesting you’ve had such a good results!

    • Trudy says:

      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!

  • Matthew Newnham says:

    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!

  • Nat Green says:

    great layout! Thanks for the tutorial :)

  • Andrew says:

    brilliant thank you … downloaded and going to try

  • Chris L says:

    Great tutorial! So quick & easy. :)

  • Diego A says:

    This is what I was looking for Hanne, thanks!

  • Stan Dubin says:

    this is an 11 on a scale of 1-10.

  • Karsten K says:

    Great Tutorial, Hanna, thank you very much. I would to see more of this in the future. Keep on the good work!

    • Hanne says:

      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!

  • Chik Q says:

    Great tutorial. Is there a way to split test two home pages? One with top menu and one without? Thanks!

    • Hanne says:

      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.

  • Absolutely brilliant effort Hanne.
    Is there no end to the talent and dedication of team Thrive?
    I’m mighty impressed with all your concepts.

  • Robby says:

    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?

  • Robert says:

    Simply Amazing!! Thank you so much for this! I look forward to implementing it.

  • Joan B says:

    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.

  • Phil says:

    Nice post. I didn’t know import of pages was possible.

    Are there others we can import from your site?

  • Octavio says:

    Very nice video, thrive content builder is the very best investment I’ve ever made.
    Thanks
    Octavio

  • Love the simple easy to use features of the thrive content builder.

  • Quentin P says:

    You’re a real asset to Thrive Hanne – and this tutorial is excellent. Thank you.

  • Michael K says:

    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!

  • James says:

    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.

    • Hanne says:

      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!

    • Hanne says:

      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!

  • Joel says:

    Very informative! I love all that you’re doing.

  • Samuel P says:

    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?

  • Marc-Eric P says:

    Hi Hanne,
    You don’t use Heading for headers, but Paragraph style.
    What’s the reason ?

    • Hanne says:

      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!

  • Carsten L says:

    “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, thanks for the landing page, it is really attractive so I will think about using it.

    Doing some tests, I have realize there is something weird with it.

    If I download it, I imported into my new page and I save it, when I see the source code it generates it has like 10 “” tags.

    I don’t think that is good.

    One of them says the following “25 Free Design Resources Guide” .

    I’m not sure how we can get rid of this, but I don’t think is a good idea to have 10 “” tags into our home page.

    I hope there is some way to fix this because I’m not being able to do it at this point.

    Regards.

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

  • Richard P says:

    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.

  • Rita says:

    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.

    • Hanne says:

      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.

  • Mark says:

    Thanks Hanne. Love the concept! thrive family is simply the best

  • 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

  • David H says:

    Excellent tutorial Hanne!
    And a great homepage design for me to try out later this year!!

  • George says:

    Excellent! Thanks!

  • John says:

    Excellent Hanna. You teach so well.

  • Y J Shah says:

    great idea on this upside down home page :)

  • Hamim says:

    Looking awesome…
    Going to use it on my blog very soon…

  • adrian says:

    Hi, Hanne! You are so generous with all this stuff!
    God bless you for all this gifts!
    Thank you!

  • surfer30 says:

    Hi Hanne
    Thank you so much for sharing this video. it helps us a lot for this.

  • Adam B says:

    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.

    • Hanne says:

      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 :)

  • Celeste says:

    As always, wonderful tutorial and at the leading edge. Thank you, Hanne. Am setting up a mindfulness site and this will be very useful.

  • These types of posts, especially with the resources included, are fantastic! Thank you!

  • Michael G says:

    Thank you so much! How did you get the background image dark like that?

  • Ron says:

    Great tutorial! How do you get the “animated striped box” on the two step opt-in pop up window?

    • Hanne says:

      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.

  • Lynn D says:

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

  • Gillian Urquhart says:

    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?

  • Alfred H says:

    Absolutely brilliant. Well done Hanne, well done!

  • Stephen mcGouran says:

    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!

  • Jennifer K says:

    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!

  • jan t says:

    Hello Hanne,

    What size of the background are you using? Mine, my head was cut

    • Hanne says:

      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.

  • MamaRed says:

    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

  • Vlad S says:

    Thank you for an excellent demonstration! Very helpful and educational!

  • Coen says:

    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.

    • Hanne says:

      Hi Coen,

      This is actually a homepage, so in this case no. This will stay the homepage on the website.

  • George says:

    Very nice!
    Facebook and Adwords approve this type of page?

    • Hanne says:

      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

      • Jacob Andra says:

        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.

      • Hanne says:

        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.

  • Jacob Andra says:

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

  • Wayne Stiles says:

    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.

  • Kerry C says:

    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

    • Hanne says:

      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!

  • Sean D says:

    Nice, I’ll give this a try for sure. Thank you!

  • Kevin C says:

    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!

  • David P says:

    Excellent training. Thank you

  • Raghav says:

    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!

    • Shane Melaugh says:

      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.

  • Dibakar Bala says:

    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

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

  • Jane R says:

    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?

    • Jane R says:

      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.

  • Robert Reece says:

    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?

  • reeromarketing says:

    With the new Thrive Architect this looks to be quite different. Can you do another video with the new way of building it please?

  • Mark K says:

    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?

    • Hanne says:

      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?

  • Corbett M says:

    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?

  • >