Step by Step: How to Build an Image Background Landing Page from Scratch

Author
Shane Melaugh   261

Sometimes, you come across a landing page with a design you really like and you think: "I want that on my site!"

In today's video, you'll discover how you can re-create a landing page, even down to small details, using Thrive Landing Pages.​

More...

Previously, we've had a look at how you can create an upside down homepage, a contest opt-in page and a lead generation landing page. We hope that you can learn some new tricks and efficient ways to use Thrive Landing Pages from watching these tutorials.

Here are some of the main takeaways from today's tutorial:​

Use Page-Level Font Settings

Sure, you can click on any text element on your page and change its color, load a custom font, adjust the font size and so on. But if you have to do this for many text elements, it becomes quite tedious.

Apart from that, it's good practice NOT to mix and match too many different font styles, sizes and colors, since that just makes a page look messy.

In Thrive Landing Pages, use the page-level font settings to determine what you want your headings and paragraphs to look like and it will instantly apply to all of the text on your page. You can find the option by clicking here:​

And choosing this option in the menu that opens up:

Use Your Browser's "Inspect" Feature

When you want to get details like colors and font sizes just right, your browser's "inspect" feature is your best friend. You can access it by right clicking anything on a web page and choosing the "inspect element" option.

Alternatively, you can hit the F12 key to open the browser console and select items you want to inspect from there.

This will work in Chrome as well as Firefox. You'll see something like this:​

On the left side, you see the code that the page you're looking at is made up of. On the right side, you see the style information for the page.

Don't worry if most of this looks like gibberish to you - it does to me too.

Play around with the inspect feature for a bit and you'll soon find that basic style information isn't that difficult to identify. Here's an example of the code I see when inspecting a line of text on a page:​

