Tag Cloud Element

21/12/2021

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

View Element Demo Page!

Overview

How To Use The Element
Element Options
Global Options

How To Use The Tag Cloud Element

Step 1 – Select where you’d like to place your Tag Cloud. Add the Tag Cloud Element from the Element Dialog.

Step 2 – Configure the Element as required. Choosing the taxonomy is the most important option, as this determines what is displayed.

Step 3 – 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.

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

870,055 Businesses Trust Avada

Get Avada

870,055 Businesses Trust Avada

Get Avada

870,055 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

Taxonomy – Select the taxonomy you want to the tag cloud to display.
Show Count – Choose if the tag post count should be displayed.
Element Visibility – Allows you to control the Separator’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.
CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.
CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View the Options Screen

Design Tab

Margin – Enter values including any valid CSS unit, ex: 4%.
Style – Choose from Basic or Arrows.
Alignment – Select the alignment of tags.
Tags Spacing –
Font Size Type – Variable means more common tags will be larger. Choose from Static or Variable.
Font Size – Controls the font size of tag text. Enter value including any valid CSS unit, ex: 20px.
Letter Spacing – Controls the letter spacing of tag text. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.
Tags Padding – Enter values including any valid CSS unit, ex: 4%.
Border Size – Controls the border size. In pixels or percentage, ex: 10px or 10%.
Border Radius – Controls the border radius. Enter values including any valid CSS unit, ex: 10px.
Random Colors – You can select both Background, and Text. When selecting both, background and text will use the same color, but the background will be semi transparent.
Custom Colors – Customize tags appearance.
Regular
Text Color – Controls the text color of tag text. Enter value including any valid CSS unit, ex: 20px.
Hover/Active
Text Color – Controls the text color of tag text. Enter value including any valid CSS unit, ex: 20px.

View The Options Screen

Extras Tab

Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.
Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.
Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.