ajouter un comparateur d’image

[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 letter_spacing= » » css= ».vc_custom_1464004933621{margin-bottom: -10px !important;} »]

Ajouter un comparateur d’image

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

Sur Racontr, il est possible de juxtaposer deux images en utilisant le plugin « image comparateur ».

Vous pouvez superposer deux images avec un curseur et créer un bel effet en montrant par exemple, l’avant et l’après d’une photographie.[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1474983703420{margin-left: 5% !important;} »]

Voici les différents 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 letter_spacing= » »]

Première étape : ajouter un comparateur d’image

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

  1. Pour insérer un comparateur d’image, cliquez sur l’icône « + » dans le menu de gauche de l’éditeur de page. Une liste des éléments apparaît, cliquez sur « ajouter un comparateur d’image ».
  2. Le plugin 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= »5814″ img_size= »full » onclick= »link_image » css= ».vc_custom_1464004489889{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= » »]

Paramètrer le plugin « image comparateur »

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

  1. Cliquez sur le plugin puis sur « paramètrer l’élément ».
  2. Vous pouvez ajouter vos deux images et choisir la couleur du slider, la taille de l’icône, puis validez.

[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5808″ img_size= »full » onclick= »link_image » css= ».vc_custom_1464004509094{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= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Lorsque vous cliquerez sur l’icône, vous pourrez alors comparer vos deux images ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »5811″ img_size= »full » onclick= »link_image » css= ».vc_custom_1464004536719{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 letter_spacing= » »]

Plus de
tutoriels :

[/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_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]

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

Saving

Vous connecter avec vos identifiants

ou    

Vous avez oublié vos informations ?