Learn how to align widgets inside a column in Elementor using flexbox distribution.
hi-all ziv from element so here today I
will go of the added options for
vertical and horizontal alignment inside
columns in elemental 2.5 for vertical
alignment I’ll show you how to use the
space between space around and space
evenly options for horizontal alignment
I’ll show you how to use the start
Center end as well as the space between
space around and space evenly options so
let’s dive in and see how it works for
this tutorial I’ll be working on this
pre-made design we’ve made a top dinner
ideas page with an inner section that
consists out of three columns each
column contains an image text editor and
star rating widget as you can see the
content in the columns aren’t aligned
properly then the columns vertical align
options top middle and bottom they don’t
fix this now we’ve added three new
options that will make it a lot easier
for you to align the content to your
liking so let’s go over them one by one
space between sets the widgets to start
and end at the edge of the column with
equal space between them for space
around the widgets are spaced equally
and the edges are half the size of the
space between the widgets spaced evenly
sets the widgets to have equal space
between before and after them I’ll set
them to space between so they fit
perfectly for my design
cool now let’s move on to the horizontal
alignment as you can see we’ve added
five icon widgets to this column on the
right there are sets to inline making
them appear next to each other all in
the same column we’ll set the columns
vertical alignment to bottom so they’re
positioned next to the top list ideas
now for the magic as you can see in the
column settings and the layout we’ve
added horizontal align options so let’s
go over them one by one
start aligns all of the icons to the
left center to the middle of the column
and end positions to the right now space
between places the icons at the start
and end near the edge of the column with
equal space between them
for space around the widgets are spaced
equally and the edges are half the size
of the space between the widgets spaced
evenly sets the widgets to have equal
space between before and after them I’ll
go ahead and set it to end so they’re
positioned exactly where I want for my
design
cool well that’s it now you know how to
use the vertical and horizontal
alignment options inside columns in
elemental 2.5 don’t forget to subscribe
to our YouTube channel for more tips and
tutorials see you later
