How to Make Price Tables in WordPress With Elementor

 Hi, guys.
This is Josh from Elementor,
and today, I’m going
to show you how to use
the Price Table widget.
Price Table widget
is a great widget for any business website
that needs to present
its products or services
in a visually appealing, comparable table.
In our widgets panel, you
will find under Pro Elements
the Price Table widget.
Let’s drag it into our page.
Now, like any other element or widget,
Price Table consists of three tabs.
The content tab,
in which we can edit the
content of the widget,
the different parts and
different areas of the content;
the style tab, in which
we can define the styling
of all those different
elements of the widget;
and the advanced tab,
where we can find some
advanced styling options.
Let’s get back to the content tab.
In the content tab, you
will find the header section
where there is a title and a subtitle;
the pricing section, where
you can type in the price,
choose a currency symbol,
choose the period;
the features section, where you can create
a list of features for
this product or plan;
the footer area, where
you can find a button
and add some additional text;
and lastly, a ribbon,
which is a nice addition
for any price table.
Now, let’s check out the details.
In the header area,
I’m going to type in
the title for my plan.
And the subtitle.
Now let’s move onto the pricing section.
In the pricing section,
I can choose the currency
symbol of the price.
In this case, it’s set to dollar.
We can change it to euro,
or let’s say pound sterling.
I can type in the price.
In our case, I’m gonna go for 19.90.
Notice how Elementor automatically
detects the decimal point
and turns the fractional
part into a smaller number.
If I remove the decimal point,
we will get a whole number.
As soon as I add a decimal point,
it’s separated to the integer
part and the decimal part.
Also notice you can type in
a word instead of a number.
Let’s say, Free.
Note how the currency symbol automatically
is not being shown in case of a word.
I’m going to stick to 19.90.
That’s gonna work for us.
Now, in case this price is
a sale, I have an option
of switching it on.
Then I can type in the
original price of this product.
Let’s make it 39.
Then we have the period.
The period could be anything, really.
It could be yearly.
It could also be something
like, there, user,
or even…
It’s really up to you.
I don’t think I’m gonna
stick with the sale.
It’s gonna be just 19.90.
All right, now let’s move
onto the features area.
The features list is a repeater field.
It’s already populated
with three existing items.
Each item consists of a text, an icon,
and a color picker for the icon.
Okay, that looks nice.
I’m just gonna duplicate this list item.
All right, that looks nice.
We can change the text for one of them,
like something like Premium.
Let’s move onto the next part,
which is the footer area.
In the footer area, there’s
a button and additional text.
So, let’s type in some
alternative text for the button.
Start Now.
And the text I’ll add, the
additional text, is going to be
Perfect.
Lastly, I’m going to change
the text for this ribbon
by typing in 50% off,
and notice, you can change the location,
the position of this
ribbon from left to right,
or you can entirely hide the ribbon
if you’re not interested in showing it.
Okay, now that we’re
done entering the content
for the price table,
let’s go to the Style tab.
Let’s have a look at the
style options for the header.
So first thing you have here
is the background color.
You can set the background
color for the whole header.
I’m going to chose this purple color.
That looks nice.
I think I’m also gonna add
some spacing, some padding,
at the top and at the
bottom of the header.
I don’t want it to go on both sides,
so I’m gonna make sure the
variables are not linked.
Top is gonna be 40.
And I’m gonna do the bottom 40 as well.
Next I have the title
and the subtitle color
and typography settings.
Choose a, maybe a yellow
color for the title.
Let’s play with the
typography a little bit.
All your usual typography settings here.
You can see the size,
font family, the weight,
transform, style, line height,
letter spacing, et cetera.
I think I’m gonna just change
the transform of the text
to uppercase to make it
a little more prominent
and just make it a little larger.
Yeah, that looks nice.
I think I’m just gonna
leave the subtitle as it is,
but if you want, you can
obviously change the color
and typography for the
subtitle as well as the title.
Next, we’re going to move
onto styling the pricing area.
So, first thing is, you
have the background color
for the whole pricing area.
Just like in the header
where you have the purple
color set as the background,
we can set a background
color for the pricing area.
I don’t think I’m going to change
that background color for this area.
I’m just gonna leave it
transparent as it is.
We can also change the
padding for this area.
This can be anything we want,
like 80 will give us a
large padding at the top.
Maybe 80 at the bottom.
This can give us a lot
of space for the price.
We can change the color and the typography
for the price area.
The interesting this
is, you choose a color,
and it affects all
those elements together.
You see?
The currency and the price
itself and the fractional part
are all affected by the color change,
but when it comes to the
typography, if we change the size,
notice how it changes,
it all changes together,
but the fractional part
and the currency symbol
are relative to the size
of the integer part.
You need to keep that in
mind, because afterwards,
we’re gonna see how we can change the size
for the currency symbol
and the fractional part individually.
But it’s always going to be
in relation to the size
of the integer part.
I think I’m gonna make
this price in bold font.
So let’s make the weight 800.
That looks more like it.
And I think that’s pretty good.
Now here’s the currency symbol settings.
The currency symbol, like I said before,
if I wanna change the size
of the currency symbol,
it’s going to be set
as a percent of the integer part,
meaning if I go for 100%,
it’s going to be exactly the
same size as the integer part,
and if I go for 50%, it’s going to be
exactly half the size of the integer part.
In addition, I can also set
the vertical position
of the currency symbol.
I can choose whether
it’s gonna be set to top,
middle, or to the bottom.
I think I’m gonna go for the middle.
And I’m gonna keep it at maybe 30 or 33%.
Yeah, that looks nice.
And I’m gonna do the same
thing for the fractional part.
I’m also gonna set it to 33%
and set it to the middle.
Okay, I think I like how it looks.
Next, we have the period.
The period, the lettering,
has its own color setting.
And it has the typography control,
where I can choose which font
and the size and all those other variables
that we’re already familiar with.
And another cool thing is I can choose
whether it is displayed below the price
or beside it.
Let’s check that out.
That’s interesting.
Okay, so you can see
how that can give you
some more flexibility
with different ideas for your design.
I think I’m gonna keep it below.
Okay, now let’s move
on to the next section.
The next section is the features part,
the feature list that you see right here.
Let’s have a look at the options here.
So just like with the
previous two sections,
we can set the background color.
I’m gonna keep it transparent.
And we also have the padding.
So I can add padding at
the top and at the sides,
which I’m also gonna
keep it the way it was.
Now I can choose the color
of the text in the list.
It could be anything.
And we can choose the typography settings.
We can set the different,
different sizes or different font family
or any other typography setting
that we’re familiar with.
As you can see, right now,
it’s aligned to the center.
The text align is centered.
We can set it to align
left or align right.
If we set it to any of those
left or right alignments,
we might wanna change
the width of how wide
does the list go.
So if we want it to be a
little bit more centered,
we can make the width a little smaller,
and now it’s nice and centered.
Okay, the next part is the
dividers between each list item.
We can choose whether to
show those dividers or not.
If we show them, we can
choose how they look.
So here’s the style of the divider.
Could be solid, like it is right now.
It could be double,
which you can only notice
once your weight is bigger than two,
like, let’s say three or more.
Now we can see how it’s a double line.
Dotted or dashed.
Now again, we can choose the width.
We can set the width of the dividers,
anywhere from zero to 100%
of the width of the widget.
I kind of like that dashed look,
but I think I’m gonna
keep it a little shorter.
That looks kind of nice.
And the color works for me, too.
The next option is the gap,
the gap between the
divider and the list item.
So the bigger the gap,
the more spacious the
list is gonna become.
I’m gonna keep it relatively tight.
I think that looks kind of nice.
Now, let’s move to the last
part, which is the footer.
So in the footer, just like
in the previous sections
before it, we can, again,
decide what’s gonna be
the background color,
which I’m gonna keep
it clear at this point.
We can set the padding.
I think I’m gonna make the
padding a little bigger,
but just on the top and on the bottom.
Let’s make it 50.
Maybe 70 at the top.
Okay.
We can choose the size of the button.
We can make it very small or very large.
I kind of like how it looks when it’s big.
I’m going for the bold look.
So I’m gonna keep it extra large,
like a call to action.
I can choose the text color,
which I’m kind of happy
with at the moment.
Again, we can set the
typography of the button,
and we can set the background color,
which I’m going to change to yellow.
Or maybe, you know what?
Let’s give it a try.
Pink would also work.
Blue.
We can set a border.
Border width, border color.
All the regular button
settings that you might already
be familiar with from
other Elementor widgets.
I think I’m gonna leave
it without a border.
But I’m still gonna
change the border radius.
Let’s make it 60 pixels to
get a nice and round button.
And if we want, we can also
add some padding to the button,
change the padding.
We can make it any number we want.
Make it a large padding or smaller,
which I’m also gonna
keep it at the default.
Next we have the additional info line,
which is right here underneath the button,
which I’m kind of happy with
the way it looks right now,
but just, let’s have
a look at the options.
There’s the color.
We can make it any color we want.
There’s the typography,
and there’s a margin,
which we can set.
Notice the text here can
be, can get kind of long,
so you might wanna take care
of that margin at the sides.
This is why we have the
margin setting here.
Now, the last thing on the
style panel is the ribbon.
The ribbon is a real nice, cool feature
that we added to the price table.
We can set its background color.
That looks kind of neat.
We can set the text color,
which I’m currently happy with.
We can obviously set the typography.
We can make it bold, maybe.
And all the usual typography settings.
And another thing we can do
is add a box shadow to the ribbon.
Once we add box shadow,
we have a bunch of box shadow variables
that we can play with, such as the blur,
the spread, the horizontal
and vertical offset
of the shadow, which really,
only the vertical makes a
difference in this case.
I’m gonna make the color a little,
a little lighter.
Just a hint.
Yeah, that looks nice.
Also notice we can change the distance
of the ribbon from the
corner by using this control.
This way, we can determine
exactly how far it is from the corner.
Remember, we can also choose
on which side the ribbon is displayed.
This is back in the content tab.
Ribbon, horizontal position.
We can always move it to the other side.
Now that covers basically
all the different options,
the standard options, of the price table.
But here is the interesting part.
Price table is one of those,
it’s one of those widgets
where the advanced tab
actually plays a big
role in the final result.
If we go to the advanced tab,
we get to choose a bunch
of different settings
that can really give it
another nice little twist.
For example, we can add some padding.
Notice how the padding
adds some extra dimension
to the widget’s look.
So this can be an interesting idea,
especially if you choose background colors
for the footer or any other
area inside the widget.
Let’s show you an example.
If I add a background color to the footer,
we can see how the padding
makes it look more interesting.
Let’s go back to the advanced tab.
We can add a border, which
is also an interesting idea
if we want to make it look interesting.
Let’s say border type solid,
and we can choose any color we want.
I’m gonna go for the same
purple we used for the header,
and you can see how that makes
the whole widget a lot nicer.
Let’s set the border radius.
You can see how the advanced tab
really makes a big
difference in this widget.
We can add a box shadow,
which is also a nice idea.
Now, this is pretty much it.
The way I suggest to use
Price Table, if you wanna
have other columns,
which is the usual case,
is first, finish with the
way you want the general look
of how you want the price table to look,
and only then, clone the
widget and use it again
in the other two columns or
four, if that’s the case,
and just change the different colors
and text you used
for the other columns.
I’m just gonna show you a quick example.
I’m gonna remove the ribbon
on this one and on that one.
And let’s change the
color for the left one.
You can see how, with a few clicks,
you can change the look of the other plans
and give them their unique accent color.
As you can see, Price Table
is a very flexible widget.
It allows you to create
beautiful and unique designs
featuring your products and services.
I hope you’ve enjoyed this video.
Thank you for watching.
For more videos and tutorials,
please subscribe to our YouTube channel.