The Overlap Left

  • Link to New Avada-based website

    New Avada-based website

    I am launching a new website using Avada taking advantage of the lessons learned over the past two years of builder evaluations.

This is based on the overlap image layout and overlap card below. This could be used for basic blog posts and portfolio posts.

The elements

  • Image (border radius of 1px)
  • Title
  • Content – excerpt
  • Nested columns
    • Left column normal
    • Right column has a -90px left column spacing (left margin) plus padding to account for the shift to the left. On mobile the margin and padding move from the left to the top. Border radius of 10px and background of light blue.
    • Desktop 1/3+2/3, Table 1/2 + 1/2, and mobile 1+1.

The Overlap Right

Essentially the same as above, just with the columns reversed. The only major changes are setting the z-index of the image column to 100 so that the image layer is above the text layer and setting the order of the text column to 1 so that it is below the image on mobile.