Small news feed with image

In working on a newspaper type layout, I needed a basic layout with an image. This is recommend for a 1/3 column or larger. Smaller columns will require font adjustments for the title. When you add this using the post cards element, you must set the number of columns to 1 in order for the layout to work as needed.

This does require custom CSS.

The elements

  • Two nested columns (4/5 and 1/5)
  • Left column
    • Title element
    • Date
  • Right column
    • Background image set to dynamically load the featured image
    • Avada adds a blank image if the column is empty which causes accessibility errors. Add separator with no margin and styling.
    • Custom css (No longer required after 7.6):
Copy to Clipboard

Small news feed

Similar to the previous listing without an image, but intended for smaller columns. I created a card for dark and light backgrounds and slightly different font settings.

The elements

  • Left column
    • Title element
    • Date
Copy to Clipboard
Copy to Clipboard