Design help

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

Hi,

Thank you for the update.

How can I replace the image with a video please?

You can use the Video element or an Image element with a video URL as the link. When the image is clicked, the video will open in a lightbox. Let us know if you need more info.

Best regards,
Ismael