Register Now: Use Visual Dev + AI to Ship 10x Faster on July 24

Announcing Visual Copilot - Figma to production in half the time logo
Contact Sales
Contact Sales










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



Get StartedLogin

This article shows you how to create and edit links in the Builder Visual Editor.

To create a basic link with copy in a Text block:

  1. Double-click the Text block that contains the text you'd like to turn into a link.
  2. In the edit dialogue that opens, select the text you want to turn into a link.
  3. Click the Link icon.
  4. Enter the destination web address for the link and click Save.

The following video demonstrates this process:

To open a link in a new tab, you have a couple of options:

  • Make a whole text block clickable.
  • Edit the link's attributes in the Style tab.

These steps configure the entire text block to act as a link with the option to open the link in a new browser tab.

If you need more than one link that opens in a new tab, such as in a series of links, use a separate text block for each link. Configure each block according to the instructions in this section.

  1. Double-click the text block that contains the link you'd like to configure.
  2. In the Link URL field, enter the destination URL.
  3. To cause the link to open in a new tab, check the Open link in a new tab checkbox that shows.
Screenshot of the Link URL field with the desired link and Open link in new tab checkbox checked.

As an alternative to specifying a link and checking Open link in a new tab in the Edit dialogue, you can configure the same functionality in the Style tab:

  1. Select the text block that contains the link you'd like to configure.
  2. On the Style tab, expand the HTML Attributes section.
  3. In the Tag name field, type a to refer to the HTML anchor element, which is the element that browsers use to recognize links.
  4. Click +New.
  5. In the Property name field, choose href and for its value and add your link.
  6. To make the link open in a new tab, add another property called target and set its value to _blank.

Tip: For more granular control, your developer can access the HTML of a text block by clicking on the code icon, which is to the left of the Link icon in the text block's Edit dialogue.

To configure a button to open a link in a new tab:

  1. Double-click the button you'd like to configure.
  2. Add your destination web address to the Link field and enable Open link in a new tab by setting the toggle to on.

If you need links that take users to a different part of the same page, you can use hash links in Builder. Hash links are useful for patterns such as:

  • A table of contents
  • FAQ pages
  • Quickly scrolling a user to the top of a page or to a specific section
  • Linking to a specific part of a page from any other page

To link to content within the same page with an anchor link:

  1. Open the Edit dialogue for the text block that contains the copy you'd like to link from.
  2. Select the text and press the Cmd/Ctrl + k to open an input where you can paste the destination link. To link to another place in the same page, just use a hash, such as #sale.
  3. Now go to the destination block; for example a heading.
  4. Click to select the destination block.
  5. On the Style tab, scroll to the bottom and open the HTML Attributes section.
  6. Click + New, for property name select id, and give it the same value as the hash you used in step 2; for example sale. Be sure to omit the #.

In web development, an attribute such as the example here, #sale, is called an id. You can create as many ids as you like. However, make sure you only use the name for an id one time on a page as all id names must be unique per page.

If you create many links within a page and your browser scrolls to unexpected locations, check any other blocks for a duplicate id.

For a code-focused approach, visit the Navigation Links Blueprint, which integrates a Builder data model with your code.

Was this article helpful?


Visual CMS

Theme Studio for Shopify

Sign up


Featured Integrations





Get In Touch

Chat With Us




© 2020, Inc.


Privacy Policy

Terms of Service


Get the latest from

By submitting, you agree to our Privacy Policy