Web Design Tutorial for WordPress and Beaver Builder How To Make A Website [ BB #04 ]

so in this video I’m going to show youhow to make this home page right here utilize the beaver developer topic and plugin the previous video I evidenced you how to be established by the beaver make themeto get the basic look of your locate so the basic shades and fonts and exactly getthe sort of basic outline of what the site is going to look like in this videoI’m going to show you exactly how to layout and build a home page use thebeaver developer plugin if you want to watch this entire tutorial series from thebeginning including how to set up the beaverbuilder plug-in you can click the “i” icon at the priorities in the screen and thatwill take you into the YouTube playlist that will walk you through every step ofbuilding a WordPress website use the beaver developer topic and beaver builderplugin so let’s go ahead and get started withthis video and construct our home page consuming the beaver developer plugin so the first thing we need to do on ourdashboard is going to see pages and then we need to create a home page so i’vealready generated a homepage has made a basic sheet and then saved it with thename of home and then we too should make a blog page let’s go ahead and add a new page rightnow so you need to click contribute sheets over here by snap contribute brand-new under pages orclick add brand-new at the top up now and then we’re going to call this page blogyou might want to call it news or something else but something whereyou’re going to put your affixes on your page and all you have to do is justclick publish and then the next arranges we’re going to configure that blog pageis going to automatically threw the new posts that we established in the pole sectionon that page so the next step is to go to settingsand then reading can choose now to select a static figurehead sheet or on thesecond acces of doing it you can go to beaver builder click on visit site or actually I’m sureit won’t be a beaver make to be the list of your website up here and clickon the website and we could find customized we can go over to settings and we canclick static breast sheet it’s the same placing over here and we can clickstatic breast sheet so the breast sheet we’re going to createthat home page that we created is going to change that right there and then ourpost page we’re going to create that use that blog sheet that we created and nowall of our blog posts will appear on this page and don’t have to do anythingelse that will happen automatically when we create brand-new blog uprights exactly click Save and publish the top andthen we can close out of this and then let’s go back to our dashboard to editthat home page actually two ways we could edit that home page we can eithergo back to our remuneration our dashboard and go to sheets all pages and then click on ahome here and then click on edit and I can do a opening sheet builder or is we’re onthe front of our website we can just go over here to where it says page builderand start revising our sheet right here so the mode that the beaver builder worksand a good deal of different wordpress page builders work if they give you thesedifferent rows and then you partition the differences between rows up into different columnsso for this firstly sequence up here I want to give it an idol background soto do that you click on that little wrench icon here to are going to the rowsettings and then we want to make sure that it’s set to full diameter and then thecontent width can be fixed so that means that where you recognize these blue disallows hereall the content that would create will stay within those blue saloons but that thebackground that we’re going to add to this will go for the full extent of thewindow so really roll down on your backgroundtype hand-picked photo and then you can go ahead and upload a photo go ahead and upload a file you want tomake sure that the portraits that you select our web optimized and a good width for this i’m use an 800 x 1440 pixel painting herethat’s already been optimized and simply do select photo there we go now you can see it’s alreadyon the background for this section is moving forward and click on save for that andthen in this section here i’m going to add some contents are going to add atitle bar and the entitlement prohibit so to add content utilizing beautiful developer isquickly add material button up now gathers out this little menu tray here thenselect which kind of module we want to create the leaders module which weregoing to use for our designation is over there well all we gotta do is drag it in and it’sjust that simple so let’s give your heading and calls i’m just gonna give itthe name of the company and then if you wanted that to be a link you can selectthe link there and then let’s change the alignment here to Center let’s commit it an h1 tag since it’sprobably gonna be the most important thing that site you can see you have thechanges that we’re making are happening in real experience as we constitute them we can movethis window around anyplace we want to within the window to make all thechanges that we want we can use the default font since we already selectedthat in our fits but we change the width to a practice length so for this i’m gonna pick a 150 pics simply make sure it’s nice and big it’s not a105 it’ s 150 there we gothat gapes good okay and then we would also make abackground for this text here so it’s easier for our viewers to read since thebackground that I’ve chosen is fairly busy so we’re going to click Save this yeah ok so we go to column fixes okay and then precisely opt a backgroundcolor I’m just draw this little circle around or you can choose the specificcolor you demand I’m just gonna implement a gloom gray coloring like that and then apparently we want tobe able to see what’s behind it since I’ve got that astonishing painting that itook so to change that we’re just going to change the opacity here start it with fifty percent and envision whatthat looks like what I really like about the beaverbuilder plug-in is that you can see the changes right as you’re making them sowe get a little bit darker than that try 75% and you want us to actually makethis just full on black there we go okay and then time click onsave up now and then actually going to do is just add a little space below thistext here so do that we’re going to click on addcontent and i want to add a separator right below that and then you can chooseon how towering he was separated be so I’m going to make this one 15 pixels tall and then we don’tactually want to give it a color so we can determine the opacity 0 and click saveand then add another piece of content are going to add a button and add thatbutton right below that separator that we put in and then you can choose whatyou want your button to say by changing a textbook now and say learn more if wewant to have an icon you were able to select an icon for that but in this case I don’thave an icon and then you supplemented the link where you want the button to go if youdon’t have a place you know the link yet if you haven’t formed the page for ityet but you still want to we’ll verify what the buttons going to looklike i recommend putting hash in just as a placeholder for thatand we can choose the form for the button sound over here and actuallyrather have a black button for this so we’re going to go ahead and select ablack background color and then if you want to have a different flit shade youcan select that here you can make it just like a lighter gray for example sowhen somebody poises over it gets to be a lighter gray don’t think it does ityet but after we save this it should do it and then let’s also stir the buttonbe centered click on center that’s going to Centerit there on the page and then let’s clear the button little bit bigger so i’mgoing to change the typeface length now right now that’s pretty good and if you craved the areas are not tobe around if you want them to be square you can just change this setting righthere and then click on save let’s let our gathering know there’s morecontent to be addressed on this page down below by put a bit down arrowicon here so do that we just click on contributed contentthen from advanced module hand-picked icon and then exactly lag the icon where youwant to be in so let’s clink it right there and then apoplexy to the top hereand select the icon that you want to use this case i want to use of this basicdown arrow right here and we can see it in it it showed right there so go tostyle to change on this position of it and the length precisely do the sizing 75 let’s make a little bit bigger evenlet’s make it a hundred and we’ll vary the adjustment to Center we go now justshows up right there in the middle of our sheet and click Save so you can see just how quick and easyit is to time intend and layout the sheet and you can see what you’re doing inreal time with beaver make something I really like about beaver builder let’s move on to the next region of oursite the next part is going to have adifferent dye background to differentiate its are going to use adark grey or colors background so to do that we just click on addcontent here again when i got click on a row layout so we just do one columns willhave a 1 editorial slouse for this and then our website emblazon is already blackbecause we configured that in the establishes so we don’t need toactually vary the background colour we just go ahead and start working let’s go ahead and add a specify to thisso we’re going to go back over here into our little tool tray here going to dragin chief I’m just going to give it a call welcometo special effects you will be and if you don’t have a linkyou could contribute at your join in right here and then let’s go ahead and adjust thesettings it’s already grey because we already configured our settleds for thisto be white i’m going to change the adjustment toCenter and then let’s change this to an h1 tag ok and there “theres going” i can merely sounds Saveand then I’m had a little flourish now underneath that so we’re going to addcontent and this time we’re going to add a icon radicals we’re going to advancemodules icon group and add this end down now and so this is going to positioned threeicons in a row i’m going to use these little down arrow icons now and if youwant to have that association you could do that and precisely clink Save and then click addan icon to add another icon we’re going to have the same one little down arrowright there and then clink Save make love another a daikon and it icon so we got that we got these three nicelittle icons as a little flourish on our website and then the next thing to do isjust add some textbook below that click lent content and then text editor merely dragthat in right there and then I’m just gonna transcript and adhesive some text in hereand if we want to adjust it text size or some additional settingsbesides these click on this little button here it toggles the tool bar withsome kind of time is called the kitchen drop and we are able to just spotlit thiswhole thing and remained unchanged merely changes to an h3 label make a little bit bigger you can also change it by using the fontsize and then click on save and “i m loving” how quick and easy it is to furtherthe beaver builder to time start things that you know look great on and itsreally instinctive to use as you can see it’s super easy the next thing i want to do is I want todo these three background division now this triple background part herewith these buttons below it so let’s go ahead and be seen to what extent you do that so to do that we’re gonna include somecontent we’re going to do sequence layouts to choose three pieces and then we wantto change right off the bat we want to change the column places so exactly clickon that little wrench icon there and we want the row plainly to be full widthbut we also want the content to be full extent that room it goes all the way across if you’re going to choose save and sothe first thing i want to do is I want to add the epitomes to thebackground of these sections so is moving forward and click on the Edit column button hereand then column trains and scroll down now I would change the background kind tophoto and select a photo upload a enter I’m going to use this grime illustrate which is8 00 x 700 700 x 800 and then the other thing we want to do is we’re going toselect this item now for equalize column altitudes and is going to make itso that each one of these slice is exactly the same height so no mater which kind of text we put in there orwhatever we do with these sections are always going to say the same height andthat’s going to help make it look a lot better so changes to equalize columnheights yes and then click on save and then let’s go ahead and add the imagebackground for this middle column here and you can see it’s already converted theequalized mentions – yes and then let’s go ahead and modification the background kind to photocan add a brand-new photo in now use this fervour photo which is the same size andthen going to do this last article now and we’re going to scroll down to thebackground photo select the photo upload the record and they wanted to save ok so let’s go ahead and add a buttonnow to this section so we go to basic modules now going to drag in a buttonand we contribute it a button words are going to precisely call it dust since this is thedust section if you want to have an icon you can choose an icon and over here tostyle i’m going to choose a background coloractually background complexions already immense waver shade should be good too and the text dyes encounters we alreadyconfigured those settleds where reference is modified our aims let’s change the width to full with soit encompass the full thicknes of our region there and then let’s build the typeface sizea little bit bigger let’s change the font length to 40 let’s get rid of those rounded cornersthey would look better without that so spawn that zero for the rounded cornersthat’s going to take the rounding away from the recess okay so that looks pretty good so I’mgoing to click save now we’re going to have a association on in here so since I’mcreated the page for this yet we’re going to put in a hash as a situate markerand then click Save there we go and now we’re going to justduplicate this button so it’s got all the decideds that we created i’m going to settled it in each one of theseother regions here so to do that you click on this littleduplicate button here which looks a lot like two sheets next to each other and let’sdo it one more time merely put your cursor over little crosserror here and has dragged it to each of these different sections and then we can click on to edit it andjust throw it a different honour so we call this one fire we still got the hash in there for thelink so of course when you procreate your sheets that those go to you can add thosein there and then we’ll call this last-place one blizzard here we go and how to get someadditional summit so the buttons are at the bottom of these slice we need toadd another separator so we’re going to add content basicmodules and then separator and we’ll lent a separator each one and we’re going tothe height the maximum height you can put in on a separator is actually only9 9 pixs and we want to be larger than that I mull I want to be about 400 so we’re going to change the vogue fromchange the opacity to 0 so it doesn’t take up you know doesn’t haveany look to it and we go over here to advanced you can take the change themargins now to 400 and then you can click Save and i’m justgoing to add that separator module by using a duplicate button here to addthat separate radicals at this very module module merely by drawn-out it over here anddo another repeat and then time lag it over the first one here there we go now we’ve got that lookwe’ve got three different backgrounds so let’s go ahead and assure what that lookslike so to see what that looks like we justclick on done up here and we do published deepens or you can do savedraft but i recommend is doing published changes and you can see I’malready very quickly the glance of our website is coming alongnicely into these full with sections now we’ve got these buttons now I’m just looking great and you can justsee how easy and fast it is to build websites with beaver builder well loveit so that I’m one more region down below this here i’m going to add asection on with it they’re sort of deep red color so to do that we just click on pagebuilder up here to get back to the page builder going to add a sequence layout justone column scroll down here and simply drag it inbelow those parts they’re going to change the background hue this time under aims in the background colorI’m going to use this red color from my pigment palette now to change the shade here is going topaste in this color code that I’ve got going to click Save and then I’m goingto add some basic text in here to add content drag in the text editor now andthen going to paste in some content that I’ve already written up there we go and you can see on the textbook is dark hereand since we reformed the settleds in our theme once the color of our verse isautomatically white-hot that’s great but you know let’s go aheadand change the font size of this little bit probably should reform the typeface sizein my locations this is a little bit bigger so let’s goahead and make this 20 pics there we go and then click on save it looks greatand then let’s go ahead and add another row down below this going to dosomething cool we’re going to add a little colored triangle down below thatso that it looks like this section here is pointing to the next one actuallycolor triangle is in the next segment let’s go ahead and do that is going todo contribute material sequence organizations to do a one column row liberty below this and black isfine which are default background colours we already said it let’s go ahead and said trianglehere that looks like this section is pointing down to that part so do that you actually use a photo so imade a little triangle photo in Photoshop going to drag that claim inhere is moving forward and do select photo so thistriangle photo right here which is the down arrow it’s 150 x 100 pics to PNG soit’s got a transparent background – select photo and then what we want todo is under advanced now want to change the top margin to 0 so that method it clipsup next to this top row we’re going to click Save and then actually in this rowhere we also need to remove the padding so that it time clicks right up in there so to do that we just click on the rowsettings now then under advanced we click on the padding top and we changethat to 0 click Save and taken to ensure that out so how itlooks like this top section is pointing down to our region rightbelow that’s that’s pretty neat ok so let’s include a separator down belowthere exactly to keep that sort of distinction there we’re going to add content to do a separator and makethe elevation 99 I think that should be enough andthis going to change the opacity here 20 so if you don’t see it and then let’sadd some more content right below that include material and then we’re going to adda heading but that right here I just call thischanges in real hour and we don’t need a tie-in let’s make it quite a bit bigger so wecan h1 tag and you know what actually let’s make it even larger than that soto do that we need to pick a typeface go to lately lat 0 typeface that we have here andthen gonna make it now let’s make it regular let’s changethe font sizing here too – custom and let’s try 150 and consider whatthat looks like well that’s way too big let’s try just a really 100 on there and ilove the fact that you can actually realise what you’re doing as you’re doing Ican’t I can’t I can’t get over that it’s one a few makes in WordPress we cando that it’s really starts improving websites much faster go ahead procreate the alignment center onthis and then click Save all right and then what I had a littlebar underneath that so to do that we’re going to use the separator again you addcontent separators set that in right there and let’s make a little bitthicker than that let’s try three pics wide there “theres going” that looks great and let’smake it a little bit darker than that – like a darker gray-headed there we go and then exactly click on saveand then we’re going to add three pillars right below that with some textso to do that we’re going to click on add content row organizations and do threecolumns and then let’s do a text module and each one to text editor here paste that in click Save and then if youwant to you can actually just duplicate this and drag it over and duplication thisone and lag it over and then if you had different text that you want to put inthere you off all you gotta do is just click on it andthen change the textbook and you know what I just wanna vary one more thing yourreal quick which is just want to represent the separator a little smaller solet’s reach that 50 so there we go so there’s a greatlooking website that we reached with beaver make you can see how fast and easy itis to do the last thing we need to do is just save our adjusts we click on done published changes and there we go agreat-looking homepage built with beaver builder you can see super easy to do inthe next video we’re going to do is we’re gonna go ahead and construct our menuout i’m going to add a got a couple of other pages merely dummy sheets so we can see howto build our menu in next video I’m going to show you how to set up a menuusing wordpress it’s really easy to go ahead and click on the next video buttondo you have and for more tips and deceptions and reviewsof how to build websites as easily as possible be sure to subscribe to my youtubechannel and call me at real website indicates. com thanks for watching.

clink Save

As found on YouTube

Share this article

Leave a comment