Skip to main content

How to set up links

Learn how to set up links in Studio.Design, including in-page links, links to external sites, and settings for opening and closing modals.

This article covers the basic steps for setting up a link, along with the main link types.


Adding a link to a box

  1. Select the box you want to add a link to.

  2. In the right panel, open the [Settings] tab and specify the link destination in the link section.

    Note: Setup varies depending on the type of link. See "Link types" below for details.

  3. Use Live Preview to check that the link works as expected.

  4. Update your site from the publish panel. Your changes won't appear on the live site until you do this.

When a box has a link, the destination appears in the upper-right corner of the box.

Tip: To change the link color for only part of a text block, see How to change text color and text background color for part of a rich text block.

Choosing how the link opens (new tab or same tab)

You can choose whether a link opens in a new tab or the same tab.

This option is only available for the following link types:

  • Links to external sites

  • Links to another page in your project

Turn the [Open in new tab] toggle on or off at the bottom of the link settings.

To apply your changes to the live site, update your site from the publish panel.

Removing a link

  1. Select the box that has the link.

  2. In the right panel, open the [Settings] tab and click [Delete link] in the link section.

  3. To apply your changes to the live site, update your site from the publish panel.


Next, here are the specific steps for each of the six link types.

1. Linking to an external site

You can link to an external website.

Enter the URL directly in the link section of the [Settings] tab in the right panel.

Note: Linking to external sites from a list

To link each item in a list to an external site, register the destination URL as a property, then connect it to the box.

For a static list (standard list), register it as a URL property in List Properties. For a dynamic CMS list, register it as a text property in CMS Properties.

For details, see the following help articles:

How the link opens is the same for all items in the list.

2. Linking to another page in your project

To link to another page in your project, open the [Settings] tab in the right panel and choose the destination page from the list in the link section.

If the destination page is set to private

Pages set to private appear grayed out with a private icon on the right.

You can still set a private page as a link destination, but the link won't work in Live Preview or on your published site while the page isn't public. The same applies if you later switch a public page to private.

3. Linking to a dynamic page in your project

Just like with other page links, click the [Settings] tab > [Link] field in the right panel and choose the destination page from the list.

For dynamic pages, two pages with the same name appear as options. The one you should choose depends on the box you're linking from, so take a moment to pick the right one.

When linking from a dynamic list

To link each item in a dynamic list, choose the dynamic page whose link does not end in :slug.

When linking from a static box

When linking a static box to a dynamic page connected to a CMS, you need to choose which of the CMS items connected to that dynamic page the link should point to.

Here's how:

  1. Click the [Settings] tab > [Link] field in the right panel.

  2. Type the name of the dynamic page in the [Link] field to search for it.

  3. Two dynamic pages will appear. Choose the one whose link ends in :slug.

  4. From the [CMS item] list, choose the connected content you want to link to.

4. Setting up an anchor link (link within a page)

You can create a link that jumps to a specific spot on a page. If you set an ID on the destination box, it'll appear as an option when you set up the link.

5. Setting up links to open and close a modal

If your project includes modal pages, those modal pages appear as options when you set a link on a box on any other page.

For boxes on a modal page, you'll also see a "Close modal" option.

For details, see How to link to a modal.

6. Setting up a social sharing link for a page (URL variable)

Click the "+" in the link field to display $url, which inserts the current page's URL into the link. Combine $url with a social media share link to create a "Share this article" button.

And if you change the page's URL later, any link using $url updates automatically — no manual edits needed.

link anchor link button modal rink rinku

button text link in-page link hyperlink

Did this answer your question?