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.
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.
You can add badge on Elementor elements using Premium Badge addon under Content tab in widget settings.
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.
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.
Elementor Flag Badge Style
Add a flag badge shape to Elementor element.
Elementor Triangle Badge Style
Add a triangle badge shape to Elementor element.
Elementor Circle Badge Style
Add circle badge shape to Elementor element.
Elementor Bookmark Badge Style
Add bookmark badge shape to Elementor element.
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 Blobmaker, Blobs or Squircley.
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.
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.
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.
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.
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).
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.
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:
- Elementor Lottie Animation Section Addon
- Elementor Ken Burns Section Addon
- Elementor Animated Gradients Section Addon
- Elementor Parallax Section Addon
- Elementor Animated Blob Generator Section Addon
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.
Problème à l’affichage. En mode éditeur le visuel est correct. Mais une fois édité, ça bug
Hello, could you please open a ticket on our support system so the team can check it for you?
Can the Badge be shifted on left side (I see no option to move it)
Please navigate to addon settings > Layout > Horizontal Position and set badge position to Left. Here’s a screenshot for more clarification.
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?
Please send a message so our devs team can check and help.
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)
I’m so sorry, but this option is not available at the moment.