ElementsKit Global Badge module allows you to highlight specific products or services with eye-catching labels like New, Sale, or Offer. This document explains every setting available, ensuring you can precisely customize the badge’s appearance and behavior.

Watch the video.

ElementsKit Global Badge Module #

Open the page or post where you want to add a badge.

Now, follow the process.

Select the page element where you want to add a badge e.g., a product or service listing.

Accédez au Onglet Avancé. Here you’ll find the ElementsKit Badge.

Toggle the button to enable it. A badge will then be added to the desired product.

Onglet Contenu #

Let’s see what the tab offer to you.

Initial Settings #

• Étiquette: Here you can write the badge content that will be displayed on the element.
• Presets: It lets you select from a selection of pre-configured visual styles that instantly apply a complete look and layout to the element.

• Type d'icône : It offers 3 visual media types that can be used alongside the text, such as –

1. Icône: This option lets you choose a icon/vector graphic from a built-in library and and provides settings to change its direction.

2. Image: Here you can upload a custom graphic file and and access settings to change its direction.

3. Lottie: This option enables the use of a lightweight, scalable Lottie animation file.

• Icon Direction: Change the animation’s direction, such as Row – Horizontal, Column – Vertical, Row Reverse and Column Reverse.
• Source: Choose from the Media file or the External URL and insert the file or JSON URL in the field.
• Boucle: If it’s enabled, the Lottie animation on the badge plays continuously without stopping; otherwise, it plays once and stops. Also, if enabled, you’ll get a Reverse toggle button. Enabling this will play the Lottie forward, then backward.

Cependant, vous pouvez also choose None(Icon Type) and show only the text label.

Floating Effects #

If you enable the floating effects button, it’ll add a subtle, continuous motion or animation to the badge to draw attention to it.

Badge #

• Taille: You can control the width and height of the badge.
• Position: Here you can adjust the location of the badge on the element e.g., top-left, bottom-right, or custom offsets.
• Tourner: This option allows you to set the angle at which the badge is displayed.
• Ribbon: Finally, you determine the style or shape of the ribbon that the badge may be displayed on.

Étiquette #

• Position: Here you can adjust the precise location of the text label within the badge area.
• Tourner: It lets you to set the angle at which the text label is displayed.

Unset Overflow #

This removes the parent container’s overflow setting. It ensures the entire badge is visible without being clipped.

Onglet Style #

This contains styling controls for the Badge & Label:

• Typographie: It lets you choose font family, size, weight, transform, style, decoration, and line height for the badge text.
• Couleur de l'étiquette : You can use it to set the color of the text within the badge.
• Fond d'insigne : The Badge Background feature defines the background color of the badge shape.
• Rayon de bordure : Modifying Border Radius is essential because it allows you to change the corner curvature, resulting in shapes like squares, subtle rounding, or full circles.
• Rembourrage: Here, you can control the internal space between the badge content and its border.
• Z-index: Z-index allows you to manage the vertical stacking order of the badge relative to other elements on the page.

You have now learned all the features required to create, style, and perfectly position dynamic badges on your website using ElementsKit.