[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_1448383480412{margin-bottom: -10px !important;} »]
Utiliser un calque d’action
[/vc_column_text][vc_column_text letter_spacing= » » css= ».vc_custom_1474969924583{margin-right: 5% !important;} »]
Les calques d’action sont des éléments transparents vous permettant de mettre des actions sur n’importe quel élément.
[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474969954139{margin-left: 5% !important;} »]
Voici les différentes possibilités de Racontr que nous allons aborder :
[/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= » »]
Première étape : Créer un calque d’action sur la scène
[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]
- Pour importer un calque d’action sur la scène, cliquez sur le symbole « + » dans la barre d’outils à gauche de l?interface.
Les calques d’action apparaissent sous forme de rectangle bleu en opacité dans l’éditeur mais seront invisibles lors de la publication.
- La principale fonction des calques d’action est de permettre de placer des actions sur un ensemble de calque sans avoir à ajouter des actions sur tous les calques. En effet, les actions d’un élément placé en haut de la pile des calques prennent le dessus sur toutes celles placées sur les calques qui se trouvent en-dessous de lui.
Tips:
Dans l’aperçu, vous pouvez décider de les afficher ou de les masquer. Pour cela aller sur le watermark qui se trouve en bas à gauche de votre page d’aperçu.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5638″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463665317909{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_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Les calques d’action vous permettent aussi d’ajouter de l’interactivité sur une zone précise d?une photo par exemple. Ici trois photos se superposent : une première où les deux personnages sont net, par-dessus une seconde où le personnage de gauche est flou et une troisième où c’est le personnage de droite qui est flou. Les deux images avec les personnages floutés ont été mises à 0% d’opacité. Puisque qu’il y a toujours une image qui en recouvre une autre (et donc qui empêche la lecture des actions de celles d’en dessous ), nous ne pouvons pas placer les actions directement sur celles-ci. Nous avons donc utilisé des calques d’action placer sur chaque personnage pour faire passer l’image correspondante de 0% à 100%.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_column_text]
[/vc_column_text][/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= » »]
Propriétés des calques d’action
[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]
- Accédez aux propriétés du calque d?action en cliquant sur le bouton en forme d?engrenage.
Vous pouvez le dupliquer, cela conserva ses propriétés et actions.
Vous pouvez lui appliquer une rotation, dans le sens des aiguilles d’une montre de 0° à 360° et dans le sens inverse de 0° à -360°. - Vous pouvez lui définir un lien, cette section est couverte ici.
[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5635″ img_size= »full » onclick= »link_image » css= ».vc_custom_1463665342445{margin-right: 5% !important;} »][vc_column_text][/vc_column_text][/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]
[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]
[/vc_column_text][/vc_column][/vc_row]