Transcripts
1. Intro: E, welcome back to another awesome elemental
class of me, Ken. I'm a web designer and wordpress instructor,
and in this class, I want to show you how to build a modern pricing
section with Elementor. We're going to be using the
free version of Elementor. Now, if you're new to elementor, this project is the
perfect way for you to get comfortable with
Flexbox containers. Flexbox containers is
the new layout system replacing sections and columns. We'll walk through
the layout step by step from understanding
the structure of our pricing as a collection
of containers and elements to adding and
styling all the content. And the best part you won't need a elementor pro or
any paid plugins, your creativity
and the free tools already built into
Wordpress and a elementor. And by the end of this class, you'll not only have a clean, presentable
pricing section, but you'll also understand how flexbox containers work and how to use them to
build flexible, modern layouts in a lamenter. Now, in the next lesson,
I want to show you a demo of what we're
going to be building. So let's dive right in. See you shortly.
2. Project Demo: So this is exactly what
we're going to be building. If I hover over any
of the tables here, you'll see that
nice drop shadow, and if I hover over the buttons, you'll notice they have
that animated effect. That's called bobbing, and
we'll see how to add that. The list here is separated
by this dashed line. Basically, this is what
we're going to be creating. In the next lesson, let's prepare our environment.
I'll see you shortly.
3. Install Astra and Elementor: Now let me switch to
my Wordpress website. This is a brand new
installation of Wordpress. My assumption is that you've
already installed WordPress. So the first thing I
want to do is install my theme because every Wordpress website
has to have a theme. So I'll go to appearance themes and the active theme is 2025, but I want to install Astra, so I'll say add theme
and here is Astra. I'll say install and activate. And there we go. So now
Astra is our active theme. Let me just close this. We don't want to use
their templates, close that and that. The next thing I want to
do is install Elementor because you're going to build the pricing table
with elementor. So let's go to plug ins. Let's first of all, just click Installed plugins to see
what we have in here. We have these two that come with every
installation of WordPress. I'm just going to select all these plugins
and say deactivate, apply Select all of them, delete, apply because I don't
want to use any of them. All right, so let
me say add plugin. In here, I'll type elementor And here is a
elementor install now. There we go. So now
I'll say activate. And now elementor is
active on our website. Now, you might have to go
through a setup wizard. Sometimes, if you've never
installed WordPress before, you might have to go through a certain setup wizard
that was introduced, I think in 2023. If you've found yourself
redirected to a setup wizard, go through that setup wizard and finish setting
up a elementor.
4. The Pricing Section Part 1: Now that we've installed our theme and our
plug in elementor, it's time to create
our pricing table. So I want to go
straight to the pages. And we have these two
default pages here. Now, a pricing table is usually
placed in a pricing page. So let's add a page
called pricing page. I'll say Add page. And I'll give it
the name pricing. And I'll say now, remember, we've installed
Elementor and Astra. So here we have a few
settings that are now made possible because we have
elementor and Astra installed. E template, we want to
use elementor full width. Let's switch to the
Astra settings here. For the container layout, I love going with full width. These remain unchanged. Leave it a default.
For the sidebar, I like going with no sidebar. And for these elements, I want to disable
the Astra header, Astra foo, and the Astra
banner publish that. These are the basic
settings I always set for every elemental page I'm
about to edit with Elementor. So edit with Elementor now. And here we are. Now, I'm just
going to skip this because I don't want to connect to my elemental account since
this is just an example. So skip. Now we have a blank page that we can
add anything we want to. So I'm going to click
Add New container, and I'm going to use a Flexbox. I'll go with this single
direction down container. It's this pink container all
the way from edge to edge. I want us to observe
this thing for a moment. So these are three containers. We're going to create
three containers, and each container has
a heading element, a text editor element. This is a container
with three containers arranged side by side to create
these three bits of text, the dollar symbol, the
amount, and the month. These are three columns. We're going to see
how to do that. This is one single divider. This is an icon list, and this icon list is in the same container
as this button, but we'll see how
to do all that. I just want us to have a mind
map of what we're building. So going back in here,
we want to start by creating these three containers. And as you can see,
the three containers are not touching the
edges of the screen. They're occupying about 80% of the width from this
edge to this edge. They're occupying about 80%
of the available width. So what we want to do
is add a container that is going to hold
the pricing tables, and that container is
going to be 80% wide. Let me show you what I mean. So going back in here, let's add a container. I'm going to add a container
and drop it in there. So this outer container that's
pink should occupy 100%, so switch the width to
percent and say 100%. And now, the container
we put inside of it, this black container,
not the pink one. This grayish container
should occupy 80%. But now it's aligned to the
left of the outer container, so I'll select the
outer container, and I'm going to align
items to the center. Look what happens to this
when I click Align items. Now it's aligned in the center. Now, what we've just created is the container holding
these three columns. Let's now create
the three columns. In here, in the inner container, I want to add yet
another container. And I'm going to right link
and duplicate this container, the inner container, right
link and duplicate it again. Now we have three containers
inside this container. And this container is, of
course, inside this container. So with this container selected, I'm going to go to the direction and switch from top to bottom, because right now,
as you can see, its direction is top to bottom. In other words,
the content inside the container itself is
stacked from top to bottom. That's why these three
go one, two, three. But if we switch
to row horizontal, Everything inside
the container is now arranged from left to right
instead of top to bottom. So now we have three columns. Going to publish that I'm just going to drop
some text in there, plus again, heading
there, and heading there. Select this one, select this, two, select this three. Publish that,
preview the changes. At least now we
have three columns. So now let's go ahead
and create these. So now, I'll select
this first column here, column number one,
and I'm going to go to style, background, choose this brush, select color, and I'm going to pick a yellowish, creamish,
whitish color. Pick whatever color you
want, maybe somewhere there. Let me just go ahead and pick so I see we have basic
for small personal projects. So now selecting the text, the heading we dropped in here, I'm just going to
change this to basic. Select the container
itself once again. I'm going to go to border, and I'll make it solid, and I'll give it a
border width of one. Let's say publish for
now and have a look at what we have preview. That's what we have. Let's
give it some rounded corners. So while it's still selected, I want to go to
the border radius and give it a border
radius of 20. Now it has those rounded
corners publish there we go. So now going back in here, let me say plus, and I'm going to add, as you can see, we
have this list. So let's start with that list. I'm going to type
in here icon list. So I'm going to drop
that icon list as soon as that pink highlight
appears. There we go. I'm also going to add a button. So add a button right in there in the
box right below that. There we go. So while
it's still selected, I can go to Style
and position center, select this list as well. Style alignment center. I can select this text
style alignment center. Now, remember, we
have this text, and I say these
are three columns. So what we want to do is
select this right click duplicate and I want
to change that to $5. Right, li, duplicate,
right, leak, duplicate. Let's select the first one
and change that to $1 sign, select the last one, and
change it to slash month. Now, these are three elements. What we need, let me
first publish it, then preview that.
That's what we have. So I'll say plus in here, then add a container right
below the basic text. Because we have three elements, we can drag and drop
them in the container. I'll drag the price as well, drop it in there, and then the month right
below the price. No, it's not yet inside the box. I want to make sure it's
inside this container. So let me drag month All right, let me just drop it in the middle and then drag this up and put
it in the middle. Why am I unable to do all right. So now I'm able to push
it to the very end. Now, these three elements
are inside a container. So if I select the container and change the direction here, now they are arranged
horizontally. So now I'm going while this
container is still selected, I'm going to justify content
to the center like that. And now I can pick any of them individually
and resize them. So if I go here to
style typography, I can increase the size of the $5 individually, just like that. So publish that. That's what we
5. The Pricing Section Part 2: As you can see, we don't have spacing below here and up here. So selecting the container
holding everything here, I'm going to go to Advanced, and without breaking this link, I'm going to say
padding will be 30. That's spacing from the
edge to the inner content. What if I say 50. Yeah, 50 is okay. So now here we have
50 on the side, we have 50 up here,
50. All right. So now, with that, the next thing I want to do
is select this container, and I want to align items horizontally in a straight line. Just have a look at this
when I select align items. Now, everything is
arranged straight. Select this, go to style
typography, weight 900 black. Select the month, go
to style, typography. In fact, I'm going to
reduce the size size 18, select the symbol, currency
symbol, style typography. I think that size is okay. Now, I want to go to
advanced margin, right, and reduce the margin
on the right to pull it closer to the amount. So negative 20 seems to work. I'm going to select
the amount as well. Go to advanced margin, reduce the right margin
to push it rightwards. Just like that so that
they're close together. Now, while that is
still selected, I can go to style text Color. I can give it that 209-20-9209. Select this text. Style text color, can give
it that 29, rightly copy. I'll select this as
well, the symbol style. Come here. Paste that code. Now, I forgot to
add this divider. So let's go back in here. Plus, let's add a divider. Let's drop it right there, just like that outside
this container. And right here, let's say, it should occupy
80% of the width, and let's align it to
the center like that. Let's change it to a
dotted or dashed line. Going to change to dashed line. I'm going to select this
icon list, go to icon. In fact, let's go
back to content, list item number one, delete that, and let's
change this name to what we have here
up to five users. I think I had this text. I don't want to
spend time typing. So I'm going to copy
it from where I he it. I've found it, copy that. I'm going to paste it in here. List item number two,
delete the icon. I don't want the icon. Copy that, place it here. Now, I'm going to fast
forward this part. Just go ahead and add all the items and remove the
icon if you don't need it. I'm going to delete that. So like I said, I'm going
to fast forward this part, and I'll see you as soon as I'm done. Paste that in there. Copy this, duplicate this,
paste that in there, publish the next thing I want to do is select while
this is still selected, I want to go to style, and I want to say space between. I want us to space the
amount a little bit, maybe up to ten. All right, next thing,
let's go to the button, and I'm going to go to
the content and say, what do we have here? By now. Yeah. So on the content while
the button is selected, By now, let's go to this
is where you add the link. So let's assume
this is the link. You're going to put
it right there. And if you want to
open in a new tab, you can open link in new window. This will open it in a
new tab, collapse that. Let's go inside style. And first of all, I want to break this
padding because I want to give it some
better padding left, 50, right, 50, top, let's say 20 and bottom 20. Now, let's say 15. 15.
For the bottle radius, let's say ten. Yeah, just like that.
Publish. And now, you will notice right
here this spacing is bigger than this spacing. Let's reduce the spacing here. I'm going to select
this container. I don't know why I'm
unable to select it. All right, let me, select that container,
going to Advanced, then break this default margin, then reduce the bottom margin, maybe up to that spot. As you can see now,
the space between the five and the divider and the space between here
and here is almost the same. So publish that. And let's have a look
at what we have so far. I think now we're
getting somewhere. The next thing we want to do is First of all, let's change this. So I'll select this basic, go back to style, typography. I want to change
this to 900 black. Let's go to the
font, text color. Let's change this to 29 to
whatever color you want. 29 29, 29 is the same
color we used for this. And I want to select
this container to reduce this
spacing a little bit. So top spacing. Maybe up to that spot as well. And I also want to reduce
this padding on the side. Remember, we selected
this container, and we put a padding
of 50 all round. Now, let's go ahead
and break this link. And for the left and right, let's make it ten and ten. Top bottom is 50 each. Publish that. And now
let's preview the changes. Now that's much better. All right. So now at least
now we're getting somewhere. The next thing I want
us to do is these two were placeholders
for the columns. Now, what I want to do is right click this
and duplicate it, right click it and
duplicate it again. And now we can remove
these two because they were just placeholders
for two other columns. And because we have
this, I'm just going to add the pricing
for these others. So copy that, select this, go here and change this to that. And I'm going to fast
forward this part. And now the very last one
here and there we go. So I've finished adding the different features and
benefits of each plan. I'm just going to say publish. And now let's
review the changes. And now, that's what
we have right now.
6. The Pricing Section Part 3: I want us to make it a
bit more presentable. Let's add some
spacing right here at the top so that it's
centralized on our screen. So I'll select the container. Advanced, I'm going
to break the margin and give it a top margin of 50. And I'm going to publish that. Let's preview the change. Yeah, I think that's better. And now, in fact, while this
container is still selected, I'm going to go to layout. No, let's select this
inner container that's holding everything
inside. It was 80%. I want us to make it
maybe 70% publish that. So now, there's something
I want you to notice here. Right here, all our
buttons are at the bottom. This is the reference
we've been looking at. So our buttons are very
properly aligned in each box each in each box. And right here in the
one we've created, our button is rising up to
get closer to the icon list. So how do we push them
all to the bottom? Let's go back in here. Now, remember, we added this container here and
added these three elements, and we were able to arrange
them within the container. We can do the same here and
space these two items out. So I'm going to say
plus, then container. I'm going to drop it just
right there. That's okay. And with it dropped right there, I can drag this into the container and
the button as well. Now, both of them are
inside the container. I'll select the container
itself, go to Advanced. And right here, we have size. We're going to say grow. In other words, occupy
whatever space is available. Any space that's available
that's not in use, fill it up. So grow, that will make the container grow to occupy
whatever available space. Now that it's grown, all we need to do while it's
still selected is go back to layout and justify content
to say space between. That's going to push
the button down. Remember, we had padding
on this outer container, top and bottom padding of 50. That's why this goes all
the way to this part. So with that done, I'm going to go back here, drag another container here. Drag these two into
the container. And because we already had headings for this, I'm
going to select it, copy, select this
other container, right click, paste the style. Whatever styles we apply to
this will be applied to this, and I'll do the same finally. That's a heading, container. Drop it there, drag that in
there, drag that in there. Right leak, copy, right leak
paste style. Publish that. And before we look at it, I'm going to select the button. I'm going to go
to Button Normal. Give that let's give it a blue color or whatever
color you want, your brand color, maybe red. In fact, let me just
select this once again. So while it's still selected, I'm going to go to Hover. And on Hover, the background
color should be 29 29, 29. On Hover, it's that color. Now, while it's
still under Hover, let's go to Hover Animation, and I'm going to select Bob. That's the one I
like. That's Bob. And now that the
button is updated, I'm going to write leak Copy. Right, leak, paste style, right, leak, paste style. But now I don't like that
red color. It's too screamy. I'm going to reverse it,
so I'll select this. Or, in fact, I'm
going to select this. So on normal, I want to
copy this red color, go to hover, paste it in there. And when it's normal, that's when it's going
to be 29 29, 29. On Hover, it's red. Yeah. So copy Paste style. Publish that, preview the
changes. There we go. So I think we should reduce
the size of this divider, so I'm going to select it
and make it maybe 50%, right leak copy, right leak, paste style, right
leak, paste style. Publish that. I don't know if
there's anything remaining. Yeah, I think one more
thing is remaining. We need to add some hover
effects so that when someone is passing their
mouse cursor over it, it has some drop shadow. So selecting this first
one, going to layout. Now, let's go to style, border box shadow on hover. I want to give it a box shadow. Just like that. Now we
can change that darkness. I want it to be less dark. So if I go to this transparency, I can reduce that
shadow intensity. And now that I like that drop
shadow, right leak, copy, right leak, paste style, right leak, paste
style, publish that. And now let's
preview the changes. There we go. So now
if I ho over it, there we go. All right. So finally, let me change
these three, this standard. Enterprise. And I think let
me right click this copy. No, in fact, let me right
click this duplicate it, and then I'm going to drag
it right below basic. And I think it says for
small personal projects. Projects or personal projects. And I'm going to go
to style, typography. I'm going to increase the letter spacing but reduce
the font size. And I'm going to go to
advanced margin top, reduce it up to
maybe that point, go to basic advanced
margin bottom. Up to that spot. So now
I'm going to select this, right click copy, right
click the text here, paste, right click this paste. And for this, I think it
says young Startup Projects. Young startup
projects. And finally, Enterprise level
projects. Publish that. Anything else?
Yeah, this is $19. And this should be $49 publish. And let's review the changes. Now, one more thing I've
realized we forgot, but let's first of
all, have a look. I really like it. But one more thing
we forgot to add are these tiny lines right here. So those are just to add some spice to what
we already have. So selecting the icon list, I'm going to go to
divider and say on, and as you can see,
they're too long. So with, we're going to maybe
put them up to that spot. I'm going to change this to
dotted or let's say dashed. And, yeah, I'm just going
to leave that like that, right, leak, copy, right, leak, paste style, right, lik this paste
style, and publish. Let's go over to have a look
at it. And there we go. So basically, I think this
is a good place to end this. It was a quick example on how to create a pricing list,
but more importantly, how to work with
containers in elemental because once you master
containers in elementor, you can design virtually
anything you can imagine. So I think this is a
good place to end this. If you liked it, if
you found it helpful, don't forget to like it. Don't forget to follow me for more tutorials
in the future. So until next time,
stay creative. Peace.
7. Final Thoughts: Just built yourself a modern, clean pricing section using only the free version
of elementor, and along the way, you've
also learned how to work confidently with containers,
flexbox containers. Now, this layout
might look simple, but the skills you've
just practiced, that is working with nested
containers, managing spacing, padding, margins,
styling elements, all these are the foundations of all great elementor designs, and now you know
how to do all that. And now it's your turn. I would love to see what
you've been able to create. Head over to the projects
and resources tab right below this video player
and upload your project. Simply take a screenshot of your pricing section
and upload it or share a link to a live website where we can go and have a
look at your pricing section. I check out every project, and I'd love to see what you've been able
to come up with. And if you enjoy this
class, I would really, really appreciate it if you
could leave a short review. Not only does it help me understand the impact
my classes are having, but it also helps other students discover my classes
on Skillshare. So take a moment and drop a short review and let me know what you thought
about the class. Once again, thanks
for joining me, and I'll see you in
the next class. Peace.
Ken Mbesa, Web Designer | UI/UX Designer
