Studio Editor: Adding and Customizing Text
The Studio Editor makes it easy to add text that looks great on every screen. There are various types of text elements you can use for your content, all fully customizable and already responsive.
Adding text
Add new text elements from the Add Elements panel, on the left side of the Studio Editor. There are several different types of elements you can add, depending on the content you want to show.
To add text:
Click Add Elements
on the left side of the editor.
Click Text.
Drag a text element on to your page:
Text Styles: These are titles and paragraphs that match your site's theme, as defined in the Site Styles panel
.
Collapsible Text: These elements are great for long text – some of the text is hidden, so it's easier to read. You can choose whether visitors either click a link to view the full text, or a button to expand it on the current page.
Text Marquee: Enhance user engagement effortlessly with this scrolling text element. It instantly grabs attention, showcases content dynamically, and requires no coding.
Text Mask: These elements are perfect for short pieces of text that should stand out. The background (fill) of your text is either an image, a video or a gradient, so it's much more noticeable and attention-grabbing.
Text Effects: These pre-designed effects can help you draw attention to titles and statements. Customize the effect to be as bold or subtle as the design calls for.
Text on Path: Shape text along custom paths like curves, circles, or any SVG shape you want to upload. This element opens up endless creative possibilities for dynamic typography.
Click Edit Text and type your text.
Spell check:
The Studio Editor uses your browser's spell check whenever you add text to a site. You don't need to enable it, simply start typing inside a text element to see it in action. If you can't see spell check working, make sure it is enabled in your browser.
Designing and formatting text
Formatting helps to organize your text for clearer communication. Align, bullet or number your text to keep it neat. Make the text bold, italicized, underlined or highlighted so it stands out. You can format and style your text differently per breakpoint so it looks ideal for every screen.
To format your text:
Select the relevant text element in the editor.
Tip: Hold the Shift key on your keyboard to format multiple text elements at once.
Click the Open Inspector icon
at the top right of the editor.
(In the Inspector) Format your text using the available tools:
Style
These are the typography styles (themes) you set in the Site Styles panel. Using this drop-down, you can apply a theme to an existing text element.
Font
Select a font from hundreds of options, and choose the size. You can also change the weight of some fonts (Thin, Regular, Bold, etc.).
Need more options? Upload your own fonts and add language fonts to suit your client's design and content needs.
Note:
Wix has licenses for the fonts in the Studio Editor. They are available for digital use ONLY and within your Wix site. For more information, view the Wix Terms of Use. You cannot download the fonts to use, but you may find the open source versions and install them to your computer. Be careful with fonts found in external URLs. These are not owned by Wix so you need to contact the author for permission to use them.
Responsive behavior and font size
You can choose a Responsive behavior (under Size in the Inspector) to control how the text is resized in different breakpoints:
Scale proportionally: The text automatically resizes to look in proportion to each visitor's screen.
Max-min: You can set minimum and maximum limits to ensure the text does not get too small or too big for your design.
Custom scale: The text automatically resizes.
Set the maximum (From) and minimum (To) font size for each breakpoint.
Fixed: The text always stays the same size.
Wrap: The font size stays the same on all breakpoints, but the text wraps to fit its bounding box on smaller screens. This adds more rows to show the text.
Hug: This leaves no gaps between the text and its bounding box. It also means that the amount of rows in your text always stays the same, regardless of screen size.
Under Font size, you can see the text size for the current canvas. Click the other breakpoints in the editor to see how it changes.
Spacing, color, and styles
Color: Change the text color.
Blend mode: Choose a blend mode for the text.
Styles: Click the icons to make the text bold, italicized, underlined. You can also add a strikethrough, highlight, or outline around the text.
Spacing: Change the spacing between the lines and characters in the text box. You can set a specific amount, or use automatic spacing.
Tip:
You can pick any color from your design on the canvas and save it to your custom colors. In the Color Picker, click + Add next to My Colors to access the eye dropper.
Alignment and formatting
Alignment: Align your text to the left, center or right, or justify it across the text box.
Formatting: Click the relevant icons to turn the text into a list, indent it or change its direction (e.g. left-to-right).
Capitalization, orientation, and shadow
Capitalization: Click the icons to set the text's capitalization; As typed
, Upper case
, Title case
, or Lower case
.
Orientation: Click the icons to display the text horizontally
or vertically
.
Shadow: Create a 3d effect by adding shadow to text. It's completely customizable, so you can adjust it how you'd like.
HTML tag
Make sure every text element has the right heading tag (e.g. H1, div, P) so search engines and screen readers read the page in the correct order.
Hyperlink the text:
Select a text element and click the Link icon
. You can redirect visitors to other parts of the site, an external web address, a phone number or an email. It can even open a popup, which you can tailor to any purpose.
Changing the bullet or numbering color
Make your lists more interesting by choosing one color for the text, and a different one for the bullet points or numbering.
To change the color of your bullet points or numbers:
Select the relevant text element in the editor.
Click Edit Text.
Choose a color for your bullets or numbers:
Highlight the entire text inside the text box (including any bullets or numbers).
Select the color you want.
Note: At this point, the entire text changes to the selected color.
Choose a different color for the text:
Highlight the relevant text (without its bullet / number).
Select the color you want.
Note: The text changes to the new color, but the bullet or number stays the color you chose in step 3.