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):
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