Looking to add a unique twist to your Divi columns? Styling a Divi column’s background as a parallelogram is a striking way to enhance your page design. Follow the steps below to achieve this effect using custom CSS in Divi.
Before diving into the steps, here’s a preview of what we'll accomplish:
Add a Parallelogram Background to a Divi Column using CSS
1. Open Divi Builder
Navigate to the page where you want to apply the parallelogram effect and open the Divi Builder. Find the specific column you'd like to style.
2. Locate the Column's "Before" Custom CSS Box
Access the Column Settings:
- Click on the settings icon for the column.
- Go to the "Advanced" tab and then the "Custom CSS" section.
- Under "Module Elements," locate the "Before" option.
3. Insert the CSS Code
Copy and paste the following CSS code under "Before" to create the parallelogram effect:
content: "";
background: rgba(128,128,255,0.3);
position: absolute;
width: 100%;
height: 100%;
transform: skew(10deg); /* Set parallelogram angle */
padding: 40px; /* Add padding to ensure content covered */
top: -40px; /* Compensate for padding (set to 0px if no padding) */
left: -40px; /* Compensate for padding (set to 0px if no padding) */
Here’s a break down of the CSS:
content: "";Ensures the pseudo-element is visible.background: rgba(128, 128, 255, 0.3);Sets the background color; adjust as needed.position: absolute;Positions the pseudo-element relative to its container.width: 100%; height: 100%;Ensures the pseudo-element covers the entire column.transform: skew(10deg);Applies the skew effect to create the parallelogram.padding: 40px; top: -40px; left: -40px;Adjusts padding to ensure the skewed element covers the column area without gaps.
0 Comments