landing page

How To Build a Landing Page From Scratch

Written by admin

How To Build a Landing Page From Scratch: This is a demonstration of thrive landing pages, and the purpose here is I want to show you a very practical example of How To Build a Landing Page From Scratch to create a 100% custom-designed page.

so you’re really not tied to the page templates that you already find in the plugin. I’ll be showing you and walking you through this demonstration, so this was based on a request that we got someone sent us this landing page here and said hey I would love to have a template like this I’d love to be able to make a page like this in thrive landing pages and this is a landing page that was created by landingpagebdjob4u.com, and it is a very nice-looking landing page.

So we’ve got this landing page right here, it has a two-step opt-in process, like this we’ve got an article. we’ve got a lot of interesting elements and it’s just an overall really nicely designed page and so when I got this request, I thought well you know indeed this is a great page, but you know what you can already build this, like everything you need to build this page is already available in thrive landing pages you don’t actually have to wait for us to build a template like this.

so what we’ll do here is we’ll start with this blank page on a WordPress site, that has thrived landing pages installed and we’ll we’ve opened this in the thrive content builder we go to thrive landing pages. we click on the choose landing page and we just pick a template to start with now we could pick a template that already looks kind of similar, but what I’m actually going to do, I’m going to pick a really minimal template all. I’m going to do is I’m going to make sure that the template, I pick is a two-step template already that saves a bit of work right but, I’m going to pick this landing page here and load it and this is deliberately a landing page that doesn’t look similar to this one at all because I really want to show you that you can build this stuff from scratch and you can customize everything.

How To Build a Landing Page From Scratch, so let’s get started well at the top here we have a dark background and this WP elevation logo in the middle and by the way, I’m not going to create an exact replica of this, I’m just going to eyeball it, so, for example, we have this top section this is a page section you could also insert this if it wasn’t there yet and I simply go to the color options and I’m just going to pick you to know a darkish almost black color, I’m not going to exactly you know to find out what color that is and so on you could do that but I’m just going to eyeball it to keep this article a bit shorter.

Okay, we also have a logo image here, this is just an image, we’re going to Center align it, and then we’re going to click on change image this takes us to the WordPress media manager, here you can upload you can drag and drop files in here to upload them. I’ve already done that to save some time, so here’s the logo we want it’s not the right size yet. so let’s say it’s maybe 240 pixels wide or so something like that right, so we can easily change the size and by entering a value here or using this slider and so we set the size another thing that you might want to do and adjust here is the margins.

So maybe I want a bit more space at the top here a bit more space at the bottom maybe something like this and this is what we get right, so that’s you know an equivalent of the very top of the page here, next we have this blue background section. so let’s get started with that we’ll go to page sections drag that in here and then click on the page section that idea I’m going to do two things first I’m going to change the background color of this page section to you know a darkish blue maybe like this, I’ll explain why in a second because of the second thing.

How To Build a Landing Page From Scratch free tips here

I’m going to do is, I’m going to add a background image and I’ve already uploaded this one set this background image which completely covers the background color another thing, I’m going to do by the way if you see this here when I scroll the background image say static right and we can also replicate that no problem clicks on this page section and I go static image and now we’ll have the same effect you scroll through the page the image is static in the background.

now the reason I added a background color and then the image on top is because when someone comes to this page with a slow internet connection the background color will be visible immediately, but it might take a few seconds for the background image to load and I want to make sure that we’re going to have white text here and if we have a blue background color that loads immediately the text will be immediately readable whereas, if we have a light background color then some people might have to wait until that background image loads before they can actually read this text. now let’s have this title, so first I’m going to select the text that’s already in here and turn it into a heading an h1 heading and

How To Build a Landing Page From Scratch, I’m going to Center align it and I’m going to make it white text color white and we go I’m also going to make it bold and I’m going to copy, I’m just going to copy all this text here the heading text and then paste it in here like this and already we have something quite similar, but as you can see two things that stand out to me again, we’re already going to eyeball this, I’m not going to try and make exact replica things that sent out to me this is the heading here is larger and it has more line-height there’s more space between the two lines, than here right so let’s make those changes.

