Creating and Editing Links
This article shows you how to create and edit links in the following ways:
Creating a link
In the Builder Visual Editor, select the text block that contains the copy you want to turn into a link and select the Edit button.
Select the text youʻd like to turn into a link.
Select the Link icon.
Enter the destination web address for the link and click Save.
Opening a link in a new tab
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.
Making a whole text block clickable
These steps configure the entire text block to act as a link, which means you can have one link in the text block that opens in a new tab.
👉 Tip: With this technique, the entire text block acts as a link, which means you can have one link in the text block that opens in a new 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 steps in this section.
Select the text block that contains the link you'd like to configure. Click on the Options tab.
In the Link URL field, enter the destination URL. Entering the URL causes a checkbox to appear that says, "Open link in a new tab".
Check the Open link in a new tab checkbox to open the link in a new tab or leave the checkbox unchecked for the link to open in the same tab.
Configuring a text block's link in the Style tab
Select the text block that contains the link you'd like to configure. Click on the Style tab and scroll to the bottom.
Expand the Element Attributes section.
In the Tag name field, type a to 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, add your link. This only configures the link to go to the destination URL, which you might already have if this link has been previously configured. 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.
Select the button you'd like to configure and click on the Options tab.
Add your destination web address to the Link field and enable Open link in a new tab by setting the toggle to on.
Linking to content within the same page
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 a name for an id one time on a page. If you create many links within a page and your browser scrolls to unexpected locations, check any other blocks for duplicate ids.
Questions or comments?
Give us a chat, we are quick to respond and here to help!
CHAT US NOW
Looking to hire a 3rd party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.