Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1484828

    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

    #1484844

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.