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

The basics of Racontr code

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

In Racontr, it is possible to inject Javascript and CSS code within projects for customize, add functionality. The code is a discipline that requires certain knowledge, autonomy and a lot of testing!

[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”50px”][vc_column_text css=”.vc_custom_1449231278864{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=””]Add code to your pages is really easy

1. At this point, you can choose between the JS (javascript) and CSS code.

Once done, copy and paste or edit your code in the window that appears and don’ t forget to confirm to save.

And voila! You have integrated your code to your project. It’ll just go in the project overview to see the result !

2. Find the ID of an element Racontr

You will have to find the ID of an Racontr element to be able to customize or integrate it into your code. The ID is a clean and unique to each element of your project. The following example is taken from the Google Chrome browser, the process remains essentially the same on Firefox or Safari.

When you click on an element, you will find his ID below the timeline.[/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5618″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463661416352{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=””]Alternate method :

To open the Inspector element must right click with the mouse on your page in preview mode and select “inspect element”.

1. Click on the magnifying glass
2. Hover your mouse the item you want to have the ID, sometimes it will take time if the item is hidden under other layers. To help you, you can look in the window of the element written comments in green with the name of your layers inspector.
3. Finally, look in the console the number displayed in the “ID” box corresponding to the element.

And voila, you have found the ID of a project item![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”649″ img_size=”full” onclick=”link_image” css=”.vc_custom_1447679007455{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]For users familiar with CSS, you can add your own classes to an element on Racontr.

For it :

1. Click on the item.
2. Open the properties tab,
3. Add a class and validate.

There you go! You just add a class to your media![/vc_column_text][/vc_column_inner][vc_column_inner width=”2/3″][vc_single_image image=”5621″ img_size=”full” onclick=”link_image” css=”.vc_custom_1463661435927{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″ 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]