Upside Down Homepage Step by Step + Free Template

Author
Hanne   144

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.

by Hanne  April 22, 2016

144

Enjoyed this article ?

You might also like:

Leave a Comment

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

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

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

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

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

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

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

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

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

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

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

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