Back to all lessons
Lesson library

Add and nest text links in Webflow

Add, nest, and style text links.

 
This video features an old UI. Updated version coming soon!

Text links are used when a text element will only contain a link, like when you’re creating anchor text.

The Text link element is highlighted in the Typography section of the Add panel.

Adding a text link

To add a text link:

  1. Open Add panel > Elements
  2. Drag a Text link from the Typography section onto the Webflow canvas

To edit the text, double click on the text or select the element and press Enter/Return.

Nested text links

You can add hyperlinks to words or sentences in a paragraph by highlighting the text and clicking on the hyperlink icon in the text formatting menu. Now this text becomes a text link nested inside of the paragraph element.

The hyperlink option is highlighted in the text formatting menu.

Link settings

There are 2 ways to add a link to a text link element:

  • Select the Text link and click on the “cog” icon next to the Text link label
  • Select the Text link and go to the Settings panel (shortcut: D)

Learn more about link settings.

The Link settings section in the Settings panel.

Styling a text link

Link elements come with a default blue text styling and an underline. You can override this default styling by restyling the Text Link element. A good trick is to style the All links tag to make sure all of the links on your website have the same styling.

Pro tip: A button is actually a text link that’s been styled. It has a default blue background color, white text, no underline, and padding inside. Learn more about buttons.

Styling All links

To style the All links tag:

  1. Select any link element (e.g., Text links or Link blocks)
  2. Open Style panel > Selector field and click in the field to open the dropdown
  3. Choose HTML tags > All links
Note: You can access the Selector field by pressing Command + Return (Mac) or Control + Enter (Windows). When the Selector field dropdown is open, you can select a tag by pressing the arrow keys, then pressing Enter/Return to select it.

Here you can make changes to the default way links will show up in your site: this can include buttons, link blocks, or nav links. When you add any new link, or drag in a new text link, it will take style cues from the changes you made to the All links tag.

In the Style Panel, the All links tag is shown in the Selector field.
Try Webflow — it's free