How To Create Skewed Background Using Elementor

Creating a Skew section background using the Elementor page builder is not a big deal now. Follow some basic step and copy-paste css to create skewed background using Elementor Page builder.

First of all, check the following demo link to see a live demo. If you like to import the exact template then Download and install Master Addons plugin.

If you have configured the plugin properly then edit your page with elementor. You will see “master addons template library icon” besides add new section icon. Just click on the Master Addons Template library icon and you will see “Skew Background Template”. Click on the template and import it. Watch the following short video and do it yourself.

Here is a quick video on how to configure custom CSS in free elementor plugin. I have shown you how to install Master Addons and create a skewed background in main section.

Now I will explain how to create skew section background manually. You can customize the skew measurement by using the degree unit.

Inner section inside main section

Let’s create a section and make it fullwidth. Then insert an inner column inside the section. Drag and drop any element you prefer inside the inner column element. You are free to design whatever you need. 

Now select the main section and navigate to the advanced tab. You will see MA custom CSS option. Paste the following CSS code inside the “MA Custom CSS” option. You should set a background color or image for the section. Otherwise, you won’t see any visual change.

Create skewed background elementor section code

selector{
padding: 400px 0;
-webkit-transform: skew(0deg, -10deg);
-moz-transform: skew(0deg, -10deg);
-ms-transform: skew(0deg, -10deg);
-o-transform: skew(0deg, -10deg);
transform: skew(0deg, -10deg);
margin-top: -200px;
}

You can also check a very informative article on Custom CSS in Elementor to learn different ways to add CSS code inside your elementor page editor.

Let me explain a little bit about the code. The selector will select your desired section, column, or element. You can place any CSS code after that. Then I have used Padding, and Transform property. You see skew value in the CSS code. Just play with the value and you able to customize your skewed section background in various way.

As we have skewed the full section that means the inner content will be skewed too. Now we have to reverse inner content into the default layout.

Just place the following code inside MA custom CSS in the inner column advanced tab.

Create skewed background elementor Inner section code.jpg

selector{
-webkit-transform: skew(0deg, 10deg);
-moz-transform: skew(0deg, 10deg);
-ms-transform: skew(0deg, 10deg);
-o-transform: skew(0deg, 10deg);
transform: skew(0deg, 10deg);
}

Now you will see the inner content reverse back to it’s orginal shape and only the section background is skewed.

So that all about create skewed background in Elementor. Just changed the degree value and create various skewed BG. Feel free to get in touch with us if you face any problem.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms