8 Tips to Help You Use Custom Positioning in Elementor

Working with Custom Positioning requires you to follow certain rules of thumb. In this post, we summarize our latest webinar and cover eight tips on how to effectively use the new custom positioning functionality.

With Elementor 2.5, you got access to a brand new design toolcustom positioning.

Custom positioning gives you a lot of flexibility and power over the design of your layouts. However, as Josh tells you in the webinar video, “with great power comes great responsibility”, and you’ll want to make sure you use this newfound power in an effective way.

To help, we’ll cover eight tips for how to effectively use the new custom positioning functionality in Elementor.

How to Use Custom Positioning in Elementor

To activate the custom positioning feature, you’ll use the new Custom Positioning section in the Advanced tab of the Elementor side panel:

From there, you can change the Position drop-down to Absolute or Fixed to activate custom positioning.

Once you do that, the widget will appear to “float” at the top of the section because it no longer takes up any vertical space.

From there, you can drag it to the position where you want it to appear.

Now, let’s talk about some tips and common mistakes to avoid for the new custom positioning options.

8 Tips for Using the Custom Positioning Feature

If you want to see these tips in video format, you can also follow along with Josh and Hadas in the webinar video above.

1. Understand Fixed vs Absolute Positioning

Elementor 2.5 lets you use two types of custom positioning:

  • Absolute – the element is positioned relative to the column/section that it’s inside. It will move along as the visitor scrolls.
  • Fixed – the position is fixed to the visitor’s viewport and will stay there even when the visitor scrolls.

2. Use Custom Positioning to Define Width, Not the Style Tab

Let’s take an example of an image and say that you want to change its width and size (while using custom positioning).

Normally, you’d go to the Style tab and adjust the Width of the image there. However, you should use a different approach with custom positioning because custom positioning lets you also adjust the size of the widget itself.

So, first go to the Style tab and make the Image → Width equal to 100%. This will make the image fill 100% of the widget.

Then, to control the size of the widget itself, you can go to Advanced → Custom Positioning and change the Width setting to Custom:

Then, you can use the slider to adjust the widget size or use drag-and-drop on the widget itself. And because the image fills 100% of the widget, the image will automatically resize as you change the width of the widget in the custom positioning settings.

Most of the time, you should use this Custom option for the width. But other custom positioning width options are:

  • Full Width – makes the widget take up the entire viewport.
  • Inline (Auto) – makes the size of the widget restricted to the size of the content that’s in the widget. This can cause issues in absolute mode, and isn’t ideal for most situations.

3. Use Relative Units for Better Responsive Design

Absolute positioning can be tricky when it comes to responsive design. To make for a better design on all devices, you should try to use relative units as much as possible when changing the width. By “relative”, we mean units like percent or view width (VW), rather than absolute units like pixels.

4. Use Horizontal and Vertical Offsets Properly

To make sure your absolute positioning looks correct at different screen sizes, you need to properly use the horizontal and vertical offset functionality:

For example, if you want to place a widget near the right side of the page, there are two different ways you could do that.

First, you can choose the left orientation and enter a large value (like 800 px). This will position your widget ~800 px from the left side (effectively putting it on the right side for most devices). However, this will cause issues on different screen resolutions.

A better approach would be to choose the right orientation and use a small value (like zero). This ensures that, no matter what a user’s screen size is, the widget will always be oriented on the right.

The same approach applies to the vertical orientation options.

You also have the ability to set different offsets for different responsive breakpoints when needed.

5. Use Z-Index to Control the Depth of Each Element

With absolute positioning, you’ll have a lot of situations where two or more widgets are placed “on top” of one another. To control which widgets appear in the foreground, you can use the normal Z-Index setting.

6. Remember How Columns Work for Responsive Design

Custom positioning lets you move widgets to any location. However, these widgets are still relative to the column they’re inside, which can potentially cause an issue in responsive design.

For example, if you have a three-column layout, you could use custom positioning to drag a widget from the left-most column into the center column.

However, while this might look fine to desktop visitors, it will cause a problem for mobile visitors because Elementor stacks the columns vertically on mobile.

So rather than having three columns side-by-side, you’ll have three columns on top of another and the element will no longer appear in the middle column like it does on desktops.

Long story short, you need to pay attention to the widget’s relation to the column it’s inside.

7. Use Overflow Hidden to Fix Responsive Width Problems

Depending on your design, you might run into an issue where a widget with custom positioning exceeds the width of a column on mobile devices.

This causes an awkward situation where visitors can “horizontally scroll”, even though you don’t want this functionality:

To fix this, you can set the Overflow option to Hidden in the Section → Layout settings. Then, everything that exceeds the section will be cut off, which eliminates the scrolling issue.

8. The Duplicate Functionality Still Works!

If you use right-click to duplicate an element with custom positioning, it might seem like it didn’t work.

Don’t worry! The duplicate functionality still works just fine. However, because each element has the exact same custom positioning, the two elements are perfectly stacked on top of each other (making them look like one element).

All you need to do is drag one of the elements a bit and you’ll see both elements.

Final Thoughts

That wraps up our tips on how to best use the new custom positioning feature in Elementor.

If you have any questions about custom positioning, ask away in the comments!

About the Author

Colin Newcomer
Colin Newcomer
Colin is a freelance writer for hire specializing in WordPress and digital marketing. Grow your business with in-depth, conversational blog posts.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 877,316 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

5 Responses

  1. Hello from Germany!

    I just started making Websites a week ago and i have to convert a design into a website, that did not allow to be coulmnized at all. It was a long and rocky way, but since i discovered Elementor and its powerful solutions and started experimenting with custom positioning, i get more and more happy that this tool exists.

    But i got a question still to be answered:
    I used the responsive background function to fade out my background a little bit on smartphones. Now i got nothing to fill out my section, because every other widgets i used in that section are textboxes, images and else that i need to be custom positioned.
    As it shows, if u got nothing in the section with everything else being custom positioned, it will just stay a small bar like if u just freshly added that new section, except u can see a little bit of the background image.

    I tried the solution to put in a huge gap, that spreads up the section so i can position everything else and still have the option of a responsive background to fade it out a bit on smaller devices.

    Is this a possible way or just a “smelly” shortcut i should not use, maybe it causes issues im not aware of yet? As i said im doing this for just 1 week now and have nearly zero coding experience.

    Hopefully my english was good enough for u to understand my problem, if it is a problem.

    Best regards,
    Simon

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 877,316 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.