To add a link to text in Webflow, you highlight the desired words or phrase within a text element and click the hyperlink icon in the text formatting menu. This creates a nested text link.
Adding hyperlinks within your content allows you to connect different pages, external websites, email addresses, or specific sections on your page directly from within your paragraphs or headings. This is a fundamental way to enhance navigation and provide context for your readers.
Step-by-Step Guide to Adding a Text Link
Follow these simple steps to turn any portion of your text into a clickable link:
- Select Your Text Element: Choose the paragraph, heading, or other text-based element on your canvas that contains the words you want to link.
- Highlight the Desired Text: Carefully click and drag your cursor to highlight the specific words, phrase, or sentence you wish to make clickable.
- Access the Formatting Menu: Once text is highlighted, a small text formatting menu will typically appear directly above or below the highlighted text.
- Click the Hyperlink Icon: Within this menu, locate and click the hyperlink icon. This icon usually looks like a chain link.
- Configure Link Settings: A link settings panel will pop up. Here, you can define where your link should lead. Webflow offers several link types:
- URL: Link to an external website.
- Page: Link to another page within your Webflow project.
- Section: Link to a specific section or element ID on the current page.
- Email: Create a mailto: link.
- Phone: Create a tel: link.
- File: Link to a downloadable file.
- Enter Destination and Settings: Input the appropriate URL, select the page/section, or enter the email/phone number. You can also choose options like opening the link in a new tab.
- Confirm: Close the settings panel, and your selected text will now be a clickable link.
Understanding Nested Text Links
As mentioned in the Webflow documentation, when you add a hyperlink to words or sentences within a text element using this method, the text becomes a nested text link.
This simply means that the link is applied specifically to the portion of text you highlighted and resides within the original text element (like a paragraph or heading), rather than being a separate link block element. This allows you to style and manage the link independently from the surrounding text while keeping it inline with your content flow.
This method provides flexibility, allowing you to add multiple distinct links within a single paragraph if needed.
