With this element, you can add a soft, moving sparkle effect to any text on your website, helping important words stand out in a clean and elegant way. It’s great for headings, offers, festive messages, or key lines that need extra attention. You can fully customize the sparkle size, speed, color, and density to match your site’s style. The element is easy to use, loads quickly, and works smoothly across all devices and browsers.
Required Setup
- Bricks Builder installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Sparkle Text element.
How to Activate the Sparkle Text Element?
Go to
- WDesignKit → Widgets → Browse Widgets.
- Search the element name and select Bricks as the Page Builder.
- Click on the Download icon.
Use Cases
Use the Sparkle Text element when you want to highlight important text with a subtle animated sparkle effect. It helps draw attention to key messages, headings, or promotional lines while keeping the design elegant and visually engaging without overwhelming the layout.
Best For:
- Landing Page Headlines: Highlight main headlines or taglines with a sparkle effect to instantly capture user attention when they land on the page.
- Promotional Offers & Discounts: Make special deals, limited-time offers, or sale announcements stand out by adding a sparkle effect to key promotional text.
- Call-to-Action Sections: Emphasize important call-to-action phrases like “Get Started,” “Join Now,” or “Limited Offer” so users notice them quickly.
- Festive & Seasonal Messages: Perfect for holiday greetings, festive banners, or celebration messages where a sparkling visual effect enhances the theme.
- Hero Section Highlights: Add sparkle to important words or phrases in hero sections to make the introduction of your brand or product more engaging.
- Marketing & Campaign Pages: Draw attention to campaign slogans, product highlights, or announcement messages with animated sparkle text.
- Event Announcements: Highlight event names, dates, or key information for webinars, conferences, or special events to make them visually noticeable.
- Creative Portfolio Websites: Use sparkle text to emphasize project titles, creative slogans, or featured work descriptions.
- Product Launch Pages: Highlight new product names or launch announcements to make them visually appealing and memorable.
- Modern & Interactive UI Designs: Ideal for websites aiming for a stylish and interactive experience while keeping text elements clean and lightweight.
How to Use the Sparkle Text Element in Bricks?
Add the Sparkle Text to the page.
LAYOUT
You can select a pre-defined style from the Style dropdown.
Note: From this tab, based on the style you selected, you will see different options to add the content.
CONTENT
In the Text field, you have to add the content name.
ICONS
Note:When you select Style 2 in the Style dropdown under the Layout tab, you will be able to see this tab.
Then, from the section, you can add the sparkle icons. By default, you’ll find one repeater item; open it.
From the Select Icon section, you can choose either an icon or an SVG for the content.
From the Icon Color field, you can manage the normal icon color for the item.
From the SVG Color field, you can manage the SVG icon color for the item.
You can click on the + ADD ITEM button to add more icons.
EXTRA OPTIONS
From the Effect on Hover option, you can enable the sparkle effect to display only when the user hovers over the element. When this option is enabled, the sparkle animation will trigger on hover instead of appearing continuously.
From the Sparkle Duration (ms) section, you can set how fast or slow the sparkle effect plays. Smaller values make it faster, and larger values make it slower.
Then, from the Alignment section, you can align the layout for responsive devices.
Then, from the Style tab, you can further customize the style of the Sparkle Text.