[aioseo_eeat_author_tooltip]

|  Updated on January 8, 2020

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

in  Build Your Site

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! (Check out our beginners' guide if you are unsure how to create a landing page in WordPress)

With Thrive Architect (formerly called Thrive Landing Pages) 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 landing page starting from scratch. As you see, it’s possible to build a landing page from scratch in 15 minutes even without using any templates.

More...

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

1. Find a Lead Generation Landing Page You Like

An example of a good lead generation landing page by Amanda Genther

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

Creating a landing page after defining 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
Elements of Amanda's lead generation opt-in 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 Landing Page Version

Now that we know these different elements, we can easily create the same style of landing page with the Thrive Architect 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 WordPress website that has the Thrive Architect 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!

Written on January 14, 2016

About the author
[aioseo_eeat_author_bio]

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:

Find Your Perfect Match: Thrive Theme Builder vs. Themify Builder Pro

 Read article

Beat the Bots: How to Set Up Spam Protection in WordPress

 Read article

Best Blog Platforms: Find Your Choice in 15 Minutes

 Read article

Leave a Comment

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

    Reply

  • 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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

      Reply

      • 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

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

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

    Reply

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

      Reply

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

      • Thanks Michael, indeed the step by step instructions for the dynamic progress bar are there 🙂

  • 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

    Reply

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

    Reply

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

      Reply

  • 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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

  • 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

    Reply

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

    Reply

  • 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

    Reply

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

    Reply

  • 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

    Reply

    • Hey Ron,

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

      Reply

  • 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

    Reply

    • 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://staging.thrivethemes.com/tkb_item/text-image-logo-type/).
      Also you can post in the support forum (https://staging.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!

      Reply

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

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