we select this font size let’s try 45 it’s closer and then line height here, I’m actually going to change this to e M and the e M is a relative line height I prefer working with this and that’s too much. so maybe 1.3 that’s about right okay, so there we go we’ve got the same kind of heading and the next element is this content box and what we want is we want one without a headline what a very simple one and I think style six here is pretty good for that.

So this looks horrible in red of course, but we click on oops we click on the content box and we start changing the colors. so you want a white background simple enough and we also want a white border because, we don’t really want a border at all, so it’s all white now next we want to have a border-radius because just a slight one as you can see here. we’ve got a slightly rounded border and you can also see here there’s a shadow there’s a bit of a box shadow here and we can do that too. ¬†Build a Landing Page From Scratch.

so we go back into the color options and for shadows. we want an external shadow and you can see right, now we see a very strong shadow now what I recommend to do with shadows is use black is usually a good choice for a shadow color, but just change the opacity, so we want to make it a very subtle black. so maybe you know 15% because we don’t want to have you know this is a nice subtle effect that just slightly, slightly lifts that box visually and

we don’t want an in-your-face look at me, I’m a shadow kind of effect next let’s go through the content inside this content box and as you can see, we’ve got two columns one of them has text and a bullet point list in it the other has an article and a button. so we’ll start by getting a column layout two columns dropping it in here and we can get rid of this paragraph here and then what I’m going to do is, we’re going to copy this text and paste it in here and then you can see right away that the text is too small it’s much larger on this page now one of the things, I could do is I could just select this text and change the font size here however if we look at this page, we can see that all of them that’s a paragraph takes the body text all of it is larger right the text here is also larger and

so on so instead of changing an individual paragraph I can go to landing page settings and landing page fonts and here I can change the paragraph font size and it’s something like 24 pixels probably right let’s see that looks about right line-height is a bit too much right now, so let’s change that to maybe 28 something like that okay, so now we’ve just changed paragraphs in general and I don’t have to go and edit each individual one next we have a styled list with checkmarks. so we add this close enough to be the same thing we change the color here to this, oh that was the wrong thing I just changed the color of this point here actually let me get rid of this one is anyway.

I want to make sure that it’s like the whole bullet point thing, so I can change the color of this icon that’s what I wanted to go for, and then okay same thing again right I copy this text and I paste it in here and we also have a bolded part, so I select this part make it bold and then to save time, I’m just going to duplicate this right. I’m going to go duplicate and you know I could copy the other ones but you get the idea, I’m also going to duplicate this paragraph here drag it to the bottom, and then again we have a line of text. I’m going to copy it paste it in here make the bold part bold there we go that’s the left side replicated now on the right side we have an article.

so let’s scroll down and get the responsive article to embed drop that in here get rid of the text, now I’m just going to grab you could either you can either use Vimeo or YouTube embeds right here. I’m going to do a YouTube embed or you can embed anything using a custom HTML element. so that would be further up in the list here we have custom HTML that’s also something you can use to embed the article. I’ll just grab one of our articles put it in here.

we want to hide the related article at the end, we want to hide the player controls maybe hide the title bar you can also make it autoplay I think on this page the auto plays you can do all that tweak all those settings no problem. I’m gonna get the button now this is one of the reasons, I kept this stuff here is we already have a button on this actually let’s save the changes and look at the preview in the original template that I loaded even though it was a completely different template, we already have a two-step process and so we already have a button that opens up this lightbox and

So we can also manually create that but to save time, I’m just going to use this button right here okay. so I’m going to use this element from the template to save a bit of time, I’m going to change the button color and you know this is our teal color it’s not exactly the same as this you can go in you know, if you want to make an exact replica, I can go in change all of these colors here manually no problem again to keep the article, short I’m not going to do that then one thing I want to do is you can see here this is kind of misaligned right the text is up here and then the tutorial is a bit further down looks a bit strange.

So I click on the tutorial and I remove that top margin, I set that to zero, and that makes a nicer alignment inside this box alright now, if we look at this you know there are a couple of things that, we could still tweak for example the spaces above and below this heading and also you see this line here I mean this is a small detail but I want to show you how to how to create that. so let’s get back into it first of all here that’s again a question of margins, I click on the heading and I go to margins and padding and so maybe I want a bit less at the top bit more at the bottom maybe even more right and you can just adjust this play around with it until you like what you see but now let’s look at this line this is we can just use a page section for that because.

