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.

How to Use 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.

Naviger til Avanceret fane. Here you’ll find the ElemetsKit Badge.

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

Fanen Indhold #

Let’s see what the tab offer to you.

Initial Settings #

• Etiket: 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.

• Ikontype: It offers 3 visual media types that can be used alongside the text, such as –

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

2. Billede: 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. You’ll also get options to change the animation’s direction and insert the JSON URL.

Det kan du dog also choose Ingen 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 #

• Størrelse: 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.
• Rotere: 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.

Etiket #

• Position: Here you can adjust the precise location of the text label within the badge area.
• Rotere: 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.

Fanen Stil #

This contains styling controls for the Badge & Label:

• Typografi: It lets you choose font family, size, weight, transform, style, decoration, and line height for the badge text.
• Etiket farve: You can use it to set the color of the text within the badge.
• Badgebaggrund: The Badge Background feature defines the background color of the badge shape.
• Grænseradius: Modifying Border Radius is essential because it allows you to change the corner curvature, resulting in shapes like squares, subtle rounding, or full circles.
• Polstring: 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.