In Studio.Design, you can set up six different types of links.
Anchor link (in-page link)
Individual links for each list item (using properties)
This article covers the basic steps for setting up links and walks through each of the main link types.
Setting a link on a box
Select the box you want to add a link to.
In the link settings area on the [Settings] tab of the right panel, specify the link destination.
Note: The setup process varies depending on the type of link. For details, see the "Link types" section below.
Check that the link works as expected in Live Preview.
In the Publish panel, update your site. Changes won't appear on your published site until you do this.
Once a link is set, the destination appears in the top-right corner of the box.
Tip: If you want to change the link color of only part of the text, see How to change text color or text background color for part of rich text.
Choosing how the link opens (new tab or same tab)
For the following link types, you can choose how the link opens (in a new tab or the same tab):
Link to an external site
Link to another page within the project
Toggle [Open in new tab] on or off at the bottom of the link settings area.
To apply the change to your published site, use the Publish panel to update your site.
Removing a link
Select the box that has the link.
In the link settings area on the [Settings] tab of the right panel, click [Remove link].
To apply the change to your published site, use the Publish panel to update your site.
Here are the specific steps for each of the six link types.
1. Setting a link to an external site
Set a link to an external website.
Enter the URL directly into the link settings area on the [Settings] tab of the right panel.
2. Setting a link to another page within the project
To link to another page within the project, choose the destination page from the list in the link settings area on the [Settings] tab of the right panel.
You can also link to dynamic pages that display content managed by Studio.Design CMS, such as articles. For detailed steps, see how to set a link to a CMS article detail page.
When the destination page is set to private
Pages set to private appear grayed out, with a private icon shown on the right.
You can still set private pages as link destinations, but the links won't work in Live Preview or on the published site while the page is unpublished. The same applies if you make a previously published page private later.
3. Setting an anchor link (in-page link)
You can set a link that jumps to a specific spot on the page. If you assign an ID to the destination box ahead of time, it will appear as an option when setting up the link.
4. Setting a link to open or close a modal
In projects that include modal pages, any modal pages you've created will appear as options when setting up links on boxes on other pages.
For boxes on a modal page, you'll see a "Close modal" option.
For more details, see How to set up links to modals.
5. Setting a social media share link for a page (URL variable)
Click the "+" in the link settings area to display $url, which inserts the current page's URL into the link. By combining $url with a social media share link, you can add a "Share this article" button.
If you change the page URL later, any link using $url will automatically update to the latest URL, so there's no need to fix them manually.
For details, see How to add a "Share this article" button.
6. Setting individual links for each list item
To set different URLs for each item in a list, use list properties. Note: If you set a link on a list item from the [Settings] tab of the right panel without using properties, the same link will be applied to every item in the list.
For detailed setup steps, see the following articles:
Note: When you select a list property or CMS property as the link destination, the way the link opens (new tab or same tab) will be the same for every item.
link anchor link button modal rink rinku
button text link in-page link hyperlink