How to use HappyAddons Global Badge feature
The Global Badge is a powerful feature introduced in HappyAddons, a WordPress plugin designed to enhance the Elementor page-building experience. With this feature, users can effortlessly add badges to any Elementor widget, providing endless customization possibilities. Whether you’re using the pro version of HappyAddons, this feature is available to elevate your website design.
Requirements:
- WordPress installed and activated.
- Elementor plugin installed and activated.
- HappyAddons Free and Pro plugin installed and activated.
Features:
- Badge Text: Easily add text to your badge to convey messages or highlight key information.
- Styles: Choose from a variety of preset styles such as Stripe, Flag, Triangle, Circle, and Bookmark, or create a custom layout for your badge.
Creating Custom Style: To create a custom layout style, enable clip-path. You will find Clippy URL redirection:
- Icon Types: Select from Icon, Image, or Lottie icons to complement your badge design.
- Effects: Apply dynamic effects to your badge to enhance its visual appeal. Effects include Translate (X and Y), Rotate (X, Y, Z), Scale (X, Y), Opacity, Blur, and Graystyle. Each effect comes with adjustable parameters such as speed and visibility control for Safari browsers.
- Placement: Position your badge anywhere relative to the widget, including horizontally (left or right) and vertically (up or down).
- Z-Index: Control the stacking order of the badge with other elements on the page. The default Z-Index value is 5.
- Reset Button: Quickly revert badge settings to default with the reset button, ensuring hassle-free customization.
Example:
Imagine you have a Card widget on your website, and you want to highlight certain card as “Featured“. With the Global Badge, you can easily add a circular badge with the text “Featured” on the top-right corner of each Card. You can further customize the badge style, choose an appropriate icon type, apply effects like rotation or opacity, and adjust its visibility based on browser compatibility.
Instructions for Usage:
- Adding the Global Badge to a Widget:
- Open the Elementor editor and select the page or post where you want to add the badge.
- Drag and drop the desired Elementor widget onto the canvas.
- Enable the Badge:
- Within the widget settings, navigate to the Content > Global Badge section.
- Enable the badge feature and configure badge text, style, icon type, effects, placement, and Z-Index as desired.
- Resetting Settings:
- Use the reset button to revert badge settings to default if needed.
- Preview and Save:
- Save the changes and preview the page to see the badge in action.
Apply dynamic effects such as rotation, opacity, and blur to enhance badge appearance.
Effects Details:
- Translate:
- Description: Translate effect allows you to move the badge along the X and Y axes.
- Parameters: You can adjust the Translate X and Translate Y values to control the direction and distance of the translation. Additionally, set the speed to determine the transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
- Rotate:
- Description: Rotate effect enables the badge to rotate along the X, Y, and Z axes.
- Parameters: Adjust Rotate X, Rotate Y, and Rotate Z values to control the rotation angles. Set the speed to determine the rotation transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
- Scale:
- Description: Scale effect allows you to resize the badge along the X and Y axes.
- Parameters: Adjust Scale X and Scale Y values to control the scaling factor. Set the speed to determine the scaling transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
- Opacity:
- Description: Opacity effect adjusts the transparency level of the badge.
- Parameters: Set the opacity value from 0 to 100 to control the transparency. Adjust the speed to determine the opacity transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
- Blur:
- Description: Blur effect adds a blur effect to the badge, creating a visually appealing effect.
- Parameters: Set the blur value from 0 to 100 to control the intensity of the blur effect. Adjust the speed to determine the blur transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
- Graystyle:
- Description: Graystyle effect converts the badge to grayscale, providing a monochromatic appearance.
- Parameters: Set the graystyle value from 0 to 100 to control the intensity of the grayscale effect. Adjust the speed to determine the grayscale transition duration.
- Visibility Control: Enable or disable the effect’s visibility specifically for Safari browsers.
Note: Experiment with different combinations of effects and parameters to achieve the desired visual impact for your badge.