By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

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

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.