[vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/2″][vc_empty_space height=”30px”][vc_column_text css=”.vc_custom_1446646741265{margin-bottom: -10px !important;}”]

Creating links

[/vc_column_text][vc_column_text letter_spacing=”” css=”.vc_custom_1474972350841{margin-right: 5% !important;}”]

With Racontr you can create links between your project’s pages but also to other websites.

Let’s explore the different ways to do that.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1446650242359{margin-left: 5% !important;}”]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top=””][vc_column width=”5/6″][vc_single_image image=”123″ img_size=”full” alignment=”center”][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]First, we need to use an action layer. These action layers enable you to create interactive areas on your page. They appear colored in blue in the editor but obviously they’ll be transparent once your project is published.

1. Let’s start by creating that action layer.
2. Then adjust its size and positioning, place it over a button for instance.

Tips: Make sure to rename your action layer so you don’t confuse it with others![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5898″ img_size=”full” onclick=”link_image” css=”.vc_custom_1464019708191{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text letter_spacing=””]Once that is done, go back to the scenario section. You will notice that the action layer appeared under your page.

1. Click on your hotlink
2. then drag-and-drop it on the page your want to link it to.

There, your link is created. It appears in the same color than the linked page so you can easily check that you didn’t make any mistakes.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5889″ img_size=”full” onclick=”link_image” css=”.vc_custom_1464019727245{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height=”50px”][vc_separator color=”custom” accent_color=”#e8e8e8″][vc_empty_space height=”30px”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text letter_spacing=””]First you need to choose your button, you can use the button plugin or import an image of your designed button. Now let’s create a link from it.

1. Start by selecting your button on the page.
2. Once this is done, open the Link menu to display your different options.
3. You can create an internal link (to another page of the project) or an external one (to any URL you want).

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5892″ img_size=”full” onclick=”link_image” css=”.vc_custom_1464019743651{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]

1. Create a text block (see Add and manage text blocks for more details).
2. Select the words you want to make clickable then click on the hyperlink icon.
3. A box pops up, select the link mode (URL) then enter your URL.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5895″ img_size=”full” onclick=”link_image” css=”.vc_custom_1464019760077{margin-right: 5% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”sidebar-1″][/vc_column][/vc_row][vc_row padding_top=”0″ padding_bottom=”0″][vc_column][vc_empty_space][vc_single_image image=”132″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row type=”color” bg_color=”#e8e8e8″ vertical_align=”yes” column_gap=”no” padding_top=”” margin_top=”0″ margin_bottom=”0″ min_height=”220″][vc_column width=”1/3″][vc_empty_space][vc_column_text]

More
tutorials:

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_empty_space height=”65px”][vc_column_text]

[/vc_column_text][/vc_column][/vc_row]