Ajouter un MorphSVG

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

Ajouter et paramétrer le plugin MorphSVG

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

Le plugin « MorphSVG » vous permet de créer une animation de fusion entre deux images de format .SVG.

[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text css= ».vc_custom_1475763438341{margin-left: 5% !important;} »]

Voici les différentes options que nous allons aborder dans ce tutoriel :

[/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]

Première étape : ajouter un MorphSVG sur une page

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

  1. Pour ajouter un bouton, cliquez sur l’icône « + » dans le menu de gauche d’une page de votre éditeur. Une liste des médias disponibles apparaît, cliquez sur « ajouter un MorphSVG ».
  2. Le MorphSVG apparaît, vous pouvez désormais le paramétrer.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »22898″ img_size= »full » onclick= »link_image » css= ».vc_custom_1475763673510{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]

Paramétrer un MorphSVG

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

  1. Dans un premier temps, ajoutez deux images de formats .SVG pour créer votre animation. L’image de gauche se transformera progressivement en l’image de droite !
  2. Vous pouvez définir une durée d’animation, les effets, déclencher une action sur un autre élément de la page au clic et répéter l’action dans le sens inverse.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »22901″ img_size= »full » onclick= »link_image » css= ».vc_custom_1475763687015{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]

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]

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

Saving

Vous connecter avec vos identifiants

ou    

Vous avez oublié vos informations ?