It's time for another landing page from scratch video! As usual, you'll get to look over my shoulder as I create a landing page and comment on what techniques and elements I'm using as well as what we can learn from the design I'm replicating.
This time, the landing page that was suggested for the video is none other than Neil Patel's homepage.
More...
An Easier Way to Find Colors
In the video, you'll see me use the browser console and "inspect mode" to find color codes on any webpage. In the last demo of building a landing page from scratch, commenters pointed me towards an even easier solution: ColorZilla.
ColorZilla is a browser plugin which gives you a simple eyedropper tool. Just click on anything in your browser and it will tell you what color it is. It will even copy the color code to your clipboard, so it's ready to paste into your editor right away.
An Easier Way to Find Fonts
Similarly, you can use a browser extension called WhatFont to have a more convenient way of figuring out the names of fonts that you encounter around the web.
The Upside Down Homepage
As I mentioned in the video, the style of landing page we're looking at here can be described as an upside down homepage. This is a concept popularized by Bryan Harris from VideoFruit.
At Thrive Themes, we're great advocates of the idea that your homepage should be a landing page (see here and here). And we like the upside down homepage concept so much that we made a whole separate post about it, here.
Resources
In the video, there are some points I don't go into great detail about, because those points were already covered in previous videos.
Specifically, you can see exactly how you can find a matching style of font (or even the exact font used) for any page in this tutorial. And you can see exactly how to use the browser console to find fonts, colors and other style information in this video.
Over to You
I hope you enjoyed this new landing page from scratch video. What did you learn? What would you like to see more of? Are there any pages you've found that you think we should make a video about?
Let us know by leaving a comment below!
I use the ColorPick Eyedropper Chrome extension to grab color codes. Easy peasy!
Hadn’t heard of that one before. Thanks for the tip!
Very nice Toni,
Thanks a bunch
Pierre
For the Orange line (divider) I guess you could use another table inside the existing table, so that your TCB divier would have the right width. The only remaining problem is that we don’t have any customizing options for that element, so you would not be able to make it orange or thicker. Maybe just adding color and height to the divider element would do the trick to make it completely customizable.
That’s true, this would have been a possible workaround as well. But ultimately, the current version of TCB simply doesn’t have a convenient way of placing such a line on a page and that’s something we want to change. 🙂
Just a usability suggestion: On your interface name styles with descriptive names that are memorable. Nobody remembers what “Style 1,” Style 2,” Style 3″ is etc. A descriptive style name that describes the style would be far better.
Hello Brad,
That’s a good point, yes. The naming and functionality of styles will be updated to make them easier to use.
Hey Shane,
I would like to feature your video in my blog. Can I get a embed or directly your Video URL would do?
Hello,
Here’s the link to the video on YouTube, from which you can easily embed: https://www.youtube.com/watch?v=2mHWSXFX-iM
Hi Shane. Really enjoy these videos as i learn something new each time. What was the font you ended up using for the header as a matter of interest?
Hello Craig,
I ended up using the Lato font for this page.
Wow. Couldn’t have come at a better timing! I was just in the process of redesigning the about page, which took a bit of time because of the brainstorming. I’ve always found that it’s easier when you have the exact blueprint. It’s the storytelling part that’s kind of hard to string together.
Thanks, Robert! Happy to know this came at a good time for you. 🙂
I love these demonstration videos. I love to see the tricks my thrive products can do.
Thanks for your comment, Mike! Glad you like these videos. 🙂
That was pretty cool!
Question: could you have used that custom menu at the bottom to build the footer in its entirety? Seems like that would be an easier way to get everything aligned more easily.
Hello Suzanne,
Thanks for your comment!
You can’t build a footer with a menu and logos etc. as one single element. However, we will improve the default alignment of the menu, so that less fiddling is required and we’re also working on an interesting feature that will make creating things like footers and headers on landing pages a lot easier.
Huge Help, Shane! I picked up at least five tips that I will be using tomorrow! Thank you! I’m sure for you it isn’t a big deal, but I don’t have anyone’s shoulder I can look over like this to learn how to use the tool even better.
Thank you for your comment, David! That’s really great to hear and I love that these videos are helping you with the site you’re building. 🙂
Thanks again for all the insights! On another note . . . please create some “no image” options for some of the Ovation templates . . . . please!!! :=)
Hello Jay,
These templates are a work in progress right now. It won’t be too long until we can release them.
hi, just tested the patel page and it pre fills the opt in light box with me email and name,, wonder how he did that
I’m not getting this pre-fill. I’m guessing it must be cookie based, as in: you signed up at some point in the past. Or perhaps it’s a WebinarJam feature and you signed up to a different WebinarJam event at some point?
Nice job! I like how you handled the content box and content container. I would like to see how in a page section instead of having an image (static image) as a background, we could have a video as background playing without stopping and displaying the text as well while the video is playing. It is very beautiful. I would like to see how in page section, I could display carrusel pictures and videos at the same time. I think TCB can do it, but I don’t know how. Another thing is how to take advantage of event manager over animation and the way how pictures appear like the homepage of weebly does it. I am an enthusiastic follower of these series…
Thanks for your comment, Juan!
We don’t have a feature for video backgrounds yet, but it’s something we’re working on for a future update. 🙂
Thank you Shane. Meanwhile, I am going to master other features of TCB. I have a lot! 🙂
Hy Shane!
Could you tell us how can we make a bordure area transparency? For example, look to Frank Kern site: http://frankkern.com/
Meniu header and subscription area.
Thank you and congratulation for the good job you and the team does! 🙂
Hello Adrian,
For certain elements like content boxes, you can create transparency by applying a custom color. Transparency/opacity is one of the color options.
Hi Shane, I am enjoying this series.
Why don’t you add the pages you create as templates where I could download it, the way you dis with the upside down homepage.
I think it will save a lot of time for many.
Hi Ahmed,
When I make a copy of a page like this, I don’t want to offer it as a template for copyright reasons. The idea behind these videos is to show the capacity of the content builder, but we don’t encourage anyone to make exact copies of someone else’s pages.
Hi again, following your icon box set up,,I do not have a choice of opacity for transparency for content box colour as you have selected
Hello Rod,
Try using content box style 6. That one should have all the options you need.
I’ve been trying to get assistance since Sunday sent emails and responded on the internal messages with no one responding back. Loran’s helped on the install then all communication went dead.
Will someone please respond.
Hello John, we replied to your ticket on the 12th September. Were you not notified about this by email?
Best regards,
Paul
Thanks Shane… lots of tips to make TCB even more versatile. The video is going into my tips and tricks vault so that I can refer back to it later if I need to. TCB just keeps getting more powerful.
Thanks for your comment, John!
Beautifully explained Shane! I wish I could remember just a fraction of the information you provide to us.
Hi Mark,
Thanks! I think the more you use TCB, the easier you will find it to remember the small tricks and shortcuts. 🙂
Excellent as always Sir!! Thanks for all the resource links since I often (for shame!) miss all your posts since we are building sites and landing pages like madmen…!
Thank you, Mark! Glad to know you like our content, when you get around to it. 🙂
I love this series. May I suggest the next website to replicate. It’s another well known marketer – Gary Vee. https://www.garyvaynerchuk.com/
Thank you for the suggestion, Rinaldo!
Brilliant! How do you do the small circle video?
Hello Carole,
The live-video-in-a-circle is a custom effect created by our video editor.
This is awesome! Which Thrive Theme is Neil using? Thanks!
Hi Jon,
Neil isn’t using one of our themes. What I know for sure is that he uses Thrive Leads on some of his sites. I’m not sure if he uses any other Thrive themes or plugins, though.
Ok cool. Thanks for following up. Well he did a good job of making his theme look like a Thrive Theme. 😉
There is a site called WPthemedetector.com
Just plug in the url for the site you want to know the theme of (if it’s WordPress) and it will tell you the name of it in most cases (unless it’s a custom theme).
Another great thing is, it tells you what plugins a site is using…a nifty way to “spy” on other websites techniques…
For the line work around why couldn’t you make a content container, resize it and put a line in it? Now you can’t change the line thickness or color but that may be an easier way to add this to TCB than creating a whole other “line type” element. IMHO. I know there are may other updates your programmers should be working on than line elements.
Hi, Shane. Great tutorial as always. I am going to “copy” the home page layout of your blog (imimpact). Is it possible using TCB to obtain a “hidden video” effect which you used on your home page? How can I do it?
Shane, once again you guys at Thrive Themes have over delivered. Awesome video and tutorial.
Hi Shane, please do keep on pumping out these tutorial videos, they’re great for us Thrive theme users…
Some great tips here, Shane. But would you recommend an upside-down homepage for a traditional B2B business like a logistics company? Their website visitors might be confused if they didn’t see a menu at the top of the page.
This is really a nice post. This post has helps me to gather some new knowledge. So thanks for sharing such a awesome post.