hello everyone and welcome to WP use theTV in today's video I'm going to showyou step-by-step how I managed to buildthis landing page for an e-commercewebsite I'll be showing you step-by-stephow I build this website the workinvolved involves going to Photoshoppreparing our images and do a/b anddoing a bit of customizations and thengoing into DV and putting everything alltogether now if you're brand new to webdesign I have a free course that I'mgiving away called a wordpress masteryyou can go ahead right now the link isin the description below you can goahead and sign up for that course andstart learning if you'd like to learnhow to design websites using Divi I alsohave a course all that information is inthe comments box below if you haven'tbought dv8 great news if you buy Diviusing my affiliate link I will give youaccess to my Divi blueprint 3 coursewhich shows you everything that you needto know in order for you to buildawesome looking websites again all thatinformation is in the show notes belowso without wasting a lot of time let'sdive in and let me show you how Imanaged to build this landing page okayso first of all I got all my images thatI'm going to use throughout thistutorial from this website calledpixabay okay so all I've got to do hereis to click on search and then you haveall these handbags come up so Idownloaded all the handbags onto mycomputer and then I went on and chose animage which I use as my hero image andthe image I chose is this one right hereso I'm gonna click on it so you can seeit so all you got to do is to come overhere to this green button click on freedownload and this image now getsdownloaded onto your computerokay so now that you have all yourimages that you need the next step nowis to go into Photoshop and prepare orour images okay so I'm gonna come overhere to my downloads folder where I haveall my images so I'm gonna start offwith the hero image so I'm gonna rightclick and open with Photoshop like thatso now our image is open in Photoshopokay so what I'm gonna do is to comeover here to my crop tool and then I'mjust gonna drag like that until I'mhappy with the width that I need okay sonow that I'm happy with that I'm justgoing to hit enter now we have thiswhite space over here but don't worryabout that we are goingfix it so over here to my layers I'mgonna add a brand new layer so I'm goingto click on create a new layer okay sonext what we need to do is to justdouble click on this layer to get rid ofthis lock icon and then the next stagenow is to drag this layer one layer onto the bottom like that ok so now wehave this main image on the top and wehave this blank layer on the bottom thenext stage now is to delete this whitepart of the image so I'm gonna come overhere and select this white part likethat and it doesn't matter if you go abit in into this color here so now thatI have my selection all I have to do nowis to hit delete ok so now you see thatmy this area now is transparent so thenext stage now is to paint over and makesure that we match this color that wehave over here so to do that I need tocome over here to my eyedropper tool soI'm going to select my eyedropper tooland then I'm just gonna click here wherewe have this color so now my foregroundcolor has the same color as I have herenext I need to add my brush tool so I'mgonna press on B and then I'm just gonnastart painting ok so I'm just gonnacontinue doing that okay so I'm gonnazoom in so you can actually see what ishappening here so making sure that it'snow seamless okay so our hero image isalmost ready but we can always add a fewcustom shapes to make this look a bitmore stylish so let's go ahead and dothat so I'm gonna come over here to myshape tool and then I'm gonna come overhere to custom shape tool so over hereon the top you can see the shape that'shighlighted is the heart so if we clickthis little down arrow we get even moreshapes there so let's start off with theheart so I'm gonna start off by justadding my heart like that and anotherone but slightly smaller now what we canalso do here since these hearts are alladded on to a separate layer I canalways reduce the opacity just bydragging like that so we don't want tomake them really like in-your-face sothat to me it seems fine okayalso add some more shapes so I can comeover here again to my custom shape toolchoose the line tool and then I can justadd a few holds a few diagonal lineslike that okay maybe another one righthere maybe we might need to add a fewmore hearts to just balance this designout so I'm gonna come back over here tomy shape tool do the same add a littleone right there another one there andmaybe one more just here okay great andthen finally I'm gonna come over here tomy opacity and just reduce this all theway down to about say nineteen percentokay so that looks that's looking greatnow I'm ready to export this image infact before I do that I just need toreduce the opacity for these two heartshere right that that will do and thenfinally I'm gonna adjust the opacity forthis one okay so that's looking greatI'm ready now to export my image and useit as my hero image okay so to exportyour image you help you hold down theshift alt command S okay so here I needto add the width of my image so for thisexample here I'm just gonna add 2,000for my width and then click on save andthen you can save this now on to yourcomputer so our I already have minesaved so I'm just gonna hit cancel nextwe need to now add our images for ourproducts so to do that I'm gonna comeover here again to my finder now theseare the images for the handbags so theeasiest thing is to select all four ofthem like that come over here toPhotoshop create a brand new documentsso I'm gonna come over here to file andthen click new and the dimensions forthis are going to be 600 by 800 so I'mgonna select that click create and thenI'm gonna come over here to my files inmy downloads folder and then just drageverything onto my canvas so I'm gonnajust do that like that and then one byone these images now are going to showon my canvasand now I can just add them quickly andthen export them because this will bethe right size so in a moment I'llexplain why I'm bringing these imagesinto Photoshop and then ik and then reexporting them okay so let's start byadding our image so that's our firstimage I just have to resize this onehere like that hit enter now this onehere is filling up the page a bit toomuch I'm gonna hit enter and thenfinally we have this one right here thenjust make sure that it's in this it's inthe center and then hit enter so now Ihave all my images okay and you can seethem here over here on my layers okay sothe reason why we're bringing theseimages into Photoshop and then reexporting them is because we need toreduce the file size and also make eachimage the same size because when wedownloaded these images from pixabaythey all come in different sizes and thesize that it comes into is high-res soif you upload these images straight intoyour website or straight from yourcamera this file size is way too bigthis is going to slow down your computerso let me show you now how we canoptimize them when we save these imagesokay so I'm gonna save my image righthere and you can see that the file sizehere is way smaller this is only 401okay now this is in PNG 24 now when yousave this image you have to make surethat this is saved as a JPEG so I'mgoing to come over here select JPEG andnow this is optimized you can see herethe quality of just put that down toabout 80% and over here you can see thefile size is only a hundred and thirtyseven point two K now let's go and checkand see the file size that we that wehad when we downloaded this imagestraight from pixabay okay so for nowI'm just gonna go ahead and save andthen if you want to continue and savethe rest of them you just go through thesame process you just come over heredisable this layer select your other onesave this image disable this one selectthe other one save it and so on so let'sgo ahead now into a foldersee the size of the image so I'm goingto minimize this then I'm just going tobring this over here so you can see herethe size of this image when wedownloaded it is about 643 kilobytes sothis is much bigger and afteroptimization in Photoshop this file wasreduced to 137 so this is why we'redoing this this will help your websiteload faster so I would recommend thatyou go in and customize your files whenin Photoshop now let's go ahead andbuild our page so right now I'm loggedin to my WordPress website and I alsohave Divi installed so what I'm going todo now is to add a brand new page so I'mgonna come over here to pay just clickon add new so I'm just gonna call thispage handbags click on use the DiviBuilder and then I'm gonna to gostraight into the visual builder so hereI'm gonna start off by going straight toadd our background image so I'm gonnacome over here click on this gear iconclick on background and then I'm gonnaclick this third tab click the plusbutton and as you can see I have all myimages already installed but in yourcase you would have to come over here toupload files and then use these imagesso I'm gonna select my hero image clickon upload image so you can see now myimage is added for now I'm gonna goahead and save and then I'm gonna comeover here and click this button here toadd our column structure and the columnstructure we need is this one right hereI'm gonna select it and we are going toneed a text module first I'm gonna hatestext and then over here I'm gonna cometo lorem too and just use this as mydummy text so I'm gonna highlight thetext that I need and then I'm gonna comeover here and paste it next I'm gonnacome over here to design in fact beforeI go to design on each make sure thatthis text is set as the heading text soI'm gonna come over here to paragraphand change that to heading 1 so you canalso see here on the top that this nowhas changed now nice and boldI'm gonna come over here to design clickon heading text and because this is h1this these changes I'm going to makeover here are gonna take effect so I'mgoing to change my font from default toletoand then I'm going to change this fromregular to heavy I'm going to select allcaps and then I'm going to increase thesize so I'll say 60 is finethat the heading text I'm going tochange that to white and then over hereon my header letting spacing I'm justgoing to increase that to about say 10and then I'm gonna come over here to mytext shadow I'm gonna select this oneright here and then I'm just going to doa few adjustments so here I'm just gonnadrag this over to the right a little bitand then I'm also adjust the verticalheight just a little bit like that okayso that's looking great I'm really happywith thatI may want to increase the size here aswell like that maybe 62 so that'slooking great let's go ahead and savenow it's time to add another text moduleso this is going to have our descriptiontext so I'm gonna come over here clickthis plus button and I'm going to searchfor my text module like that come overhere to lorem – and I'm just gonna copythis paragraph now in your case the textthat you're going to have here is goingto be your text for the description ofyour shop so right now I'm just usingthis dummy text because it just saves mefrom typing and coming up with a copyright so I'm just gonna paste this comeover here to design click on text now mydefault font is going to be later so I'mgoing to select that now let's changethe size I'm just gonna increase thesize this say to about 30 maybe 30okay our text color is going to be whitejust like what we have there on the topjust add a bit of letter spacing in factfor this we don't need a letter spacingwe just need line height so I'm add myline height and we may want to increaseour size a little bit okay so thatI think 36 will do okay that's lookinggreat now I can go ahead and save okayso now that we have all the elementsthat we need for this section we aregoing to go ahead now and add somespacing so that we get to see more ofour image so to do that I'm going tostart off by adding dividers so I'mgoing to come over here click this plusbutton I'm gonna add my first dividerlike that come over here to designsizing and I'm gonna make this heightquite big maybe even a hundred I'm gonnasave that now right now I can't see mydivider and this is where now you can gointo our wireframe view so I'm gonnaclick here on the wireframe view so Ican see here my divider is right thereand I'm gonna clone it and then dragthis divider to the top like that andthen I'm gonna go back to my normal viewso we can see right here that our imageis now showing so next what I'm gonna dohere is to add some padding to mysection so I'm gonna increase that tomaybe let's say 180 and then on thebottom here I'm gonna increase that tomaybe the same great and then finallyI'm just gonna add some padding on to myrow so I'm gonna come over here click ondesign sizing spacing and then margintop I'll just add maybe 50 to start offwith and then on the bottom let's try it30 okay so now I'm happy with this nowthese dimensions that I've used here maybe different with your monitor so I'mjust trying to design it this way sothat you can see everything that we areadding on to this page next I'm going tocome over here and add our parallax soI'm gonna come over here to my sectionsettings click on design click onbackground and then I'm gonna come overhere where it says use parallax effectI'm going to say yes and then I'm gonnachoose CSS okay that's great I'm gonnago ahead now and save now it's time toadd our second section which is going tohave all our products so let's go aheadand do that so to do that I'm just goingto click this plus button click onregular now the products that we'regoing to have are four so I need fourcolumns so I'm gonna select that andthen I'm gonna start off by adding a andmodule so I'm going to select or searchfor my image module selected and thenover here I'm gonna come to my image URLand the first image I'm going to selectis right here click upload image so youcan see now that's my first image greatfor now I'm just gonna save now let'sadd a background color to this sectionso I'm going to click this gear iconcome over here to background click theplus button and I'm gonna make thisblack go ahead and save now it's time toadjust the size of our row so I'm gonnaclick the row settings click on designsizing we're gonna make this row fullwidth then I'm just gonna say for nowand then over here we're going to addour text and our call to action buttonso I'm going to click this plus buttonsearch for my text module so we're gonnagive this bag a name so the first namewe're gonna use here is I'm so I'm justgoing to select random names from herepaste it like that now we need to do abit of styling to this I'm gonna comeover here to design text and then I'mgonna make sure that the textorientation here is set to centered I'mgoing to choose all caps and then overhere for our text font I'm going tochoose later just so that we haveconsistency okay so my text size hereI'm gonna increase that a little bit toabout say 22 or maybe even 20 and thenwe're going to add some letter spacingso 6 will do and then finally we need toadd our color so I'm gonna come overhere to text color and set it to whiteokay so so far this is taking shape nowlet's add a button so I'm gonna comeagain over here click this plus buttonand add our button module like that andthen our call to action on our button isjust going to be by now now we also needto add some styling to this button sothat it looks exactly how we want it solet's go ahead and do that so I'm gonnacome over here to design click on buttonand you need to make sure you kick offyou click on use custom styles forbutton select that okayand then our button text color needs tobe set to white like that right let'scome over here to our button letterspacing okay so let's go with four fornow and then let's choose our font againit's gotta be later all caps now thesize is a bit too big and it's notcentered so we need to go ahead andadjust that so let's come over here toour button text size and reduce thatmaybe even to about fourteen okay sothat's looking great over here on thetop we can choose our alignment and wejust have to make sure that it'scentered so now we can see that thatlooks much better in fact the size ofthe button is a bit too big let's goahead and adjust it one more time soright now it's 14 let's reduce that toabout 12 okay so that's looking muchbetter nowokay so I'm really happy with that now Ican go ahead and save I can see herethat my row is way too big let's reducethe size a little bit so I'm gonna comeback over here to my row settings clickon design sizing and then we're going touse our custom width so let's use thisin percentages so let's set this toabout 70 percent see how that looks saveokay that looks much better now now tomake things easy for me I'm just gonnaclone these the image module and thenhave it all and then just update all myimages so let me show you how I do thatso I'm gonna come over here clone thisabout three times like that and thenjust drag these images into position sothis really saves me a lot of time bydoing this process over and over againokay so what I'm gonna do now is to justcome over here into the settings clickon upload and then I can just updatethis with the back that I ate so I'mgonna take upload save that sectionsettings upload select my bag uploadimage save then finallyagain I go into my settings click onupload choose my bag upload an image oknow you saw how fast that was thisreally saves you a lot of time so Irecommend that you use the clone tool towork much faster in Divi now we're goingto do the same thing but this time isgoing to be with the names of our bagsso I'm going to come over here clonethis a few times and then drag this intoposition so I'm gonna drag that overhere now if you can't see what you'redragging here's one quick tip you canalways come over here to the wireframeview and you can do this even faster soI'm gonna come over here to my wireframeview and now I can see all my textmodules I'm just gonna drag this intoposition like that and then while I'mhere in my wireframe view I might aswell welcome the buttons so I'm gonnaclone them again like that drag theminto position great so now I can go backto my to my view and see everything nowin place so you can see here everythingis looking great everything is takingshape now here's one really reallyimportant thing so what you want to dohere is to come over here into thesebuttons and add your links if you don'tadd their links you know your landingpage won't work effectively becauseobviously people won't be able to go tothat product so let's come over here toour module settings and let me show youwhere you can add that link so thisright here is where you get the link youcan add the link right now I'm justgonna add a blank link like that but inyour case you need to add a link thatgoes into your website where thatspecific product is so for now I'm gonnago ahead and save since you know wherethat is now great so what we're gonna donext here is to add some animation tothis so I'm gonna come over here to mysection settings so I'm going to comeover here to my row settings click ondesign animation slide now we want thisto slide up so we're gonna chooseanimationdirection up great but you can see herethat things are a bit abruptso let's customize the timing okaythat's a bit slower that's much betterthat's even better now the animationdelay we can also adjust that greatright I think I'm happy with thatI'm gonna go ahead now and save okay nowwe are going to use one of the featuresthat was added recently to Divi and thisis the section dividers let's go aheadand do that so right now I'm gonna cometo this top section I'm gonna click thisgear icon to go into my section settingsclick on design and then I'm gonna comeover here to my divider now we can seehere that our images have this littleshape over here we may want to replicatethis on this section so let's go aheadand do that so I want to choose bottomand then I'm going to choose my style solet's add it right there so we can seehere that already that's really lookingstylish and really like the way that islooking so that's looking great I'mgonna go ahead now and save now it'stime to add one more section so let's goahead and do that so I'm going to clickthis plus button here I'm gonna click onregular for a regular section and thisone just needs one column so let's goahead and do that now this column hereis going to need a text module so let'sgo ahead and do that I'm gonna searchfor my text module and select it andthen over here I'm just gonna say newcollection coming soonokay so that's the text I'm gonna havefor this section I'm gonna go ahead nowand click on design and then I'm gonnaclick on text make sure that this iscentered and then I'm just gonna makesure that over here it's set to letothen I'm just gonna increase the textsize I would say maybe even 40 – we needsome letter spacing so let's try 10 so10 looks fine and then over here I'mgonna make sure that this is set tolight okayso for now I'm gonna save it's time nowto add the image that's gonna go withthe background so let's go ahead and dothat so i'm gonna click over here likehere icon click on background click onmy third tab click the plus button andnow we're gonna add our image and Ialready have my image here in my medialibrary so I'm gonna select it clickupload an image so there's our imageright there so the next thing I'm goingto do is to darken this image becausewhen we have our white text here itneeds to be easy to read on thisbackground so let's go ahead and do thatso to talk in our image all I got to dois to come over here to my my imageblend I'm gonna change this to multiplyclick on my background color and thenI'm just going to drag here until I'mhappy with how dark it is so I think I'mgonna settle with this dark grey rightthere and then I'm gonna go ahead andsave now let's do a bit of work ontothis so here I can click on my modulesettings and let's change the color ofour text to white like that great I'mgonna save this now we're gonna add ourbutton so let's go ahead and do thatso as you can see here I can't add my mybutton module so I'm gonna come overhere to my wife reign view and let's dothat right here I'm gonna take this plusbutton here and search for my my buttonin fact it's right here I'm gonna selectit and then my button textjust gonna say get notified like thatclick on design and let's stylize thisbutton so I'm gonna come over here tobutton use custom styles for button nowsince I can't see what is happening hereI'm just gonna click this icon here so Ican see what is happening here on mydesign right so let's start with ourtext size I'm going to increase that toabout let's say 26 and then over here onour little spacing I'm gonna increasethat to about let's try 10 okay sothat's looking greatwe need to Center the text so I'm goingto come over here to alignment Centerthis button come back over here to ourbutton and we are going to change ourbutton text color to white okay so I'mreally happy with that now I just gonnaadd some spacing between my my title andmy button and to do that I'm gonna comeover here to spacing margin top let'stry 20 yeah I think that will do thatlooks perfectI'm going to save and now we are goingto add some padding so we can get to seemore of this image so this is going tobe maybe let's start off with 120 andthen the same on the bottom let's dothis 120 now let's add some dividers soI'm gonna click this plus button here atmy divider click on design and then mysizing here is going to be let's try 70I'm gonna save that and then I'm gonnaclone this divider and add it to the topdrag it to the top like that now we cansee that we have an idea that that is abag so that's looking really really nicenow finally as I'm looking at thisdesign I'm not really happy with thebuttons here they look too small and soI need to go ahead and adjust them soI'm gonna come over here to my modulesettings click on design button andwe're going to increase the size alittle bitso let's try 16 okay I'm going to savethis now because I have to do this on onall the other buttons instead of mewasting time going into each button oneby one I am going to clone this a fewtimes and then drag the button intoposition like thatnow what amay wants to do here as wellis to increase the padding for thissection it's good to about a hundred Iwant to make sure there's enoughbreathing space let's do that over hereas well said 100 or maybe even 120 okayso that's looking great now I can goahead and publish my page and exit thevisual builder so let's take a look atour page one more timeokay so what you want to do is to makesure that this website looks great onmobile devices so you need to go in andcustomize each and every item and makesure that is it's looking great so to dothat all you got to do let's start offwith the title here I'm gonna come overhere to my settings click on design soI'm gonna come over here to my textmodule and click on design text in factit's heading text I need so now I canadjust this and make sure that it'slooking great on all devices so if Iclick here on this icon here I can clickon tablet and here let's say I want tohave a bit of more line height I canjust increase it like that and make allmy tweaks okay so maybe that's the sizeI need for the tablet and then I'm gonnacome over here to my smart phone and formy smart phone I think I'm happy withthat now let's go on to the save andlet's go ahead and do the same for thistext right here this description textI'm gonna click the gear icon click ondesign text and then like we did beforeI'm going to click this little iconclick on tablet so definitely here Ihave to reduce the size so let's goahead and do that so I think I'm happywith about 28 and the smart phone I canreduce that a little bit maybe to about23 so as you can see I'm reallyoptimizing each and every item here andthen you may want to go ahead ahead anddo the rest here so you can see so farthis is looking great and things are notlooking great right here so let's goahead and fix that okay so over here I'mgonna come into my text module click ondesign text and then I'm going to clickhere on this little icon click on tabletright so first of all here on the tabletI want to reduce the size so until itfits the screen so I think 22 is perfectit fits the screen and then I'm gonnacome over here to my smart phone okay Idon't mind having this in two lines butyou canour line height isn't looking great solet's fix that okay so that's lookingmuch better I may even try and increasethe size here okay so 26 works and thenif this button looks way too big for youagain you can go in and make that changebut to be honest in this case it's notreally messing up our design it looksgreat so I'll leave it as it is so it'salways a good rule of thumb that whenyou design your layout you go in andmake sure that your pages are optimizedfor all mobile devices so now that I'mhappy with this layout I'm gonna savethe page so if you want this layout anduse it in your designs you can eitheractually go in and make some changes toit I am going to save it and make itdownloadable so you can just go in andimport it into your designs so onceagain I'd like to say thank you verymuch for watching if you'd like to learnmore about Divi I have a course whichyou can access free by buying Divithrough my affiliate links so go aheadand do thatif you already have Divi no problemthere's also a discount for this coursethis course will show you everythingthat you need in order for you to designawesome looking websites using Divi nowif you really have all that in place oryou're just starting off I also have awordpress course which I'm giving awayabsolutely free now information to allof that is in the show notes below okayso we've come to the end of our tutorialthank you very much for watching and Iwill see you in the next one
Source
