7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io
Contact salesGo to app

7/24 | Livestream: Training AI on your design system

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Create and edit links in the Builder Visual Editor. Link text within blocks, make entire blocks clickable, configure links to open in new tabs, create same-page hash links, and use advanced HTML attributes for custom link behavior.

The Visual Editor supports two text editing approaches. Use Inline text editing to edit directly within Text blocks by double-clicking on the text. Alternatively, use the Options tab for a rich text editing interface.

To add links to text in the Visual Editor:

  1. Double-click the Text block to enter inline editing mode.
  2. Optional: Go to the Options tab to open the text editor instead.
  3. Select the text to make a link.
  4. Click the Link icon in the formatting toolbar.

Toggle on Inline text editing in the Options tab to double-click and edit text directly in the Text block.

The next video shows accessing the Link icon using both the Options tab and Inline text editing methods:

Use the Link icon to create links for selected text within blocks. To add a link to specific text:

  1. Access the text editor using either method described above.
  2. Select the text to turn into a link.
  3. Click the Link icon in the formatting toolbar.
  4. Enter the destination URL and click Save.

The following video demonstrates selecting text and creating a link:

To configure any link to open in a new browser tab:

  1. Select the block containing the link.
  2. Enter the destination URL in the Link URL field. For Button blocks, go to the Options tab and use the Link field instead.
  3. Check the Open link in a new tab checkbox.

The following video demonstrates configuring a block link to open in a new tab:

Any block in Builder can be turned into a clickable link that navigates to external pages. For a complete list of available block types, see Block Types.

To link entire blocks:

  1. Select the block to configure as a link.
  2. Click the Options tab and locate the Link URL field.
  3. Enter the full URL, such as https://www.builder.io.
  4. To open in a new tab, see instructions mentioned in Open the link in a new tab section.

The video below demonstrates setting up a text block to link to an external destination:

Create hash links to navigate users to different sections within the same page. This works for any block type and is helpful for:

  • Tables of contents
  • FAQ sections
  • Back-to-top links
  • Content cross references

To create hash links for same-page navigation:

  1. Select any block that will contain the link.
  2. In the Link URL field, enter a hash followed by a unique identifier, such as #discover.
  3. Navigate to the target destination block.
  4. Select the destination block.
  5. Click the Style tab and expand HTML Attributes.
  6. Click + New and select id as the property name.
  7. Enter the same identifier without the # such as discover.

Each id attribute must be unique on the page. If links scroll to unexpected locations, check for duplicate id values across blocks.

The following video demonstrates creating hash links for same-page navigation:

For advanced control over link behavior, configure links using HTML attributes in the Style tab:

  1. Select the block containing the link.
  2. Click the Style tab and expand the HTML Attributes section.
  3. In the Tag name field, enter a to create an HTML anchor element.
  4. Click + New.
  5. Set Property name to href and enter the destination URL as the value.
  6. To open in a new tab, click + New again, set Property name to target and value to _blank.

The following video demonstrates configuring links using HTML attributes:

Explore these additional resources:

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

© 2025 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024