Home » Tutorials » 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.
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.
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.
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.