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!
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” 🙂
Thank you, Thorstein!
Glad you like it, Diogo!
Not a Wistia Video Embed? 🙂
We’ve started using YouTube for our content videos, as a marketing thing. 🙂
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!
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. 🙂
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.
Excellent tutorial Shane! Thanks for sharing!!!
Thank you, John! Glad you liked it.
Another great tutorial. Thanks Shane! One thing: Would love to have the ability to add a sticky header.
Sticky headers will definitely be added as a feature in the future.
Shane! Awesome video. Thank you!
Thank you, Morgan!
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.
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!
Excellent presentation Shane. Extremely informative.
Thank you very much, Art!
When your vids arrive, I drop everything. Thank you for the care you take. Today I learnt about the menu at top right.
Thanks for your comment, Celeste! Happy to know you got a useful detail out of this video. 🙂
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…..you 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! 😀
Very useful, as usual, Shane. Keep them coming.
Thank you, Bruce!
Great video. Any chance of video backgrounds in the future.
We’re working on a big update that will include background videos – eventually.
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.
*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.
Thank you very much, Peter!
Can you do one like lead pages here https://marketplace.leadpages.net/markeazy/elegant-tablet/? U knock out lead pages and thats it, its GAME OVER!
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?
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.
Thanks Shane, very helpful.
Keep up the good work !
Thank you, Ben!
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.
Thank you, Mark!
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
Thank you, David!
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?
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 😉
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 https://joinscrewu.com/start
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.
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.
I have been using ColorZilla and it’s wonderful. I didn’t know about WhatFont.
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!
Thanks for your comment, Edan! Good to know you were able to learn a few good tricks from this. 🙂
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.
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!
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.
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. 🙂
Great stuff as usual Shane! These are very helpful.
Glad you enjoyed this, Michael!
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!
That’s great to know, Bob!
Good stuff Shane. Love these videos. Will look for a real tough one for you to replicate 😉
Sounds good, Dano. 🙂
Excellent video. I really liked the way you developed the page structure first and then used duplication to carry the settings from element to element.
Thank you, Steve!
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 chrisducker.com or problogger.com’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
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.
It would be great to see a tutorial “How to migrate an existing site to Thrive Themes”.
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?
Thank you, Cameron! We’ll definitely be making more videos like this. In the meantime, here is the previous one. And here’s the one before that.
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. Messagner.com 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. 😀
Very awesome and helpful! I learn something new every time.
Thank you, Pat!
Thank you for this design walk-through. It really helped me begin to think more deeply about how I can use Thrive Themes to improve the design of my site (and depend on web designers less).
Thanks for your comment, Allan! Happy to know that this was useful for you.
I agree, more of this! I learned to much. Thank you
Thank you, Julie!
As a more ‘mature’ newbie, your tuturial once again was sooooo helpful, practical and inspiring. Greatly appreciated. Thank you Shane.
Thank you, Geoff! Glad to know this was useful for you.
Thanks for this tutorial. Shows me what is possible but scares me with the gap, between me and thee. I find drag and drop editors so difficult and to start from scratch with nothing is daunting. I don’t know where to go to get a template I love, but seeing that they can be duplicated will have me paying more attention.
Thanks for your comment, Mary! Can you tell me what it is that you find so difficult about the drag and drop editor? Would love to know if there are ways we can make it easier.
Awesome tutorials! There’s so much you can do with Thrive in emulating landing pages, nice to see how that works in practice 🙂
Thank you, Mike! Glad you enjoyed this tutorial. 🙂
Thank you! you did again, but this time I learned how to build a similar page of a website that I was impressed for its design. Now I can do it as well. Please more tutorials like this where you and TCB uncover these secrets that only website designers from big companies have. For me, I would like to learn more how to play with event manager on TCB in orden to build those amazing pages.
Thank you for your comment, Juan! Very happy to know that these tutorials have been useful for you. 🙂
Shane, can you tell your current video and audio setup, along with backgroun d and lightning setup? I know you have a lead magnet with your old setup on, imimpact.com, but it looks like you have a new setup here.
For camera and audio setup, nothing has changed from the imimpact thing you’re referring to. The only change is that for this video, I’m using a black background and I’ve placed a lamp behind me to create a bit of a lighting effect on the background. 🙂
Great tutorial. Really helped me as a person with very limited design and programming abilities.
It also showed me how easy it really is to recreate landing pages.
2 request though
1. Can you show how to make a list with special icons? this is something i couldn’t figure a proper way to do when i wanted to use unique icons.
2. Can you shoe how to make a landing page similar to http://p1.pagewiz.net/readymade_1/
I tried recreating something similar but it went too wrong…
1) Do you mean different icons for each list item, or just icons as list bullet points?
2) The page you linked to looks fairly simple. The only tricky part I see there is the signup box overlapping part of the background. This can be achieved by adding an negative margin to the box and a positive margin to the next element underneath it.
Can you tell me where exactly you got stuck?
Thanks for the reply.
1. both scenarios will be good to learn how to implement 🙂 but what i meant is list bullet points which are special icons. (you can actually see something similar in the url on point 2)
2. I got stuck on positioning the signup box, but truth is the entire page didn’t look very well. this is what i ended up with http://www.screencast.com/t/EgEppMhXC
wow. that was amazing.
Just what i needed since i got stuck in thrive.
thanks boss and please make more of these replica from scratch videos 🙂
Thanks! Glad you found this video useful. 🙂
Thank you very much. I like this one: http://www.activecampaign.com/
Thanks for the suggestion, Sascha.
Hey Shane, Great vid & really inspiring. Could i ask you which screen capture software you use to create your videos. Also, where can i find the iphone/ipad images for download? (i know you borrowed the ones on your vid)
I use Camtasia Studio for screen recordings. If you need iphone, ipad or similar device images for your site, I recommend doing a search for the type of device you need an image for, plus a search term related to the license you need. For example, a search term like “iphone illustration free for commercial use” yields quite a lot of results. Make sure to always double-check the license terms of the particular image you end up using, though.
I actually was hoping to make a couple suggestions towards things I find myself using often with custom HTML bits in my landing pages.
As an extra thing, allow us to somehow adjust image size to be a percentage based on it’s container (whether it’s a div, table, and so on). This makes it super easy for me to plop a larger image in somewhere, and then I usually do style= ‘ max-width: 100%; ‘ depending on where it is. That allows it to appear properly on mobile as well, since it’s the max-width feature I’m depending on. So actually maybe just allow us to set “max width’ for certain features like images, content boxes, and so on.
Just a broad suggestion but I figure it’s worth mentioning since it would save me a bit of time.
Off the top of my head, I can’t think of the other stuff, but I’ll be in contact when I do. That one right there would be the biggest help to me.
Thank you for your suggestion, Darren!
More unit choices (px, %, em,…) will be made available in TCB 2.0. By default, an image that you place in TCB will either display at it’s original size or at 100% of the parent container’s width. This will also adjust for different screen widths.
Shane, you are the man! Great stuff! You are a blackbelt at over delivering content. Not only do I get great “how-to”videos, I also see where I need to start over delivering my content. Great example of a high value company, thanks.
As usual when YOU click on inspect element and show us, it’s not clear where you are copying from, 1. You don’t zoom in close enough.
2. You go too quickly and I have to go back a zillion times to try and catch what exactly you are copying, I can read just about where it says background colour, but what are you copying?
Also I’m clicking on a text box on a website and its lilac, so what words am I looking for in ” inspect element ” there’s so many lines of indecipherable txt?.
Thanks please can you zoom in closer and slow down when you demo ” inspect element” in your future videos please X
Hi I followed ok up until 7:40 in your video, then you say it will automatically load on my site and make available on the page….& it didn’t.
I can see in ” custom font manager” the font I chose -open Sans, then I go back to my page into font settings click on heading 1- custom font and there’s no drop down choices like I see in the video??? So I click on custom font cos that’s all that’s available and it takes me back to custom font manager where I see the open sans font that I previously chose, so what do I do now???
Click on any of the coloured boxes? … Blue edit grey duplicate I don’t want delete?.?
I love the design of Stripe’s home page (stripe.com) and would love to see how such a design might be decomposed and recomposed using TA, if you’re still looking for suggestions! 🙂
Haha, damn… the Stripe homepage is visually very complex. That’s a challenge to replicate in any builder, especially if you want to use CSS rather than graphics, like they do. Maybe we can do a tutorial on this in the future. We have to add a few more bells and whistles to Thrive Architect before we can take that on.