While surfing the web this morning looking for a leather desk pad, I stumbled across Grovemade a company that sells leather and synthetic desk pads among other things. Their site has a nice blog section and I really like their post cards. They are clean and simple with one flare — a read more like with a little interactive border. As I stated in a couple of other posts, these micro-interactions are such a nice feature to add polish.

Small Mouse Interaction

To do this in Avada is really quite simple. Add a title element as this gives you the ability to wrap it as a link and add the permalink as dynamic data. Since this is not a heading, set the HTML Heading Size to Div and size accordingly. The example I am emulating uses all caps, so with the text transform option, choose uppercase. In the CSS class field add link–elegant (my naming convention you are free to call it what you want).

Screenshot of Title element settings

Once you have the settings correctly, jump over to your custom CSS setting and add the following.

Copy to Clipboard

The complete post card can be seen on the Post Cards sample page — I called it Casual Elegance. Let me know if you want more details on that card — it is a fairly simple card design.

Originally published on April 16, 2022

System Font Weights
person standing in front of train stationPlugin Recommendation: Motion.page

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022