Elementor Badge Global Addon Tutorial

Do you want to put a badge on one of your Elemetor elements to make it remarkable and attractive to website visitors? We introduce Elementor Badge Global Addon that has a lot of customization options and can be placed on any Elementor section, column, inner section, or widget.

Elementor Badge Global Addon has a lot of customization options with 6 different styles. You can also select to add an icon, image, Lottie animation, or SVG blob shape badge.

Check Elementor Badge Global Addon demo page.

Elementor Badge Global Addon
Elementor Badge Global Addon

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this feature is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Text
  • Style
    • Strip
    • Flag
    • Triangle
    • Circle
    • Bookmark
    • Custom Layout.
  • Icon
    • Icon
    • Image
    • Lottie Animation
  • Floating Effects
    • Translate
    • Rotate
    • Opacity
    • Blur
    • Grayscale
  • Style & Layout
    • Layout
    • Style
    • Icon Style
    • SVG Layer

How to Add Badge on Elementor Elements?

Elementor Badge Addon can be applied on any Elementor content by navigating to Layout tab in Elementor sections, inner sections, and columns, then scroll down to Premium Global Badge tab.

Red Arrow Pointing to Columns Settings and Enable Global Badge Option in Elementor Panel
Enable Elementor Badge Global Addon On Elementor Column

You can add badge on Elementor elements using Premium Badge addon under Content tab in widget settings.

Red Arrow Pointing to Enable Global Badge Option in Elementor Panel
Enable Elementor Badge Global Addon for Elementor Image Widget

Add Text Badge on Elementor Elements

In Elementor Badge Global Addon, the badge can consist of text, icon, or both of them.

  • Text: Insert text to be shown in badge.
Elementor Global Badge Addon on Left Side and Red Arrow Pointing to Text Badge for Elementor Element
Add Text Badge on Elementor Elements

How to Add Elementor Badge Shape?

Elementor Badge Global Addon comes with 6 shapes options and one of them is a custom style where you can create unique badges in a minute.

  • Style: Select badge style shape from 6 different styles Strip, Flag, Triangle, Circle, Bookmark, or Custom Layout.

Elementor Stripe Badge Style

Add a stipe badge shape to Elementor element.

On Left Side Pointing to Strip Style in Elementor Editor and On Right Side Red Arrow Pointing to Elementor Stripe Badge Shape
Add Stripe Badge on Elementor content

Elementor Flag Badge Style

Add a flag badge shape to Elementor element.

On Left Side Red Arrow Pointing to Flag Style in Elementor Editor and On Right Side Red Arrow Pointing to Elementor Flag Badge Shape
Add Flag Shape Badge on Elementor Element

Elementor Triangle Badge Style

Add a triangle badge shape to Elementor element.

On Left Side Arrow Pointing to Triangle Style in Elementor Editor and On Right Side Red Arrow Pointing to Elementor Triangle Badge Shape
Add Triangle Badge Shape on Elementor widget

Elementor Circle Badge Style

Add circle badge shape to Elementor element.

On Left Side Arrow Pointing to Circle Style in Elementor Editor and On Right Side Red Arrow Pointing to Elementor Circle Badge Shape
Add a Circle Badge on Elementor Image widget

Elementor Bookmark Badge Style

Add bookmark badge shape to Elementor element.

On Left Side Arrow Pointing to Bookmark Style in Elementor Editor and On Right Side Red Arrow Pointing to Elementor Bookmark Badge Shape
Add Bookmark Shape on Elementor Elements

Custom Layout Badge Shape for Elementor Builder

You can also create a custom shape to be used as a badge on your Elementor elements. Elementor Badge Global Addon is integrated with Clippy and Blob SVG code like Blobmaker, Blobs, or Squircley.

  • Select Custom Layout from Style option.
  • Enable Clip Path: Allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. Get Clip Path code from Clippy.
  • Add SVG Layer: This option gives more customization options that help you to create more sophisticated SVG blob shapes. Get Blob SVG code from BlobmakerBlobs or Squircley.