We want a line that goes across the entire screen and that’s the kind of thing that page sections are for. so I take a page section I added after this top section right here and I’ll give it the color that I want and it’s just going to be some shade of blue and we see some light shade of blue try not to put too much work into getting this right something like this yeah close enough. so I save that and then I remove the content from within this page section.

So I want to get rid of this it’s too thick now though, so I click on the page section and once again we go into margins and padding we see that it has the top and bottom margins of 20 pixels each or padding I should say if I reduce this to something like 2 pixels each there we go we have a thin line at the top, so as you can see we’re getting pretty close to what this template looks like, so next up let’s go down here we have a second section with some prizes.

So let’s go there we have a heading, I’m going to copy this text prizes up for grabs and then we go here and we add a heading right we want some text here and I think at this point I don’t need any of this original content anymore. so I’m just going to remove both of these columns get rid of that okay and then we have a heading here we want to make that a heading 2 we should only have one h1 heading on the page and I paste the text in here rise up for grabs and well let’s see what else do we have we want to make this larger I think it’s more like this maybe probably also bold like this the colors also not quite right.

So let’s select this and choose a darker color like this, I’m going to save it as a favor because, I want to probably reuse it again there we go prizes up for grabs, and then we have another line of text and you know obviously you can just you can write this text yourself, I’m just doing all this copy-pasting here to save time and keep this tutorial a bit shorter, so same thing here I paste the text I centreline it and now okay a couple of things first of all same thing here with the text, I’m going to select this change the color makes it a bit darker like this but you’ll see that it’s taking up too much space out on this page here you can see that it’s like a line break here now and it looks nicer because of that now it would be a mistake to just say okay.

I’m just going to insert the line break here because on mobile devices on different screen sizes is going to start looking weird. so the thing we do instead is we use a content container and we just drop that in here, I’m going to show you I will drag the content, we have into this content container I’ll get rid of this dummy content and it’s Grisha’s it up like this and put it on the side which isn’t nice but then I click on the content container, I Center align this whole thing and I change the width to something like 900 is my guess and

there we go now, we have the same kind of effect but it will look great on all mobile devices it will always be centralized there won’t be any weird line breaks and so on now the other thing is that you know just again with spaces right we just have more space around this text, so I go here margins and padding make more space at the top make more space at the bottom, you get the idea right we can play around with these details, but I don’t want to spend too much time on that next we have this bit.

so we have a dotted border here or a dashed border and then we have this here and what we have here is really just a three-column layout right three columns one with an image one with text one with more text. so let’s get into it first of all borders dividers we call them we have a divider style like this it’s pretty close right it’s a bit much space at the top, if we go like this and then we have three columns, so column layout three columns go here and now I want to show you something that’s quite an important thing for your like workflow what, I’m going to do is I’m going to just do one of these rows of three columns first.

So I’ll add the image select this insert it and even though this image spans the whole width here I’m going to Center align it and you’ll see soon why and then we have some text now you don’t have to watch me type all this text, so I’m just going to cut too after I copy-pasted all this alright, so I pasted the text in here we want to make a few adjustments to make this look nice first of all let’s work on this last bit of text here that says value that price and so a few things, first of all, we select this and it’s larger than the other text.

So maybe this is more like 29 pixels or so we make it bold and we make it a different color and we also Center align it and again you’ll see in a moment why I’m centering stuff even though it doesn’t seem to make a big difference here another thing is that these don’t look very nicely aligned with each other right now and so we’re going to again go and play with the margins and padding we’re going to remove the top margin where we’re going to add a bit of a top margin here maybe add 10 pixels here and here and here is also a line-height issue I think. so to make this use up a bit more space and look make it look a bit better here let’s change that to 32 maybe even more 35 something like this. so it just looks nicer right okay, so that’s our layout done, and here’s the reason why I did this one first because now I can just duplicate this entire row of columns.

So as you can see, if I’m in here this would duplicate the image but if I go from the outside the border is around the whole thing if I duplicate this now, I have the whole thing duplicated and I’m going to skip past you know, I upload to change the image do all that change the text it’s very simple right you click on the image click on change image select the other one and I’ll skip all that right you can see how that’s just a faster way to get this kind of layout done another thing again margins right.

