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:
- Double-click the Text block to enter inline editing mode.
- Optional: Go to the Options tab to open the text editor instead.
- Select the text to make a link.
- 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:
- Access the text editor using either method described above.
- Select the text to turn into a link.
- Click the Link icon in the formatting toolbar.
- 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:
- Select the block containing the link.
- Enter the destination URL in the Link URL field. For Button blocks, go to the Options tab and use the Link field instead.
- 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:
- Select the block to configure as a link.
- Click the Options tab and locate the Link URL field.
- Enter the full URL, such as
https://www.builder.io. - 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:
- Select any block that will contain the link.
- In the Link URL field, enter a hash followed by a unique identifier, such as
#discover. - Navigate to the target destination block.
- Select the destination block.
- Click the Style tab and expand HTML Attributes.
- Click + New and select
idas the property name. - Enter the same identifier without the
#such asdiscover.
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:
- Select the block containing the link.
- Click the Style tab and expand the HTML Attributes section.
- In the Tag name field, enter
ato create an HTML anchor element. - Click + New.
- Set Property name to
hrefand enter the destination URL as the value. - To open in a new tab, click + New again, set Property name to
targetand value to_blank.
The following video demonstrates configuring links using HTML attributes:
Explore these additional resources:
- Integrate data models with code using the Navigation Links Blueprint.
- Configure block properties and content through the Options tab.
- Style elements and HTML attributes via the Style tab.