The Overlap Left

  • Link to ScriptsOrganizer and Avada

    I had previously written about the plugin ScriptsOrganizer from DPlugins, but the recent update (3.4.2) makes it ideal for customizing Avada. The latest addition makes it possible to ingest all the CSS variables and makes them available for reference.

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.

  • Styling the off-canvas element is "easy" if you know which part to target.

    Link to Customizing the Off Canvas Background