How to design a landing page with WordPress | Divi Theme Tutorial

hello everyone and welcome in today's video i'm going to show you step by step how to create this landing page for your freelance design business or even your design agency so this is what it looks like so pretty much it's an image of my city here uh it also has what you what you do it has the team and notice here when i mouse over these images it has a bit of color to it okay so moving on we also have this section here which talks about the story and then finally we have this get in touch which also has this image that comes to life when i mouse over it okay and then over here we have the contact form and also this address all right so let me show you how to design this coming up hello everyone and welcome my name is mack and as i mentioned i'm going to be showing you step by step how to create this landing page for your design agency or even as a freelance designer this is a nice easy simple layout and it's very very clean so i want to show you step by step how to create this but before we get started there's two things i want to talk about first of all i want to talk about this divi design guide now i created this dv design guide it's absolutely free and this is what i'm going to be using to create this landing page it has these buttons that i've already created ahead of time so you don't have to go in and create these buttons so you can see here we have different styles and then over here we also have blurbs this one here works on the dark background and this one here works on a light background moving forward we also have this paragraph text that's already designed for you you don't have to go in and mess around with any sizes or line heights or any of that sort now moving on we also have this call to action and again this one here works on a dark background this one works on a light background and we also have this image now remember on this landing page i showed you how when i mouse over this image it comes to life now this is a pre-design if i mouse over here you can see it once you install this dv design guide it's going to have everything that you need you don't have to go in and design anything now here we also have this contact form so you have this one here which has the outlines and this one here has a dark background so pretty much this is absolutely free now the second thing i want to talk about is the bonus if you buy divi using my affiliate link i will give you access to my web design formula course the course that teaches you how to design professional looking websites with divi all you have to do is to buy it using my affiliate link and then head over to funnels2income.com on the bottom right there's a chat bubble just click on that and send me your receipt number that's all you need to do all right so without wasting a lot of time let's dive in and let me show you how to design this layout all right so right now i'm in the admin dashboard of my website so what is important is when you design any pages or when you start working on your website you need to have most of your elements ready so in this case i need all my images right beforehand before i start designing this page so i use a plugin called instant images and if i come over here to media you can see i've installed it's called instant images now what this plugin does is it allows you to download images from unsplash.com this is a place where you can download high quality images they're all royalty free and you can use them on your website so what i'm going to look for here is just a picture of an office so i'm just going to search for office and as i mentioned before these are all royalty free you can use these uh as many times as you want without any need for license all right so what i'm going to do here is to just look for an image that's going to work really well for a background design so i'm going to click on this one here because i think this one here will work great and i think i'll also go with this one as well i like the mood you know everyone is laughing so this is the impression that we want to give to the visitors of our site so i'm going to download this one as well now the good thing about this plugin as well is it downloads all the images into your media library which means they're very easy to find and pretty much they're all already cropped and once downloaded you're going to see that we have a check mark over here and now you see we also have another one here so i'm pretty much ready to go okay so the next thing i want to talk about is the dv design guide which i've created and i'm giving away absolutely free and i know i spoke about it briefly in the beginning of the video but i just want to go through this one more time and this is what it is so you can see here i've created these buttons here so these are just different styles which once imported onto your website you can use or choose whichever one you want to go with so here is button one button two button three and then over here we also have the blurbs we have this very first one here which is ideal on a light background now this one here is just a different style now moving on we also have some paragraph text this one here is ideal for a dark background and this one here is for a light background now moving on we also have some call to actions in case you want to add any call to actions on your site we also have some images now this one here has a hover effect so when i mouse over here you can see that the color comes on but normally it's black and white and then this one here has a drop shadow and then finally we have contact forms and you can see here they're pretty much stylized and it's not your stock contact form that comes with divi all right so um this is the uh divi design guide it's absolutely free i'm gonna add a link in the video description below you can go ahead download it install it on your website and start using it next i'm going to show you now how to install this tv design guide all right so i'm going to come back over here now and let's create a brand new page so i'm going to come over here to pages and click on add new now ideally you want to give your name your page a name so let's say you call it something like style because you want to go in and make some change to this every now and again and not just leave it as it is so this will be the central place that you can come in and do those changes so i'm just going to call this style 0 0 because i already have this page on my side all right so i'm going to click here on use divi builder so this is pretty much your normal way of designing your website you go into the builder and in this case we want to build everything from scratch so i'm going to click here on start building now instead of just going in and start building this is where now we need to install our dv design guide which is this one right here okay so over here in your case you would have gone on to my website downloaded it and it's a json file so all you need to do is to come to these three little dots on the bottom here click on portability which is these two arrows one pointing up one pointing down and then click on import navigate to that file by clicking here which is no file selected now mine is my downloads folder and it should look something like let's see where it is there we go so free dv design guide so you click on that click open and then it gets imported now once it gets imported you're going to have access to the all these designs so i've already gone ahead and imported it in fact i think i've done it twice so uh but anyway it's not a problem now let's start designing our landing page so i'm gonna come back over here to my dashboard i'm just gonna say discard and exit so over here on my dashboard i just want to create a new page by clicking here on add new we're going to give this page a name so let's get rid of the gutenberg editor here so i'm going to call it my landing page but of course you can name this whatever you want let's just put a capital p here so that everything is all consistent okay so next i'm going to click on use dv builder and i'm going to start building this page from scratch so i'm going to click here on start building right so the very first thing we need to add here is a full width header so i'm going to come over here to pull with and then choose full width header and by default this is the style that comes with this design so we want to go in and change all these elements and make it look like our own design next i'm going to come over here to lorem 2 because i want to be able to use some dummy text because i hate typing i'm a very slow typer in fact i keep procrastinating i keep saying i need to learn how to type fast but anyway that time will come okay so i'm going to copy a bit of text here and this is going to work as my dummy text but i'm not going to use it yet because what we're going to do here is to add our main a name for our website over here on the top so we could call this mac designs or mac studios whatever it is and then over here i'm gonna state where this is situated which is birmingham in my case okay so pretty much that's the location and then i'm just to delete this text over here so all i have now is mac designs birmingham now this button here to be honest we don't really need it but if you want to add a call to action on your uh landing page you can go ahead and add it so in this case i'm just going to go ahead and delete this text and this gets rid of the button so now all i have is just mag designs birmingham but as you can see here this design doesn't look great we really need to go in and stylize this text so let's go ahead now and click design and what i usually do here is i click on this paint brush tool and this will just take me directly to the element that i need to make my changes to so in this case let's add our font here for our heading so let's go with monster ad and then let's make this bold or in fact we could go for ultra bold we want it nice and bold it's a big statement that we need to make here and uh let's give it a color as well so i'm going to give this a really bright red so i'm going to drag this all the way to the top there okay so i've given it the color i'm also going to center it because i prefer to have my design all centered and then what i'm going to do next here is just to make this text nice and big okay so we're going to go with 88 in fact you know what we are going to add some letter spacing here uh because i love intel letter spacing i'm going to use this as my design element okay so i've got my letter spacing now so that looks great next i'm going to work on the title here i mean the area where i am which is birmingham so again i'm going to center it and we're going to change this to monsterat and we're going to increase the size a little bit not too much so i'm going to go with 20 and just making sure it's all caps here now i'm also going to add some little spacing here okay so this time i'm going to go with 16 okay so that's looking great let's make this bold there we go so now it's looking bold uh so what i may also need to do here is to add some line height just to separate the two so i'm going to go with about 2.4 and that's already starting to take shape now over here on the color let's go back in here and really bright in this red okay that that's looking much better now so all i've done here is i've moved the slider all the way up so i'm pretty much happy with that so the next step now is to just make sure our layout is full screen so i'm going to come over here on layout and make full screen so now my design is pretty much full screen and this is how i want it all right so now that i have this i can also add a scroll scroll down button which i can just activate by coming over here and this is what it looks like now as you can see there's several styles there's also that one here that you can go with so pretty much i'm going to leave that as it is i think that looks great if you want to change the color as well of this button here or this uh this icon you can change it by coming over here but we're not going to do that next i'm going to now add my background image okay so let's go ahead and do that so uh i'm going to go back over here to content click on background so first of all my uh background that i'm going to add here is going to be a gradient so i'm going to start off by clicking here on the second tab and then clicking on this plus button so my first color here is going to be black and i'm also going to be playing around here with the gradients so i know i've added these two colors here already next i'm going to add my image now by coming over here now the image i'm going to add is pretty much an image of the city itself so i know this is not birmingham by the way but that's that's the one i could find so i'm going to go ahead and click upload an image and you can see here it looks very beautiful i mean i really like this image here and it works with the style that i'm going here with my site so what i'm going to do now while my image is selected here is to go over here to my blending mode and i am going to choose uh multiply okay so you may be thinking well mac everything is gone it's gone black what's the what's going on well what we need to do now is to come to the second tab and this is where we're going to start adding on transparency so i'm just going to drag this down a little bit and you can see as i'm dragging this now it's starting to reveal my image there in the background and i really really like this it's a subtle design but it's showing now my image so i'm just going to bring it down to about uh 0.25 now the bottom here to be honest i think it's fine i don't need to make any changes to this i really like the darkness here it's it's blending into the mac designs here on the top now if you don't really like color over here you can just make it white as well that pretty much works you can reverse this and have this in red if you wanted to so pretty much i'm done here with my design i'm going to save this now i can see here i have a section that uh that was here by default on the top i'm just going to delete that okay now let's start adding all our elements so i'm going to come over here and click on this plus button so now we're going to add another section now this section here is going to have our title which introduces it to the content on that particular section so i'm going to go here with a single uh row and in that row i'm going to add some text so i'm just going to search for text here and select it right so as you can see here the text that i have is pretty much generic now this is where the style guide comes in so if i come back over here you notice that we have this text here as our paragraph right this is monsterat i've already given it a size and it also has the color that i need so back over here all i have to do now is to go to my presets and then i can just go with uh paragraph one because this is monster x you can see here it's changed right away i didn't need to go into the design to make all those changes there okay so now let me title this so i'm just going to say what we do here we go now i'm going to come over here to design and let's center this text by just scrolling over here and centering it and what i'm also going to do here is to just give it a bit of [Music] letter spacing because we've used letter spacing here as our design element so we might as well be consistent with it so next i'm just going to make this bold by coming over here right so i really like that that's what i'm going to go with and i'm also going to make sure i add this style on each section that i'm working on all right so now it's time to save next i'm going to come over here now to my section settings and again there's also a preset over here and this preset is section padding so if i go ahead and select that this now is going to give me some padding here which is pretty much great because it gives me enough breathing space on my section so the next thing i'm going to do now is to add another row so i'm going to click here and add three columns right so in this row we're going to have blurbs so i'm going to search for my first blurb and here it is i'm going to go ahead and select this element now you can see here it comes in with my uh monsterat text and everything is pretty much in place it's saving me a lot of time to go in and make changes to this so i'm going to come over here and activate my icon and the icon i'm going to go with is let's see right let's take this one here okay let's go with that so that's going to be my icon that i'm going to use and pretty much i'm done i don't need to do anything else here but if you want to change this and give it you know a different look you can go to blurb2 okay so here it is and this is what it looks like so this could be the style that you may want to go with and to make changes to this for the background is very very easy all you have to do is to come over here to background and you can just change this by just making it black okay so i'm going to save this now what you need to do is of course this is a template you want to go in and add your own text in here so let's just uh do that by just using some dummy text here so i'm just gonna copy a bit of text here which is gonna act as my title so i'm gonna paste it in here then back over here i'm just gonna copy a paragraph and paste it in place like that okay so pretty much that's my uh contents i'm going to save this and then what you may want to do here to make things quicker is to duplicate this twice and then just drag this into position like that and then drag the other one into the third column so pretty much we're done all you have to do now is to go into this one here and make some changes to it and also change the title so i'm going to come over here and let's change the second one here and this is going to be our title i'm going to leave the description here as it is and we just need to change the icon here so so that's uh photography let's add film let's save that one here and then we're going to go into the next one so here we also need to change the title so we're going to go with let's go with this i'm going to paste it in here and now let's change the icon and what icon should we add here right let's go with this one here okay so now i'm going to save so there's a slight thing that we need to change here and this is the line height over here so what i'm going to do is i'm going to hold down my command key and select all three of them okay this is multi-select by the way if i click here now on this gear icon i can go in and make some changes to this particular text here and what we need to do is to add a bit of line height so we're going to go with 1.2 and we may increase it if we need to so let's try 1.4 save okay as you can see that's looking better and because i used multi-select all my changes have been added onto this right away great so now we have our title here and as i'm looking at the title it looks like it's overpowered it's way too small uh let's go back in and make it slightly bigger by clicking here and uh design text and let's just increase this a little bit let's go to 20. yeah i think 20 works better all right so i'm happy with that now i am going to uh save changes right so let's just take a quick look here so we can see here we have our main design as i scroll down we have what we do okay so that's looking great now what i may also want to do here is to maybe increase the size a little bit it looks like everything is all squashed now these are the decisions that you're going to be making as you're designing your website so we might as well go ahead and do this right now so i'm going to click here on row settings and let's go to sizing and right now we are on 80 so let's um let's make sure our maximum width here is also 80 there we go so that's looking better now what i also want to do here is to reduce the gutter width now the gutter width is a space between the columns so let's reduce that a little bit okay so that's looking better now and now let's save okay there we go so i really like this now as you can see it's taking up a bit more space and this is going to be down to standard throughout my site all right so now we're done with this let's move on to the next section so i'm gonna click here on this plus button here go to uh regular now the next section i'm gonna add is going to have all our team so i'm gonna go with four columns here because all the team members are going to be in this column here so the first one i'm going to add here is an image so i'm going to go ahead and select it now i already have all my images in the media library and you can see here that if i click here these are the images right so i'm going to start with this guy here click upload an image and the style that i have here has a drop shadow now that's not what we want but we're going to change this in a moment so what i'm going to do now is to come over here to my preset and i'm going to go with the image 2 and you can see here that this is going to change this to black and white okay so this is the beauty of using these uh the dv design guide so you don't have to go in and make any changes to this everything is all set for you so this is the one that we've just selected all right so back over here now that i've selected this image i'm going to hit save and then i'm just going to duplicate this a few times and drag this image into position okay so this one is to come over here and then this last one needs to come over here okay now you know what we did before on this row we made it bigger we made it 80 width so what we're going to do is we're just going to copy the styles here so i'm just going to go to copy row styles come to the bottom one here right click and then paste row styles look at that that's just really fast i didn't need to spend so much time working on this all this now is consistent which is really cool now the next step now is to just come over here to my section settings so the first thing i need to do is to add my um my padding so i'm going to go with section padding and i'm going to add a background color and i'm going to go with black so now you can see that everything is really going dark but of course we're going to go in and change these images so let's start here with the second one so i'm going to go in here and just replace this with the right image click upload save that come over here and change this add this guy here save that and then the final one is this lady right here there we go so all my images are in now what's missing is the title of this section so i'm going to come to the top here and this one here which says what we do is the one that we want so duplicate this and then just drag it down here i'm going to drag it all the way down and let go so i'm just going to go in here and you say meet the team there we go meet the team now the color here looks great as well so i might as well leave it like that it's very subtle and i really like the way it's looking all right so what we're going to do now is we're going to go in and add our text module so i'm just going to go here and search for my text module and select it okay so now that we have this here let's add our name so this is going to be joe and then over here on the top i can use paragraph one and we can see here that the name has just gone in and it's looking uh okay but you know what i need to make it slightly bigger because this is only paragraph text so i'm going to come over here to design text and it's always great to center this because everything else is centered we're going to make it all caps and we're going to increase the size a little bit so let's go with 18 and we might as well make it a bit bold so it's easier to read so let's go with semi bold okay i like that and the color let's go with white this time okay all right so now that we have the name there we just need to add a bit of letter spacing let's go with about eight and pretty much i'm happy with that i'm gonna save now all i have to do is to duplicate this a few times and then just drag it over here now you can see here that this is saving me a lot of time because otherwise i'll be going in here and spending so much time trying to uh customize this all right let's add this here so all i have to do now is to uh drag this into position and then rename them all right so uh this could be emma and this guy here could be jack and then this lady here could be susan there we go right so that section here is looking really really great i mean as you can see it's very minimal and i'm not really going crazy here with the design it's just very very simple now once i save this page when we mouse over here you're going to see that the color is going to shift into a color just just as it is here you know on this tv design guide there we go all right so let's move on uh let's add another section and this time we're going to have a call to action and perhaps maybe even a video all right so let's click here on this plus button let's go with regular and i'm gonna have a two-thirds one-third column here so i'm gonna go ahead and select this one and on this side we're going to have a video so this video here could be a promo video for your company or whatever it is so uh it's really cool to have one of these here on your website if you do have one but you can just leave this as a call to action now it doesn't really matter all right so i have the video here now straight away what i like doing here is to add an overlay image so i'm going to come over here to overlay and then click on this plus button here and choose the image so the image i'm going to go with is this one here so that's going to work as my overlay image now i'm going to work on the icon itself so i'm going to come over here click to click on play icon now the size straight away you can see it's way too big let's reduce this by just dragging this down to about let's go with about 60 yeah i'll go with 60 pixels all right so that's looking great i'm going to save that and then what i'm going to do now is remember our size is here for our rows we set it to 80 so i'm going to come back over here and copy the row styles and paste the row styles here there we go so now the video is nice and big and i'm also going to come over here to my section settings and change this to my section padding just to give this a bit of breathing space now over here now this is where we're going to add our call to action and i'm going to search for it and add it like that now there's two styles here so i'm going gonna go with call to action two does that work yeah i guess it works and for my button to show i need to come over here to the link and just add my url so i'm gonna add my url like that and you can see now my button is now showing all right so that looks great next i am going to now just go into my text here and just update my text with some dummy text so i'm going to come over here add my text and we also need to work on the title here so i'm gonna go with that there we go so that's my title in fact that's a bit too long let's get rid of this okay so that's my title and that's gonna be the call to action so i'm pretty happy with that so now i'm going to save and there we go so as you can see this is not centered so ideally uh what you want to do here is to just put your mouse over the end of this module and just drag this so this is now adding some margin to the top and i'm going to go with 200 and now we can see everything is all centered and it's looking much much better so this is where we can decide whether we're going to have a dark background here or we're just going to keep everything nice and clean and to be honest in my opinion i think i'm just going to leave this as it is but if you want to play around with some styling you can go in here and add an image in the background or you can add a shape that just cuts across here but i want to keep things nice and simple so i'm going to leave it like that so pretty much we've created now this nice beautiful minimal landing page for your design agency or even if you're a freelance designer you mean you can pretty much use this design as well and over here you can replace this with your own style now let's add one more and that is the contact page so i'm going to come over here to add a section and it's going to be a regular section right so for the contact form what i'm going to do here is i'm going to use two equal columns and then on the left i'm going to add an image i'll go ahead and select that and i'm going to choose the image and the image i'm going to go with is this one right here upload an image and i'm going to change the style because we've been going with black and white here so i might as well go in here and change the style and save next over here now i'm going to add my contact form and as you can see it's already styled but i want to see how things look when i add black to my background here so let's go ahead and add black so now that i've added black we can also add some padding here there we go and i think i may also want to add you know the title for this section uh did i add a title for this one here no so i need also a title follow this section here so let's go ahead and do that so i'm just going to duplicate this one here and drag it down bring it all the way down here like that so let's just say our story or my story okay i'm going to duplicate this one more time and drag this to the bottom section there we go then i'm just going to say contact us or get in touch right i think i prefer get in touch okay so that's what it looks like so now we can save this and as you can see here this is not the right size so we're going to come over here to our row settings right click here and click on copy row styles and then we're just going to come over here and right click and paste the row styles there we go so everything looks nice and big now we're also going to do what we did before and that is to uh add some spacing here but of course we can also add a text module and i think that looks much better to be honest so let's search for our text module here okay it's added here on the bottom but it's okay so this is where we can add our address so i'm going to do that by just grabbing a bit of dummy text here okay so so i'm just adding some some dummy text here just to make it look like an address there we go now it's time to stylize it so all i have to do now is to go over here text change our font and we're going to make it slightly bigger okay let's make it uh semi-bold yeah i think that looks okay i'm gonna save that and then just drag this to the top there we go so that's the address that's our contact form and that's our image here so what you could also do here is to change the style because uh we have a different style here just in case you want to go with something like that and to be honest i think that looks better okay so let's go with that right so i'm going to save this now and pretty much this is our landing page and it looks very clean very very professional so you can pretty much use this design in your own designs as well you can copy exactly how i did it in this one and to be honest i don't really mind if it helps you it may not so be it all right so pretty much that's all i have for you in today's video um i'd like to remind you that if you haven't subscribed to the youtube channel go ahead and hit subscribe and also hit the bell notification because by doing so you'll be notified when i release new tutorials all right guys that's all i have for you in today's video if you have any comments about this design please let me know in the video description below until next time thanks for watching and i'll see you in the next video take care

Channel: MAK

Views: 5,126

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, make online courses, online courses, online course tips

Id: dJx4rbK_wCo

Length: 32min 19sec (1939 seconds)

Published: Mon Aug 17 2020