Geometry affects visual heirarchy

Adding unexpected geometery to a page can really make a design pop -when done tastefully.  As with most sensory elements, the unexpected draws attention and can communicate motion, action or feeling.

In this tutorial, we look at how to skew content containers to take your design outside of the typical ‘section and column grid’ visual that we are used to seeing in web design.

The sharp corners and unexpected slants across the page captivate the viewer while still fitting into an expected grid like column structure; this adds a powerful edge to your layout.

The problem with skew effect in CSS

The problem with adding a skew effect to a container in CSS (or in Elementor pagebuilder) is that skewing the container will also skew the content inside; images look out of proportion and text can look italic…or worse. 

While we need to skew the container’s edges, we need to retain correct proportions and dimensions for the content within.

How to skew containers in Elementor

Whether you intend to use a visual image background or would just like to upset the normal visual with a normal content section, this tutorial will show you how to fix the skewed content issue.  For a video tutorial on how to skew containers but not the content inside, view the video above!

Here are some of the focus points of the video.

Settings for the Skewed Container

Apply the Skew effect to the container by going to the Advanced -> Transform and applying the Skew effect.  Skew X works great!  Remember the value you’ve given it, such as 10.

With the container still selected, go to the Layout tab and then to Additional Options.  Set ‘Overflow’ to ‘Hidden’.

Settings for Container Content

Add a container into the skewed container, which will hold your content.  The content within the skewed container needs to be skewed counter to the effects on its container.  So, if you set the Container’s skew to 10, you’ll need to set this -10.

If we apply the reverse skew to a container that holds all our content within it, this will correct all content within it.

Settings for a background image in the skewed container

If you would like to use an image background for the skewed container, we’ll not be able to set a background image as it will skew with the container itself.

Instead, it’s necessary to create a background image hover effect using an image element. 

1. Set the Skewed Container’s padding to zero.
2. Add an image to the Skewed Container.
3. Set Position to ‘Absolute’
4. Set the image width to 100% and the height to that of the skewed container.  Set ‘Object-Fit’ to ‘Cover’ to correct dimensions of the image.
5. Use the Margin values (on the image’s Advanced tab) to pull and stretch the image until it is of a suitable size to cover the entire background.  So, if there’s white space on the right, add a negative margin to the right margin value.
6. Set z-index of the image or of the ‘content container’ to ensure the correct layer is on top and visible.

Don’t forget to check how this looks on other devices!