As you can see, it's not exactly rocket surgery to figure out that "font-size" is the font size, "color" is the font's color (and you can copy-paste this value directly into our editor's color options to get the exact same shade), "font-size" is the font size and so on.

The trick is just to find the recognizable values among all the code on a page.​

Use Content Containers

On this example page, spacing was used in various ways. For example the content box isn't as wide as the page and the text inside the box isn't as wide as the entire box.

The way to create this effect without causing trouble for mobile responsiveness is to use the Content Container element. This ensures that on large screens, generous spacing will be applied to the sides, but on smaller screens, the text will not be crammed into a tiny column.

You can learn more about this and other ways to make your content more mobile friendly in this tutorial.​

Over to You

I'm interested to know what landing pages and websites make you go "I want that!", especially since we're working on improving our visual editor at the moment. The goal is to make it even more flexible and even easier to create whatever page design you have in mind.

If you have some favorite landing pages, please share them by leaving a comment below!​

Shane

by Shane Melaugh  August 8, 2016

261

Enjoyed this article ?

You might also like:

Leave a Comment

  • Trying to watch video and it keeps stopping at 1:18 minutes. Checked my download speed and Im at 33 Mbps so I know it not my machine.

    • Sorry to hear that, Ed. I double checked and I can’t see an issue with the video. Please try again.

    • Ed – Sometimes this can be caused by your browser cache filling up. Try emptying the cache, and perhaps even quit out of the browser and come back in. More extreme steps: open in a different browser and/or restart your computer to free up memory. This can usually fix issues like what you reported.

  • Shane,
    I just wanted to reach out and say keep up the good work. You constantly provide value to your audience. Love the themes for quick lead generation set ups as well!

    Steve

  • How legal is to exactly copy and use a successfull landing page? Not talking about images and copy, but the styling, fonts and elements positioning on the page.

    • My guess is (and this is speculation) is that Shane is just showing HOW to use one. But then it is up to us to do the due diligence and adapt to OUR own uses. However if the images used is part of the Creative Commons license, it should be fair game, right?

      • Yep, pretty much. With images, I’d definitely never use one if I don’t know the exact source and license of that image.

        Using an image in a video like this would be covered by fair use, but I’d never actually publish a landing page that uses an image I don’t know the source of.

      • And what do you think about using the entire mix of layout, colours and fonts? is this somehow subject to copyright?

      • I don’t know.

        And also: I’m not a lawyer, so it really doesn’t matter what I answer. 🙂

    • Disclaimer: I’m not a lawyer and you should not listen to me.

      I would definitely never copy the content, pictures or graphics from a website. CSS styles I imagine can’t be copyrighted, so if you see something like a button you really like, I don’t think it’s a risk to copy that button style exactly (or almost exactly).

      However, to be clear: tutorials like these are just meant as showcases of what can be done with our plugin. I don’t recommend anyone actually copy an entire page. A typical real-world use case would be that you see a particular element or layout that you like and you want to create something similar on your own site.

      Since I can’t know what specific element you may want to recreate on your site, it makes sense for a tutorial to just cover all the elements on a page. But this is really only for the purpose of the tutorial.

  • Hi Shane,

    Liked the video very much so, I learned a couple things i did not know. Thank you.

    Also, what I would like to know how to do is how on some landing pages, they have a back ground image that scrolls along with solid background elements like text boxes as you move up/down a page. Also some elements fly into position on the page…

  • It would be great To use your software also with non WordPress sites. You could find a Way To use your editors To build Landing Pages, email collectors etc..And The copy And paste The code in any Website. Thanks

    • Thanks for your comment, Stefano!

      Creating our products for non-WP sites would be a huge task, so I don’t think it’s something you’ll be seeing from us anytime soon.

  • Excellent tutorial Shane! Love these practical videos, and the landing pages plugin and content builder plugin is so extensive that I keep learning new stuff about it every time I watch you guys use it.

  • These tutorials are fantastic! Thank you so much for sharing them 🙂 I absolutely love thrive themes. I’m learning so much and the support here is great!

  • This was excellent Shane. I just built a page and from this video learned I need to rebuild it a different way so its mobile friendly using the boxes. Love these kinds of video.

  • Hi Shane, This is amazing! Thanks for the design tutorial. I wanted to design a page like the homepage of Chrisducker.com and am stuck for nearly a month.

    Can you please help me. 🙂

    Thank you 🙂

      • Thanks so much Shane. I’d be more than thankful if you can help me with this!
        P.S. Proud user and lover of Thrive Products! <3

  • Continue to blown away by your attention to detail and your GENUINE desire to provide VALUE to your Thrive members (and those outside of our Thrive family!).

    Seriously, following you is a MASTER class in Internet Marketing.

    One question. Is the Thrive Landing pages also offered as a separate plug in? Or is this part of the TCB. (Doesn’t really matter to me as I am an Agency License holder), but if I am going to share this, it would be good to know. Thanks.

    • Thank you very much, Harvey!

      As of right now, TCB and TLP are a bundled offer, but as both products keep expanding, we will split them up into separate plugins in the near future.

  • I REALLY like these instructional videos, and I hope you’ll keep ’em coming. I would have liked to have seen some of the things you could do with the button itself – perhaps attach a lightbox to it, have it change colors on mouseover, etc. But I’m sure I can figure that out. 🙂

  • Hi Shane,

    thanks for that. Very instructive and motivating.

    Haven’t done much with “inspect” so far and will use it for some inspiration here or there 🙂

    Keep these videos coming.

    • Hi John,

      Yes, I inspected the background and downloaded the image. I have to add though: for anything other than demonstration purposes, I would never do this. Image copyright is a touchy subject and you could line yourself up for getting sued if you just use and publish images you find anywhere online.

  • FYI – Most browsers have add ons that let you very easily find the colors and fonts of a website. For example, in Firefox, I use ColorZilla to find colors and Font Finder to find fonts. Much easier than using Inspect Element in my opinion.

  • Honestly, I haven’t found a page I wanted to duplicate that I couldn’t copy with Thrive. I’m glad you demonstrated the global settings. That will save me some time.

  • I love these demonstration videos that show what’s possible. Videos like this are what sold me on a Thrive Membership in the first place, and why I have very little temptation to look at any other solutions.

    • Thank you for your comment, Mike! I’m happy to know that our tutorials have been useful for you. 🙂

  • Great video, thanks. I was thinking that it would be great also to be able to offer more flexible menus for standard and hybrid homepages, as well as more styling options for blog single pages and blog pages. Great stuff though.

    • Thank you for the suggestions! Can you elaborate on what you’d want those flexible menus to display?

  • I love these kinds of examples. Especially when they include shortcuts to Thrive features. One thing I would like to see is an example of is how to create unique/fancy section divider styles and add them to your pages?

    • Thanks for your comment, Gary! I’ll see if this is something we can incorporate in a future tutorial.

    • Please check in your plugins list to see if you have the latest version of the plugin. If you do and you can’t find this template, please post in our support forum for help.

  • The content reveal is awesome but I’d love a cookie element that would automatically show the hidden content on a visitors second visit to the website…

    For example firs time a visitor sees my VSL I want the buy button hidden… If they decide to come back later and buy I’d like it automatically revealed so they dont have to watch the page for 10+ minutes all over again!

    I’m also having a hard time figuring out at the make a page with content areas 100% wide so images load true left or right of a page and not just within the middle content area.

    PUMPED you’re beefing this up as it’s the one tool I use every day!!

    • Thanks for your comment, Derek!

      Interesting point about the content reveal. It’s a detail but I see how that would make sense.

      The full width backgrounds are a bit tricky: if you aren’t using a Thrive Theme, then we can’t really “know” the page layout your theme creates. Basically, all our plugin can see is the content area and the rest is up to the theme. So, trying to create a full width section in a theme that isn’t ours is something that we unfortunately can’t do.

  • How do you set the background image to always fill the screen regardless of the end user’s screen resolution? I believe the way you added specific pixel settings will only work well for one specific screen resolution.

    • That’s correct, yes. There is a way to create a section that will match the height of the visitor’s viewport, but until recently, this wasn’t well supported in all browsers. However, this has changed and we’re now working on some updates that would include this as an option. For the time being, I recommend the approach I show in the video, which will still look fine on most screen sizes as long as the margins aren’t excessive.

  • Is it possible (yet) to test one landing page against another just using Thrive Themes ( eg not relying on VWO or Optimizely?) I know Thrive Leads have good built in split testing, I wondered if this is a feature you’re working on?

    I can see leaving this to those other tools…however trying to use Thrive Landing pages vs. LeadPages — many clients like that LeadPages have the A/B testing built in.

  • Hey Shane, LOVE Thrive and recommend it all the time… My #1 wish for the content builder is to NOT create new text box elements when I copy/paste text with line breaks. I wind up having to do a “paste without formatting” (CMD + SHIFT +V), which removes the line breaks. Then I have to go in and manually put in CTRL+SHIFT+RETURN line breaks in my copy. HUGE hassle, especially on long sales pages. I don’t want ever single paragraph in its own text box—that’s too many page elements to screw around with. PLEASE fix this!

    • Hey Josh,

      Thank you for your comment! Loved your Thrive Leads case study! 🙂

      Funnily enough, I had a conversation with our developers about exactly this issue today. Making this change has more knock-on effects than one would think, but it’s something we want to add in a coming update. I agree that it would be cleaner to have multiple paragraphs grouped in a single text element.

    • Hello Guy,

      You can set a hover color for the button (in the color settings). There’s no animation for the hover transition, though.

  • Shane, one thing I’d really like to see in Thrive is an export to static HTML feature. Sometimes speed is essential and a full WordPress install is overkill, but I still want to use a page I designed in Thrive. It would be nice to simply export the HTML, CSS files, and images into a zip let’s say, and then I can just put that outside of WordPress.

    • Thank you for the suggestion, David!

      If you’re using Thrive Landing Pages, the “bulk” of the WordPress site behind your page should really have very little impact on the loading speed of the landing page. We completely override almost everything that is usually loaded on a default WordPress page.

  • Hi Shane,

    Great video! In your video you used a Style 6 content box. I hope a future release of Thrive Content Builder will have the ability to remove the border outline of the content box. For now, I have to inspect the element and remove the border with custom CSS rules. Other than that, keep up the great work over there. I noticed you guys are growing in popularity based on your Theme Rankings! Great job!

    • Thanks for your comment, Richard! I agree that content boxes need an update in general, as the current style choices are too restrictive.

  • Great job 🙂
    Perhaps, I would have been able to replicate the demo page with Thrive Content Builder but shurely much more complicated in doing.

    A page I would like to have as a content builder template is the following:
    http://wlm.kunden-erfahrungen.com/

    P.S. What’s about Google compliance of pages, built with Thrive content builder?

    Thank you
    Helmut

      • Helmut,
        You can create a similar page easily just like Shane showed in this video.
        Choose your image for your background image.
        Then add in the container and then add your boxes inside of the container.
        Here is a page I am working on for one of my clients which is similar in the set up but not of course, in the content:) It is not finished yet: http://www.sarasotaflhousevalues.com/about/

  • Awesome topic! Many of times clients askme to replicate something they have seen on the web and this is a great way to do just that. Thank you Shane.

  • Hi Shane.

    Great video! And thanks for all the great content and an awesome tool you are providing!

    My question is maybe weird, but, in tabbed content, it would be great if the Tabs could be filled with an image instead of the color etc.

    • Thank you for the suggestion, Jamie! Do you have an example site where you’ve seen this kind of design?

  • How do we create landing pages that includes sections with 2-columns and alternating color backgrounds for text and images, with a solid color background behind them? Something like this: http://backlinko.com/link-building. These look really great and seem quite popular. Thanks!