[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= » »]
- 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 ».
- 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= » »]
- Cliquez sur le plugin puis sur « paramètrer l’élément ».
- 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]