5 Uses of Absolute Positioning

Breaking the grid with absolute positioning is an effective way of creating a unique design. In this article, we'll demonstrate how to use this technique to create visually compelling experiences.

It only takes a fraction of a second for visitors to form an opinion about a website. This first impression largely depends on the site’s design; striking design is far more memorable. One of the most effective ways of creating unique design is by breaking the grid.

Web designers often hear that the grid is a designer’s best friend. That’s true — the grid helps define the structure of a page. At the same time, the grid can limit creativity. In an attempt to make the layout more visually appealing, designers break the grid by using absolute positioning for elements.

For a long time, absolute positioning for elements required coding skills. Designers had to define custom CSS styles for elements that would have absolute positioning. With Elementor v2.5 this is no longer the case. Elementor introduced flexible layout — a set of advanced position capabilities that make it much easier (and faster) to create custom layouts.

In this article, I want to show how to use absolute positioning and review five layouts that use this technique to create visually compelling experiences.

Absolute Positioning in Elementor

Elementor brings web designers the magic of position absolute. The great thing about this feature is that you don’t dive into any code to create it. As an Elementor user, you can select any widget, go to Advanced, select ‘Custom Positioning’ and choose ‘Position: Absolute.’ After that, you will be able to drag the widget to any location on the page, regardless of the grid.

If you’re an experienced web designer, you may wonder “How does it work for responsive design?” It’s a well-known fact that absolutely positioning breaks a responsive design — if you use absolute positioning on an item and don’t adjust it for various screen sizes, you’ll end up with a situation where your item goes off the canvas. A wrongly positioned object can either not display on some screens (usually, on mobile), or it can increase the total canvas area (meaning the page will overflow the viewport, and the visitor will need to scroll through tons of whitespace).

The Elementor team is familiar with this problem and solves it by allowing designers to set a separate custom position for mobile, tablet, and desktop devices. It’s possible to use percentage, VH, VW or pixel units to position your element. They also added an Overflow Hidden control, which condenses all of the section widgets inside it and removes any unwanted scrolls.

Now let’s see how you can use absolute positioning to create a unique design:

1. The Power of Imagery

They say that an image says more than a thousand words and that’s true. Imagery is a powerful tool in a designer’s toolkit. The right imagery can give users a clear idea of what the site is all about, even before they read any text on the page.

Take a look at The Cat Fair! layout. The Gallery section of this layout features a few photos of cats distributed unusually. This design decision creates visual interest and directs the visitor’s attention to the Tickets. As a result, the imagery both portrays context and adds to the user’s delight.

2. Badges

Badges are often used in product design to demonstrate attributes that the product or service has. Badges are so popular because they reduce the time required for users to understand the message.

In the following example, designers chose to place the badge ‘Good Food’ on top of the image. This badge paired with the image gives users the idea of the level of quality even before they read the text on the right.

3. One Image on Top of the Other

How can you combine two separate images in one perfect scene? The answer is simple — you need to open your favorite graphics editor and merge the photos. With Elementor you can follow a much more relaxed approach.

The illustrations of a skater, a ramp and a small bottle on top of the ramp you see below are not one single image. Actually, it’s a composition of three image widgets – the ramp is used as a background, while the bottle and the skater were placed on top of it.

4. Using Color as a Functional Element

Color is a powerful tool in a designer’s toolkit. Many designers use color to create real aesthetics. However, it’s also possible to use color as a functional element – to grab or direct a user’s attention. Sometimes, designers use colors to tell a story.

In the following example, designers use vibrant colors to create an emotional bond with users. Colors draw visitors into the design and make them scroll for more. If you decide to follow a similar approach, it’s recommended to use colors from the Material Design palette.

5. The Power of Minimalism

It’s a fairly common misconception, that to create a genuinely remarkable design, you have to put a lot of different elements on a page. The real power of designers lies in the ability to achieve more with less.

Check out the following example. This landing page features only the key message, which is located at the center of the screen; simple geometric shapes are distributed around the message slightly chaotically yet balanced. The artistic quality of the background makes a good impression on visitors, increasing engagement.

Conclusion

Elementor v2.5 gives designers a new superpower — absolute positioning. And this power offers much more creative freedom. But with great power comes great responsibility. As designers, our goal is to create not only beautiful but also usable designs.

That’s why the Elementor team mentions that ‘Taking widgets outside of the grid by applying position absolute has its risks since the element is no longer tied to the rest of the page structure.’ Use absolute positioning sparingly and always test how your design looks and works on different screen sizes, using Elementor’s built-in preview feature.

Liked This Article?

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

About the Author

Nick Babich
Nick Babich
Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

12 Responses

  1. OMG OMG! A great explanation about the use of Absolute Positioning. In early HTML designs, absolute positioning was treated as a poor design, but now, it’s one of the trending chapter of every web design pattern. Great Thinking Indeed.

  2. Incredible examples shared, most of the designers are not creative enough to bring something out of their own. Most of the times flat design structures are so dull that they fail in grabbing any attention of the visitors. Real success is when website does absolute positioning and yet remains in people minds.

  3. So… so awesome! I need to stop by the Elementor blog from time to time to get ideas for my designs. Sometimes is hard to really come up with something new and that’s why checking out what news can be done is just, oh, so REFRESHING! Thanks guys!

  4. I’m loving Elementor every time a new feature is rolled out by it’s developers. The absolute positioning along with the Z dimensional feature helps a lot and saves time when designing positioning. Love it!

  5. Waw, I’m hooked already, though I am still new in this field. Do you have a promoter in South Africa 🇿🇦?

  6. Thank you! A video of this was on YouTube and explained it very well. I’m an absolute lover of Elementor and what it can do. I’m will be teaching it to beginner web designers so I can get them on the right track. Keep up the great work!

Leave a Reply

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

Want to learn how to build better websites?

Join 639,479 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.