[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_1448973536060{margin-bottom: -10px !important;} »]

Les bases du code sur Racontr

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

Dans Racontr, il est possible d’injecter du code Javascript et CSS à l’intérieur de ses projets pour les customiser, y ajouter des fonctionnalités. Le code est une discipline qui requiert certaines connaissances, une autonomie et beaucoup de tests !

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »50px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474979751103{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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Pour ajouter du code à vos pages, rien de plus simple :

1. A cet endroit, vous pouvez choisir entre du code JS (javascript) et du CSS.

Une fois chose faite, copiez collez ou éditer votre code dans la fenêtre qui apparaît et n’oubliez pas de valider pour enregistrer.

Et voila ! Vous avez intégré votre bout de code à votre projet. Il ne vous reste plus qu’à aller dans l’aperçu du projet pour voir le résultat !

2. Trouvez l’ID d’un élément Racontr

Vous aurez à trouver l’ID d’un élément Racontr pour être en mesure de personnaliser ou de l’intégrer dans votre code. L’ID est propre et unique à chaque élément de votre projet. Le second exemple est tiré du navigateur Google Chrome, le processus demeure essentiellement la même sur Firefox ou Safari.

Lorsque vous cliquez sur un élément, vous trouverez son ID en dessous de la timeline.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5617″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463661165636{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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Méthode alternative :

Pour ouvrir l’inspecteur d’élément, il faut faire clic droit avec la souris dans votre page en mode preview, puis choisir « inspecter l’élément.

1. Cliquez sur la petite loupe
2. Survolez à l’aide de la souris l’élément dont vous désirez avoir l’ID.
   Survolez à l’aide de la souris l’élément dont vous désirez avoir l’ID
3. Enfin, observez dans la console le numéro affiché dans la case « ID » correspondant à l’élément.

Et voil?, vous avez trouv? l?ID d?un ?l?ment de projet ![/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 letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Pour les utilisateurs familiarisés avec la CSS, vous pouvez ajouter vos propres classes à un élément sur Racontr.

Pour cela :

1. Cliquez sur l’élément
2. Ouvrez l’onglet de ses propriétés,
3. Ajoutez une classe puis validez.

Et voil? ! Vous venez d’ajouter une classe à votre média ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5620″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463661189837{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]

Plus de
tutoriels :

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

• Importer une vidéo
• Importer un son
• Importer une image
• Créer un calque d’action

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

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

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