Overview
Transcript
Overview
Learn how to properly use absolute and fixed custom positioning orientation settings in Elementor 2.5.
You will learn:
✔︎ The horizontal & vertical orientation concept
✔︎ How to use the offset values
✔︎ Resetting your position
Transcript
hi-oh zip from elemento here today will
gather possible sticky situations you
might get into when using the absolute
and fixed custom positioning settings in
elemental 2.5 more specifically I’ll
show you some do’s and don’ts regarding
the horizontal and vertical orientation
and offset settings with regard to
responsive behavior we’ll be working on
this clean design it will allow us to
focus on the orientation concept and
understand how its settings affect the
elements on our page first let’s go over
the sections we have the main sections
content width is boxed the inner section
has two columns each containing is
standing cube and some text this section
is that you full width okay now that
that’s out of the way let’s dive in and
work with the pink cube in the column on
the right
I’ll set it to absolute the text jumped
up and the cube appears above it how
come it’s because the moment the cube is
set to absolute it is removed from the
flow of elements on the page it’s
important to know that the default width
of an absolute element is automatically
inherited from the column it’s in as you
can see here now let’s go ahead and
resize it we can either just drag the
cube like so or use the custom width
slider in the panel on the left 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 might 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
let’s have a look at the horizontal and
vertical orientation and offset settings
as you can see the horizontal and
vertical offset sliders help us
determine the position of the cube on
the page we can choose between pixel
percent view width and view height I
will be using pixels for this tutorial
as you can see they range from negative
to positive numbers but
what do these values mean in order to
understand it we need to know what they
relate to the horizontal offset for
example when set to zero positions the
cube close to the left side of the
column it’s in this is because the
horizontal orientation is set to left
making the left side of the column the
starting point positioning the cube
further left and outside the column will
result in negative values and vice versa
moving the cube away from the starting
point towards the right results in
positive numbers if we move it away to
match it will disappear but don’t worry
we can always get it back by setting the
offset to zero setting the horizontal
orientation to right does exactly the
same as before it’s just the opposite
side now as you can see the offset is
already set to zero this is because it’s
the first time we are changing its
values like before zero positions the
cube close to the right side of the
column it’s in positioning the cube
further right and outside the column
will result in negative values moving
the cube away from the starting point
towards the left results in positive
numbers pay attention the distance you
set will determine the position of the
cube in relation to either the left or
the right side of the column no matter
what you’ll see what I mean so when does
this come in handy let’s set the
horizontal orientation to left making
the left side of the column the starting
point the distance decreases when moving
it towards the left like we just saw now
let’s move the cube to the right outside
of the column here is great let’s say I
want to increase the width of this
column I’ll go ahead and drag it to 40%
as you can see the cube isn’t outside
the column anymore this is because it
remained at the same distance in
relation to the left side of the column
if we want it to stay outside the right
side of the column no matter what the
columns width we need to set the
horizontal orientation to runt resizing
the columns width now doesn’t affect the
cubes position anymore
because the cube now remains at the same
distance in relation to the right side
of the column cool let’s carry on with
the vertical orientation for this
example I’ll move the cube below the
column here is great as you can see the
vertical orientation is set to top and
the offset to 460 pixels this means that
the cube is positioned at a distance of
four hundred and sixty pixels from the
top of the column the number decreases
when we move towards the top which is
its starting point the moment we move it
past the top and outside the column the
number becomes negative if the distance
is too great the cube will disappear
just like before it’s still there of
course you can easily get it back by
setting the offset to zero it will
reappear like so if we set the
orientation to bottom like you see here
the cubes offset is in relation to the
bottom of the column so moving it past
the bottom outside the column will give
you a negative number because this time
the bottom of the column is the starting
point again the distance you set will
stay that way in relation to either the
top or bottom of the column no matter
what so when does this come in handy
okay so first off for this example let’s
set up in cubes vertical orientation to
top at a distance of four hundred and
sixty pixels this distance between the
top of the column and the cube won’t
change no matter what so let’s say you
add more content to the column I’ll go
ahead and drag in a form widget as you
can see the cube appears above the form
widget and not below the column anymore
this is because the height of the column
increased with the added content the
form widget but the cube remained at the
same place exactly at the distance we
set from the top in this case if you
want the cube to remain at the same
place at the bottom of the cube
regardless of the content in the column
we should set the vertical orientation
to bottom I’ll go ahead and set it to
stay at a distance of negative 200
pixels below the column as you can see
when I add content now it doesn’t affect
it any
cool wait a second does all of this also
apply for the fixed position let’s check
it out
I’ll go ahead and change the pink cubes
position from absolute to fixed wait
what happened did it just disappear
don’t worry just like before we can
easily get it back by setting the offset
to zero it disappeared because the
horizontal and vertical orientation and
offset settings are still the same as
there were for the absolute positioning
but a fixed position element is
positioned relative to the viewport the
browser window itself and not relative
to the column it’s in so in our case the
pink cube is just hiding 200 pixels
below the viewport because of the
negative vertical offset value I’ll go
ahead and bring it back into view with
the slider remember you can easily get
the cube back by setting the offsets to
zero as you can see the cubes
orientations are set to the bottom and
right and it’s offsets are both zero the
cube is positioned exactly on the bottom
right corner of the viewport this is its
starting position just like we saw with
the absolute position the orientation
settings determine this let’s say we
want the cube to be positioned near the
bottom on the left we should set the
horizontal orientation to left and
vertical orientation to bottom as you
can see there are still some previous
offset values we can drag it to the left
bottom corner but I want it to be
positioned exactly on the edge all I
need to do is enter 0 for both the
horizontal and vertical offsets with the
fixed position any content or column
width changes like I showed you before
doesn’t affect the cubes position
because it is positioned relative to the
viewport and not relative to the column
it’s in pay attention that using the
correct vertical and horizontal
orientation settings for absolute and
fixed objects is important for
maintaining better responsive behavior
designing your page with this in mind
will save you a lot of time when making
adjustments for mobile and tablet well
that’s it now you know the base
like do’s and don’ts regarding the
horizontal and vertical orientation of
set settings and now you can better
understand possible sticky situations
you might get into when using the
absolute and fixed custom positioning
settings and more importantly how to get
out of them don’t forget to subscribe to
our YouTube channel for more tips and
tutorials see you later
