Hi
I would like some help achieving a design with Enfold.
I am trying to create the diagonal split like in the link below
Keep up the great work
Thanks in advance
Hey PhatJ,
Thank you for the inquiry.
There is no built-in option for this layout by default, but you can do it using the Grid Row element. In the Advanced > Developer Settings > Custom CSS Class field, add the class name “av-custom-grid-row-background”, and set the cell size to 2/3 – 1/3. Then, edit the first cell, add the class name “av-slanted-content-background”, and apply the following css code to create the diagonal background. Make sure to adjust the background image URL.
.av-custom-grid-row-background {
background: url('IMAGE URL HERE');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.av-slanted-content-background {
padding: 100px 20px 100px 60px;
clip-path: polygon(0% 0%, 0% 100%, 64% 100%, 100% 0%);
position: relative;
z-index: 1;
}
.av-slanted-content-background .flex_cell_inner {
width: 90%;
padding-right: 180px
}
Best regards,
Ismael