How to Create a Landing Page From Scratch – Step by Step Guide

Have you ever come across a landing page you liked and was hoping to replicate it on your website but couldn't find the exact template?

In this demonstration video, I'm showing you that you don't have to wait for us to build the perfect template! 

With the Thrive Landing Pages plugin you can build ANY landing page you want in very little time!

Watch the video to look over my shoulder while I'm creating a 2 step lead generation page starting from scratch.​

More...

Here's a summary of the process you can follow to do the same:

1. Find a Landing Page You Like

I stumbled upon this landing page from Amanda Genther and I immediately liked the simple style of it. 

This is a good lead generation ​landing page because of:

  • The branding elements: the picture and the logo help the visitor know they are in the right place. 
  • The colored box: writing the message in a colored box makes the most important part of the page very attention-grabbing and also increases the readability of the text.
  • The call to action button: thanks to the size and the color, the call to action button stands out.

2. Discover the Building Blocks

When replicating a landing page, you have to take a moment to discover the "building blocks" of the page.

To find them, ignore design such as colors and pictures or what's written on the page (these are things you'll customize anyway to make your landing page look and feel like your brand) and only analyse the different layout elements that form the page.

In this case we have:

  • A full screen background image
  • A 2-column layout with all the content in the right side column
  • A logo image with a transparent background
  • A colored box with a title, some text, a big button that triggers an opt-in form in a lightbox​ and a line of text underneath the button
  • A final line of text outside of the box

If we look at the opt-in box, we can see:

  • ​A progress bar
  • A line of text
  • A title
  • A vertically aligned opt-in form with 2 fields and a colored submit button
  • A line of text underneath the button (the privacy policy)

3. Create Your Own Version

Now that we know these different elements, we can easily create the same style of landing page with the Thrive Landing Page plugin

In the video you can watch over my shoulder as I'm creating this one live.​

