Add and nest text links in Webflow

Add, nest, and style text links.

elements
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?