The Text Distort widget creates attention-grabbing transition effects for text. Use it to bring excitement to site navigation, headlines, important links and more.
Applying the effect to text throughout an existing site is easy using paragraph styles. And with the ability to combine effects, animation styles and colors, there is a nearly infinite number of possible style combinations.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial release
Setup in Muse
Place the widget on your site. It is best to place the widget out of the way, off canvas.
If you would like the text distort effect to apply to text within one page, place it on that page. If you would like the effect to apply to text throughout the site, place the widget on the master page.
Note that the widget uses a paragraph style to link it to text on your site.
Open the widget option panel.
Paragraph Style: This widget uses a paragraph style to link it to text on your site. If you have not already applied a paragraph style to text you'd like to apply the distort effect to, simply apply a new paragraph style to the text of your choosing. Enter the paragraph style name into the widget.
Note that the widget will apply the effect to all of the text with the paragraph style applied to it. For example, if you're adding this widget to an existing site that uses a paragraph style for all headlines throughout the site, entering that paragraph style in the widget will apply the effect to all the headlines. But if the widget is placed on a single page, the effect will only apply to headlines on that page. If the widget is placed on the master page, it will apply the effect to headlines throughout the site (in this example).
Hover Style: There are 6 hover styles. Each creates a different type of distort effect.
Distort Effect: There are 7 types of distort effects. This applies only to the distortion of the hover style mentioned above.
Use combinations of Hover Styles and Distort Effects for an extensive range of animation possibilities
STYLING SECTION
Most of the Content Styling options are self-explanatory. We will not cover each setting, as they are labeled with their exact purpose. However, there are a few key settings that should be mentioned:
Distortion Color: This is the primary color setting for the distort effect.
Distortion Element Thickness: This applies a thickness (in px) to the distortion element. Some Hover styles have their own unique settings found below this option. For Hover Styles that do not have specific options – such as Underline and Line Through – this is the setting to use in order to apply a thickness to those elements.
The remaining settings allow you to customize elements of individual Hover Styles. Those settings are labeled with their exact purpose and will not be explained in detail here as they are self explanatory.