WEB STRUCTURE

WEB STRUCTURE

New

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

Structure Elements

Structure Elements

New

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Lightbox

Lightbox

New

3:44

Forms

Forms

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Dropdown

Dropdown

New

4:38

Pre-built Components

Pre-built Components

New

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Map

Map

New

2:58

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Webflow's text link element lets you quickly and easily add text-only links to your site, such as those in your site's main nav or footer. This video will show you how to: 

  1. Add a text link, whether as a block or inline element‍
  2. ‍Manage link settings
  3. ‍Styling text links, either as one-offs with unique classes, or en masse by styling all links

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

Text Links are standalone links. And they're used when the only thing you need that text element for is a link.

For example, let's say we want to add a new line under this paragraph. If we do a paragraph element — if we drop in a paragraph, now we have a paragraph with a link inside — and this might not be what you want search engines or screen readers to see.

Delete this one, and let's try a Text link.

Drag that in, and it's still a link with some text inside. Change the text? It's still a link.

You know what else is just a link with text inside? If you guessed Video, you're wrong. If you guessed Button, you're absolutely right. It's just a link with text inside. And by default, it's been styled. A button is just a text link that's been styled. It has a background color and padding inside, which of course we can modify.

And that pesky blue text with the underline? Of course we can override that by applying a specific class to an element, but what if we want to change styling on all links?

With any link in our project selected, we can go on over to All Links and make style changes there. Here we can make changes to the default way links show up in our project: this can include buttons, link blocks, nav links. And when you add a link, or drag in a new text link, it’ll take style cues from the changes we made to All Links.

Text links: great for any time you need a text element that’s a link.