Elementor Webinar: Custom Positioning

hey everybody I’m hadass I’m a web
designer and an educator here at
Elementor and here with me it’s Josh hi
guys I’m Josh I’m a web developer at
Elementor and and today we’re going to
talk about the new release the 2.5 and
the custom position I want to say a few
words about it
well custom position really gives you a
lot of flexibility and a lot of power
and like Peter Parker’s uncle says with
great power comes great responsibility
and we’re here to help you avoid making
mistakes when you’re using the new
feature of custom positioning and we’re
gonna show you some tips and tricks and
good best practice on how to use this
new feature okay
so let’s dive in here already made a
design and you can see it here we’re
gonna build this together in element or
it’s certainly a very beautiful design
and one thing you can notice is how it’s
would be pretty complicated to achieve
this result using the conventional
methods of laying out elements in
element or using the grid like all those
floating elements will probably be
pretty tricky to place in all those
positions so that’s why we got custom
positioning to help us with these kinds
of designs all right so let’s start
design okay so let’s go back to the
editor and let’s start by placing the
images starting with the main image the
pink lady let’s make it 80% cuz we don’t
need the whole width and also add the
triangle mm-hmm boom next will be the
wavy
and last part will be the heading widget
let’s add some text here
let’s put a break here also and give it
some style cuz we can’t work with a
default text okay beautiful yes okay it
is beautiful but it’s not it’s not in
the right place right so this is where
the absolute positioning comes in I just
I’d like to first point out that we’re
working with a section that has a single
column so all the elements are stacked
one a one on top of the other right just
like the normal way Elementor works and
now we’re gonna use absolute positioning
to place those elements in the same
space
you know overlapping one another so we
we’re gonna show you how to do that so
let’s start with the triangle custom
positioning section and that’s where
we’ll find the position setting which we
can now switch to absolute so right away
you can see how this element sort of
floats over above the other elements
that are in the column and that is
because it’s an absolute position so it
doesn’t take up room in the column
anymore it doesn’t take up any height in
the column you can see how the widgets
that come after it are now have gone up
but they don’t they’re not distanced
from the pink image and the image we
turn to absolute is floating over the
pink image and now we just need to make
sure it’s at the right size and it’s at
the right position and that’s all we’re
gonna see now okay so how do I place it
here so let’s first start with talking
about the sides so as if you’re familiar
with the image widget you’ll know that
the image widget has width setting under
style right so you might wanna you
this for setting the size of the image
but it might not be the best way to do
it because when you’re working with
absolute widgets you really get the
chance to change the widget itself the
width of the widget itself the size of
the widget itself so the best way to go
about it in my opinion is to make the
image full width to take up the full
width of the widget it’s in exactly 100%
of the widget and then resize the widget
itself from outside so to speak right so
using the width setting we can use the
custom width
adjust the image the widget size right
so the image inside the widget is 100%
of the widget and now we get to play
with the widget size that’s that’s a
more appropriate way to do things in
absolute mode in my opinion okay
see also there’s a full width and inline
what’s the difference between them right
so full width is pretty straightforward
I think in some cases it might be useful
to use full width in absolute mode as
well it’s really it depends on the
circumstances in our case I don’t think
that’s gonna work for us and inline
option I would use it more in the
traditional way we use element or inside
the column when we want to use a few
elements one by one next to each other
so inline will help us make the size of
the element the size of the widget
restricted to the size of the content
that’s in the widget
I wouldn’t recommend using it in
absolute mode because it might cause
some issues when you drag the widget
outside the columns
boundaries it might make it here there
you go you just demonstrated it
perfectly it might cause right it might
cause changes to the size of your
widgets so we don’t want that that’s why
we probably will use custom width in all
cases
okay so let’s change it back to Kosta
right so there are two ways of setting
the custom width one is by setting it
using the exactly the slider and the
other one is by interacting directly
with the widget by resizing it like we
would do in Illustrator or other right
it’s more intuitive okay I can see also
there’s a new unity the VW what’s the VW
stands for right so we we want the
absolute positioned element to be as
much as possible
responsive friendly absolute elements
have this tendency of not playing well
and responsive and they have this
reputation of being bad for Responsive
but that’s only partially true if you
make sure to use what we call relative
size units we would usually end up with
a much more responsive design so percent
for example is a relative unit it will
give us a certain fraction of the size
of the column that the widget is in so
this way we can keep it flexible and and
you know sensitive to size changes in
the browser and VW is another it’s
another relative size unit that is
relative to the view width
meaning the browser size so if you
resize the browser everything that is in
VW will be affected by the change so so
sort of yeah you can you can allow it to
maintain
they maintain the proportions between
different elements in the in the design
and have it respond to changes to in the
width of your browser okay so I think in
this case it would be appropriate to use
one of those relative sizes I would use
pixels really because I’m sorry not
pixels it’s a scent right okay yeah I
think that would work for us in this
case I think before we start placing it
let’s first make the other two elements
absolute okay so I’m going to advance
right custom position and then change
that to absolute and it’s also go all
the way to the top right and same here
mm-hmm
change it again okay everything is here
at the top right now we can set the
width of those two other elements mm-hmm
so maybe the text should be like 20
percent or something or maybe 25 let’s
see what works around yeah and the wavy
gonna be custom as well and percentage
and let’s say about that yeah that seems
pretty accurate it seems like it
resembles the nice design you made for
us and I can see there’s also a lot of
stuff going on underneath that the
offsets what what are those means that
up-down left-right what’s going on here
right it might look a little confusing
in the beginning but let us explain how
this works so every element we place in
the in the in our design if it’s
absolute we want to make sure that it it
it’s distance from the edges is relative
to the edges that that it should be
relative to let me demonstrate for
example in this case you place the
heading all the way from the left it’s
so it might look okay in this case but
as soon as we start narrowing our
viewport we’ll soon find out that our
heading is now too far away from the
left a similar thing happens with how
far the things are from the top the
triangle went too far down because it’s
distanced from the top so it’s reference
point is the top end of our column and
that is the wrong reference point what
we really want for this heading for
example is for it to be at zero zero
distance from the right right so let’s
try that by changing the horizontal
orientation to right and the vertical
orientation to bottom we can say this is
zero pixels from the right and maybe I
don’t know how much do you want it from
the bottom just a little higher from the
bottom okay so so now let’s try resizing
our view again and you can see right
away how that effects the position we
still have some responsive font size to
do and stuff like that but generally
speaking this is a much better reference
point for positioning it relative right
so we might do the same thing with the
triangle maybe we should also make it
relative to the bottom with the pixels
here right it’s better the inches uh
the VW which refers to the width of our
viewport VH is the height of our
viewport it might come into handy it
really depends on your design I think in
this case pixels might work for us okay
in terms of distancing the element from
the edges right let’s apply the same
principle okay so we’re going to place
it left and right seems right to me okay
I’m just a little bit just a little
maybe even a little less because we need
to remember this is gonna remain the
same distance when we go to mobile
so maybe what seems like not so far in
in the full view it might be a lot in in
mobile but really you can always it’s
important to remember you always have
the option of setting different values
for different breakpoints like you know
with with other settings in elemental
that are mobile ready but it’s always
good to have a a good start and have the
natural behavior of design be as
responsive as possible and leave us with
the least fixes and changes for mobile
mm-hmm okay so here with the triangle
yeah you’re saying we’re supposed to
stay with the pixels or change it to
something else again it really depends
on exactly the result you you want to
achieve and the most important thing
though is to remember how these
different settings affect your end
result so what you just did for example
is you moved elements in responsive mode
so you’re basically getting a different
position for for the mobile view right
okay so let’s move on to our next
section let me show you the design first
so here we have three columns with a
rectangle
right there so I’m just gonna add it in
the edit or okay I’m gonna use the
spacer widget mm-hmm interesting so
you’re gonna use the spacer widget to
create a rectangle yeah exactly that’s a
creative use of element or widgets all
right so we did it before I’m gonna go
to custom position I want to change the
position to absolute right right and I
can see it’s already in the top and I
already gave a set index to the picture
so the rectangle is a it’s behind it’s
behind it right so that index is gonna
help us control the order and the depth
of each element in an absolute
positioning mode so so really the main
difference in this case compared there
the one we did before is the fact we
have a multi-column setup here whereas
before we had just a single column and
the reason it matters is because the way
the way columns act in responsive mode
in Elementor is that they get stacked
above one above the other
so that really changes the way the
elements are laid out on our page right
so that happens usually typically in the
mobile view we’re gonna get all the
columns in a vertical order so that’s
gonna have an effect on our
absolute elements as well because their
relative to the column they’re in so so
the main thing to remember is we want to
place our absolute elements in inside
the column that they’re going to be you
know relevant for so this rectangle for
example is kind of behind the middle
image so that’s why it should be in the
middle section even though in theory I
could have placed the element in the
left column and just drag it the center
of the design that would not be a good
idea if you take in consideration the
breakpoint in mobile because then we’re
gonna end up with an element that’s
outside the viewport right so so exactly
so you know keeping in mind what is the
relevant column is is is important
absolute where everything’s supposed to
be after I’m changing the desktop view
like if it’s mobile if it’s tablet right
now my breakpoints right it’s important
to think about these things when you’re
constructing the layout okay so now I’m
gonna change it so it will be wider so
I’m gonna use the width right here so
really you don’t even need to manually
switch it switch the view setting from
default to custom by just dragging and
resizing the element you can already you
can already you can already start
interacting with the width of this
element we do however one who maybe
change it pixels in terms of the width
I’m sorry percent percentage because all
right let’s go okay so we can always use
the slider
what happened here well it might have
not registered this size but this is why
you can always go directly to the width
setting okay so I think that’s about the
size of it yeah that’s about it it seems
right I would however make the reference
point bottom in this case because we
really want it at a given distance from
the bottom if I’m understanding your
design correctly am i right yeah I’m
gonna stay with pixels or should I
change it to something else
again this is really depending on how
you want it to react to changes in the
width but as far as I’m concerned pixels
seems to be working just fine right okay
so we can see that it that it works
pretty well in mobile but really the
truth is there is a little bit of an
issue and that is the issue
when you have an absolute element it
yeah it can easily end up outside the
viewport so since this element is wider
then then the column it’s in it’s
necessarily going to be exceeding the
boundaries of the of the column and
therefore the document itself in mobile
can just change the width right right so
technically you could recess resize it
for mobile and make sure that in mobile
it doesn’t do that so that would be a
good solution in some cases yeah it
could be a good solution for this case
even but if you have an element that you
can’t resize for any reason it will not
work well you can use a different option
you can take advantage of you can take
advantage of the overflow:hidden
we added to the section which allows us
to basically make sure that everything
that exceeds the section will be cut off
and not cause that horizontal scroll
that we so much dislike in mobile design
okay so it’s just like right yeah okay
yeah but that’s probably gonna get
resolved by setting the typography right
okay beautiful
this section looks looks right okay so
moving on to our last section here here
we have this rectangle and we need to
duplicate it so it will be the same
mm-hmm so I think that’s that’s an easy
thing to do because we have there right
click and we’re just gonna duplicate it
hmm but nothing happened right it might
seem like nothing happened but really
the element did get duplicated the
reason why it’s maybe a little hard to
see it is because it has a position and
the new elements position is exactly the
same as the one yeah it’s it’s a copy of
it so they’re basically one on top of
the others Oh as soon as you move it
you’ll see that the old element will be
revealed and now we have a copy of our
element so you might run into this type
of scenario which is why we thought it
was important to show it right yeah
first time it happened to me I was like
what’s going on so if it happens to you
guys you know what don’t worry
so last thing we’re gonna show here is
this arrow I already placed an anchor
here at the top so the arrows supposed
to take us all the way to the to the top
but I want to put it in the right corner
so it will be about
here and I wanted to squirrel all the
way with us so you wanted you wanted to
stay there while we’re scrolling yeah to
remain in the same spot exactly right so
which is what fixed position is for okay
so I’m going to advance right mm-hmm and
here at custom positioning when I change
the position to fix right right and now
it’s here right now it’s at the top of
the document so so really if you compare
this to what we did before it’s pretty
similar the the main difference is that
instead of referring to the column fixed
elements are referring to the entire
viewport so our viewport is so to speak
our column now when we place elements at
a certain distance from the top left and
bottom were referring to the top left
and bottom of our viewport rather than
our column like we did before so that’s
that’s one difference and the other
difference is obviously the fact that it
remains there while we’re scrolling
which is why we call it fixed because
it’s fixed in the same place in relation
to our viewport so now it’s all the way
at the top we might want to adjust the
width now and and set it to be at the
bottom using the offset okay so I’m
going to change the custom and offsets
it’s gonna be right that’s right a
little bit distanced from the bottom
yeah but something like that let’s say
so now if I’m gonna scroll it’s gonna
stay at the same spot that’s right it
looks beautiful
yeah see I’m learning you’re doing a
great job so this is uh this is pretty
much it right
yeah so inclusion do you have like a few
rules for best practice or something
that we need to pay attention every time
we start working with custom position
yeah so to sum it up there are a few
points that I think will help every
every everyone working on on absolute
positioned elements and fixed position
elements is things we talked about I
recommend using the widget width
provided under custom positioning to
resize images while making the image
width inside the widget 100% this makes
it easier for us to control the size of
images in a absolute position mode the
second thing is always keep in mind what
the boundaries of your absolute design
scene so if you’re working inside a
column you always want to remember where
the edges of the column are and kind of
try to orientate yourself wisely within
that space right know your boundaries
exactly know your boundaries use the
last thing is use use relative size
units when when when appropriate when
when it serves your purpose because that
really helps you create designs that are
much more flexible and much more
responsive ready it makes our life
easier it helps us maintain the
relationship between different elements
in your design and the right proportion
so very important and so yeah image size
you know your boundaries know what’s
your reference point what’s the right
reference point whether it is right left
top bottom
and use the responsive the relative
units right okay so thank you so much
thank you all for joining us and hope
you’ll join us for our next webinars and
tutorials see you next time
you