Step by Step: How to Build an Image Background Landing Page from Scratch
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.
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!