Overview
Transcript
Overview
Learn how to use absolute and fixed custom positioning in Elementor 2.5.
You will learn:
✔︎ The difference between absolute & fixed position
✔︎ How to freely position your widgets on the page
✔︎ Use absolute & fixed positioning the right way!
Transcript
hi all ziv from element so here today
we’ll go over the absolute and fixed
custom positioning settings in elemental
2.5 these advanced positioning methods
are especially for us pixel-perfect
enthusiasts giving us freedom to create
stunning designs like this page here
they allow us to drag widgets to any
location on the page regardless of the
grid and it’s very intuitive just point
anywhere on the screen and simply drag
the widget there we can also set widgets
to have a fixed position and place it
anywhere we like so it will scroll
alongside your users journey on your
website cool so let’s dive in and see
how it’s done but before going into the
design let’s go over the basics and
learn about absolute and fixed
positioning as you can see we have a
clean design that will help us
understand the difference between
absolute and fixed positioning let’s
start with the pink cube in the column
on the right I’ll set it to absolute go
to advanced custom position and choose
absolute pay attention that the default
width of an absolute element is
automatically inherited from the column
it’s in we can simply resize it like
this now let’s move it around a bit as
you can see it’s easy and fun we can
also get very detailed by using the
horizontal and vertical offset sliders
the horizontal and vertical orientation
options allow us to align the cube as
well
pay attention custom positioning is not
considered best practice for responsive
web design and should not be used to
frequently building the page smartly by
using a grid design with some cool
absolute and fixed elements is the best
way to go an absolute object is relative
to the column it’s in this means that
although we can move it anywhere we like
it will stay at the same point relative
to the column for example moving it
outside the column does give the
appearance of being positioned at the
bottom right corner of the screen but
when we start scrolling you see that it
stays at the same point relative to the
column now for the fixed position go to
the yellow circle and like before in
custom positioning choose fixed and a
position as you can see the circle moved
this is because
the default width for a fixed element is
automatically inherited from the
viewport we can still resize and change
the position freely like we did before
the only difference is that the position
of the circle is now fixed to the points
we set giving it the sticky scrolling
effect so it will scroll alongside your
users journey on your website great now
that we understand the difference
between absolute and fixed we are ready
to create our design so let’s go back to
it and as you can see we’ve removed all
the images from the right column in the
left column we already star the heading
text and button so let’s start by adding
an image widget to the right column I’ll
choose this ramp image now go to
advanced custom positioning and choose
absolute let’s move it around and change
the size to here is perfect let’s
duplicate the image don’t worry the
images here it’s just duplicated on top
of the first image it’s already set to
absolutes as well now go ahead and
change the image set the right size and
move it to where you like let’s add a
third image same as before
duplicate change the image resize it and
place it anywhere you want I’ll go ahead
and add some more as you can see it’s
simple and really cool now let’s see how
we create a fixed element add an icon
widget to the left column style it a bit
now go to advanced custom positioning
and choose position fixed I’ll go ahead
and move it freely to the exact points I
want great now it’s fixed and will stay
at the same point when scrolling through
the page so let’s hit preview and see it
in action as you can see all of our
absolute elements are at the right place
and the fixed button always stares at
the bottom left corner when scrolling we
also added a cool register pop-up to the
fixed button cool now one last thing the
custom positioning is responsive so you
can change the position of the elements
per device
let’s go back to the editor and
change the responsive mode to mobile we
can freely change the place and size of
the elements so they exactly fit our
mobile design cool well that’s it now
you know how to use the absolute and
fixed custom positioning settings in
elemental 2.5 don’t forget to subscribe
to our YouTube channel for more tips and
tutorials see you later
