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.

Przejdź do Zakładka Zaawansowane. Here you’ll find the ElementsKit Badge.

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

Zakładka Treść #

Let’s see what the tab offer to you.

Initial Settings #

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

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

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

2. Obraz: 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.
• Źródło: Choose from the Media file or the External URL and insert the file or JSON URL in the field.
• Pętla: 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.

Jednak możesz 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.

Odznaka #

• Rozmiar: You can control the width and height of the badge.
• Pozycja: Here you can adjust the location of the badge on the element e.g., top-left, bottom-right, or custom offsets.
• Obracać się: 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.

Etykieta #

• Pozycja: Here you can adjust the precise location of the text label within the badge area.
• Obracać się: 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.

Karta Styl #

This contains styling controls for the Badge & Label:

• Typografia: It lets you choose font family, size, weight, transform, style, decoration, and line height for the badge text.
• Kolor etykiety: You can use it to set the color of the text within the badge.
• Tło odznaki: The Badge Background feature defines the background color of the badge shape.
• Promień granicy: Modifying Border Radius is essential because it allows you to change the corner curvature, resulting in shapes like squares, subtle rounding, or full circles.
• Wyściółka: 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.