Tag Cloud Element

Last Update: March 18, 2024

The Tag Cloud Element allows you to add a tag cloud into your content. Read the document to see the full range of options, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Tag Cloud Element

To start, select where you’d like to place your Tag Cloud. Add the Tag Cloud Element from the Element Dialog.

Configure the Element as required. Choosing the taxonomy is the most important option, as this determines what is displayed. Configure the style of the Tag Cloud on the design tab. Here, you can choose a range of design options to style the Tag Cloud exactly as you want.

If you wish, you can choose to animate the Element on the Extras tab.

Tag Cloud Element Example

Element Options

Note: Please note that the displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
TaxonomySelect the taxonomy you want the tag cloud to display.
Show CountChoose if the tag post count should be displayed.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
Element Sticky VisibilityChoose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginEnter values including any valid CSS unit, ex: 4%.
StyleSelect the tag style.
AlignmentChoose how the tags should align inside the Column.
Tag SpacingSet the space between tags.
Font Size TypeSelect font size type for the tags. Variable means more common tags will be larger.
Font SizeChoose the font size of the tag text. Enter value including any valid CSS unit, ex: 20px.
Letter SpacingChoose the letter spacing of the tag text. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Tags PaddingSet the padding inside the tags. Enter values including px or em units, ex: 20px, 2.5em.
Border SizeSet the border size. In pixels or percentage, ex: 10px or 10%.
Border RadiusSet the border radius. Enter values including any valid CSS unit, ex: 10px.
Random ColorsSelect random colors for background, text or both. When selecting both, the background and text will use the same color, but the background will be semi transparent.
Background ColorChoose the background color of the tags.
Text ColorChoose the text color of the tags.
Border ColorChoose the border color of the tags.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article