Creating Custom SVG Using Blobmaker and Insert in SVG Code to Use as Badge for Elementor Page Builder Elements
Add a Custom SVG Blob Shape Using Elementor Badge Global Addon

Add Icon Badge to Elementor Elements

In Elementor Global Badge Addon, we have three icon types that will be very useful to create unique badges for Elementor elements.

  • Icon: Enable to insert icon in badge.
  • Icon Type: Select or upload a custom image via the Media Library, select icon from Font Awesome Icons or paste Lottie Animations JSON URL.
On Left Side Arrow Pointing to Lottie Animation Icon Type in Elementor Panel and On Right Side Elementor Strip Badge with Lottie Icon
Lottie Animation Icon for Elementor Global Badge Addon

Apply Floating Effects on Elementor Badge Global Addon

You can bring magic to Elementor Badge Global addon and make them alive using the floating effects options to grab users’ attention.

  • ِFloating Effects: Enable to add floating effects to Elementor badges.
  • Translate: Enable to create a transition between two position points. (Not available for Stripe Style)
    • Translate X: Set the horizontal position in pixels.
    • Translate Y: Set the vertical position in pixels.
    • Speed: Set the animation duration in seconds.
  • Rotate: Enable to rotate Elementor badge from and to specific degrees. (Not available for Stripe Style)
    • Rotate X: Set the start and end values for x-axis rotation animation in degrees.
    • Rotate Y: Set the start and end values for y-axis rotation animation in degrees.
    • Rotate Z: Set the start and end values for z-axis rotation animation in degrees.
    • Speed: Set the animation speed.
  • Opacity: Enable to change the opacity of your Elementor badge between two values.
    • Value: Set the start and end opacity values of the animation.
    • Speed: Set the animation speed.
  • Blur: Enable to change the blur of your Elementor badge between two values.
    • Value: Set start and end values for blur filter.
    • Speed: Set the animation speed.
  • Grayscale: Enable to change Elementor badge from colorful to black and white.
    • Value: Set start and end values for grayscale filter in percentage(%).
    • Speed: Set the animation speed.
  • Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations.
On Left Side Red Arrow Pointing to Translate Effect and On Right Side Translate Badge Effect
Add Floating Effects in Elementor Badge Addon

The Layout Options in Elementor Badge Global Addon

Layout options tab in Elementor Badge addon contains horizontal and vertical position options. Also, you can set how to display text and icon together.

Please note: not all below options are available for all Elementor Global Badge Styles.

  • Horizontal Position: Set Elementor Badge position left or right.
  • Vertical Position: Set Elementor Badge position top or bottom.
  • Horizontal Offset: Set space from the left or right for Elementor Badge in pixel (PX) or percentage (%) on desktop, tablet and mobile.
  • Vertical Offset: Set space from the top or bottom for Elementor Badge in pixel (PX) or percentage (%) on desktop, tablet and mobile.
  • Rotate (Degrees): Set rotation degree value for Elementor badge in degrees.

The options below are available only if the Icon option is enabled.

  • Display: Set how to display icon and text in Elementor Badge shape in block or inline.
    • Block: Display text and icon below each other in same column.
    • Inline: Display text and icon below beside each other in same row.
  • Spacing: Set spacing between text and icon in pixel (PX) or em (EM) on desktop, tablet and mobile.
Style and Layout Option for Elementor Global Badge Addon
Style and Layout Option in Elementor Global Badge Addon

Elementor Badge Global Addon Shape Style

