Layered Effects & Other Landing Page Tricks – Brought to You by Facebook

Shane Melaugh   121

We're continuing our "landing page from scratch" series due to (very) popular demand. This time around, we're looking at a landing page example from none other than Facebook - proving that even the Internet's giants need good landing pages.

Check out the video to see what tricks related to typography, "layered" effects and spacing you discover along the way.​


Links & Resources

Here are some things to help you get the most out of today's tutorial:

Finding Colors, Dimensions & More

Throughout the video, you'll see me using the "inspect" mode in the browser to find colors, fonts and some other information about the page I'm replicating. To see how that works in some more detail, go here.​

Finding the Right Fonts​

The site I use to filter through all the available font options is Google Fonts. Any font you find on Google Fonts is available to use in Thrive Themes products and can be used for free, for personal as well as commercial projects. This makes it very useful, as you don't have to worry about expensive font licenses, technical implementation and so on.

Quickly Adjust Margins & Padding

In ​the video, you can see that I clear margin and padding values very quickly. If you're wondering how that's done, the answer is very simple: it's by using the Tab key on the keyboard.

Whenever you are in an input field, you can hit Tab to instantly jump to the next input field and pre-select the content inside it. For the example in the video, I just hit the Tab and 0 keys to clear the margin and padding fields.​

More Design Tips

If you enjoyed the design tips in this video, here's a post for you: 5 Rules for Using Design as a Competitive Advantage

The landing page we used as inspiration for this video is this one.​

Over to You

​On the last landing page from scratch tutorial, there was an amazing amount of feedback and based on that, I want to keep making tutorials like this. I also want to make sure these tutorials remain as useful as possible for you, so I'd love to know from you: what was the most interesting part in this video, for you? What was the most boring part?

In other words: what do you want more of and what do you want less of? ​

Let me know by leaving a comment below!​


by Shane Melaugh  August 22, 2016


Enjoyed this article ?

You might also like:

