web design certificate free
welcome back to another video my name is adamfrom wpcrafter.com were i make wordpress videos for non-techies and non-coders and in thisvideo me to do something special i been using this new page builder called elementor andi made a few videos on it but i'm actually to show you how i was using this yesterdayi was testing one of the pro modules now if you're not familiar with elementor it's afree full-featured page building plug-in for wordpress you can create some amazing thingsin fact a couple days ago they released a new feature to give you the option to addgradients to different elements and i'll be showing you that in this video but they alsohave a pro version that add some additional features to the plug-in and one of those featuresis the ability to add forms so i was using
it and i just felt inspired to see what theplug-in could do and after about 45 minutes i was able to almost completely re-createthe digital ocean website now digital oceans websites beautiful website you see you gotthis beautiful blue gradient a very stylish contact form here where you can create anaccount and it just blends into the background right here you have a really nice style thefuture grid right here with six different features and then you have this differenttype of pricing grid and that was going to be a challenge and then you have a call toaction down here that i created someone to see how far i could go in creating this websitewith zero code skills and zero code that anyone can do see if i can do it myself using elementorand elementor pro and this is what i came
up with so you see i've got that beautifulgradients and i've got this a form right here i got a feature grid and i've got that pricetable pretty spot on by the way i got there price table and then this final call to actionnow it took me about 45 minutes to create this in one of my doing this videos i'm actuallygoing to create it now normally i am in all my videos you can see me right now in thetop right and actually get rid of that so we can just focus on the how to build thispage with elementor now there is one caveat you can do almost all of it with the freeversion of elementor but there's two things you can't do with the free version becausethere only features found in the pro version so you've got this form here elementor prohas the most powerful visual form creator
and styler that i have ever seen there's nothinglike this and that's part of the pro package and then this pricing table right here thisfully customized pricing table this is only available in the pro version as well to beable to come up with a highly customizable pricing table like you see here which is prettyspot on in every way and you need the pro version for this as well now the programmersis not that much money they have different licensing options i do have a link down belowand here's the best part when you click on my link to purchase elementor pro not onlyare you going to get an amazing plug-in you're going to get to support these developers thathave been so generous with the free version but i'm also going to give you access to acourse that i've created called elementor
essentials and so you're going to learn mycomplete website building system using elementor and it is going to save you time it's goingto cut down your learning curve and is can help you to get amazing results in buildinga webpage for your self that you can be impressed by so that is elementor pro and my specialoffer there is a link down below and i wanted to give you get the last thing i want to mentionbefore i go is that elementor has an amazing template library that gives me the abilityto export this template and i can give it to anyone is this the file and then you wouldimport that so i'm also going to provide a link down below there's no sign-ups no anythingis just the link and you can download this file and you can import it into your templatelibrary if you want to see exactly what i
did to create this beautiful beautiful webpageright here now and the last thing is i'm not suggesting you go and copy websites verbatimno one has a copyright on color schemes and font schemes and overall layout obviouslyit's not a good idea to take someone's images very not is not a good idea at all is nota good idea to take someone's icons these are all right this is kinda new for me i'm usedto being in every video but that's all right this is a learning time to learn exactly howwe can re-create any webpage that we see on the internet almost exactly so let's go aheadand get started so i'm assuming that you already have hosting if you do not have hosting youcan visit order new hosting.com and it will
take you over to inmotion hosting and thisis the page you'll see you'll see a picture of me there and this is a special discountthat they give to my viewers here on youtube so the normally they might have a 20% offer30% off when there's a sale but for my viewers you're going to get 57% off and it is justwhen you visit order new hosting.com and you can go ahead and order your hosting packagefrom them it's very awesome reliable fast hosting and it's very affordable all theirsupport is us-based and you can call him when you need help you can live chat them and youcan open a ticket so anyways here is wordpress that i've already installed elementor andi've also installed elementor pro now elementor's easy would just go to plug-ins add new andyou can install elementor that way and then
if you purchased elementor pro you can downloadit from your members area and you can upload that yourself and then activate it so i'mgoing to start so before i begin there are two tools that i will be using most likelythroughout this video and if they are called web browser extensions now i'm currently usingthe google chrome web browser but they are also available for firefox if you are usingfirefox and these tools and allow you to guaranteed these are custom icons here i'm not sayingthat you definitely don't want to take peoples text and i'm not suggesting any of that iwas just using this as an example to show you the power of elementor pro and that anyonethat that wants to build a website can do it without touching a line of code it justtakes having the right tool and having the
right training and you'll get both of thosewith elementor pro and the link down below so anyways i'm going to take off and workingto start building this webpage analyze a webpage and this one right here will basically letyou know any color that you see on any webpage and this one right here is gonna let me knowany font on any webpage in the size so let me show you that an action so here i am onthe real digital ocean website and so the color extension right here is called colorzealous he could just google color zillah and then the name your web browser and i'msure the extension will pull right up so the way works as i clicked on it and then i choosepick color from page and i can go like this and it will show me any color on it on a pagethat i'm on so here's that little bit of a
green right there let's see if i can go onand there's a green here's the blue the different shades of the blue and what happens is wheni click on my mouse and scan a copy of the color code into the clipboard of my computerand then i can paste it into elementor wherever i want to put that color so that is colorzillah the other one is called what fonts and you could just search for what font chromeextension or what font firefox extension and when you click on this anywhere you move yourmouse it's gonna show you the name of the font and the size so i'm showing that thisis proxima nova now i do know that proxima nova is a paid font when i click on it isgoing to show me as a says type kit but that's okay really use an alternative font but what'snice is i'm able to see the size of the font
right here and sometimes the weight is justsaying its regular which is fine but i can scroll anywhere on over any font and see exactlythe size of this is going to be smaller in seat 16 pixels the fontweight is 600 so workingto be able to use those values to try to re-create a similar font scheme not using the same fontthough but for a similar size and weight it'll work out fine and that we can basically hoverover anything severe and i want these two tools and i would go ahead and recommend youinstall it so right away what i'm going to do is create this section and when you lookat any webpages just a series of sections that have column so when i am looking at thisi see a section with the gradient blue in the background i see two columns what yousee right here and what you see right here
in this is just some text and a form of fieldand a little bit more text and this is just simply an image and when i look here i seeanother section with a full column here that is just given me a headline and then i seethese three columns right here each one has an image headline and a little bit of textand then i see a duplicated and then when i scroll down it's the same thing we havea headline i am not going to be able to re-create this switcher right here so when you clickon this it toggles the way they charge i'm knocking to be able to re-create that so buti am to be able to re-create everything that you see in this pricing grid and this canbe pretty close and then i'm going to skip this map it just an image and this is justa series of images you can see is just one
big thing of images on the skip that and i'lldo this final call to action and so your to get the point so right off the bat thoughi'm going to tell you this form section right here in elementor it requires the pro versionso let's just go ahead and get started some to go to pages anima to add a new page andlet's just call this digital ocean i write and i am using the generate press theme willalso have a link down below to it it's free but they have an add-on package that givesme the option to disable some elements on the page so just for cleanliness and to disablethe header the navigation m actually disable all of these because i just want to look atthe page builder and i need to go here in choose content no sidebar so that's lettingjerry press know that i am working with the
page builder and i've got a check on thisbox so now when i click on publish and then i click on edit with elementor like this it'sbeen open up elementor and it's just a blank completely blank slate and that's fine solet's get started on the first add a new section and artie know it's gonna be a two columnsection like this so now i have these faint two columns are right here so i already knowthat i'm good have an image here so why don't i just first search for image and let's justget that in there real quick some of the drag-and-drop that over let go and then when i click righthere a minute delete the placeholder click on the plus and i have that image right hereis a matter fact i've already uploaded it by the way summary click on insert and wecan see there is my image now right here i
already know working to have a headline andthere were never form and number and have some text so let's go ahead and do that rightnow so my click right here and then here's my heading some in a drag-and-drop that'sand then i'm in a click right here again and i'm in a scroll down to the pro element andi'm going to choose the form animal to put that right underneath the heading elementsand then right underneath here i'm going to put instead of a heading element for thatlittle bit of text i'm talking about this little bit right here i'm in a go ahead anduse the text editor for that and let's get that dropped right there okay so now whati'd like to do is get the background looking right in this section so when i hover overany of these elements here you see this option
here for sections only click on that and it'sgonna say edit section so the first thing i want to want to do is click on style andwe have all these great background options now for me i'm in use the gradient optionwhich is right here and what a gradient is i even made a video on this yesterday youneed to colors now they are using a gradient here you can see all the way on the top rightit's a lighter blue than it is on the bottom left so i'm in use my color picker now toget this exact number to get a close enough so that you get the point so many choose pickfrom color picker and then i want to go to the very bottom here and i'm in a click andthat's gonna put that color code into my clipboard number and go back here to elementor and sohere's the first color of the gradient click
right here and i'm going to paste that inso there you see we've got the first color of this background now i'm in a go and i'mto get this lighter blue right here now this is and can be an exact science like i saidso there you go it's just a little lighter and let me click this to make that collapseand then right here i'm going to put the lighter blue in just paste it in like that so youcan see we have it now if we want to make it similar to how it is here working haveto tweak it so it's darker here in lighter there so let's play around with these settingsreal quick summary go from linear to radio and then i'm going to have it go to the let'ssee how about the bottom left let's see if that does it and i think that actually didit so i'm have to put some spacing so we can
better see it and change the colors of thesefonts but working up probably have to play around with these just a little bit thesetoggle switches here in order to get it just right you see that eric i think that's actuallyprobably perfect so first let's put a little bit of space between these elements in thetop and the bottom since were already in the section so we have this bit of space herein this bit of space here looks equal some to play around with the spacing here it'scalled padding in the advanced tab to see if i can get close to that some to go to paddingright here i'm good have to click on this this little link right here to and went whenit's that when it's highlighted and you increase one it increases them all and that's not whati want i just want to increase the top and
the bottom there so i'm thinking the top mightbe 80 pixels so when i hit 80 and that looks close maybe a little more than is there solet's actually go with 70 i think that's pretty close and then for the bottom i want to put70 as well and when you're in elementor you can always click on this little tab here topreview what it looks like so you can see that i'm i'm pretty close actually littletweaking to lighten up the color on the bottom left here so let's go ahead and play withthat a little some to go back to style and let's see want to play around with these littlebit just the very goats lightning up a bit okay that's actually looking very close rightthere alright so now i've got my spacing i think that i need to have a little bit ofpadding in this column on the left and right
to kinda squeeze it in a little bit and maybehere as well to to make the image a little smaller so let's do this column first summitclick here it says column and him click on advanced animal to do the padding again i'mgoing to click on this little link and for the left and the right time and it just playaround with it may be maybe 25 or 30 on each side let's see here okay so let's go likethat she can see it's it's tightening up maybe just a bit more maybe i will go a little tighterlet's see what would 50 looks like see 50 okay that's going to be fine so i'm righthere and i'm going to highlight and copy this little bit of text and i want to go to theheading here in a minute pasted in just like that now let's first make that font colorwhite so working to do that in the style and
then the text color a minute she was hereand then i'm a go to white so there we have it now the font here is a lot thicker andit's a little more spaced out here so let's see if we can get close to that now here'sone of things i don't like about elementor in that's when you're using the heading elementsi can hit as many enters as possible here in it doesn't reflect there it's not madeto do that you actually have to put a little bit of html and it's simple whenever you wantto\ you put bracket br bracket like that and thenit will put it on a\ like that such a little elementor tip forpeople that aren't used to coating and i said that would be very minimal coding in thistutorial so let's play around with the style
some more and see if we can get it closerso i'm a new turn on the topography options and this is can allow me to customize thetopography right here so first let's try to get the size someone ago i go this actuallyi think let's just do this for speed to go into what font and see what size it was alreadyknow it's a 4040 pixels there so i'm in a go to 40 just like this okay and now i wantto make the weight leiter sewed so thick right here let's let's change that something isprobably about 500 or 400 let's see 400 so it's a little better actually maybe just thetwo had bit lighter but i think 300 makes a little too thin actually i think were goingto go with 300 looks pretty close considering were not using a different font so the lineheight was set to 50 let's first click on
the right here it says px and then let's seeif we can go up to 50 and see if we like how that looks so there is a 50 and i guess it'spretty close let's see so there it is cloud computing designed for developers and let'sexit what font it looks close enough to me alright so you can see the differences inthe font that were using so let's go ahead and open this up a little bit now let's starttweaking our form here and like i said earlier that elementor is the only visual form builderthat i've ever experienced that allows you to build the form and style the form visuallyso one of my dues on my click on the element right here and now i have the option so ijust can ask for name and email i don't want message, click on the x and you see that madethat go away now also many get rid of these
field titles right here there called the labelson the click right there to get rid of the labels so were already getting closer to itnow we just need to changes some of these styling options to get it to look similarto here so we have a white button we have a white border we have this very transparentbut it's slightly you can see a slight hint on it this font is whites and let's see ifwe can get it pretty close to that song go ahead and take that color code again usuallyi will make a note pad and put these color codes in it so i don't have to keep usingthe color picker alright so work to spend most of our time in the style options butlet's go right hero quick and i want to click on the submit button and change what it saysmma could say create an account i just want
to match the text there to make it say createan account now when you are creating a form you want to go to this option here email andoptions you want to put your email address in the said this is where the submissionsto this form and to go to and you also want to put in your subject line and all this kindother information right there so let's go to our style options and a first of all let'ssee i don't want the form styling let's look at the field so the text color is going tobe white so i can choose the option why right here now we can see because the backgroundsalso white and the topography will see if we have to play around with that the backgroundis white but working to make it transparent so go all the way down but up just a tad tadbecause i think it was a long handle a slight
tint to it there we go so many do that andthe border color i am going to make a border animate to make that white now let's see ifi need to make it any thicker want to go here k years digital ocean and then hears us soit looks right is pretty close now i'm in a go ahead and start playing around with thatbutton and seeing if we can get that pretty close so now my new go into the styling ofthe button and let's go ahead and make the color of the text what i copied in my clipboardwhich is that deep blue and then i'm going to want to change the background color towhites and it looks like we are getting there we are pretty close now so when i go herewe can see if it looks pretty close to me so now let me go ahead and put this in myclipboard this information about the terms
of service right there now obviously there'slittle adjustments we can make we can adjust the spacing we can get it exactly perfectbut i want to go with this forsakes of times to click on the textblock here and let's goahead and click on the edit there and i want to go here and i'm gonna paste in my littlebit of text now here's an option you can highlight this and change the text color here if youwant but then if you do that and make it why you're not can be able to see it here becauseit's going to show it here but if we go to style we can change the text color here andwe can make that white sets kind of a good best practice there to go ahead and changeit in the style don't change it in here unless you want multiple different colors you cando that now it's obviously a little too big
right here sorting to make that smaller returnon the topography and my guess is it low\'85 see i don't want to guess let's see how bigthat it is that is 14 pixels so let's go ahead and set this to 14 as well just like thisand there is our terms of service now one of the problem so far is this is aligned tothe top we want to kinda push it down into the middle you see how this is in the middleright there we want to push that down into the middle a little bit so what i'm in a dois i'm going to go into the column options for right here somewhere click on column andit's gonna pull up my column settings and in here working to have an alignment optionthat alignment option can be found underneath the layouts and it's his content positionand we want to change that to be in the middle
so now when i go like this it's showing thatperfectly in the middle nicely we can put little spacing and stuff like that but thisis pretty close as it is you can see it's very close and i saw how easy that was tochange the form and style it like that it's pretty amazing so alright let's go back herenow what we want to do is we want to start working on the next section we just want aheadline and then we want to start with a big future grid right there so to make thistwo separate sections one with the headline and one with these feature grids some to gohere to create a new section and it just to be one column like that and i'm a go aheadand put the headline in i like the styling of this i think it's probably similar to thatto that but a different color we see this
and then we see that lets the size differenceis this right here were run in a 32 in this right here were at 40 so when i want to dois i'm just going to duplicate this like that and then i'm in a drag and drop it here clickon it for some to change the color to blackman to lighten it up a little bit just to softenit up and then i'm going to click on the content i want it all on one line actually what ishould do is just copy there little bit of text right here like that and i want to putthat in so now it's on one line i do want it centered so i can click on the alignmentoption right here all right so there you go i have it in the center and want to add alittle bit of spacing to the top and bottom i think we should stick with that 70 numberwe had here so i'm in a go to the section
right there on the click on it and i wantto go to the advance and i'm going to add a bit of padding someone new click on thislock here and on the top and bottom let's just go with 70 like that and so it's cangive us that space the last thing i forgot to do was to change the font on this summitclick on it and it set the 40 and let's go down to 32 which is very similar to what thisis the 32 sedona work on my feature grid and one of the dues create a new section and inthis section is going to have these three columns let's go ahead and get our three columnsin there just like that now let's find which elements we should use now i could just putin each of those columns and image headline and then some text but there is a specificelement that is made to do that siliceous
scroll down to that element right now it'sgonna be a general element and it's good to be this image box right here so i can justdrag and drop my image box and you can see there it is so the first element in an imagebox is the actual image some to go ahead and click on the settings here click on deleteand then i'm going to choose it and it's right here now this is one of those things wherei grabbed it from their website and i talked recommend that okay so let's go ahead andjust take some of this text right here and see if we can get it to look very similarjust like this and i'm at a pace that in there so we have it so far except there is alignmentdifferences here it's aligned to the right here it's not and then there's some changesthat need to be made right there so we are
going to go into the style settings firstand then were to go to words is content to look at some of the options we have thereso if i was in the content tab right here you see there was an image position and ifi go like this it's not going to be what i want to scan a look like that and that's notwhat were after so if i go to the style the overall alignment is going to be right hereunderneath the content tab and i can choose to the right and that's kind of what we seehappening over on digital oceans site now for the title is the font looks a little toothick and i don't know if the size is right let's see so it is a 24 and it's a 600 andthe weight of the font so let's go ahead in the title and let's make the color similarto that normally i would suggest having your
font color codes in a text editor we can justcopy and paste it across on the customize the topography to make this 32 just like wesaw actually wasn't 32 is 24 sorry and it's a little too thick let's see what the 600looks like he had to different font some to go down to 400 maybe 500 there go i'll do500 just like that and you can see let me get out of what font it's looking pretty goodhere and the content color should be a little darker so i go down a description let's goto the font let's make that darker as well just like that that looks good to me so nowlet's see how this is looking and emma to compare it and it looks fine to me you canof course manipulate the spacing a little bit so now what i would do is him and it duplicatedtwo times like this and i'm going to drag
and drop it over and i'm going to just duplicatethis entire section i guess i find wanted to i could just duplicate it and have twoelements in each of these rows i could just go like this and like this and that i canput some spacing between it but i think i'm in a just make it a separate section altogetherto delete those out anima click on section and i'm in a just duplicate the section thatwe have some spacing issues we definitely want to have a bit of spacing between theseso let's go here to section and i'm in a pull of the section options but go to advancedand for that i'm going to margin to push some space between these somata unlock that andi am going to actually here's a situation where i think we can keep it locked and thenroll up will increase both of them at the
same time so maybe something like but seemy ball and get something like that that's fine so let's just go up to 65 just for kicksand there it is so so far we have that and then we have our feature grid okay so nowis going to be the hard part of this and that is to create this grid not to put a headlineyou know how to do that you already know how to do button i'm just gonna work on this gridfor the remainder of this video on this pricing grid in case him to go back to elementor themto click on add a new section and i want a five column option now what's odd is mostpage builders don't give you a five column option but elementor does and i like thata couple years ago i use visual composer and if you've used that page builder you knowthere is no five column option i don't i don't
know why that is but i've experienced thatso anyways i'm going to click on that and working to make this five column pricing tableright now this is probably one of the also one of the most powerful pro elements is thispricing table i've never seen a pricing table plug-in or software that has this much powerit's an and options to customize it so here it is price stable i'm a drag and drop itin there and so this is just the default look that is giving us and working to get thisall changed to look similar to here are we have some line items there's no line in itwe have a dollar we have a number here for the pricing and we have this little bit ofinformation just appearing off to the side of that and we have this border this blueborder so let's go ahead and see how fast
we can do that's only going to the optionshere for it and there right here on the side so were looking to use a title or subtitlesaid air information right there someone to go ahead and delete those options and what'snice is if you don't want them you just remove the text and they just completely disappearand so there's our header and for the pricing working to just make it similar to what wesee on digital oceans website which is five and instead of monthly working to do that/mojust like that per month working to move it obviously okay sets our pricing and then wehave our features right here and i don't think we need to adjust anything in them icon colorwill not commit adjust anything in those looming collapse that in the footer if you noticehere there's actually just one big button
here this is more for informational purposesso i'm in a remove the payment button that is right there so all you have to do is highlightand remove it and that's what i love about this pricing table builder that's as simpleas it is to get rid of that button if you don't want it and i don't want this additionalbit of info there and you can see there it is now obviously we have some spacing issuesand what i did to overcome that is i just put a space and right there just literallya space in a kind of put that space back there for me summit collapse footer going to ribbonand i don't want that that ribbon there i do think the ribbons are pretty awesome andyou can put it on whatever side you want and you can make it say whatever you want butfor this example i'm going to have to remove
it just like that now let's go into the styleand take a look at some of her options there so our background color we know we want thatto be white just like this and that's our background color and actually i remember nowwhen i was initially making this this page that was actually just for the header andwe got rid of the header of the title and the subtitle so let's go ahead and collapsethat i actually didn't need to do that were actually going to now start playing aroundwith the pricing options so the background color here is good to be white let's see ifthat gets us that got us halfway there whoops and we have more options here we want to playaround with the padding i don't think we need to play around with the color is fine i canplay route the topography as you seen the
currency symbol that's okay as well and ithink it's this fractional part is what we need to play around with no no no not thefractional part it's the. let's see position below position beside thereit is what that position beside and let's see i think now i might be there we go soto get this there i had to for the. i had to position it beside and then i havethis vertical position option right here sorting to go to the bottom and that's what we sellright there it's just right there on the bottom okay so that is the pricing let's go to ourfeatures and it's the same thing working to get our background color just like that inthe end then let's change the color of the items we want that blue i don't think i havein my clipboard anymore and this is why say
it's good to have a little text editor areyou saving all this stuff let's take the blue right there there it is okay so i got theblue so let's space that blew in and there it is who it's so bright okay some click onthat the collapse said i'm not to play around with any of the topography the alignment isfine the with this fine now the divider let's get rid of that now the divider we probablyneed to maybe space a little bit let's see if we can space it out just a little bit ithink i'm when i have to go into the topography option like this and scroll down to the lineheight let's see there we go so we can space that however we want maybe just a little bitmore like that actually it gives you the option of pixel or em i prefer pixel like that let'ssee there we go just like that though looks
fine to me okay so that is it for our lineitems the feature boxes go to the footer it's this area here working to make that whitesand there it is so were getting getting pretty close now were getting pretty close now let'sgo into the advanced tab now i need to make a border on this item right here some to clickon background and border and i'm in a choose a color enema to put that same bright bluein just like that and now we have a border but the only promise this border needs totouch this border and they all kind of need to link together but we have that little bitof padding that you see in the column there in a minute have to get rid of that and soi think what i'm going to do is i'm going to click on column and i'm in the column settingsbut go to advanced and for the padding and
to put zero let's see so we have zero nowlet's see what it looks like what when i did that i lost my little border so let's seeif we can get that back i wonder if i needed to make this one let's see let's see if thatgot me my border back it didn't okay so i gotta go find what happened to my border togo ahead and now click on the element here again and i would go into advanced anima goto background and border maybe i just need to make my border thicker or maybe actuallyjust need to select the border by choosing border type solid and then one about thatokay there is my border i knew i would find you and that i got a select that border colorokay i'm just getting a little ahead of myself let's choose a border color and we've gotthat blue there it is now standing out now
or get ourselves a border you can see thatright there okay so now what i'm in the need to do something you need to clone this allthe way across in each column i'm going to have to get rid of that padding so they allkind of a butt up against each other and so what i want to do here is just the duplicatedfour times just like that animal to move them all across you can see i have to just thepadding so when i do this one last because i need to figure out how to make it a littlelarger and put a box shadow so you can see it's larger and then there's this kind ofa blue box shadow swimming to do is just blast through this andaman to set this to zero andhim to click on here actually make sure i do it right click on column right there anddo the same thing here just like that and
then for here mona click on that and makesure i get that right there looks like i didn't get it right here that's okay let's go anddo that again larry go so now we have it looking pretty close to where we wanted it looks likei might have accidentally messed this column up so let me click on that column and seewhat i did wrong let's see let's go like this and this is good this is good i think i messedthis column up i will go and fix that in a moment but let's deal with the elephant inthe room and that is this i need to make this bigger i need to add some box shadow and ineeded to just sit on top of this and on top of this so let's see how we can accomplishthat someone click on the actual elements right here and then i would go to the advancedtab emma play around with the margin in the
padding so let's see here so for the marginlet's see how a negative margin's gonna look at that's going to accomplish it someone togo to a -10 like that and actually i think i needed to zero it out in the column forsolemnly go back into the column remember how i zeroed it out on all of these the paddingslits zero that out okay that's what i will never go we already have it taller we alreadyhave it here and right here on this side it's this one's on top of that and there's a littlefix for that so we go back into here go back into my advanced and of course i want to addthat box shadows well now for i think i needed to play around with the padding a little bitlet's see actually let me zero out something in the column if i go back into the columnmake my margins is zero as well in all that's
left is stretching it down i know how i didthis i was playing around with this bottom area right here in the setting so if i'm inthe price table and i went into the style and then i went to the footer i've got someoptions here for additional information and this is the info that it shows here so let'ssee if there you go now it's now it's: there we go just like that you see how it's increasingthat's that's actually perfect for me maybe down the 40 or something maybe 3535 like thatlet's see if we get a little bit of a box shadow going on on that so i think it forthat i just go to advanced and then go to background and border and then here's a boxshadow's and i've got a bit of a box shadow going on to but my big problem is that thiselement is not on top of this element and
unfortunately with this there's a little tweakyou need to make it via css now if you have the pro version and you must if you're makingthis pricing table if we go to the advanced tab of the pricing table there's this customcss option and we just need to paste something in there and someone to bring that over rightnow actually we don't put it on the price table we put it on the column itself to havethis column be on top of everything else in the scalded z index so when i click on columnand go to advanced and then custom css i'm just gonna paste it in right there and youcan see it immediately lifted it on top of everything else and so this is called thez index and it's basically how you use css to instruct the browser what would appearon top so sometimes when you see a sticky
header on a website you scroll and it appearson top of everything that's usually going to have a z index is a higher number thanothers see indexes and i know it's a little geeky there but so let's see how it's againright now and you see it's actually pretty close only thing i would do differently isi would scrunch these and just ever so slightly and i've got to find out what happened herewhy these aren't linked up let's do that real quick okay i figured it out i had just puta wrong setting here for padding i had ones in there for this column and that's wherethat problem was coming in so you can see how were looking so far you can see we'vegot ourselves a header here that's pretty spot on a future grid and this pricing tablethat is pretty spot on one thing i would do
is maybe add a little bit of spacing in thispricing tables section here so we were doing a bit of 70 i think okay so we've got somespacing now let's just add a quick section here and finish wrap this up and working tojust go ahead and get that blue again and the same blue that's in this column thereand go like this in my blue to make the background of this section that same blue go to stylei'm going to just do a solid color this time not to do a gradient paste in my color andthen we have this volunteer and then we have a button or headline so i could just grabthis if i wanted like that and we can change the alignment to be centered like that andwe can go ahead and get ourselves this little bit of text right here and remember that wholeissue with the line break we have to put that
br someone do that after the letter a so thelarge right here some ago like that and it's going to give us that and then we just needto add a bit of spacing to it so let's go ahead and were going to unlock here and forthe top i'm in a go 70 and for the bottom 70 just like that and then we can just popa button in there and use that same style so anyways this is it's i mean this is itright here i'm in to do the little bit of touchup and i will have a link down belowfor you to import this if you wanted to have it for yourself sorry for the length of thisvideo i just want to show you the power of elementor and how you can pretty much in designwhatever you want you just have to get familiar with the controls and find what you want todesign and with the tools it gives you there's
literally no limits you could solve the onlytwo little bits of code i added was at one point i added the back it] br to get thisto be two lines and the only other bit of code i added was to put this on top of thiselement here on the right of it that's the only time i added any bit of code to thistemplate and we are able to do the most amazing things with it remember i got a link downbelow if you wanted to purchase elementor pro i also have a link down below to hostingyou get 57% off and if you did purchase elementor pro through my link i will happily give youaccess to my elementor essentials course because you made it to the end of the video i havea free gift for you but before i talk about that i want to ask you to do something forme if you can give this video a thumbs up
down below that would really help me out ifyou're not subscribed to the channel go ahead and click on that subscribe button and becomea subscriber and support this channel and if you'd like youtube to notify you when iupload new videos there's a little bell next to that subscribe but you can click on thatand set that up as well if you have any questions or a comment about this video i'd love toanswer it there's a comment section down below all you have to do is put in your questionor comment i respond to every single one i made a course just for you and it's calledthe three steps to wordpress success and i want to give this to you if you'd like toenroll in this course there's a button right here off to the right you go ahead and clickon that role as a student and that's just
my way of saying thank you for supportingme and making it to the end of this video i make them just for you
Tidak ada komentar:
Posting Komentar