How to Create a High Converting Homepage Like Neil Patel

Shane Melaugh   54

Updated on December 23, 2019

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


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


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!


by Shane Melaugh  September 14, 2016


Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

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

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

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

  • 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!!! :=)

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

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

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

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

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

    • 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

        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?

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

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