{"id":12406,"date":"2024-12-10T07:21:50","date_gmt":"2024-12-10T07:21:50","guid":{"rendered":"https:\/\/docs.zozothemes.com\/cea\/floating-image-copy\/"},"modified":"2025-04-17T07:18:03","modified_gmt":"2025-04-17T07:18:03","slug":"before-after-image","status":"publish","type":"post","link":"https:\/\/docs.zozothemes.com\/cea\/before-after-image\/","title":{"rendered":"Before After Image"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12406\" class=\"elementor elementor-12406\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6afb786 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6afb786\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4a10fb9\" data-id=\"4a10fb9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c35411 elementor-widget elementor-widget-text-editor\" data-id=\"2c35411\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tThis shortcode is for Add Before After Image.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a201614 elementor-widget elementor-widget-video\" data-id=\"a201614\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;show_image_overlay&quot;:&quot;yes&quot;,&quot;image_overlay&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/docs.zozothemes.com\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/banner-new.png&quot;,&quot;id&quot;:10220,&quot;size&quot;:&quot;&quot;},&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image.webm\" loop=\"\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t\t\t<div class=\"elementor-custom-embed-image-overlay\" style=\"background-image: url(https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2021\/03\/banner-new-1.png);\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-custom-embed-play\" role=\"button\" aria-label=\"Play Video\" tabindex=\"0\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"eicon-play\"><\/i>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-a4a7ad8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a4a7ad8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2bc058b\" data-id=\"2bc058b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0437acd elementor-widget elementor-widget-image\" data-id=\"0437acd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"318\" height=\"519\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-1.png\" class=\"attachment-full size-full wp-image-12424\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-1.png 318w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-1-184x300.png 184w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-645018b elementor-widget elementor-widget-image\" data-id=\"645018b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"317\" height=\"518\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-2.png\" class=\"attachment-full size-full wp-image-12425\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-2.png 317w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-2-184x300.png 184w\" sizes=\"(max-width: 317px) 100vw, 317px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd1609a elementor-widget elementor-widget-image\" data-id=\"bd1609a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"318\" height=\"686\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-3.png\" class=\"attachment-full size-full wp-image-12426\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-3.png 318w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-3-139x300.png 139w\" sizes=\"(max-width: 318px) 100vw, 318px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-6330453\" data-id=\"6330453\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9426ff6 elementor-widget elementor-widget-image\" data-id=\"9426ff6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"311\" height=\"796\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-4.png\" class=\"attachment-full size-full wp-image-12427\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-4.png 311w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-4-117x300.png 117w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce7999b elementor-widget elementor-widget-image\" data-id=\"ce7999b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"208\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-5.png\" class=\"attachment-full size-full wp-image-12428\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-5.png 312w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-5-300x200.png 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-803d90e elementor-widget elementor-widget-image\" data-id=\"803d90e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"308\" height=\"221\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-6.png\" class=\"attachment-full size-full wp-image-12429\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-6.png 308w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-6-300x215.png 300w\" sizes=\"(max-width: 308px) 100vw, 308px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-19c76d5 elementor-widget elementor-widget-image\" data-id=\"19c76d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"382\" src=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-7.png\" class=\"attachment-full size-full wp-image-12430\" alt=\"\" srcset=\"https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-7.png 319w, https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image-7-251x300.png 251w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e76337 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"6e76337\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4 style=\"text-decoration: underline;\">Image<\/h4>\n<ul>\n \t<li><strong>Image <\/strong> &#8211; Here you can add or remove the image<\/li>\n \t<li><strong>After<\/strong> &#8211; Here you can add or remove the after image<\/li>\n \t<li><strong>Before <\/strong> &#8211; Here you can add or remove the before image<\/li>\n \t<li><strong>Image Resolution<\/strong> &#8211; Here you can Choose the image resolution<\/li>\n<\/ul>\n&nbsp;\n<h4 style=\"text-decoration: underline;\">Options<\/h4>\n<ul>\n \t<li><strong>Orientation<\/strong> &#8211; Here you can choose the orientation Vertical or Horizontal shapes.<\/li>\n \t<li><strong>Default Offset<\/strong> &#8211; Here you can Choose the image opacity<\/li>\n \t<li><strong>On mouse hover slide move?<\/strong> &#8211; This is option for enable or disable move slide on mouse hover.<\/li>\n \t<li><strong>Allow a user to swipe<\/strong> &#8211; Allow a user to swipe anywhere on the image to control slider movement.<\/li>\n \t<li><strong>Anywhere move<\/strong> &#8211; Allow a user to click (or tap) anywhere on the image to move the slider to that location.<\/li>\n \t<li><strong>Overlay<\/strong> &#8211; This is an option to display overlay things like before after text.<\/li>\n<li><strong>Before Text<\/strong> &#8211; This is option set before text. Leave it blank for off.<\/li>\n<li><strong>After Text<\/strong> &#8211; This is option set after text. Leave it blank for off.<\/li>\n\n<\/ul>\n&nbsp;\n<h4>Style<\/h4>\n<h5 style=\"text-decoration: underline;\">General<\/h5>\n<ul>\n \t<li><strong>Padding<\/strong> &#8211; Here you can set padding value for image.<\/li>\n \t<li><strong>Margin<\/strong> &#8211; Here you can set margin value for image.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>This shortcode is for Add Before After Image.https:\/\/docs.zozothemes.com\/cea\/wp-content\/uploads\/2024\/12\/before-after-image.webm Image Image &#8211; Here you can add or remove the image After &#8211; Here you can add or remove the after image Before &#8211; Here you can add or remove the before image Image Resolution &#8211; Here you can Choose the image resolution &nbsp; Options Orientation &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-12406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shortcode"],"_links":{"self":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/comments?post=12406"}],"version-history":[{"count":22,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12406\/revisions"}],"predecessor-version":[{"id":12484,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/posts\/12406\/revisions\/12484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/media\/2312"}],"wp:attachment":[{"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/media?parent=12406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/categories?post=12406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.zozothemes.com\/cea\/wp-json\/wp\/v2\/tags?post=12406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}