As you see, I'm not trying to copy the landing page exactly, but I'm using the building blocks (that we've identified in the previous step) and the elements that make this landing page interesting on my own design. ​To see a demonstration of how you can copy a landing page design down to every detail, you can check out this post.

Additional Resources 

​Stocksnap.io: Free stock photos without any copyright restriction.

Picmonkey: Free online tool to easily resize your images

Thrive Leads: Our list building WordPress plugin that will allow you to create 2 step opt-in forms that you can A/B test for higher conversions​

4. Save as a Template

Once you've created the landing page you like, you now have the possibility to save this landing page as your own template.

This allows you to easily create multiple landing pages in the same style without having to start from a blank page every time.

Furthermore you can also export this landing page. This ​gives you the opportunity to use this landing page on any website that has the Thrive Content Builder installed!

Now it's up to you! 

Please let me know in the comments if you find these "landing page from scratch" videos helpful and tell me if there is a design you would like to create!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

  • Al says:

    Incredible example – easy to follow and digest. Thanks Hanne. Nice end to end demo of what’s possible.

  • Mike says:

    Hi Hanne,
    Loved the way you created a Landing Page from scratch.It shows how powerful thrive landing pages is.

    I wanted to ask how to change the font and font size of menu items in thrive themes?

    • Hanne V says:

      Hey Mike, very powerful indeed :) About your question, I suggest you ask it in the support forum, they will be able to help you out with a custom answer :)

  • Paul K says:

    I find these kind of videos showing how an experienced user does things very helpful.

    Anything you can add about why you design things a certain way, or why you make various layout and design choices is also helpful.

    Thanks

    • Hanne V says:

      Thanks Paul, happy you found it helpful!

  • Nate R says:

    Thanks so much again for a simple and resources-rich tutorial. Another reason I am back with Thrive!

    • Hanne V says:

      Thanks Nathaniel, glad to hear that!

  • Irena S says:

    Hi Hanne,
    I love the simplicity of Thrive Themes plugins. Very useful demo. Thanks.

    • Hanne V says:

      You’re welcome Irena :)

  • Claudemir says:

    Nice video Hanne, very easy to follow.

    • Hanne V says:

      Thank you Claudemir.

  • Tom says:

    Audio is far too low. Would suggest remastering the video.

    • Hanne V says:

      Hi Tom, sorry for the audio quality… I will do better next time!

  • Mandy ONeill says:

    YES!!! Thanks for this tutorial!

    • Hanne V says:

      You’re welcome Amanda, happy you like it!

  • Bertrand C says:

    Great ! Many thanks.

    I’ve got a question : how can make a landing page with a menu ?

    • Hanne V says:

      Thanks Bertrand.

      A landing page is by default without a menu but if you want to create this page with a menu, you can start from a full width page (when creating a new page, select “full width” as a template in the page attributes of WP) instead of a landing page.
      This will allow you to keep the same menu as on the rest of your website.

      An other option is to add a “custom menu” this is an option you can find under the “widgets” menu of TCB. You can get the step by step instructions here in the knowledge base.

      Hopes this helps :)

  • Denise says:

    This is an awesome video and much needed. Thank you so much for the demo. I’ll be doing this tonight.

  • Jorge says:

    Really simple, lovely Hanne, thanks a lot. By the way, the video does not sound pretty loud, please turn up the mic gain next one… thank you by the way :-)
    Best wishes!

    • Hanne V says:

      Thanks Jorge :) And will adjust the mic next video!

  • Georges W says:

    Great tutorial, well done. Downloading WordPress and ThriveTheme a month ago to build my website. I tried to use the 2 step but did not manage, now I do know. Thank you for the tutorial.

    • Hanne V says:

      Thank you George, I’m glad you managed to use the 2 step opt-in now :)

  • Borche says:

    LOVE IT! Just love it!

  • wes thomas says:

    Presentation Perfection.

  • Kathy says:

    This was a fantastic video! Thank you so much…I copied you step by step :) Now I have to create the opt in…

    • Hanne V says:

      Hey Kathy,
      That’s really cool to know!

  • Excellent demo – just the way I need ’em! ;-P

    Any chance of doing a similar walk-through with sales letter construction?

    My only ‘complaint'(used mildly) is that the sales letter templates(especially long-form) are limited and too few. It’s point of distinction that I think Thrive could, uh, ‘thrive’ with vis-a-vis the competition because every one comes up short here.

    I never quite understood why so many solutions in this area have tons of template options for lead/opt-in pages and so few with sales pages.

    After the opt-in comes ‘sales’, right? ;_P

    Anyway, thanks again for this here – and hope you can make note of my suggestion here…I’d be willing to guess, more sales page templates would be receive a huge welcome by Thrive folks….

    • Hanne V says:

      Hi Bruce,
      Thank you for your comment and the suggestion.

      We’re constantly adding new templates so new sales page templates are also coming :)

      But in the meantime I’m taking note of your suggestion to do a breakdown of a sales page next demo video!

    • Shane Melaugh says:

      Hi Bruce,

      Can you give me examples of some things that you feel are missing from our existing sales page templates? That would be really helpful. You can find all our tutorials for them here, by the way.

      • Jeff M says:

        Bruce might be suggesting something like this??

        Here’s what I’ve got for you
        Here’s what it will do for you
        Here’s why I’m the guy/gal for this offering
        Here’s the story behind the thing
        Here are the details (modules, bonuses etc.)
        Here’s how you can get it

      • Bruce Brodeen says:

        Hey Shane ‘n Hanne!

        Thanks for your response – and request.

        Off to a busy Monday/Tuesday w/a tight schedule but I will gather up some examples mid-week and post them here, for sure.

        Is that the best way to get this information to you? Or?

  • Jeff says:

    Awesome video Hanne! (Love your accent. Beautiful! :) I can’t place the exact country though- European presumably?)

    Hanne – how did you guys get the ‘animated’ effect on the progress bar (the page you started with, not the one you created). I love that ‘flashing bars’ effect on a progress bar but I don’t see how that is possible to do with Thrive.

    Possible? :)

    • Hanne V says:

      Hey Jeff,

      Thank you and yes European/Belgian accent ;-)

      The animated effect on the first progress bar is not a Thrive option for the moment, the second one is ;-)

      • Jeff W says:

        Awesome Hanne!

        Thank you so much for this link Hanne. :) I will say that everything you guys at Thrive come out with is unbelievable! :)

        Every time I see an email from Thrive, I get excited! lol :p

        p.s. – I wish Thrive would come out with even more templates (or a marketplace to buy templates) as I would ‘easily’ pay a monthly subscription for this hands-down! (Especially complete sets of templates). This is something I’d gladly pay good money for monthly.

        Thanks Hanne. Great job!

    • Michael H says:

      Hi Jeff,

      I think this may be what you are looking for :

      https://thrivethemes.com/optin-form-trend/

      • Hanne V says:

        Thanks Michael, indeed the step by step instructions for the dynamic progress bar are there :)

  • Jodie W says:

    Great Video but where did she say about the stock photos for commercial use, I couldnt hear it?

    • Hanne V says:

      Hey Jodie,

      Thank you :) The website I’m using for the free stockphotos for commercial use is: Stocksnap.io.

  • Jim says:

    I really like this – I even think I can make a great template now. This is what I was missing.

    • Hanne V says:

      Thanks Jim, that was the purpose of this video :) Showing you you can create any landing page you like!

  • David W says:

    Thanks for the video. It helps to better understand how to create from scratch.

    • Hanne V says:

      Thanks David, mission accomplished :)

  • Rajan C says:

    Hi, How can I download the video?

    • Hanne V says:

      Hey Rajan,

      The video is hosted on Youtube and not downloadable, sorry.

  • Julian I says:

    Hanne,

    Thanks for this brilliant demo of how to create your very own custom landing page. So helpful to have it laid out step-by-step. Feel a lot more confident to have a go myself now.

    Keep up the good work,
    Julian

    • Hanne V says:

      Thanks Julian, very happy to hear that!

  • alireza S says:

    That’s awesome thank you. Please tell us how to make the progress bar, looks dynamic ?

  • Dayne says:

    The two fields in your optin are blank. You didn’t put text in them, so people won’t know which to put name in and which to put email. How do you do that? That’s a critical step that was missed.

    • Hanne V says:

      Hey Dayne,

      I agree that you should always put text in the fields :) This is actually done when you connect the form to your email provider (the part that I’m not showing here in the video. When you connect your service, you can chose how many fields you want and what text to put into them.

  • Paul B says:

    Hi Hanne, Great video,great voice to listen to too!

    I loved how easy you made it look so I dove straight in. Sadly, I seem to have a problem. When I came to the part in which I create the lightbox (9mins 42 secs in your video), when I click to open the new tab and edit the box, whilst the white box appears, no editing column or functions appear on the right! Just my wordpress page with an empty white lightbox in the middle! Can you help?

    Thanks,

    Paul B

  • Jim m says:

    I have built websites for decades using 3 versions Adobe Dream Weaver. I but never used WordPress, and I am freaking lost…… ElectronicOnion.com.
    , a new and unused site is the buildout site…. With Thrive and it, what is next. Alternatively, lead me to a tutorial.
    I deed a “push start’.

  • Carlo says:

    How can I monitor the conversion rate of this page?

    • Hanne V says:

      Hey Carlo, to monitor the conversion rate you need to know the number of visitors and the number of people who hit your “Thank you for subscribing” page.
      This are two metrics you can easily monitor in Google Analytics. We have a tutorial on it that you can find here.
      If you are a Thrive Member you can use the build in reporting suite from Thrive Leads to monitor your conversion rates on the opt-in form.

  • Elias R says:

    Great article Hanne, thanks!

  • Raj S says:

    Good demo. Clean and to the point, without sales talk or explaining obvious stuff.

    • Hanne V says:

      Thanks Raj, happy you found it interesting.

  • John says:

    This was a great tutorial. I followed along and created mine at the same time and it looks great.

    • Hanne V says:

      Yay :) Happy to hear that John!

  • Ryan says:

    Hi Hanne,

    Thanks for this post. Is there any way to export Content Templates? I’ve created specific post/content templates in one site and would like to export it to another? Thanks!

    • Hanne V says:

      Hey Ryan,
      For the moment there is no option to export content templates, but I can suggest you this workaround.
      1) Create and save your content template
      2) Create a blank landing page
      3) Insert your content template
      4) Save and export the landing page
      5) Import the landing page on the new website
      6) Save the content template as an element in the new website
      I know this is not the perfect solution. But it will probably still be a lot faster than having to re create the content templates (especially if you have more than one, you can put them all on the same landing page and import all at ones).

  • Cheenu Lott says:

    Thank you for this detailed step by step guide, I will definitely follow your instructions.
    Looking forward to your next post on blog.

  • Jeff says:

    Thank you, The How to Create a Landing Page From Scratch – Step by Step Guide is just what I need to learn. This will help me hugely in re – designing my new blog

    • Hanne V says:

      Hey Jeff, I’m glad this was helpful for you!

  • Alfred H says:

    Brilliance! Hanne, you made it look easy so I followed along and it was very simple. Thanks to you Hanne and the team at Thrive Themes.

  • Patrick says:

    Thank you for the great share!

    Is there a way to add dynamic content into your landing page from URL slugs? Example: mydomain.com/this-special-offer-ends-today/

    …on your landing page you could add “This special offer ends today!”

    Is there a way you know this can be done?

    Thank you,

    Patrick Forbes

    • Hanne says:

      Hi Patrick,

      No for the moment you can not add dynamic content into the pages. One thing you could do is use the Typefocus feature to show several messages.

  • Byron says:

    Once again Hanna, so very useful! Thanks for putting sooooooo much love into this plugin. This is by far the BEST landing page builder on the market hands down!

    • Hanne V says:

      Hi Byron, happy you like the plugin and I can only agree with you :)

  • Robert H says:

    Hi Hanne and Shane and Gang

    I am profoundly grateful that you have come into my life. I’ve had the most limited of resources but using Thrive Themes; I have built my first ever website myself. I have had two other sites created by other people, but they never worked.

    I am yet to promote it, and I am still trying to get the auto responder going which is completely down to my lack of experience, nothing to do with Thrive. I have just made my first ever landing page thank you to this post. I just want to thank you so much for all you have done and everything you are doing. It almost brings a tear to my eye. I may now actually be able to attract clients to my service which is only a local one, but is unique in my market. Thank again, and I wish you all the best much and many

    Regards
    Robert Huggins

  • Ron says:

    Can you explain the difference between using the Landing Page Plug-in, vs using the Content Creator Plug-in? Thanks!

    • Hanne says:

      Hey Ron,

      They are actually packed in one. When you have Thrive Content Builder, you have Thrive Landing Pages included!

  • Hans S says:

    Hi Hanne,

    Your video is awesome, thank you for that! It really give great insights.
    Unfortunately I’m not so good at coding etc so I need some explaining of things. (I feel quiet stupid about it).
    I’m a ‘fresh’ member of TT and my goal is to create a website (4 menu-items) for my business. With off course opt-in etc. (But that comes a bit later).
    Can you answer some questions for me:
    1. Your video: what’s the reason that you choose a TT theme (pressive) and then overruled it completely by a landingpage item? Is that the best to create a landingpage?
    2. Am I following the right proces in creating my website? I think I’m mixing up WP settings and TT settings and I don’t know where to set things.
    My example: I choose the Ignition-theme and installed it. I expected that I only had to change the content to make it fit for my purpose. Because a lot of the structure I like. But I’m stuck:
    a. I can’t change the TT logo into my logo. Clicking on it leads me to some kind of post-page (?) which isn’t my intention.
    b. On homepage: there is a larger white bar then on the other 2 (menu)pages with 2 time the home-menu-structure. How can I delete these?

    I’m just in a experimenting stage but I hope you can help me out!
    http://www.thehappycompany.nl

    thnx

    Hans

    • Hanne says:

      Hi Hans,

      Thank you for your comment. I will try to answer your questions :)
      1. There is no particular reason why I chose Pressive. I could have used any theme (even an non Thrive Themes theme) because the landing page plugin works with any theme. The reason I’m doing it like this is to show that you can really create any design of landing page on your website no matter what wp theme you’re using. You can build a landing page that is much more ressemblant to your website, it’s up to you. I do recommend to start with a page without distractions so without the menu and sidebar.

      2. For the more specific theme related questions, you can check out the knowledge base (eg to change the logo: https://thrivethemes.com/tkb_item/text-image-logo-type/).
      Also you can post in the support forum (https://thrivethemes.com/forums/forum/all-themes/ignition/) with specific questions (such as your homepage question) so that our support team can take a look and help you out!

  • Hans S says:

    Hi Hanne,

    Thnx for the info in your reply. Great!

    Hans

  • Steven B says:

    Thank you Hanne
    I just signed up for the annual program which gives me access to all the products … wow it is sensory overload, however thanks to your video the landing page creation portion is now easy :) Amazing products!

    • Hanne says:

      Happy to hear that Steven!

  • Peter B says:

    Really helpful video. Saved me considerable time in figuring out how to do this. Thank you Hanne. /psb

  • >

    Join Thrive University (it's FREE!)