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

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

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

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

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

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

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

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

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

    • 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 πŸ™‚ )

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

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

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}