Optimize for non-Webflow sites

Edit and style text elements

Updated

Learn how to update copy and apply formatting and links in the visual editor.

A simple copy change can make a big difference — adjusting the tone or wording may be all it takes to resonate with your audience. With the visual editor, you can experiment with your messaging and formatting in just a few clicks. 

Note

Some text elements may not support text styling, but you can try to fix this by selecting a different part of the HTML.

How to edit text

In the visual editor:

  1. Select a text element (e.g., a headline)
  2. Go to Text in the Changes panel
  3. Enter your updated phrasing

How to style text

In the visual editor:

  1. Select a text element (e.g., a headline)
  2. Go to Text in the Changes panel
  3. Highlight the text you want to style
  4. Use the formatting bar to apply paragraph styling (e.g., bold, italic, underline)
  5. Go to Font in the Changes panel to change font styling (e.g., font, size, weight, alignment, case)

How to add a new hyperlink

If the original text element did not have a hyperlink, you can use these steps to add a URL.

In the visual editor:

  1. Select a text element (e.g., a headline)
  2. Go to Text in the Changes panel
  3. Highlight the text that will be the hyperlink
  4. Click the Hyperlink icon in the formatting bar
  5. Enter the new URL — be sure to include https://
  6. Choose if the link should Open in a new tab or not
  7. Click Apply

How to edit an existing hyperlink

If the original page element already has a hyperlink, you can use these steps to modify the URL.

In the visual editor:

  1. Select a text element (e.g., a headline)
  2. Go to Text in the Changes panel
  3. Modify the URL in the Hyperlink URL field

How to convert text to lists

Due to how pages are structured in HTML, it's often not possible to select an existing text element in the visual editor and convert it to a list using the unordered or ordered list icons. Consider the following:

Troubleshoot when styling is grayed out

If options in the formatting bar are grayed out, the wrong part of the HTML hierarchy might be selected. Depending on how your page is coded, the visual editor may select a parent or child element instead of the one you meant to select.

Only certain elements — like <p> — support paragraph styling, and only certain parent elements — like <div> — support converting text into a list. You can often fix this by selecting a different element in the HTML breadcrumb. For example, if a <a> is selected instead of a <p>, choose the <p> from the breadcrumb to apply styling.