add an image comparer

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

Add an image comparer

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

On Racontr, it is possible to juxtapose two images using the plugin “image comparer”.

You can overlap two images with a slider that creates a beautiful effect to show the before and after of a photograph.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text letter_spacing=”” css=”.vc_custom_1464004373606{margin-left: 5% !important;}”]

Here are the different options proposed by Racontr that we will approach:

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

First step: Insert an image comparer

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

  1. To insert an image comparer, click on the “+” icon in the left menu of the page editor. A list of available media appears, click on “Add image comparer”.
  2. The plugin appears. Now, you just have to parameter it.

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

Image comparer parameters

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

  1. Click on the element then on “element parameters”.
  2. You can add your two images and choose the slider color, the icon width then validate.

[/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=””]When you click the icon, you can then compare your two 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]

More
tutorials:

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

Log in with your credentials

or    

Forgot your details?