Elementor Tags Cloud Widget

Elementor Tags Cloud widget by Premium Addons offers various options to display WordPress tags and categories in a visually appealing way. With this tool, it’s effortless and speedy to present taxonomies using shapes or animations. The widget enables you to display taxonomies in an eye-catching and straightforward manner.

Check Elementor Tags Cloud Widget demo page.

elementor,tag,cloud
Tags Cloud Elementor Widget

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Make sure that this widget is enabled so you can find it in the Elementor editor.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Elementor Tag Cloud Settings

Start by dragging & dropping the Tags Cloud widget into your Elementor editor.

Key Features

  • Display Options.
  • Query.

Display Options

  • Words Order
    • Default.
    • Label.
    • Shape.
    • Sphere.
Please note that Shape and Sphere options require Premium Addons PRO installed and activated on your website.

Default

Multi Color tags
Elementor Cloud Tags Default Layout
  • Words to Remove: Add a list of words separated by commas to be removed.
  • Max Number of Words: Use this option to strip-tag a specific number of words.
  • Open Links in New Tab: Select to open the link in a new tab.
  • Words Colors: Select a word’s color from the dropdown menu.
    • Random Light
    • Random Dark.
    • Custom: Add the colors you want to select from randomly. Each color is in a separate line.
  • Alignment: Optionally align the pagination to the left, right, or center.
Default Words Order Display Options
Elementor Tags Cloud Default Words Order Display Options

Label

Purple Tags labels
Elementor Cloud Tags Label Layout
  • Circle Position: Adjust the circle position.
  • Words to Remove: Add a list of words separated by commas to be removed.
  • Max Number of Words: Use this option to strip-tag a specific number of words.
  • Show Posts Number: Enable to show the number of posts in each tag/category.
  • Open Links in New Tab: Select to open the link in a new tab.
  • Words Colors: Select a word’s color from the dropdown menu.
    • Random Light
    • Random Dark.
    • Custom: Add a list of colors you want to select from randomly. Each color in a separate line.
  • Alignment: Optionally align the pagination to the left, right, or center.
Label tags Order Display Options
Elementor Tags Cloud Label Words Order Display Options

Shape

different tags with different font size shapes and colors
Elementor Cloud Tags Shape Layout
  • Words to Remove: Add a list of words separated by commas to be removed.
  • Max Number of Words: Use this option to strip-tag a specific number of words.
  • Shape: Select the word tag shape from the given options.
    • Circle
    • Square
    • Diamond
    • Triangle
    • Triangle Forward
    • Cardioid
    • Pentagon
    • Star
  • Width: Set the width of the shape.
  • Height: Set the height of the shape.
  • Scale: Set the scale of the shape.
  • Rotation.
  • Font Family.
  • Font Weight.
  • Text Transform.
  • Time between Rendering Words (sec): Set the number of seconds to wait before rendering each word.
  • Open Links in New Tab: Select to open the link in a new tab.
  • Words Colors: Select a word’s color from the dropdown menu.
    • Random Light
    • Random Dark.
    • Custom: List of colors you want to select from randomly. Each color is in a separate line.
  • Alignment: Optionally align the pagination to the left, right, or center.
Shape Words Order Display Options
Elementor Tags Cloud Shape Words Order Display Options

Sphere

animated gif with sphere shape and drag-able effect
Elementor Cloud Tag widget Sphere Layout
  • Words to Remove: Add a list of words separated by commas to be removed.
  • Max Number of Words: Use this option to strip-tag a specific number of words.
  • Width: Set the width of the shape.
  • Height: Set the height of the shape.
  • Scale: Set the scale of the shape.
  • Font Family: Set the font family to the text of the tag.
  • Font Weight: Set the font weight to the text of the tag
  • Text Transform: Set the text transform of the tag
  • Scale Font Size: This option is used to increase the font size of each term based on the number of posts in it.
  • Minimum Font Size: Set the text’s minimum font size.
  • Maximum Font Size: Set the text’s maximum font size.
  • Mouse Wheel zoom: Enable to zoom in and zoom out the tag cloud by the mouse wheel.
  • Reverse: Enable to reverse the cloud tags sphere animation.
  • Drag Control: Enable dragging the tag cloud sphere with the mouse.
    • Stop Animation After Drag.
  • Start Horizontal Rotate Speed: Used to set the default horizontal speed of the sphere.
  • Start Vertical Rotate speed: Used to set the default vertical speed of the sphere.
  • Open Links in New Tab: Select to open the link in a new tab.
  • Words Colors: Select a word’s color from the dropdown menu.
    • Random Light: Set the text color to random light colors.
    • Random Dark: Set the text color to random dark colors.
    • Custom: Add a list of colors each in a separate line to select from randomly.
  • Apply Colors On: Select to apply color on text or background.
  • Alignment: Optionally align the pagination to the left, right, or center.
