Studio Editor: Adding and Customizing Text Effects
5 min
In this article
- Adding a text effect
- Designing the text effect
- Formatting the text
Use text effects to decorate your client's site with captivating titles and statements that draw attention. These fully customizable elements let you tailor the effect to be as bold or subtle as the design calls for. Choose from a variety of pre-designed effects and personalize their design to complement the rest of the page.
Tip:
If you're using the CMS (Content Management System), you can connect text effects to your collection content to show dynamic text in the element.
Adding a text effect
Explore our range of artistic text effects in the Add Elements panel. Each effect sets a distinct tone and brings unique character to your client's site. These effects are just the starting point – you can refine and customize them to perfectly match the rest of the site.
To add a text effect:
- Click Add Elements
on the left side of the editor. - Click Text or Decorative.
- Click Text Effects.
- Drag your chosen text effect onto the page.
- Write your text:
- Click the text effect element.
- Click Change Text.
- Enter your text.
Designing the text effect
Text effects are fully customizable, allowing you to tailor the design to your client's exact needs and vision. Each effect has a unique set of design settings, available in the Inspector panel. Explore options like colors, layers and movement to make the effect stand out.
Working with breakpoints?
The design settings cascade down from the largest breakpoints, but you can customize them on the smaller breakpoints if needed.
To design the text effect:
- Select the text effect element.
- Click the Open Inspector icon
at the top right of the editor.
- Depending on the text effect you chose, customize the available settings under Design:
- Color / Fill colors: Choose the colors that make up the effect. Depending on the specific effect, you can select a single color, multiple colors, or apply a gradient.
- Layering: Adjust the visual layers to create depth in the design. Set the desired number of layers, set their colors, change the angle and spacing between them for a tailored effect.
- Bevel angle: Adjust the angle to control how light and shadows fall, creating a 3D appearance on the edges of the text.
- Stripe: Adjust the size, angle and thickness of the stripes.
- Movement: Enable the toggle to add an animated effect that appears on hover. Set the speed using the slider to make the animation faster or slower.
- Mask: Change the mask position and the level of blur to control how much of the text is revealed or blurred.
- Glow: Make the glow surrounding the text bigger or smaller.
- Border: Set the border color and width to outline the text.
- Shadow: Change the shadow's color, angle, blur and distance.
Note: In some effects, the shadow color automatically matches the fill colors you choose. - Text: Change the font, size, capitalization and more. Learn more about the text formatting options in the section below.
Tip:
You can add an animation to make the text effect even more dynamic. Click the Animations and Effects tab 
in the Inspector panel to add any of the following animations: Entrance, hover, click, scroll, loop or a mouse effect.
in the Inspector panel to add any of the following animations: Entrance, hover, click, scroll, loop or a mouse effect. Formatting the text
Adjust the font, spacing, alignment, and other formatting settings to ensure your design fits seamlessly into your client’s site.
To adjust the text formatting:
- Select the text effect element.
- Click the Open Inspector icon at the top right of the editor.
- Click Text under Design.
- Adjust the available formatting settings:
- Attach this text element to a typography style.
- Change the font and font size.
- Adjust the horizontal and vertical character spacing.
- Make the text bold or italics.
- Align the text.
- Change the capitalization (e.g. make the text all lowercase).
Accessibility tip:
If this text effects element is purely decorative, meaning it does not include important information for screen readers, select the checkbox next to This text is only decorative.
