The Overlap Card

The inspiration for this card came from a block layout available from Qubely.

While this seems simple enough it does require a couple lines of custom CSS.

The elements

  • Two nested columns (1/1 and 90%)
  • Top column
    • Post card image in the top.
    • Custom css: z-index to 0.
  • Bottom Column
    • Dynamic data for the category, title, meta element and content element set to excerpt.
    • Top margin set to -80px,
    • Padding set to 30px.
    • Flex stretch (equal heights)
    • Box shadow: 34px 0 28 -20 rgba(0,0,0,.15)
    • Custom CSS: margin left and right auto
Copy to Clipboard

For information of the category labels see Adding and Styling Top-level Category Labels.

  • Continue reading ScriptsOrganizer and Avada
    By |0.8 min read|Views: 7|

    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.

Copy to Clipboard