Made in Builder.io

Visual Copilot Livestream | Dec 6 @10am PST

Introducing Visual Copilot: Figma to code with AI

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

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.


Looking to hire a third 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.

Connect with us

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

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Solutions

Ecommerce

Marketing Sites

Landing Pages

Mobile Apps

Multi-brand

Headless CMS

Product

Visual Copilot

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

Product

Features

Pricing

Product

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Developers

Builder for Developers

Documentation

Dev Tools

Try Builder Playground

Open Source

Builder

Mitosis

Qwik

Partytown

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Solutions

Ecommerce

Landing Pages

Multi-brand

Headless CMS

Popular Guides

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Frameworks

React

Next.js

Qwik

Gatsby

Angular

Vue

Nuxt

Hydrogen

All Integrations

CMS

React

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners


Templates

Success Stories

Showcase

Use Cases

Company

About

Careers

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms