What is the Tutorial About?
Creating Intersecting Elementor CSS Grid Containers with Clip Path is the primary focus of this tutorial. It’s a unique approach to designing your WordPress website, offering a fresh perspective on layout design. Web Squadron will guide you through the process of creating a CSS grid layout in Elementor, using two containers that intersect, resulting in a visually appealing design.
Tutorial Steps
- Start a new grid layout in Elementor:
Choose a layout with two containers, set the width to 1100, and specify three columns wide and two rows. - Add containers:
Drop two containers into the grid layout. They will appear next to each other due to the row Auto flow setting. - Add content:
For this tutorial, we’ll add a heading to each container. Align the containers to be stretched for a better visual effect. - Add background colors:
Choose suitable background colors for your containers. - Apply CSS Clip Path:
Visit the Bennett Feely website and select the trapezoid shape. Adjust the shape to your liking, then copy the CSS code provided. - Apply the CSS code to your containers:
Go to the Advanced settings of each container, select Custom CSS, and paste the copied code. This will apply the trapezoid shape to your containers. - Adjust the grid layout:
Go back to the CSS grid settings and adjust the gaps between the columns to create a unique design. - Apply media queries:
To ensure your design looks good on mobile devices, apply media queries to your CSS code. This will ensure the CSS and positioning only apply when the screen size is a minimum of 768px.
Use Cases for this Tutorial
- Web Designers:
This tutorial can help web designers create unique layouts for their clients’ websites. - Bloggers:
Bloggers can use this technique to make their blog posts more visually appealing. - E-commerce Sites:
E-commerce sites can use this design technique to highlight product features or promotions. - Portfolio Websites:
Artists and designers can use this technique to showcase their work in a unique way.
