{"id":1451,"date":"2019-01-31T09:32:55","date_gmt":"2019-01-31T09:32:55","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=1451"},"modified":"2023-01-18T13:38:41","modified_gmt":"2023-01-18T13:38:41","slug":"how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/","title":{"rendered":"How to Use Image Comparison Widget"},"content":{"rendered":"\n

If you are a designer, photographer, or service provider, the Image Comparison widget of the JetElements plugin will be of extreme use. With the help of this widget, you will be able to visualize the inspiring results of your work. This widget compares two photos, making the results of your work evident.<\/p>\n\n\n\n

1<\/span> Step<\/b> \u2014 Add the Image Comparison widget to the page<\/strong><\/p>\n\n\n\n

First of all, log in to your website. Move to the page where you need to add the Comparison widget. Click the “Edit with Elementor<\/strong>” option at the top panel. In the Elementor editor, search for the Image Comparison<\/strong> widget. Drag and drop it into a new section of your website.<\/p>\n\n\n\n

\"Image<\/div>\n\n\n\n

2<\/span> Step<\/b> \u2014 Add the pictures<\/strong><\/p>\n\n\n\n

Go to the left-side menu and open Content > Items<\/em><\/strong> block. The items you can see here represent the pictures in the carousel. Each item is a Before\/After comparison image. You can add as many items to the carousel as you want by clicking the “Add Item<\/strong>” button or remove all but one. Click on the item to choose the Images <\/strong>and Labels <\/strong>for them.<\/p>\n\n\n\n

\"Image<\/div>\n\n\n\n

3<\/span> Step<\/b> \u2014 Define the settings<\/strong><\/p>\n\n\n\n

Move on to the Settings<\/strong> section of the Content <\/strong>menu tab. Let’s go through the features:<\/p>\n\n\n\n

    \n
  • Divider Starting Position<\/strong>. This slider defines where the divider between images will be placed when the user first sees the comparison picture. You can also set it by typing in the value in percent. The bigger the number – the farther to the left the divider will be;<\/li>\n\n\n\n
  • Prev Arrow Icon<\/strong> and Next Arrow Icon<\/strong> are also connected with the divider. In the drop-down list you can choose the icons that are placed on both sides of the divider;<\/li>\n\n\n\n
  • Slides to Show<\/strong>. Select the number of slides (up to 10) to display on your site at a time in this dropdown;<\/li>\n\n\n\n
  • Pause on Hover<\/strong>. In case you want the autoplay to stop when you put the mouse cursor over a slide enable this option; <\/li>\n\n\n\n
  • Autoplay<\/strong>. Enable it if you want the slides to change automatically. Then, set the speed in the Autoplay Speed<\/strong> field (in ms);<\/li>\n\n\n\n
  • Effect<\/strong>. In this drop-down, you can pick either the Slide<\/strong> or the Fade<\/strong> effect of the images change in the carousel. Set the slides switching time (ms) in the Animation Speed <\/strong>option;<\/li>\n\n\n\n
  • When it comes to the navigation, you can enable the Show Arrows Navigation<\/strong> so as to showcase the tiny arrows on both sides of the slides and style them up by choosing the suitable arrows in the Preview Arrow Icon<\/strong> and Next Arrow Icon<\/strong> options. There is also the opportunity to enable the Show Dots Navigation<\/strong> option with the aim of displaying dots under the slides.<\/li>\n<\/ul>\n\n\n\n
    \"Image<\/div>\n\n\n\n

    Finally, navigate to the Style<\/strong> block in order to make your Image Comparison<\/strong> widget more attractive. You can style up the Labels, the Handle, the Arrows, and the Dots navigation. <\/p>\n\n\n\n

    You have completed this tutorial, and now you can easily work with the Image Comparison<\/strong> widget!<\/p>\n","protected":false},"excerpt":{"rendered":"

    From this tutorial, you will learn how to create an attractive Before\/After image with the help of the Image Comparison widget from the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[514],"yoast_head":"\nJetElements: How to Add Image Comparison in Elementor | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: How to Add Image Comparison in Elementor | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-18T13:38:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/image-comparison-widget-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/\",\"name\":\"JetElements: How to Add Image Comparison in Elementor | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:32:55+00:00\",\"dateModified\":\"2023-01-18T13:38:41+00:00\",\"description\":\"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Image Comparison Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: How to Add Image Comparison in Elementor | Crocoblock","description":"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: How to Add Image Comparison in Elementor | Crocoblock","og_description":"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/","og_site_name":"Help Center","article_modified_time":"2023-01-18T13:38:41+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/image-comparison-widget-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/","name":"JetElements: How to Add Image Comparison in Elementor | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:32:55+00:00","dateModified":"2023-01-18T13:38:41+00:00","description":"Learn how to use a spectacular Image Comparison widget from JetElements plugin and make your webpage eye-catching for visitors.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-add-before-and-after-images-to-the-elementor-built-page-with-jetelements-image-comparison-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Use Image Comparison Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/1451"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=1451"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=1451"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=1451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}