Sphere Display Options in editor menu
Elementor Tags Cloud Sphere Words Order Display Options

Query

Query settings for Elementor Tags Cloud widget, you can from here select the source of Tags cloud, and you can select custom posts type. Also, you can filter by categories or tags. Generally, this option is to select the posts to display on the Elementor Tags Cloud widget.

  • Post Type: Select the post type you can get the tags from. You can show the taxonomies of any custom post type.
  • Source: Select the source of the tags (Categories or Tags).
  • Number of Terms to Show: Set the number of tags to show.
  • Order By: You can choose to order the tags by the following attributes:
    • None
    • ID
    • Author
    • Title
    • Name
    • Date
    • Last Modified
    • Random
    • Number of Comment
  • Order: Additionally, you can show the tags in descending or ascending order.
Query options for tags colud
Tags Cloud Widget Query options.

Style

  • Default Word Order.
  • Label Word Order.

Default Layout – Style

Term

  • Typography: Adjust the default layout font settings and style it.
  • Font Size Scale(px): Set the term font size based on the number of posts in it.

Style the default layout on the normal state and hover state.

  • Text Color: Pick colors for the default layout term.
  • Background Type: Pick a background for the default layout term.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the default layout term.
    • Width.
    • Color.
    • Border Radius.
    • Padding.
  • Border Radius: Increasing the border-radius will add circular corners to the default layout term.
  • Text Shadow: Adjust the default layout term shadow using the following controls on normal, hover, and active states:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Box Shadow: Add a shadow around the default layout term panel by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Margin: Creates a space around the default layout term.
  • Padding:  Creates space around the default layout term.
Default word order option on Editor mode
Default Layout Style Options

Label Layout – Style

Term

  • Typography: Adjust the label layout font settings and style it.
  • Font Size Scale(px): Set the term font size based on the number of posts in it.

Style the label layout on the normal state and hover state.

  • Text Color: Pick colors for the label layout term.
  • Background Type: Pick a background for the label layout term.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Text Shadow: Adjust the label layout term shadow using the following controls on normal, hover, and active states:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Box Shadow: Add a shadow around the label layout term panel by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Margin: Creates a space around the label layout term.
  • Padding:  Creates space around the label layout term.
Options to style label layout text
Label Layout Style Option

Conclusion

Overall, the Tags Cloud widget is a valuable addition to any WordPress website that uses the Elementor page builder. Its ease of use, customization, and visual appeal make it an excellent way to display tags, categories, and other taxonomies in a more engaging and interactive format. Whether you’re using the widget to organize your blog posts, showcase your portfolio items, or highlight products in your online store, it can help improve the user experience on your WordPress site. So if you’re looking for a way to make your content more discoverable and user-friendly, be sure to give the Elementor Tags Cloud widget a try.


If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.

This Post Has 4 Comments

  1. Jason

    So we can remove tags but not list exactly which tags we want to use – and that’s why this otherwise nice widget is worthless to me. Large content sites have loads of tags – we need to be able to dictate which tags are listed, instead of just which ones to remove. The only way to get the tags we want is to remove all the other ones (hundreds) and that’s ridiculous. This widget needs a rethink!

    1. Abanob

      Would be great if you could elaborate on what you mean by “which tags you want to use”?

  2. JLaan

    Also here to figure out a similar question. I would like to display the tags / cats associated to the post automatically, without having to edit anything. Now it retrieving everything, which makes duplicating posts a tedious task.

    1. Abanob

      We already have this option on our to-do list to be released in the next few upcoming updates :)

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.