Tags or keywords or whatever you call them are a great way to highlight items in a story and link them to related content. At the basic level, I think of categories as sections of a newspaper — macro-level containers of information — whereas tags represent more nuanced information to tie related stories together. If you are using Woocommerce you could use them to tie related features. In a typical WordPress install, they are there but don’t really wow you, and the tag cloud is so 1999.

Add interest to your tags

Fortunately, with the addition of dynamic data, it is really easy to add interest or a variety of layouts to tags in Avada with some very basic CSS. You can have pill-shaped, tag-shaped, or even columns of features. All you need to do is add a class to your text element and enable links, then style away. On this site, I use small button-like tags. The text element gives you some flexibility with text alignment, base color, and text transformation, but then a little CSS is needed to go a bit further.


.tag-list p{
  max-width:600px;
  margin:2rem auto;
}

.tag-list p a{
  display:inline-block;
  text-decoration:none!important;
  padding:4px 12px;
  background-color:var(--awb-color3)!important;
  margin:4px;
  color:currentColor;
  border-radius:4px
}

.tag-list p a:hover{
  background-color:var(--awb-color6)!important;
  color:var(--awb-color1)!important;
}

The Feature List

This was an answer to a question in the Facebook Group related to tags in Woo Commerce. The same principles apply. Since I don’t use Woo (yet) I wasn’t sure if the links were wrapped in a div or a p tag, but they can be easily swapped out. This particular question showed the desired end result using checkmarks next to the item, but you could create a custom list where each item had its own icon – all Bluetooth items have a Bluetooth icon.

Originally published on March 31, 2022

In this story

photo of bulb artworkRethinking Sticky Columns in Avada
black iphone 4 on brown wooden tableSharing Bar

Leave a Reply

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

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • 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 Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    February 12, 2023