> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Adding links to elements (click action)

To provide your visitors with the best experience on the site, you should make the elements clickable — for example, buttons, navigation menu, social icons, phone numbers, etc. — so that they direct your visitors to relevant sections. For that, you should link them accordingly. 

${youtube}[Adding links to elements](8QGIE2rPJA8)

# Adding links to elements

There are lots of different elements available in our gallery. As for now, you have a possibility to set a click action for texts, buttons, images, and icons on your site. 

| ${color}[#1aa900](Tip:) Check the [Actions of a contact form when it is submitted](https://help.weblium.com/en-us/article/actions-of-a-contact-form-when-it-is-submitted-zc2c1o/) article to see where you can redirect site visitors after they submit a contact form.

### Adding links to a text

1. Firstly, to make the text clickable, select it and click on the "chain" icon in the pop-up menu: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-998_173z8xx.png)

2. After that, click on the "gear" near the opened field and access the settings:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-999_1jtiejk.png)

3. In the new window, select the needed click action from the drop-down menu: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1000_zadehg.png)

### Adding links to a button

1. For that, click on the button and navigate to its settings by clicking on the "gear" in the pop-up:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1001_1nk4dg0.png)

2. In the new window, go to the **Action** tab and select the needed click action from the drop-down menu: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1002_1knblk2.png)

|| ${color}[#ffa800](Note:) If there's no link set up for the button, you will see an exclamation mark next to it in the editor:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1003-2_2pncqc.png)

### Adding links to an image

1. For that, click on the image placeholder and access its setting by clicking on the "gear" in the pop-up:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1003_590hzf.png)

2. In the new window, select the needed click action from the drop-down menu: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1004_tnyj1w.png)

|| ${color}[#ffa800](Note:) You can't add links to the background images of your site. 

### Adding links to the icon

1. For that, click on the icon and access its setting by clicking on the "gear" in the pop-up:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1005_gknqpo.png)

2. In the new window, navigate to the **Action** tab and select the needed click action from the drop-down menu: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1006_iuyx5m.png)

| ${color}[#1aa900](Tip:) Check the [Global social links](https://help.weblium.com/en-us/article/global-social-links-19scwze/) article if you want to set up a click action for the social icons. 

# Possible click actions

After you open the item settings, go ahead and choose the suitable click action from the drop-down menu. Learn the possible options and their functionality below. 

### Scroll to block

1. This feature redirects users to a block on the same page of your site. To set it up, choose the **Scroll to block** option in the dropdown and select the needed block by its anchor name: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1007_fl8xjz.png)

2. You can also select the block visually on the site by clicking on the "target" icon: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1007-1_1pji5pw.png)

| ${color}[#1aa900](Tip:) Check the [Changing the design of a block](/en-us/article/changing-the-design-of-a-block-1uf6xwc/) article to set up unique block anchor names for easier differentiation.

### Open page

1. This feature allows you to redirect visitors to another page of your site once they click on the element. To set it up, choose **Open page** in the dropdown and select the needed page:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1010_7g9krv.png)

| ${color}[#1aa900](Tip:) If necessary, you can create a new page directly from the drop-down menu for this action. 

2. You can also toggle on the option of opening the page in a new browser tab:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1009-1_18qe90z.png)

### Jump to block on another page

1. This option links an element to a particular block on another page of your site. To set it up, choose **Jump to block on another page**, then select the page and specify the name of the block:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1011_uu31fh.png)

### Open Pop-up

1. This action allows you to open a pop-up window on your site when the visitors click on a particular element. To set it up, choose the **Open Pop-up** option in the **Click action** field and select the needed window: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1033-1_8z7iu8.png)

||| ${color}[#f97700](Important:) This option is available for Pro sites only. Also, there's no way to link text elements to pop-ups yet.

### Close Pop-up 

1. This option closes the opened pop-up after clicking on the particular element — it is commonly used for buttons. To set it up, choose the **Close Pop-up** action in the elements settings: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1034-3_8i7bca.png)

### Web address

1. This action redirects your visitors to an external resource. To set it up, choose **Web address** in the menu and paste the link with the *https:/* extension: 

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1012_tvijyf.png)

||| ${color}[#f97700](Important:) This option is available for Pro sites only. 

2. You can also toggle on the option of opening the link in a new browser tab, or set the "nofollow" tag for it:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1014_kok2tf.png)

| ${color}[#1aa900](Tip:) Check the ["Nofollow" for links](https://help.weblium.com/en-us/article/nofollow-for-links-173iyfa/) article to find more information about setting up the "nofollow" tag. 

### Phone

1. This feature allows you to add a link to a phone number. This is particularly useful for viewing the site on mobiles as it will allow your site visitors to initiate a call with you with just a click. To set it up, choose the **Phone** option from the menu and add the number (including the country code):

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1013_zw3gx1.png)

### Email

1. This option allows your site visitors to send you an email right from your site (provided that they have a mail service installed). To set it up, select the **Email** action, paste your email address and specify the subject that will be displayed in the email (this field is optional):

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1015_k0iau.png)

### File download 

1. This option provides your users with an opportunity to download a file straight from your site. To set it up, choose the **File download** and click **Select the file**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1016_10yap5g.png)

2. In the opened window, select the file or upload a new one:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1017_12lqpt7.png)

|| ${color}[#ffa800](Note:) Check the [File download](https://help.weblium.com/en-us/article/file-download-9y2sy9/) article to learn more about linking files to elements.

### Scale image 

1. This option is a specific click action for images on your site. When a visitor clicks on the image, its enlarged version will be opened in a pop-up window. To set it up, select the **Scale image** in the drop-down menu in the **Media settings**:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/template-1018_pavm9n.png)

||| ${color}[#f97700](Important:) You can't link an image to Email, Phone or File download.

Don't forget to [publish your site](https://help.weblium.com/en-us/article/publishing-a-site-tgxmch/) for the changes to appear live.