What is the Circular Text Rotation widget?
The Circular Text Rotation widget allows you to display lines of text in a dynamic, rotating circular pattern on your Elementor pages. This creates an engaging visual effect that can draw attention to key phrases or create unique design elements using only text.
Requirement’s
- You need Marquee addons pro plugin installed and activated on your website.
- You can find detailed installation instructions in our dedicated installation blog
- Make sure that this addon is enabled so you can find it in the Elementor editor.
- Marquee Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Common use case
The Circular Text Rotation widget is ideal for adding a modern and dynamic flair to your website’s hero sections or promotional banners by rotating key phrases. Imagine having your slogan or a call to action gracefully rotating, immediately capturing visitor attention. This is particularly effective for showcasing brand values or limited-time offers in an unconventional yet captivating way, using purely textual elements.
Additional use cases
- Highlighting product features: Rotate key textual features of a product around a central point.
- Creative navigational cues: Use rotating text as unconventional cues or labels in a design.
- Event announcements: Display event details or announcements in an eye-catching circular motion using text.
Add the widget
To add the Circular Text Rotation widget:
- Navigate to the Elementor editor.
- Search for the Circular Text Rotation widget.
- Drag the widget to your desired location on the page.
Video
See a video demonstrating the widget in action.
Settings for the Circular Text Rotation widget:
Content tab
- Texts: Enter the lines of text to be displayed in the circular rotation. Each line break will create a new segment of text that rotates independently along the circle.
- Alignment: Controls the horizontal alignment of the text within its circular segment. Options include Left, Center, and Right.
- Minimum Radius: Sets the minimum radius of the circle in pixels, determining the tightness of the circular path around which the text rotates.
Additional Options:
- Animation: Toggles the circular rotation animation on or off.
- Speed: Controls the speed of the rotation, with higher values indicating faster rotation.
- Direction: Sets the direction of the rotation (Anti-Clockwise or Clockwise).
- Pause on Hover: If enabled, the rotation will pause when the mouse cursor hovers over the widget.
- Hover Effect: Select a visual effect that appears on the text when the user hovers over it (e.g., Zoom In).
Scroll Effect:
- Rotate on Scroll: If enabled, the text will rotate as the user scrolls the page.
Style tab
- Typography: Controls the font family, size, weight, line height, letter spacing, and other typographical properties of the rotating text.
- Text Color: Sets the color of the rotating text.
- Text Stroke: Adds an outline or stroke to the text, with controls for color and width.
Advanced tab
The Advanced tab offers a range of powerful settings to customize the widget’s layout, motion, appearance, responsiveness, and add custom code. These controls are common across many Elementor widgets, allowing for consistent advanced styling and positioning. You can adjust settings like margins and padding under Layout, add entrance animations or scrolling effects via Motion Effects, apply visual distortions with Transform, manage backgrounds and borders, apply unique Masks, define responsive visibility for different devices, add Attributes, and extend functionality with Custom CSS.
FAQ
Can I use the widget for scroll rotation?
Yes! You can add the scrolling effect by selecting the Rotate in scroll option from Additional option tab.
Is this widget responsive for all device?
Yes! It is fully responsive for every device you use.
How can i adjust the rotation text?
You can adjust the rotation text by adding value on the Minimum radious option from content tab. You can also adjust it by adjusting typography from the text style option from Style tab.
