June 5, 2023

Create Intersecting Elementor CSS Grid Containers with Clip Path

Play Video

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

  1. 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.
  2. Add containers:
    Drop two containers into the grid layout. They will appear next to each other due to the row Auto flow setting.
  3. Add content:
    For this tutorial, we’ll add a heading to each container. Align the containers to be stretched for a better visual effect.
  4. Add background colors:
    Choose suitable background colors for your containers.
  5. 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.
  6. 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.
  7. Adjust the grid layout:
    Go back to the CSS grid settings and adjust the gaps between the columns to create a unique design.
  8. 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.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create Intersecting Elementor CSS Grid Containers with Clip Path
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.