Welcome back to another video my name is Adam from WPCrafter.com were I make WordPress videos
for non-techies and non-coders and in this video me to do something special I been using
this new page builder called Elementor and I made a few videos on it but I'm actually
to show you how I was using this yesterday I was testing one of the Pro modules now if
you're not familiar with Elementor it's a free full-featured page building plug-in for
WordPress you can create some amazing things in fact a couple days ago they released a
new feature to give you the option to add gradients to different elements and I'll be
showing you that in this video but they also have a Pro version that add some additional
features to the plug-in and one of those features is the ability to add forms so I was using
it and I just felt inspired to see what the plug-in could do and after about 45 minutes
I was able to almost completely re-create the digital ocean website now digital oceans
websites beautiful website you see you got this beautiful blue gradient a very stylish
contact form here where you can create an account and it just blends into the background
right here you have a really nice style the future grid right here with six different
features and then you have this different type of pricing grid and that was going to
be a challenge and then you have a call to action down here that I created someone to
see how far I could go in creating this website with zero code skills and zero code that anyone
can do see if I can do it myself using Elementor and Elementor Pro and this is what I came
up with so you see I've got that beautiful gradients and I've got this a form right here
I got a feature grid and I've got that price table pretty spot on by the way I got there
price table and then this final call to action now it took me about 45 minutes to create
this in one of my doing this videos I'm actually going to create it now normally I am in all
my videos you can see me right now in the top right and actually get rid of that so
we can just focus on the how to build this page with Elementor now there is one caveat
you can do almost all of it with the free version of Elementor but there's two things
you can't do with the free version because there only features found in the Pro version
so you've got this form here Elementor Pro has the most powerful visual form creator
and styler that I have ever seen there's nothing like this and that's part of the Pro package
and then this pricing table right here this fully customized pricing table this is only
available in the Pro version as well to be able to come up with a highly customizable
pricing table like you see here which is pretty spot on in every way and you need the Pro
version for this as well now the programmers is not that much money they have different
licensing options I do have a link down below and here's the best part when you click on
my link to purchase Elementor Pro not only are you going to get an amazing plug-in you're
going to get to support these developers that have been so generous with the free version
but I'm also going to give you access to a course that I've created called Elementor
essentials and so you're going to learn my complete website building system using Elementor
and it is going to save you time it's going to cut down your learning curve and is can
help you to get amazing results in building a webpage for your self that you can be impressed
by so that is Elementor Pro and my special offer there is a link down below and I wanted
to give you Get the last thing I want to mention before I go is that Elementor has an amazing
template library that gives me the ability to export this template and I can give it
to anyone is this the file and then you would import that so I'm also going to provide a
link down below there's no sign-ups no anything is just the link and you can download this
file and you can import it into your template library if you want to see exactly what I
did to create this beautiful beautiful webpage right here now and the last thing is I'm not
suggesting you go and copy websites verbatim no one has a copyright on color schemes and
font schemes and overall layout obviously it's not a good idea to take someone's images
very not is not a good idea at all is not a good idea to take someone's icons these
are
all right this is kinda new for me I'm used to being in every video but that's all right
this is a learning time to learn exactly how we can re-create any webpage that we see on
the Internet almost exactly so let's go ahead and get started so I'm assuming that you already
have hosting if you do not have hosting you can visit order new hosting.com and it will
take you over to InMotion hosting and this is the page you'll see you'll see a picture
of me there and this is a special discount that they give to my viewers here on YouTube
so the normally they might have a 20% offer 30% off when there's a sale but for my viewers
you're going to get 57% off and it is just when you visit order new hosting.com and you
can go ahead and order your hosting package from them it's very awesome reliable fast
hosting and it's very affordable all their support is US-based and you can call him when
you need help you can live chat them and you can open a ticket so anyways here is WordPress
that I've already installed Elementor and I've also installed Elementor Pro now Elementor's
easy would just go to plug-ins add new and you can install Elementor that way and then
if you purchased Elementor Pro you can download it from your members area and you can upload
that yourself and then activate it so I'm going to start so before I begin there are
two tools that I will be using most likely throughout this video and if they are called
web browser extensions now I'm currently using the Google Chrome web browser but they are
also available for Firefox if you are using Firefox and these tools and allow you to guaranteed
these are custom icons here I'm not saying that you definitely don't want to take peoples
text and I'm not suggesting any of that I was just using this as an example to show
you the power of Elementor Pro and that anyone that that wants to build a website can do
it without touching a line of code it just takes having the right tool and having the
right training and you'll get both of those with Elementor Pro and the link down below
so anyways I'm going to take off and working to start building this webpage analyze a webpage
and this one right here will basically let you know any color that you see on any webpage
and this one right here is gonna let me know any font on any webpage in the size so let
me show you that an action so here I am on the real digital ocean website and so the
color extension right here is called color zealous he could just Google color Zillah
and then the name your web browser and I'm sure the extension will pull right up so the
way works as I clicked on it and then I choose pick color from page and I can go like this
and it will show me any color on it on a page that I'm on so here's that little bit of a
green right there let's see if I can go on and there's a green here's the blue the different
shades of the blue and what happens is when I click on my mouse and scan a copy of the
color code into the clipboard of my computer and then I can paste it into Elementor wherever
I want to put that color so that is color Zillah the other one is called what fonts
and you could just search for what font Chrome extension or what font Firefox extension and
when you click on this anywhere you move your mouse it's gonna show you the name of the
font and the size so I'm showing that this is Proxima nova now I do know that Proxima
nova is a paid font when I click on it is going to show me as a says type kit but that's
okay really use an alternative font but what's nice is I'm able to see the size of the font
right here and sometimes the weight is just saying its regular which is fine but I can
scroll anywhere on over any font and see exactly the size of this is going to be smaller in
seat 16 pixels the fontweight is 600 so working to be able to use those values to try to re-create
a similar font scheme not using the same font though but for a similar size and weight it'll
work out fine and that we can basically hover over anything severe and I want these two
tools and I would go ahead and recommend you install it so right away what I'm going to
do is create this section and when you look at any webpages just a series of sections
that have column so when I am looking at this I see a section with the gradient blue in
the background I see two columns what you see right here and what you see right here
in this is just some text and a form of field and a little bit more text and this is just
simply an image and when I look here I see another section with a full column here that
is just given me a headline and then I see these three columns right here each one has
an image headline and a little bit of text and then I see a duplicated and then when
I scroll down it's the same thing we have a headline I am not going to be able to re-create
this switcher right here so when you click on this it toggles the way they charge I'm
knocking to be able to re-create that so but I am to be able to re-create everything that
you see in this pricing grid and this can be pretty close and then I'm going to skip
this map it just an image and this is just a series of images you can see is just one
big thing of images on the skip that and I'll do this final call to action and so your to
get the point so right off the bat though I'm going to tell you this form section right
here in Elementor it requires the Pro version so let's just go ahead and get started some
to go to pages anima to add a new page and let's just call this digital ocean I write
and I am using the generate press theme will also have a link down below to it it's free
but they have an add-on package that gives me the option to disable some elements on
the page so just for cleanliness and to disable the header the navigation M actually disable
all of these because I just want to look at the page builder and I need to go here in
choose content no sidebar so that's letting Jerry press know that I am working with the
page builder and I've got a check on this box so now when I click on publish and then
I click on edit with Elementor like this it's been open up Elementor and it's just a blank
completely blank slate and that's fine so let's get started on the first add a new section
and Artie know it's gonna be a two column section like this so now I have these faint
two columns are right here so I already know that I'm good have an image here so why don't
I just first search for image and let's just get that in there real quick some of the drag-and-drop
that over let go and then when I click right here a minute delete the placeholder click
on the plus and I have that image right here is a matter fact I've already uploaded it
by the way summary click on insert and we can see there is my image now right here I
already know working to have a headline and there were never form and number and have
some text so let's go ahead and do that right now so my click right here and then here's
my heading some in a drag-and-drop that's and then I'm in a click right here again and
I'm in a scroll down to the Pro element and I'm going to choose the form animal to put
that right underneath the heading elements and then right underneath here I'm going to
put instead of a heading element for that little bit of text I'm talking about this
little bit right here I'm in a go ahead and use the text editor for that and let's get
that dropped right there okay so now what I'd like to do is get the background looking
right in this section so when I hover over any of these elements here you see this option
here for sections only click on that and it's gonna say edit section so the first thing
I want to want to do is click on style and we have all these great background options
now for me I'm in use the gradient option which is right here and what a gradient is
I even made a video on this yesterday you need to colors now they are using a gradient
here you can see all the way on the top right it's a lighter blue than it is on the bottom
left so I'm in use my color picker now to get this exact number to get a close enough
so that you get the point so many choose pick from color picker and then I want to go to
the very bottom here and I'm in a click and that's gonna put that color code into my clipboard
number and go back here to Elementor and so here's the first color of the gradient click
right here and I'm going to paste that in so there you see we've got the first color
of this background now I'm in a go and I'm to get this lighter blue right here now this
is and can be an exact science like I said so there you go it's just a little lighter
and let me click this to make that collapse and then right here I'm going to put the lighter
blue in just paste it in like that so you can see we have it now if we want to make
it similar to how it is here working have to tweak it so it's darker here in lighter
there so let's play around with these settings real quick summary go from linear to radio
and then I'm going to have it go to the let's see how about the bottom left let's see if
that does it and I think that actually did it so I'm have to put some spacing so we can
better see it and change the colors of these fonts but working up probably have to play
around with these just a little bit these toggle switches here in order to get it just
right you see that Eric I think that's actually probably perfect so first let's put a little
bit of space between these elements in the top and the bottom since were already in the
section so we have this bit of space here in this bit of space here looks equal some
to play around with the spacing here it's called padding in the advanced tab to see
if I can get close to that some to go to padding right here I'm good have to click on this
this little link right here to and went when it's that when it's highlighted and you increase
one it increases them all and that's not what I want I just want to increase the top and
the bottom there so I'm thinking the top might be 80 pixels so when I hit 80 and that looks
close maybe a little more than is there so let's actually go with 70 I think that's pretty
close and then for the bottom I want to put 70 as well and when you're in Elementor you
can always click on this little tab here to preview what it looks like so you can see
that I'm I'm pretty close actually little tweaking to lighten up the color on the bottom
left here so let's go ahead and play with that a little some to go back to style and
let's see want to play around with these little bit just the very goats lightning up a bit
okay that's actually looking very close right there alright so now I've got my spacing I
think that I need to have a little bit of padding in this column on the left and right
to kinda squeeze it in a little bit and maybe here as well to to make the image a little
smaller so let's do this column first summit click here it says column and him click on
advanced animal to do the padding again I'm going to click on this little link and for
the left and the right time and it just play around with it may be maybe 25 or 30 on each
side let's see here okay so let's go like that she can see it's it's tightening up maybe
just a bit more maybe I will go a little tighter let's see what would 50 looks like see 50
okay that's going to be fine so I'm right here and I'm going to highlight and copy this
little bit of text and I want to go to the heading here in a minute pasted in just like
that now let's first make that font color white so working to do that in the style and
then the text color a minute she was here and then I'm a go to White so there we have
it now the font here is a lot thicker and it's a little more spaced out here so let's
see if we can get close to that now here's one of things I don't like about Elementor
in that's when you're using the heading elements I can hit as many enters as possible here
in it doesn't reflect there it's not made to do that you actually have to put a little
bit of HTML and it's simple whenever you want to\
you put bracket BR bracket like that and then it will put it on a\
like that such a little Elementor tip for people that aren't used to coating and I said
that would be very minimal coding in this tutorial so let's play around with the style
some more and see if we can get it closer so I'm a new turn on the topography options
and this is can allow me to customize the topography right here so first let's try to
get the size someone ago I go this actually I think let's just do this for speed to go
into what font and see what size it was already know it's a 4040 pixels there so I'm in a
go to 40 just like this okay and now I want to make the weight Leiter sewed so thick right
here let's let's change that something is probably about 500 or 400 let's see 400 so
it's a little better actually maybe just the two had bit lighter but I think 300 makes
a little too thin actually I think were going to go with 300 looks pretty close considering
were not using a different font so the line height was set to 50 let's first click on
the right here it says PX and then let's see if we can go up to 50 and see if we like how
that looks so there is a 50 and I guess it's pretty close let's see so there it is cloud
computing designed for developers and let's exit what font it looks close enough to me
alright so you can see the differences in the font that were using so let's go ahead
and open this up a little bit now let's start tweaking our form here and like I said earlier
that Elementor is the only visual form builder that I've ever experienced that allows you
to build the form and style the form visually so one of my dues on my click on the element
right here and now I have the option so I just can ask for name and email I don't want
message, click on the X and you see that made that go away now also many get rid of these
field titles right here there called the labels on the click right there to get rid of the
labels so were already getting closer to it now we just need to changes some of these
styling options to get it to look similar to here so we have a white button we have
a white border we have this very transparent but it's slightly you can see a slight hint
on it this font is whites and let's see if we can get it pretty close to that song go
ahead and take that color code again usually I will make a note pad and put these color
codes in it so I don't have to keep using the color picker alright so work to spend
most of our time in the style options but let's go right hero quick and I want to click
on the submit button and change what it says MMA could say create an account I just want
to match the text there to make it say create an account now when you are creating a form
you want to go to this option here email and options you want to put your email address
in the said this is where the submissions to this form and to go to and you also want
to put in your subject line and all this kind other information right there so let's go
to our style options and a first of all let's see I don't want the form styling let's look
at the field so the text color is going to be white so I can choose the option why right
here now we can see because the backgrounds also white and the topography will see if
we have to play around with that the background is white but working to make it transparent
so go all the way down but up just a tad tad because I think it was a long handle a slight
tint to it there we go so many do that and the border color I am going to make a border
animate to make that white now let's see if I need to make it any thicker want to go here
K years digital ocean and then hears us so it looks right is pretty close now I'm in
a go ahead and start playing around with that button and seeing if we can get that pretty
close so now my new go into the styling of the button and let's go ahead and make the
color of the text what I copied in my clipboard which is that deep blue and then I'm going
to want to change the background color to whites and it looks like we are getting there
we are pretty close now so when I go here we can see if it looks pretty close to me
so now let me go ahead and put this in my clipboard this information about the terms
of service right there now obviously there's little adjustments we can make we can adjust
the spacing we can get it exactly perfect but I want to go with this forsakes of times
TO click on the textblock here and let's go ahead and click on the edit there and I want
to go here and I'm gonna paste in my little bit of text now here's an option you can highlight
this and change the text color here if you want but then if you do that and make it why
you're not can be able to see it here because it's going to show it here but if we go to
style we can change the text color here and we can make that white sets kind of a good
best practice there to go ahead and change it in the style don't change it in here unless
you want multiple different colors you can do that now it's obviously a little too big
right here sorting to make that smaller return on the topography and my guess is it low\'85
See I don't want to guess let's see how big that it is that is 14 pixels so let's go ahead
and set this to 14 as well just like this and there is our terms of service now one
of the problem so far is this is aligned to the top we want to kinda push it down into
the middle you see how this is in the middle right there we want to push that down into
the middle a little bit so what I'm in a do is I'm going to go into the column options
for right here somewhere click on column and it's gonna pull up my column settings and
in here working to have an alignment option that alignment option can be found underneath
the layouts and it's his content position and we want to change that to be in the middle
so now when I go like this it's showing that perfectly in the middle nicely we can put
little spacing and stuff like that but this is pretty close as it is you can see it's
very close and I saw how easy that was to change the form and style it like that it's
pretty amazing so alright let's go back here now what we want to do is we want to start
working on the next section we just want a headline and then we want to start with a
big future grid right there so to make this two separate sections one with the headline
and one with these feature grids some to go here to create a new section and it just to
be one column like that and I'm a go ahead and put the headline in I like the styling
of this I think it's probably similar to that to that but a different color we see this
and then we see that lets the size difference is this right here were run in a 32 in this
right here were at 40 so when I want to do is I'm just going to duplicate this like that
and then I'm in a drag and drop it here click on it for some to change the color to Blackman
to lighten it up a little bit just to soften it up and then I'm going to click on the content
I want it all on one line actually what I should do is just copy there little bit of
text right here like that and I want to put that in so now it's on one line I do want
it centered so I can click on the alignment option right here all right so there you go
I have it in the center and want to add a little bit of spacing to the top and bottom
I think we should stick with that 70 number we had here so I'm in a go to the section
right there on the click on it and I want to go to the advance and I'm going to add
a bit of padding someone new click on this lock here and on the top and bottom let's
just go with 70 like that and so it's can give us that space the last thing I forgot
to do was to change the font on this summit click on it and it set the 40 and let's go
down to 32 which is very similar to what this is the 32 Sedona work on my feature grid and
one of the dues create a new section and in this section is going to have these three
columns let's go ahead and get our three columns in there just like that now let's find which
elements we should use now I could just put in each of those columns and image headline
and then some text but there is a specific element that is made to do that siliceous
scroll down to that element right now it's gonna be a general element and it's good to
be this image box right here so I can just drag and drop my image box and you can see
there it is so the first element in an image box is the actual image some to go ahead and
click on the settings here click on delete and then I'm going to choose it and it's right
here now this is one of those things where I grabbed it from their website and I talked
recommend that okay so let's go ahead and just take some of this text right here and
see if we can get it to look very similar just like this and I'm at a pace that in there
so we have it so far except there is alignment differences here it's aligned to the right
here it's not and then there's some changes that need to be made right there so we are
going to go into the style settings first and then were to go to words is content to
look at some of the options we have there so if I was in the content tab right here
you see there was an image position and if I go like this it's not going to be what I
want to scan a look like that and that's not what were after so if I go to the style the
overall alignment is going to be right here underneath the content tab and I can choose
to the right and that's kind of what we see happening over on digital oceans site now
for the title is the font looks a little too thick and I don't know if the size is right
let's see so it is a 24 and it's a 600 and the weight of the font so let's go ahead in
the title and let's make the color similar to that normally I would suggest having your
font color codes in a text editor we can just copy and paste it across on the customize
the topography to make this 32 just like we saw actually wasn't 32 is 24 sorry and it's
a little too thick let's see what the 600 looks like he had to different font some to
go down to 400 maybe 500 there go I'll do 500 just like that and you can see let me
get out of what font it's looking pretty good here and the content color should be a little
darker so I go down a description let's go to the font let's make that darker as well
just like that that looks good to me so now let's see how this is looking and Emma to
compare it and it looks fine to me you can of course manipulate the spacing a little
bit so now what I would do is him and it duplicated two times like this and I'm going to drag
and drop it over and I'm going to just duplicate this entire section I guess I find wanted
to I could just duplicate it and have two elements in each of these rows I could just
go like this and like this and that I can put some spacing between it but I think I'm
in a just make it a separate section altogether to delete those out anima click on section
and I'm in a just duplicate the section that we have some spacing issues we definitely
want to have a bit of spacing between these so let's go here to section and I'm in a pull
of the section options but go to advanced and for that I'm going to margin to push some
space between these somata unlock that and I am going to actually here's a situation
where I think we can keep it locked and then roll up will increase both of them at the
same time so maybe something like but see my ball and get something like that that's
fine so let's just go up to 65 just for kicks and there it is so so far we have that and
then we have our feature grid okay so now is going to be the hard part of this and that
is to create this grid not to put a headline you know how to do that you already know how
to do button I'm just gonna work on this grid for the remainder of this video on this pricing
grid in case him to go back to Elementor them to click on add a new section and I want a
five column option now what's odd is most page builders don't give you a five column
option but Elementor does and I like that a couple years ago I use visual composer and
if you've used that page builder you know there is no five column option I don't I don't
know why that is but I've experienced that so anyways I'm going to click on that and
working to make this five column pricing table right now this is probably one of the also
one of the most powerful Pro elements is this pricing table I've never seen a pricing table
plug-in or software that has this much power it's an and options to customize it so here
it is price stable I'm a drag and drop it in there and so this is just the default look
that is giving us and working to get this all changed to look similar to here are we
have some line items there's no line in it we have a dollar we have a number here for
the pricing and we have this little bit of information just appearing off to the side
of that and we have this border this blue border so let's go ahead and see how fast
we can do that's only going to the options here for it and there right here on the side
so were looking to use a title or subtitle said air information right there someone to
go ahead and delete those options and what's nice is if you don't want them you just remove
the text and they just completely disappear and so there's our header and for the pricing
working to just make it similar to what we see on digital oceans website which is five
and instead of monthly working to do that/MO just like that per month working to move it
obviously okay sets our pricing and then we have our features right here and I don't think
we need to adjust anything in them icon color will not commit adjust anything in those looming
collapse that in the footer if you notice here there's actually just one big button
here this is more for informational purposes so I'm in a remove the payment button that
is right there so all you have to do is highlight and remove it and that's what I love about
this pricing table builder that's as simple as it is to get rid of that button if you
don't want it and I don't want this additional bit of info there and you can see there it
is now obviously we have some spacing issues and what I did to overcome that is I just
put a space and right there just literally a space in a kind of put that space back there
for me summit collapse footer going to ribbon and I don't want that that ribbon there I
do think the ribbons are pretty awesome and you can put it on whatever side you want and
you can make it say whatever you want but for this example I'm going to have to remove
it just like that now let's go into the style and take a look at some of her options there
so our background color we know we want that to be white just like this and that's our
background color and actually I remember now when I was initially making this this page
that was actually just for the header and we got rid of the header of the title and
the subtitle so let's go ahead and collapse that I actually didn't need to do that were
actually going to now start playing around with the pricing options so the background
color here is good to be white let's see if that gets us that got us halfway there whoops
and we have more options here we want to play around with the padding I don't think we need
to play around with the color is fine I can play route the topography as you seen the
currency symbol that's okay as well and I think it's this fractional part is what we
need to play around with no no no not the fractional part it's the.
Let's see position below position beside there it is what that position beside and let's
see I think now I might be there we go so to get this there I had to for the.
I had to position it beside and then I have this vertical position option right here sorting
to go to the bottom and that's what we sell right there it's just right there on the bottom
okay so that is the pricing let's go to our features and it's the same thing working to
get our background color just like that in the end then let's change the color of the
items we want that blue I don't think I have in my clipboard anymore and this is why say
it's good to have a little text editor are you saving all this stuff let's take the blue
right there there it is okay so I got the blue so let's space that blew in and there
it is who it's so bright okay some click on that the collapse said I'm not to play around
with any of the topography the alignment is fine the with this fine now the divider let's
get rid of that now the divider we probably need to maybe space a little bit let's see
if we can space it out just a little bit I think I'm when I have to go into the topography
option like this and scroll down to the line height let's see there we go so we can space
that however we want maybe just a little bit more like that actually it gives you the option
of pixel or EM I prefer pixel like that let's see there we go just like that though looks
fine to me okay so that is it for our line items the feature boxes go to the footer it's
this area here working to make that whites and there it is so were getting getting pretty
close now were getting pretty close now let's go into the advanced tab now I need to make
a border on this item right here some to click on background and border and I'm in a choose
a color enema to put that same bright blue in just like that and now we have a border
but the only promise this border needs to touch this border and they all kind of need
to link together but we have that little bit of padding that you see in the column there
in a minute have to get rid of that and so I think what I'm going to do is I'm going
to click on column and I'm in the column settings but go to advanced and for the padding and
to put zero let's see so we have zero now let's see what it looks like what when I did
that I lost my little border so let's see if we can get that back I wonder if I needed
to make this one let's see let's see if that got me my border back it didn't okay so I
gotta go find what happened to my border to go ahead and now click on the element here
again and I would go into advanced anima go to background and border maybe I just need
to make my border thicker or maybe actually just need to select the border by choosing
border type solid and then one about that okay there is my border I knew I would find
you and that I got a select that border color okay I'm just getting a little ahead of myself
let's choose a border color and we've got that blue there it is now standing out now
or get ourselves a border you can see that right there okay so now what I'm in the need
to do something you need to clone this all the way across in each column I'm going to
have to get rid of that padding so they all kind of a butt up against each other and so
what I want to do here is just the duplicated four times just like that animal to move them
all across you can see I have to just the padding so when I do this one last because
I need to figure out how to make it a little larger and put a box shadow so you can see
it's larger and then there's this kind of a blue box shadow swimming to do is just blast
through this Andaman to set this to zero and him to click on here actually make sure I
do it right click on column right there and do the same thing here just like that and
then for here Mona click on that and make sure I get that right there looks like I didn't
get it right here that's okay let's go and do that again Larry go so now we have it looking
pretty close to where we wanted it looks like I might have accidentally messed this column
up so let me click on that column and see what I did wrong let's see let's go like this
and this is good this is good I think I messed this column up I will go and fix that in a
moment but let's deal with the elephant in the room and that is this I need to make this
bigger I need to add some box shadow and I needed to just sit on top of this and on top
of this so let's see how we can accomplish that someone click on the actual elements
right here and then I would go to the advanced tab Emma play around with the margin in the
padding so let's see here so for the margin let's see how a negative margin's gonna look
at that's going to accomplish it someone to go to a -10 like that and actually I think
I needed to zero it out in the column for solemnly go back into the column remember
how I zeroed it out on all of these the padding slits zero that out okay that's what I will
never go we already have it taller we already have it here and right here on this side it's
this one's on top of that and there's a little fix for that so we go back into here go back
into my advanced and of course I want to add that box shadows well now for I think I needed
to play around with the padding a little bit let's see actually let me zero out something
in the column if I go back into the column make my margins is zero as well in all that's
left is stretching it down I know how I did this I was playing around with this bottom
area right here in the setting so if I'm in the price table and I went into the style
and then I went to the footer I've got some options here for additional information and
this is the info that it shows here so let's see if there you go now it's now it's: there
we go just like that you see how it's increasing that's that's actually perfect for me maybe
down the 40 or something maybe 3535 like that let's see if we get a little bit of a box
shadow going on on that so I think it for that I just go to advanced and then go to
background and border and then here's a box shadow's and I've got a bit of a box shadow
going on to but my big problem is that this element is not on top of this element and
unfortunately with this there's a little tweak you need to make it via CSS now if you have
the Pro version and you must if you're making this pricing table if we go to the advanced
tab of the pricing table there's this custom CSS option and we just need to paste something
in there and someone to bring that over right now actually we don't put it on the price
table we put it on the column itself to have this column be on top of everything else in
the scalded Z index so when I click on column and go to advanced and then custom CSS I'm
just gonna paste it in right there and you can see it immediately lifted it on top of
everything else and so this is called the Z index and it's basically how you use CSS
to instruct the browser what would appear on top so sometimes when you see a sticky
header on a website you scroll and it appears on top of everything that's usually going
to have a Z index is a higher number than others see indexes and I know it's a little
geeky there but so let's see how it's again right now and you see it's actually pretty
close only thing I would do differently is I would scrunch these and just ever so slightly
and I've got to find out what happened here why these aren't linked up let's do that real
quick okay I figured it out I had just put a wrong setting here for padding I had ones
in there for this column and that's where that problem was coming in so you can see
how were looking so far you can see we've got ourselves a header here that's pretty
spot on a future grid and this pricing table that is pretty spot on one thing I would do
is maybe add a little bit of spacing in this pricing tables section here so we were doing
a bit of 70 I think okay so we've got some spacing now let's just add a quick section
here and finish wrap this up and working to just go ahead and get that blue again and
the same blue that's in this column there and go like this in My blue to make the background
of this section that same blue go to style I'm going to just do a solid color this time
not to do a gradient paste in my color and then we have this volunteer and then we have
a button or headline so I could just grab this if I wanted like that and we can change
the alignment to be centered like that and we can go ahead and get ourselves this little
bit of text right here and remember that whole issue with the line break we have to put that
BR someone do that after the letter a so the large right here some ago like that and it's
going to give us that and then we just need to add a bit of spacing to it so let's go
ahead and were going to unlock here and for the top I'm in a go 70 and for the bottom
70 just like that and then we can just pop a button in there and use that same style
so anyways this is it's I mean this is it right here I'm in to do the little bit of
touchup and I will have a link down below for you to import this if you wanted to have
it for yourself sorry for the length of this video I just want to show you the power of
Elementor and how you can pretty much in design whatever you want you just have to get familiar
with the controls and find what you want to design and with the tools it gives you there's
literally no limits you could solve the only two little bits of code I added was at one
point I added the back it] BR to get this to be two lines and the only other bit of
code I added was to put this on top of this element here on the right of it that's the
only time I added any bit of code to this template and we are able to do the most amazing
things with it remember I got a link down below if you wanted to purchase Elementor
Pro I also have a link down below to hosting you get 57% off and if you did purchase Elementor
Pro through my link I will happily give you access to my Elementor essentials course because
you made it to the end of the video I have a free gift for you but before I talk about
that I want to ask you to do something for me if you can give this video a thumbs up
down below that would really help me out if you're not subscribed to the channel go ahead
and click on that subscribe button and become a subscriber and support this channel and
if you'd like YouTube to notify you when I upload new videos there's a little bell next
to that subscribe but you can click on that and set that up as well if you have any questions
or a comment about this video I'd love to answer it there's a comment section down below
all you have to do is put in your question or comment I respond to every single one I
made a course just for you and it's called the three steps to WordPress success and I
want to give this to you if you'd like to enroll in this course there's a button right
here off to the right you go ahead and click on that role as a student and that's just
my way of saying thank you for supporting me and making it to the end of this video
I make them just for you
For more infomation >> JBL Charge 3 или JBL Charge 2 Plus: какую стоит купить? - обзор от Skay.ua - Duration: 2:06. 
For more infomation >> PlayStation Plus: LittleBigPlanet 3 e Not a Hero tra le novità di Febbraio 2017 per PS4, PS3 e Vita - Duration: 3:49. 
For more infomation >> Suzuki Alto 1.0 COMFORT PLUS Airco/Cruise control - Duration: 1:24. 
For more infomation >> Mercedes-Benz C-Klasse C 350 e Estate Lease Edition-Plus 15% Bijtelling - Duration: 1:18. 
For more infomation >> Ford Focus 1.0 ECOBOOST EDITION PLUS Navigatie, Telefoonkoppeling, Parkeersensoren V+A - Duration: 1:08. 
For more infomation >> Fiat 500X Cross 1.4 Turbo 140pk Cr. Plus Clima, Navi, 18 inch, Rijklaar! - Duration: 1:14. 
For more infomation >> Volkswagen Golf Plus 1.6 TDI 77kw 105pk DSG STYLE Ecc Pdc Trekhaak Navigatie - Duration: 1:41. 
For more infomation >> Hyundai i10 1.25 PLUS 5-D 84PK - 22.600 KM - Duration: 1:35. 
For more infomation >> Audi A3 Cabriolet 1.4 TFSI COD AMBITION PRO LINE PLUS - Duration: 1:40. 
For more infomation >> Volkswagen Golf Plus 1.6 TDI HIGHLINE BLUEMOTION DSG automaat / Clima / LMV / Telefoon / Cruise - Duration: 1:42. 
For more infomation >> Suzuki Alto 1.0 COMFORT PLUS - Duration: 0:49. 
Không có nhận xét nào:
Đăng nhận xét