Tag Cloud Element
The Tag Cloud Element shows the terms of a taxonomy, such as post tags or categories, as a group of linked labels. Each label leads to the archive page of that term, so visitors find related content quickly. It works well in a sidebar, at the end of a blog post or on an archive page.
It works with every taxonomy of the site that allows a tag cloud, including those of custom post types. The tags can have the same size or grow with the number of posts, carry an arrow shape and use fixed or random colors.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Tag Cloud Element
Add the Tag Cloud Element to a column and choose the Taxonomy, for example tags or categories. Turn on Show Count to print the number of posts next to each term.
On the Design tab pick a Style: Basic for plain labels or Arrows for labels shaped like a tag. Set the Alignment, Tag Spacing, padding, border size and radius. Font Size Type Variable makes frequently used terms larger; Static uses the same Font Size for all.
The colors come from Background Color, Text Color and Border Color. With Random Colors each tag gets its own color for the background, the text or both; when you choose both, the text uses the color and the background a light, semi-transparent version of it.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Tag Cloud. Change them there to style every Tag Cloud at once.
Options with a small state switch next to them can be set separately for the normal, hover and active state.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Taxonomy | Select the taxonomy you want the tag cloud to display. |
| Show Count | Choose if the tag post count should be displayed. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose 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 Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Style | Select the tag style. |
| Alignment | Choose how the tags should align inside the Column. |
| Tag Spacing | Set the space between tags. |
| Font Size Type | Select font size type for the tags. Variable means more common tags will be larger. |
| Font Size | Choose the font size of the tag text. Enter value including any valid CSS unit, for example 20px. |
| Letter Spacing | Choose the letter spacing of the tag text. Enter value including any valid CSS unit, for example 2px. Leave empty to use the site default. |
| Tags Padding | Set the padding inside the tags. Enter values including px or em units, for example 20px, 2.5em. |
| Border Size | Set the border size. In pixels or percentage, for example 10px or 10%. |
| Border Radius | Set the border radius. Enter values including any valid CSS unit, for example 10px. |
| Random Colors | Select 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 Color | Choose the background color of the tags. |
| Text Color | Choose the text color of the tags. |
| Border Color | Choose the border color of the tags. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Random colors are chosen again every time the page is built, so the colors change from visit to visit unless the page is cached.
- Check the contrast when you use random text colors on a colored background; some combinations are hard to read.
- Only terms with at least one post are listed. When a taxonomy has none, a gray placeholder message appears on the page, also for visitors, so choose a taxonomy that is in use.
- Like the standard WordPress tag cloud, the element shows up to 45 terms, the most used ones.
- Tag clouds work best with a moderate number of well-used terms. A cloud of dozens of one-off tags is hard to scan; clean up rarely used tags first.