{"id":2261,"date":"2021-06-21T09:53:43","date_gmt":"2021-06-21T09:53:43","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2261"},"modified":"2023-02-22T10:12:13","modified_gmt":"2023-02-22T10:12:13","slug":"elementor-webinar-custom-positioning","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/","title":{"rendered":"Elementor Webinar: Custom Positioning"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2261\" class=\"elementor elementor-2261\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-45998ddb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"45998ddb\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f6ec505\" data-id=\"4f6ec505\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-57cb9729 elementor-widget elementor-widget-video\" data-id=\"57cb9729\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=qul8wsC9cAw&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4fb91b6c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4fb91b6c\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-134c292b\" data-id=\"134c292b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-63f284a4 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"63f284a4\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1671\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1671\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1672\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1672\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1671\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1671\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1671\" tabindex=\"0\" hidden=\"false\"><p>Elementor 2.5 introduces Flexible Layout: Freehand web design never before possible on WordPress.<\/p><p>Join Josh &amp; Hadas and learn:<\/p><p>\u2714\ufe0e Best practices for flexible layout (absolute and fixed)<br \/>\u2714\ufe0e How to avoid common mistakes<br \/>\u2714\ufe0e And more&#8230; <\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1672\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1672\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1672\" tabindex=\"0\" hidden=\"hidden\"><p>hey everybody I&#8217;m hadass I&#8217;m a web<br \/>designer and an educator here at<br \/>Elementor and here with me it&#8217;s Josh hi<br \/>guys I&#8217;m Josh I&#8217;m a web developer at<br \/>Elementor and and today we&#8217;re going to<br \/>talk about the new release the 2.5 and<br \/>the custom position I want to say a few<br \/>words about it<br \/>well custom position really gives you a<br \/>lot of flexibility and a lot of power<br \/>and like Peter Parker&#8217;s uncle says with<br \/>great power comes great responsibility<br \/>and we&#8217;re here to help you avoid making<br \/>mistakes when you&#8217;re using the new<br \/>feature of custom positioning and we&#8217;re<br \/>gonna show you some tips and tricks and<br \/>good best practice on how to use this<br \/>new feature okay<br \/>so let&#8217;s dive in here already made a<br \/>design and you can see it here we&#8217;re<br \/>gonna build this together in element or<br \/>it&#8217;s certainly a very beautiful design<br \/>and one thing you can notice is how it&#8217;s<br \/>would be pretty complicated to achieve<br \/>this result using the conventional<br \/>methods of laying out elements in<br \/>element or using the grid like all those<br \/>floating elements will probably be<br \/>pretty tricky to place in all those<br \/>positions so that&#8217;s why we got custom<br \/>positioning to help us with these kinds<br \/>of designs all right so let&#8217;s start<br \/>design okay so let&#8217;s go back to the<br \/>editor and let&#8217;s start by placing the<br \/>images starting with the main image the<br \/>pink lady let&#8217;s make it 80% cuz we don&#8217;t<br \/>need the whole width and also add the<br \/>triangle mm-hmm boom next will be the<br \/>wavy<br \/>and last part will be the heading widget<br \/>let&#8217;s add some text here<br \/>let&#8217;s put a break here also and give it<br \/>some style cuz we can&#8217;t work with a<br \/>default text okay beautiful yes okay it<br \/>is beautiful but it&#8217;s not it&#8217;s not in<br \/>the right place right so this is where<br \/>the absolute positioning comes in I just<br \/>I&#8217;d like to first point out that we&#8217;re<br \/>working with a section that has a single<br \/>column so all the elements are stacked<br \/>one a one on top of the other right just<br \/>like the normal way Elementor works and<br \/>now we&#8217;re gonna use absolute positioning<br \/>to place those elements in the same<br \/>space<br \/>you know overlapping one another so we<br \/>we&#8217;re gonna show you how to do that so<br \/>let&#8217;s start with the triangle custom<br \/>positioning section and that&#8217;s where<br \/>we&#8217;ll find the position setting which we<br \/>can now switch to absolute so right away<br \/>you can see how this element sort of<br \/>floats over above the other elements<br \/>that are in the column and that is<br \/>because it&#8217;s an absolute position so it<br \/>doesn&#8217;t take up room in the column<br \/>anymore it doesn&#8217;t take up any height in<br \/>the column you can see how the widgets<br \/>that come after it are now have gone up<br \/>but they don&#8217;t they&#8217;re not distanced<br \/>from the pink image and the image we<br \/>turn to absolute is floating over the<br \/>pink image and now we just need to make<br \/>sure it&#8217;s at the right size and it&#8217;s at<br \/>the right position and that&#8217;s all we&#8217;re<br \/>gonna see now okay so how do I place it<br \/>here so let&#8217;s first start with talking<br \/>about the sides so as if you&#8217;re familiar<br \/>with the image widget you&#8217;ll know that<br \/>the image widget has width setting under<br \/>style right so you might wanna you<br \/>this for setting the size of the image<br \/>but it might not be the best way to do<br \/>it because when you&#8217;re working with<br \/>absolute widgets you really get the<br \/>chance to change the widget itself the<br \/>width of the widget itself the size of<br \/>the widget itself so the best way to go<br \/>about it in my opinion is to make the<br \/>image full width to take up the full<br \/>width of the widget it&#8217;s in exactly 100%<br \/>of the widget and then resize the widget<br \/>itself from outside so to speak right so<br \/>using the width setting we can use the<br \/>custom width<br \/>adjust the image the widget size right<br \/>so the image inside the widget is 100%<br \/>of the widget and now we get to play<br \/>with the widget size that&#8217;s that&#8217;s a<br \/>more appropriate way to do things in<br \/>absolute mode in my opinion okay<br \/>see also there&#8217;s a full width and inline<br \/>what&#8217;s the difference between them right<br \/>so full width is pretty straightforward<br \/>I think in some cases it might be useful<br \/>to use full width in absolute mode as<br \/>well it&#8217;s really it depends on the<br \/>circumstances in our case I don&#8217;t think<br \/>that&#8217;s gonna work for us and inline<br \/>option I would use it more in the<br \/>traditional way we use element or inside<br \/>the column when we want to use a few<br \/>elements one by one next to each other<br \/>so inline will help us make the size of<br \/>the element the size of the widget<br \/>restricted to the size of the content<br \/>that&#8217;s in the widget<br \/>I wouldn&#8217;t recommend using it in<br \/>absolute mode because it might cause<br \/>some issues when you drag the widget<br \/>outside the columns<br \/>boundaries it might make it here there<br \/>you go you just demonstrated it<br \/>perfectly it might cause right it might<br \/>cause changes to the size of your<br \/>widgets so we don&#8217;t want that that&#8217;s why<br \/>we probably will use custom width in all<br \/>cases<br \/>okay so let&#8217;s change it back to Kosta<br \/>right so there are two ways of setting<br \/>the custom width one is by setting it<br \/>using the exactly the slider and the<br \/>other one is by interacting directly<br \/>with the widget by resizing it like we<br \/>would do in Illustrator or other right<br \/>it&#8217;s more intuitive okay I can see also<br \/>there&#8217;s a new unity the VW what&#8217;s the VW<br \/>stands for right so we we want the<br \/>absolute positioned element to be as<br \/>much as possible<br \/>responsive friendly absolute elements<br \/>have this tendency of not playing well<br \/>and responsive and they have this<br \/>reputation of being bad for Responsive<br \/>but that&#8217;s only partially true if you<br \/>make sure to use what we call relative<br \/>size units we would usually end up with<br \/>a much more responsive design so percent<br \/>for example is a relative unit it will<br \/>give us a certain fraction of the size<br \/>of the column that the widget is in so<br \/>this way we can keep it flexible and and<br \/>you know sensitive to size changes in<br \/>the browser and VW is another it&#8217;s<br \/>another relative size unit that is<br \/>relative to the view width<br \/>meaning the browser size so if you<br \/>resize the browser everything that is in<br \/>VW will be affected by the change so so<br \/>sort of yeah you can you can allow it to<br \/>maintain<br \/>they maintain the proportions between<br \/>different elements in the in the design<br \/>and have it respond to changes to in the<br \/>width of your browser okay so I think in<br \/>this case it would be appropriate to use<br \/>one of those relative sizes I would use<br \/>pixels really because I&#8217;m sorry not<br \/>pixels it&#8217;s a scent right okay yeah I<br \/>think that would work for us in this<br \/>case I think before we start placing it<br \/>let&#8217;s first make the other two elements<br \/>absolute okay so I&#8217;m going to advance<br \/>right custom position and then change<br \/>that to absolute and it&#8217;s also go all<br \/>the way to the top right and same here<br \/>mm-hmm<br \/>change it again okay everything is here<br \/>at the top right now we can set the<br \/>width of those two other elements mm-hmm<br \/>so maybe the text should be like 20<br \/>percent or something or maybe 25 let&#8217;s<br \/>see what works around yeah and the wavy<br \/>gonna be custom as well and percentage<br \/>and let&#8217;s say about that yeah that seems<br \/>pretty accurate it seems like it<br \/>resembles the nice design you made for<br \/>us and I can see there&#8217;s also a lot of<br \/>stuff going on underneath that the<br \/>offsets what what are those means that<br \/>up-down left-right what&#8217;s going on here<br \/>right it might look a little confusing<br \/>in the beginning but let us explain how<br \/>this works so every element we place in<br \/>the in the in our design if it&#8217;s<br \/>absolute we want to make sure that it it<br \/>it&#8217;s distance from the edges is relative<br \/>to the edges that that it should be<br \/>relative to let me demonstrate for<br \/>example in this case you place the<br \/>heading all the way from the left it&#8217;s<br \/>so it might look okay in this case but<br \/>as soon as we start narrowing our<br \/>viewport we&#8217;ll soon find out that our<br \/>heading is now too far away from the<br \/>left a similar thing happens with how<br \/>far the things are from the top the<br \/>triangle went too far down because it&#8217;s<br \/>distanced from the top so it&#8217;s reference<br \/>point is the top end of our column and<br \/>that is the wrong reference point what<br \/>we really want for this heading for<br \/>example is for it to be at zero zero<br \/>distance from the right right so let&#8217;s<br \/>try that by changing the horizontal<br \/>orientation to right and the vertical<br \/>orientation to bottom we can say this is<br \/>zero pixels from the right and maybe I<br \/>don&#8217;t know how much do you want it from<br \/>the bottom just a little higher from the<br \/>bottom okay so so now let&#8217;s try resizing<br \/>our view again and you can see right<br \/>away how that effects the position we<br \/>still have some responsive font size to<br \/>do and stuff like that but generally<br \/>speaking this is a much better reference<br \/>point for positioning it relative right<br \/>so we might do the same thing with the<br \/>triangle maybe we should also make it<br \/>relative to the bottom with the pixels<br \/>here right it&#8217;s better the inches uh<br \/>the VW which refers to the width of our<br \/>viewport VH is the height of our<br \/>viewport it might come into handy it<br \/>really depends on your design I think in<br \/>this case pixels might work for us okay<br \/>in terms of distancing the element from<br \/>the edges right let&#8217;s apply the same<br \/>principle okay so we&#8217;re going to place<br \/>it left and right seems right to me okay<br \/>I&#8217;m just a little bit just a little<br \/>maybe even a little less because we need<br \/>to remember this is gonna remain the<br \/>same distance when we go to mobile<br \/>so maybe what seems like not so far in<br \/>in the full view it might be a lot in in<br \/>mobile but really you can always it&#8217;s<br \/>important to remember you always have<br \/>the option of setting different values<br \/>for different breakpoints like you know<br \/>with with other settings in elemental<br \/>that are mobile ready but it&#8217;s always<br \/>good to have a a good start and have the<br \/>natural behavior of design be as<br \/>responsive as possible and leave us with<br \/>the least fixes and changes for mobile<br \/>mm-hmm okay so here with the triangle<br \/>yeah you&#8217;re saying we&#8217;re supposed to<br \/>stay with the pixels or change it to<br \/>something else again it really depends<br \/>on exactly the result you you want to<br \/>achieve and the most important thing<br \/>though is to remember how these<br \/>different settings affect your end<br \/>result so what you just did for example<br \/>is you moved elements in responsive mode<br \/>so you&#8217;re basically getting a different<br \/>position for for the mobile view right<br \/>okay so let&#8217;s move on to our next<br \/>section let me show you the design first<br \/>so here we have three columns with a<br \/>rectangle<br \/>right there so I&#8217;m just gonna add it in<br \/>the edit or okay I&#8217;m gonna use the<br \/>spacer widget mm-hmm interesting so<br \/>you&#8217;re gonna use the spacer widget to<br \/>create a rectangle yeah exactly that&#8217;s a<br \/>creative use of element or widgets all<br \/>right so we did it before I&#8217;m gonna go<br \/>to custom position I want to change the<br \/>position to absolute right right and I<br \/>can see it&#8217;s already in the top and I<br \/>already gave a set index to the picture<br \/>so the rectangle is a it&#8217;s behind it&#8217;s<br \/>behind it right so that index is gonna<br \/>help us control the order and the depth<br \/>of each element in an absolute<br \/>positioning mode so so really the main<br \/>difference in this case compared there<br \/>the one we did before is the fact we<br \/>have a multi-column setup here whereas<br \/>before we had just a single column and<br \/>the reason it matters is because the way<br \/>the way columns act in responsive mode<br \/>in Elementor is that they get stacked<br \/>above one above the other<br \/>so that really changes the way the<br \/>elements are laid out on our page right<br \/>so that happens usually typically in the<br \/>mobile view we&#8217;re gonna get all the<br \/>columns in a vertical order so that&#8217;s<br \/>gonna have an effect on our<br \/>absolute elements as well because their<br \/>relative to the column they&#8217;re in so so<br \/>the main thing to remember is we want to<br \/>place our absolute elements in inside<br \/>the column that they&#8217;re going to be you<br \/>know relevant for so this rectangle for<br \/>example is kind of behind the middle<br \/>image so that&#8217;s why it should be in the<br \/>middle section even though in theory I<br \/>could have placed the element in the<br \/>left column and just drag it the center<br \/>of the design that would not be a good<br \/>idea if you take in consideration the<br \/>breakpoint in mobile because then we&#8217;re<br \/>gonna end up with an element that&#8217;s<br \/>outside the viewport right so so exactly<br \/>so you know keeping in mind what is the<br \/>relevant column is is is important<br \/>absolute where everything&#8217;s supposed to<br \/>be after I&#8217;m changing the desktop view<br \/>like if it&#8217;s mobile if it&#8217;s tablet right<br \/>now my breakpoints right it&#8217;s important<br \/>to think about these things when you&#8217;re<br \/>constructing the layout okay so now I&#8217;m<br \/>gonna change it so it will be wider so<br \/>I&#8217;m gonna use the width right here so<br \/>really you don&#8217;t even need to manually<br \/>switch it switch the view setting from<br \/>default to custom by just dragging and<br \/>resizing the element you can already you<br \/>can already you can already start<br \/>interacting with the width of this<br \/>element we do however one who maybe<br \/>change it pixels in terms of the width<br \/>I&#8217;m sorry percent percentage because all<br \/>right let&#8217;s go okay so we can always use<br \/>the slider<br \/>what happened here well it might have<br \/>not registered this size but this is why<br \/>you can always go directly to the width<br \/>setting okay so I think that&#8217;s about the<br \/>size of it yeah that&#8217;s about it it seems<br \/>right I would however make the reference<br \/>point bottom in this case because we<br \/>really want it at a given distance from<br \/>the bottom if I&#8217;m understanding your<br \/>design correctly am i right yeah I&#8217;m<br \/>gonna stay with pixels or should I<br \/>change it to something else<br \/>again this is really depending on how<br \/>you want it to react to changes in the<br \/>width but as far as I&#8217;m concerned pixels<br \/>seems to be working just fine right okay<br \/>so we can see that it that it works<br \/>pretty well in mobile but really the<br \/>truth is there is a little bit of an<br \/>issue and that is the issue<br \/>when you have an absolute element it<br \/>yeah it can easily end up outside the<br \/>viewport so since this element is wider<br \/>then then the column it&#8217;s in it&#8217;s<br \/>necessarily going to be exceeding the<br \/>boundaries of the of the column and<br \/>therefore the document itself in mobile<br \/>can just change the width right right so<br \/>technically you could recess resize it<br \/>for mobile and make sure that in mobile<br \/>it doesn&#8217;t do that so that would be a<br \/>good solution in some cases yeah it<br \/>could be a good solution for this case<br \/>even but if you have an element that you<br \/>can&#8217;t resize for any reason it will not<br \/>work well you can use a different option<br \/>you can take advantage of you can take<br \/>advantage of the overflow:hidden<br \/>we added to the section which allows us<br \/>to basically make sure that everything<br \/>that exceeds the section will be cut off<br \/>and not cause that horizontal scroll<br \/>that we so much dislike in mobile design<br \/>okay so it&#8217;s just like right yeah okay<br \/>yeah but that&#8217;s probably gonna get<br \/>resolved by setting the typography right<br \/>okay beautiful<br \/>this section looks looks right okay so<br \/>moving on to our last section here here<br \/>we have this rectangle and we need to<br \/>duplicate it so it will be the same<br \/>mm-hmm so I think that&#8217;s that&#8217;s an easy<br \/>thing to do because we have there right<br \/>click and we&#8217;re just gonna duplicate it<br \/>hmm but nothing happened right it might<br \/>seem like nothing happened but really<br \/>the element did get duplicated the<br \/>reason why it&#8217;s maybe a little hard to<br \/>see it is because it has a position and<br \/>the new elements position is exactly the<br \/>same as the one yeah it&#8217;s it&#8217;s a copy of<br \/>it so they&#8217;re basically one on top of<br \/>the others Oh as soon as you move it<br \/>you&#8217;ll see that the old element will be<br \/>revealed and now we have a copy of our<br \/>element so you might run into this type<br \/>of scenario which is why we thought it<br \/>was important to show it right yeah<br \/>first time it happened to me I was like<br \/>what&#8217;s going on so if it happens to you<br \/>guys you know what don&#8217;t worry<br \/>so last thing we&#8217;re gonna show here is<br \/>this arrow I already placed an anchor<br \/>here at the top so the arrows supposed<br \/>to take us all the way to the to the top<br \/>but I want to put it in the right corner<br \/>so it will be about<br \/>here and I wanted to squirrel all the<br \/>way with us so you wanted you wanted to<br \/>stay there while we&#8217;re scrolling yeah to<br \/>remain in the same spot exactly right so<br \/>which is what fixed position is for okay<br \/>so I&#8217;m going to advance right mm-hmm and<br \/>here at custom positioning when I change<br \/>the position to fix right right and now<br \/>it&#8217;s here right now it&#8217;s at the top of<br \/>the document so so really if you compare<br \/>this to what we did before it&#8217;s pretty<br \/>similar the the main difference is that<br \/>instead of referring to the column fixed<br \/>elements are referring to the entire<br \/>viewport so our viewport is so to speak<br \/>our column now when we place elements at<br \/>a certain distance from the top left and<br \/>bottom were referring to the top left<br \/>and bottom of our viewport rather than<br \/>our column like we did before so that&#8217;s<br \/>that&#8217;s one difference and the other<br \/>difference is obviously the fact that it<br \/>remains there while we&#8217;re scrolling<br \/>which is why we call it fixed because<br \/>it&#8217;s fixed in the same place in relation<br \/>to our viewport so now it&#8217;s all the way<br \/>at the top we might want to adjust the<br \/>width now and and set it to be at the<br \/>bottom using the offset okay so I&#8217;m<br \/>going to change the custom and offsets<br \/>it&#8217;s gonna be right that&#8217;s right a<br \/>little bit distanced from the bottom<br \/>yeah but something like that let&#8217;s say<br \/>so now if I&#8217;m gonna scroll it&#8217;s gonna<br \/>stay at the same spot that&#8217;s right it<br \/>looks beautiful<br \/>yeah see I&#8217;m learning you&#8217;re doing a<br \/>great job so this is uh this is pretty<br \/>much it right<br \/>yeah so inclusion do you have like a few<br \/>rules for best practice or something<br \/>that we need to pay attention every time<br \/>we start working with custom position<br \/>yeah so to sum it up there are a few<br \/>points that I think will help every<br \/>every everyone working on on absolute<br \/>positioned elements and fixed position<br \/>elements is things we talked about I<br \/>recommend using the widget width<br \/>provided under custom positioning to<br \/>resize images while making the image<br \/>width inside the widget 100% this makes<br \/>it easier for us to control the size of<br \/>images in a absolute position mode the<br \/>second thing is always keep in mind what<br \/>the boundaries of your absolute design<br \/>scene so if you&#8217;re working inside a<br \/>column you always want to remember where<br \/>the edges of the column are and kind of<br \/>try to orientate yourself wisely within<br \/>that space right know your boundaries<br \/>exactly know your boundaries use the<br \/>last thing is use use relative size<br \/>units when when when appropriate when<br \/>when it serves your purpose because that<br \/>really helps you create designs that are<br \/>much more flexible and much more<br \/>responsive ready it makes our life<br \/>easier it helps us maintain the<br \/>relationship between different elements<br \/>in your design and the right proportion<br \/>so very important and so yeah image size<br \/>you know your boundaries know what&#8217;s<br \/>your reference point what&#8217;s the right<br \/>reference point whether it is right left<br \/>top bottom<br \/>and use the responsive the relative<br \/>units right okay so thank you so much<br \/>thank you all for joining us and hope<br \/>you&#8217;ll join us for our next webinars and<br \/>tutorials see you next time<br \/>you<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Elementor 2.5 introduces Flexible Layout: Freehand web design never before possible on WordPress. Join Josh &amp; Hadas and learn: \u2714\ufe0e Best practices for flexible layout (absolute and fixed) \u2714\ufe0e How to avoid common mistakes \u2714\ufe0e And more\u2026 Transcript hey everybody I\u2019m hadass I\u2019m a web designer and an educator here at Elementor [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4158,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[47],"class_list":["post-2261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-webinars"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elementor Webinar: Custom Positioning - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Webinar: Custom Positioning - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Elementor 2.5 introduces Flexible Layout: Freehand web design never before possible on WordPress. Join Josh &amp; Hadas and learn: \u2714\ufe0e Best practices for flexible layout (absolute and fixed) \u2714\ufe0e How to avoid common mistakes \u2714\ufe0e And more\u2026 Transcript hey everybody I\u2019m hadass I\u2019m a web designer and an educator here at Elementor [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T09:53:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T10:12:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Webinar: Custom Positioning - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Webinar: Custom Positioning - Academy","og_description":"Overview Transcript Overview Elementor 2.5 introduces Flexible Layout: Freehand web design never before possible on WordPress. Join Josh &amp; Hadas and learn: \u2714\ufe0e Best practices for flexible layout (absolute and fixed) \u2714\ufe0e How to avoid common mistakes \u2714\ufe0e And more\u2026 Transcript hey everybody I\u2019m hadass I\u2019m a web designer and an educator here at Elementor [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/","og_site_name":"Academy","article_published_time":"2021-06-21T09:53:43+00:00","article_modified_time":"2023-02-22T10:12:13+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Elementor Webinar: Custom Positioning","datePublished":"2021-06-21T09:53:43+00:00","dateModified":"2023-02-22T10:12:13+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/"},"wordCount":3776,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg","keywords":["Webinars"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/","url":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/","name":"Elementor Webinar: Custom Positioning - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg","datePublished":"2021-06-21T09:53:43+00:00","dateModified":"2023-02-22T10:12:13+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Positioning.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/elementor-webinar-custom-positioning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Elementor Webinar: Custom Positioning"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2261"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2261\/revisions"}],"predecessor-version":[{"id":9497,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2261\/revisions\/9497"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4158"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}