we can tweak this to make this look a bit nicer it’s maybe something like this all right and then we have now we get to the last section on the page or partners, so what do we have here this is a page section again light gray page sections, so let’s go down get the page section put it in here and it is lighter gray I think let’s change that a bit like this we have text that says our partners in all caps like this and then with logos here there are two things you can do you can upload one single image that’s wide with all the logos but for mobile devices probably going to be better if we do a three-column layout with these logos.

So go ahead and do that once again we add three columns and each column will have an image, so go image image image now we get rid of the text, so okay and then we add the media so very simple I select the logo and I’ll just add all three images first and you can see that we have a bit of a problem here it doesn’t look very nice alright this again like the sizes are different it looks a bit weird first of all let’s centreline all of them and this one I’m going to central line them even again even if it’s not really necessary then let’s change the sizes.

So this one’s too big let’s change it let’s say 240 maybe it’s decent and then I’ll try making this one the same size to see what that looks like 240 okay that’s better, but there’s still a bit out of line with each other. so I’m going to just bump this one down a bit maybe like this and then it looks much nicer alright one last detail. we have another like border here and to do that we can copy the one we already created up here let me see if I can grab it and duplicate it and then I’m going to carry this down and put it above this click on it and

change the color to well a darker shade of grey you would have to be, so slightly darker shade of grey maybe like this all right, all right yeah let’s save our progress got a reminder there okay and there we go that is pretty much the page replicated. so let’s save these changes again and look at the preview, so I could do more tweaking again, I think I hope you’ve seen you know if we look at details you probably see like you know the spacing between elements is a bit different but, I hope you’ve seen with the example I’ve shown you that that you can actually make all those changes.

So the small differences you see between these pages are all differences that you can change depending on how much time you want to invest, into tweaking small details. so let’s preview this page there we go this is our replica landing page as you can see it’s really a very, very close match to the original this is the one we built right now and another really cool thing is that this is a mobile responsive page.

So if I look at this on a smaller screen like this everything readjusts automatically you can see the text arranging the elements arrange one of the things, I could do here is increase the because this breaks on the two lines, and here’s where you see why I central line these logos and central line these images and central line this text, for example, because even though at the full view at the full width it doesn’t seem to make a difference right whether this is, Center aligned or not but on a smaller screen it can you know start looking a bit weird. if this is not centralized, my opinion looks better like this but that’s just something to keep in mind like while you’re editing in your full-screen view always keep in mind. How To Build a Landing Page From Scratch.

You know what will this be like on a smaller screen and sometimes that helps you make better decisions about the layout now a last point about the page is that we have this two-step lightbox and I don’t want to take too much time but I just want to quickly show you on our replica page, we have one as well doesn’t look exactly the same and you know the editing of this lightbox is the same story as we’ve just looked at. so you can go to the event manager and here you’ll see that it has an event on the click it opens this lightbox and How To Build a Landing Page From Scratch

I can click on edit the lightbox and here I can you know use exactly the same elements all of the same tricks, I just showed you to change what this lightbox looks like for example, you can see here in this lightbox. we’ve got a progress bar that says 50% complete that’s something, we can do in this case it’s just an image actually. so you could upload an image very simple we have something even cooler actually you can go to data elements and get a progress bar here place that here and then make some changes here. How To Build a Landing Page From Scratch.

So we change the color first of all to match you know to kind of match the rest of the page and then we have data settings. so here it said 50% complete, so we can replicate that fielding percentage 50 label font size is probably a bit smaller maybe like this and so this is how you can kind of create a progress bar now the cool thing is this progress bar will actually animate. so if you preview this you can see when the lightbox opens this will animate and that makes it a bit more eye-catching and yeah everything else you see here you can change the border and rounded boards you can add icons all that stuff I think we don’t have to go through that again the article is already long enough. How To Build a Landing Page From Scratch,

so with at I hope you’ve gotten a good idea of how you can create 100% custom, content 100% custom landing pages and how if you see a landing page you like you you know go ahead and ask us to go ahead and recommend it to us and say hey here’s a cool landing page that’s always good for us to see, but you can probably go ahead and build that landing page right away with the tools and thrive landing pages and thrive content builder. Thanks for reading for more tutorial. How To Build a Landing Page From Scratch

 

About the author

admin

Leave a Comment