Leave a Comment

  • This was awesome 🙂 More of this!

    I would like to more of how to replicate different cool websites and specific pages like creative contact pages, home pages, navigation bars etc since I’m “design challenged” 🙂

      • Shane, I really appreciate youtube videos, as Youtube allows playback speed adjustment. I find that I can comfortably watch most any video at 1.5x normal speed, thereby increasing productivity. Er, uh, actuality, it just allows me to watch a lot more videos than I should 🙁

        Speaking of videos, maybe one day, you could release a video showing how you actually MAKE such awesomely edited videos. It would be VERY helpful.

        As always, thanks again for your demonstrated commitment to over-deliver to your audience!

      • Thanks, Keith!

        I would love to create a course about video creation and video marketing. I had one a while ago and I think I could create something much better now. It’s just a matter of getting enough “free” time to do it. It’s on my wish-list, though. 🙂

  • Nicely done.

    I admit to having reservations about the fast forward sections.

    May I make a suggestion?

    Shoot the entire video, then if you want to fast forward a section, do so but place a copy of that section in a second video that we can watch in real time IF WE CHOOSE TO DO SO.

    This way, those of us who want that extra bit of help do not feel denied. You can even include the voice over commenting of these edits (and just replace that voice-over with your music when you fast forward it).

    Okay, suggestion-mode off.

    • Thank you for the feedback, Trevor! I see your point about the fast forwards. I try to keep them to bits where I’m just doing busywork like resizing fonts or margins. But I understand that some viewers maybe want to see every detail, even if it’s a repetition of something.

  • Good one. I didn’t know about the Google Fonts thing. That will come in handy. I notice the original has a button that is “dynamically populated” with “Continue as Shane…” I , literally, don’t know what to think about that. I don’t know if I would ever want or need something like that. Is it possible for “us” to do that? I like the design tips/tricks. Everything help. Thanks.

    • Thanks, Jeff!

      The button text is a very Facebook specific thing. They check your login status and add your name to the button if you’re logged in.

      Technically, such a thing is not very difficult to do. For example, “users” are a default WordPress feature and you could easily get the names or usernames of logged in visitors to your site and display them in various ways. However, doing this is rarely very useful, I think.

      From the perspective of our business, this is something we could build, but it’s a low priority compared to other stuff we’re working on.

      • Thanks Shane, for the response. That is kinda what I thought, but was not sure. Keep up the good work!

  • When your vids arrive, I drop everything. Thank you for the care you take. Today I learnt about the menu at top right.

      • Celeste said exactly what I was thinking. One of the few “drop everything” email lists I love being on. I wish you guys had extra helpers to build out all the fantastic features on the wishlists MUCH faster….I find myself hoping that you guys keep rolling out new features more often! Hope to shake your hand one day… guys flippin ROCK!

        I was very disappointed that I missed out on the last “complete package” special you guys ran for new members just because I had already purchased two products in the past. 🙁

        Keep them coming Shane.

      • Thank you very much, Andre. I really appreciate the positive feedback!

        I wish we could get through our feature list faster as well. Don’t get me wrong: our dev team is doing an amazing job keeping up with all the product updates, features and so on. It’s just that there are so many things we want to build.

        We’re continually growing the team as well.

  • Wow, I really liked this tutorial! 🙂

    Well, Shane, today I want to bring you an important notice/suggestion which can help us [TCB users] a lot! So please have a read about what I’m writing below!

    We all are Tired Of Clicking “Save Changes” For Every 10 Mins while writing big posts! what if suddenly our system crashes? or net gets disconnected for a long time? or suddenly our browser crashes? or accidentally if we close the browser window?

    Like a fool we are loosing all our written content so far! This happened to me, other bloggers many times! So painful you know!

    So please add the feature “auto-save” for whatever we write in TCB editor! Please, I’m begging you!

    In my view, it shouldn’t even be a feature but a standard option! If someone don’t want auto-save, then they could always make it an optional setting to turn off/on as per their wish, so think about in this way, Shane!

    ______________ Hope, you’ll note my suggestion! 🙂


    • Thank you for your comment, Avinash!

      I totally agree with you about auto-save. As you can imagine, the only reason that’s not already happening is because of technical constraints. I really don’t know if we can solve this in the WordPress environment, but I can tell you that if we can create a good auto-save feature that runs in the background without causing trouble while you’re working on your content, we will certainly add it to TCB.

      • Ya, thanks a lot Shane for responding to my suggestions!

        Well, if this “auto-save” happens in TCB, then damn, you can’t even imagine how many new sales your company gets for TCB plugin! 😀

  • Awesome video Shane! (In fact, everything you guys release is fantastic)

    Possible to make (or replicate) a few pages that are ‘not’ included in Thrive Landing Pages but yet can still be created with TLP such as… membership site pages, OTO pages.

    Also, ‘more’ design tips I would love to see as Thrive Landing Page builder is a beautiful thing but ‘design tips’ (as most of us are not designers) would really be super helpful! 🙂

    Possible to consult with your designers who designed your page templates and have them hand out some really useful tips perhaps or even guest-appear in a video? lol 🙂

    • Thank you for the feedback, Jeff!

      Our designers are definitely featured in some of our tutorials, albeit not directly on camera. 🙂

  • Great video Shane! I always enjoy watching you work, you give me hope. I only wish it was as easy for me. Hopefully with time and practice, one day it will be. Keep making the videos, I learn a lot from watching them and I make sure to catch everyone. Thanks for all your hard work and keep it up please 🙂 Take care

    • Thank you, Johnny!

      We’ll keep doing our part and I hope that our tools can meet you in the middle by getting better and easier to use as you gain more experience with them as well.

  • Yes. I love this.

    *Your thought process, decisions, insight, etc.
    *Clear demonstration that I could easily comprehend and duplicate.
    *How to duplicate the interesting “new stuff/techniques” that crop up.

    Least Favorite:
    *Don’t have any, yet.

    My passion is not web development/automation/etc. However, I have a strong interest in theses topics because they are critical to creating the bigger picture that I am passionate about.

    I love what Thrive Themes is doing and how they’re doing it.

    • Thank you for your reply, Mike!

      I’m very happy to know that our tutorials and products are helping you towards your greater goal. 🙂

  • Thank you for this tutorial. Your videos are so awesome. I love Thrive Themes. Thanks again for doing so much to support your product.

    • Hello Josh,

      I gotta say, that’s a pretty easy landing page to recreate in Thrive Landing Pages. The only things that jumped out at me were the “sticky” logo in the top right and the list with the images as bullet points. The first we can’t do in TLP yet, the second you could do using columns and images.

      • Could you do that logo by adding it to a background image and then saving the whole thing as an image? Or am I misunderstanding the issue?

      • Hello Jamaica,

        The issue is that the header on the Messenger landing page remains “sticky” at the top of the browser window when you scroll down the page. That’s something you can do with the headers in our themes, but in Thrive Landing Pages, we don’t have such an option yet.

  • Great Job Shane. Quick ind formative. Including obvious tips (to some of us who have been hacking around for awhile), is of extreme benefit to newer users.

  • More great content Shane.Really helpful. Have been using thrive content builder etc for quite some time, but its always good to get that bit of extra enthusiasm going again and you and the team always provide that. Keep up the good work Shane

  • Awesome tutorial Shane! And great idea to use a FB landing page as an example. I got loads of ideas for my own landing pages.

    Quick question, is this landing page mobile responsive?


    • Hello Steven,

      Yes, the landing page built with Thrive Landing Pages is mobile responsive by default. No extra editing needed.

      Although I should also mention that we’re working on a “responsive content” feature which will allow you to make some edits that are mobile-specific and give you more control over the responsiveness.

  • Loved this thanks Shane!
    Lots of little tips that will be useful using my Thrive account. The only thing I am never 100% sure on, is which landing page designs best suit my industry (fitness). I try to model other fit-preneurs pages and that seems to give me an okay lead conversion rate. But would be nice to see examples of ‘niche’ industries replica pages in the future. If you started with fitness, that would be awesome 😉

    • Hi Nick,

      I like your suggestion, yes. I will have a chat with our designers to see what we can do in terms of providing more niche-specific templates.

  • LOVED the video – thanks!! definitely learned some good shortcuts – and about some features i’ve never used (custom menu widget!) I often feel Im just not taking advantage of all Thrive has to offer (though I love what I do use) Here’s one of my fav landing pages

    • Thank you, Dana!

      That’s a very nice looking landing page! From looking at it, I can say that something very similar can be built in TCB. There are just a few details that would need to be “hacked” to get just right. Hopefully, we can address such details in a future update, to make it even easier.

  • Hi Shane – another great demo of TCB’s capabilities delivered in your inimitable style.

    A couple of suggestions which may help people and a comment re the request from another reader about the fast forwarding you did.

    For many, using the Chrome inspector to check the source code for colour and font details as you showed may be daunting. A far easier way is to install these Chrome browser extensions:

    WhatFont – this identifies all fonts used on a page. It shows font famili, size, line height and colour. Really useful.

    ColorZilla – has a colour picker that allows you to mouse over any element on a page and the hex and rgb colour codes which it copies to the clipboard. Again, really useful.

    Not sure if the above are available for FireFox.

    Re the fast forwarding. Given that you’re now using YouTube rather than Wisteria for videos viewers can themselves speed through bits of the video. if desired. They just need to click the Gear settings icon on the bottom right of the video and can speed up or slow down the video as they wish. So you could record the whole video and for parts people may want to skip through or watch quickly you might say if they don’t want to watch this they can fast forward or skip through to a particular time point further on the video, such as 5:36.

    Hope that helps.

    Cheers, Mark

    • Thanks for your comment, Mark! I will have to check out those Chrome extensions.

      Interesting point about the fast forwarding, also. Since there seems to be demand for it, I might make a longer, less edited video like this as well, in the future.

  • Wow, that was a great video. I’ve been trying to figure out how to make the different colored sections…and now I know! Really great tips on using Google fonts and how to use padding/margins. Great job!

  • Great video Shane,
    I’ve come to appreciate that when you buy Thrive Themes, you’re getting access to an success eco-system which is just as important as the theme itself.
    I’d like to see a video in strategies for a multi-location business. I realise that this would not be a common request, and so it would be GREAT if there was a THRIVE Themes consultant I could pay. On Upwork they all say they can do everything.
    I’d like to see a video on setting up a blog within a website, with comments, like this one. Was it built in Thrive Themes?
    Your Member Dashboard video does not show or explain what is Thrive Ultimatum, Thrive Headline Optimizer, Thrive Clever Widgets or Thrive Leads, or where to find out what they actually do. Are there videos on them somewhere?
    In regards to landing pages, it would be great to see demos of two-step or three-step landing pages, and specifically how to get CRM merge fields eg: “Welcome Shane” to flow into the second page.
    Sorry for the long list.

    • Hi Jamie,

      Blog in a website: look out for our upcoming “how to build a website from scratch” video, which will cover this, among other things.

      We’re working on more tutorials for all our products, including Thrive Ultimatum, Thrive Headline Optimizer and others. This is something we’ve been a bit behind on, but we’ve hired some help to catch up. 🙂

      You can find the current Thrive Ultimatum tutorials here. And here are the ones for Thrive Headline Optimizer.

      As for your other suggestions: I’ll have to see what we can do.

  • Two more comments.
    We’ve migrated to Thrive Themes from other themes and have brought all our plugins with it. It would be great to have a section “plugins we recommend”. It would be a tragedy to keep or pay for a plugins that make things slower or create bugs.
    I often assess our sites for load speed using GTMetrix and get poor results but don’t have a clue how to fix our speed issues. I wish there was someone I could pay to help.
    You could publish details on recommended hosts or at least what to look for in choosing a host.
    That was 3!

    • Hi Jamie,

      We’ve got an extensive page about hosting here. I hope that helps.

      For recommended plugins, we’ve got a tutorial in editing right now which covers that to some extent as well. I hope those will be helpful resources for you.

      • Shane, sorry to interrupt in the conversation but I too would appreciate a post on plugins.
        I am seeing a clash of the Q2W3 plugin with rise theme and the support (at Thrive Themes) have acknowledged that there is a problem that conflicts with the plugin.

        Now Q2w3 plugin is very essential when it comes it having a sticky widget on the sidebar. I would appreciate a fix or an alternative recommendation from your end.

        Thank you

  • Outstanding! I can definitely see how this could help me make some great looking landing pages. How often do I see a landing page and think, “That’s so cool! I wish I could do that?” Now maybe I can.

    “True genius is knowing who to steal from.” Bob Dylan

    • That’s exactly how it goes, yeah. I mean, that’s why there are such things as web design trends. People see stuff they like and build something similar, maybe with a twist of their own. 🙂

  • I really love these demos. I am finding them easier and easier to follow as I become more involved using Thrive Landing Pages each day. Thanks so much!

  • Hi Shane,
    Ah this is just amazing. Week after week we not only learn to get those professionally designed pages on our own but also learn clever tricks like this white spacing here in Facebook’s landing page!

    I was wondering if you could analyze and help create landing pages like or’s homepages.

    These are two most popular homepages seen by 100s of 1000s of bloggers/marketers on a monthly basis and problogger has clever things added to it like it displays how many new posts are there since you last visited the blog (even if you have not subscribed) and many personalized elements to its landing page.

    Thank you so much,

    • Thanks for the suggested pages, Mahesh! Those are some interesting looking landing pages and I’ll see if we can create videos based on them as well.

      • Thant would be a great help Shane. I know you are so so busy but this can be a real great help 🙂

  • Thanks Shane, Another brilliant video. I am new to Thrive and I would like to expand my knowledge and skills by copying a few websites in the way you have done here and your other recent video. Could you go into a bit more detail about how you save the images from the pages you replicated please? Stan

    • Hi Stan,

      You can use the same “inspect element” trick. You can inspect the image and you’ll see an image link in the console, which you can open in a new tab. From there, the image can be downloaded.

    • Thanks for the suggestion, Jamie! I’ll definitely do this when we release the first “2.0” Thrive Theme.

  • Awesome video, first time user so this really gave me enough to look at before taking on the platform. Lets see some more?

  • Hi Shane,

    Thanks for the great tutorial! However no matter how good the landing page may be on Desktop, but usually landing pages created by Thrive Landing Page on mobile doesn’t look as good as on desktop due to some small minor things including font size, button size, and images and so on (though it’s responsive). It doesn’t look right. The best landing pages have to also look great on mobile considering nearly 70% of traffic are from mobile nowadays and growing. is using different images and structure on mobile and desktop, perfectly optimized for both device. With ThriveThemes, I’m currently using two different landing pages for my main business which I created for mobile and desktop, and the desktop version would redirect when someone tries to access from a mobile device.

    It’s a lot of work, but I had to do this because no matter how much I tried to optimize for mobile size, I couldn’t keep the quality for desktop or both. At least, it was very hard to make it look good on both device. Looking forward to hearing some solutions to mobile optimizations so I don’t have to create two landing pages for one business.

    • We’re working on a solution for this. I know it’s taken longer than expected, but the result will be worth it, trust me.

      Basically, look at the responsive options various other builders have right now. Those are rubbish compared to what we’re building. 😀