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:
- Double-click the Text block that contains the text you'd like to turn into a link.
- In the edit dialogue that opens, select the text you want to turn into a link.
- Click the Link icon.
- Enter the destination web address for the link and click Save.
The following video shows adding a link in some body copy:
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.
- Double-click the text block that contains the link you'd like to configure.
- In the Link URL field, enter the destination URL.
- To cause the link to open in a new tab, check the Open link in a new tab checkbox that shows.
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:
- Select the text block that contains the link you'd like to configure.
- On the Style tab, expand the HTML Attributes section.
- In the Tag name field, type
ato refer to the HTML anchor element, which is the element that browsers use to recognize links. - Click +New.
- In the Property name field, choose href and for its value and add your link.
- 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:
- Double-click the button you'd like to configure.
- 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:
- Open the Edit dialogue for the text block that contains the copy you'd like to link from.
- Select the text and press the
Cmd/Ctrl + kto 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. - Now go to the destination block; for example a heading.
- Click to select the destination block.
- On the Style tab, scroll to the bottom and open the HTML Attributes section.
- Click + New, for property name select
id, and give it the same value as the hash you used in step 2; for examplesale. 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.