Style tab in Elementor Badge addon contains the following options:

  • Size: Set size for Triangle and Custom Layout Elementor badges in pixel (PX) or em (Em) on desktop, tablet and mobile.
  • Color: Pick a color for Elementor badge text.
  • Background Type: Pick background for Elementor badge shape.
    • Classic Background: Color or Image Background.
    • Gradient Background: Set background using gradient colors.
  • Text Shadow: Adjust Elementor badge text shadow using the following controls:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Box Shadow: Add a shadow around Elementor badge shape by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Typography: Adjust Elementor badge text font settings and style it.
  • Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor Badge Circle and Custom Layout shapes.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor Badge shape. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
  • Advanced Border Radius: Apply custom radius values for Elementor Badge Circle and Custom Layout shapes. Get the radius value from Fancy Border Radius Generator. Check this article for more information.
  • Z-Index: Set z-index value for Elementor badge shape, it’s very useful option if badge is overlayed by another element.
  • Padding: Creates a space between Elementor badge shape and its text & icon in pixel (PX), percentage (%) or em (Em) on desktop, tablet and mobile.
Style Badge Shapes for Badges in Elementor
Style Badge Shapes Options for Elementor Global Badge Addon

Icon Style in Elementor Badge Global Addon

If the icon option is enabled in Elementor Badge Addon, you can set the icon size, color, and border radius.

  • Icon Color: Pick a color for Elementor Global Badge icon.
  • Icon Size: Set Elementor Badge icon size in pixel (PX) and em (EM) on desktop, tablet and mobile.
  • Border Radius: Increasing the border-radius will add circular corners to the Elementor Badge shape image and lottie animation. You can adjust the border-radius in pixel (PX), percentage (%) or em (Em).
On Left Side Arrow Pointing to Icon Color Option and On Right Side Red Arrow Pointing to Elementor Icon Badge
Icon Style Options in Elementor Global Badge Addon

SVG Blob Badge Style in Elementor Badge Global Addon

Customize the SVG blog shape size, offset, and z-index in custom layout Elementor badge addon.

  • Layer Size: Set Elementor SVG Badge shape size in pixel (PX) or em (EM) on desktop, tablet and mobile.
  • SVG Horizontal Offset: Set space from the left or right for Elementor SVG Badge shape in pixel (PX), percentage (%) or em (EM) on desktop, tablet and mobile.
  • SVG Vertical Offset: Set space from the top or bottom for Elementor SVG Badge shape in pixel (PX), percentage (%) or em (EM) on desktop, tablet and mobile.
  • Z-index: Set z-index value for Elementor SVG badge shape, it’s very useful option if badge is overlayed by another element.
Style Custom SVG Badge Shapes in Elementor
Style SVG blob shape badge in Elementor Global Badge Addon

Conclusion

Elementor Global Badge Addon helps you to grab users’ attention with simple and animated options that will help you to level up your Elementor pages design. Also, it has a lot of customization and style options that will help you to create the design you’re looking for with super flexible options. Generally, you can use it to mark Elementor elements like CTA buttons, new and hot items.

We hope we were able to help you through this guide. Check out the rest of the Global Features in Premium Addons.

Also, You can check out the rest of our Section & Columns Addons like:


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 YoutTube channel to get updates about new features, improvements, and bug fixes.

Related Docs:

This Post Has 8 Comments

  1. ferreira

    Problème à l’affichage. En mode éditeur le visuel est correct. Mais une fois édité, ça bug

    1. Omar Elhawary

      Hello, could you please open a ticket on our support system so the team can check it for you?

  2. Suhaib

    Can the Badge be shifted on left side (I see no option to move it)

    1. Omar Elhawary

      Please navigate to addon settings > Layout > Horizontal Position and set badge position to Left. Here’s a screenshot for more clarification.

  3. Tracy

    When I use this feature to display a post’s category, the html tags (span) are displayed around the word. How can I fix this?

    1. Abanob

      Please send a message so our devs team can check and help.

  4. Frank Neumann

    Hi There,

    is it possible to turn of the badge (like new) after a timeperiode ?
    So only new posts will have the badge for 3 days (for example)

    1. Abanob

      I’m so sorry, but this option is not available at the moment.

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.