{"id":856,"date":"2026-09-29T10:55:15","date_gmt":"2026-09-29T10:55:15","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?page_id=856"},"modified":"2026-10-13T05:11:35","modified_gmt":"2026-10-13T05:11:35","slug":"image-comparison","status":"publish","type":"page","link":"https:\/\/shapekode.com\/product\/shapeblock\/image-comparison\/","title":{"rendered":"Image Comparison"},"content":{"rendered":"<style id=\"shapeblock-block-css-5-inline-css\">\n.shapeblock-layout-row-mum3s8 { justify-content:center;align-content:stretch;flex-wrap:wrap;gap:20px;padding-top:120px;padding-right:16px;padding-bottom:120px;padding-left:16px;background-color:#5933ff;background-image:url(https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/09\/banner-shape.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:scroll;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-mum3s8 { padding-top:70px;padding-right:15px;padding-bottom:70px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-mum3s8 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-elv1eg { flex:0 1 calc(700px - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(700px - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-elv1eg > .shapeblock-column__inner { display:flex;flex-direction:column;align-items:center; }.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading { text-align:center; }\n.shapeblock-heading-block-wrap.shapeblock-heading-130a5c .shapeblock-heading .shapeblock-title { color:#ffffff; }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#00000000;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-5240d5 .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\n\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button { font-weight:500;text-decoration:none;justify-content:center;min-width:min(150px, 100%);color:#ffffff;border-style:solid;border-color:#ffffff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button:hover { color:#ffffff;border-style:solid;border-color:#0067ff;border-width:1px 1px 1px 1px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-before { margin-right:8px; }\n.shapeblock-button-block-wrap.shapeblock-button-31oq4y .shapeblock-button .shapeblock-button-icon-after { margin-left:8px;margin-right:0; }\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-4-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-5-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-mum3s8 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-elv1eg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <h1 style=\"margin-bottom:8px\" class=\"has-link-color wp-elements-1 wp-block-post-title has-text-color has-base-color has-xx-large-font-size has-text-align-center\">Image Comparison<\/h1> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-130a5c wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h4 class=\"shapeblock-title\">Build your Image Comparison With ShapeBlock<\/h4>\t<\/div> <\/div> <p class=\"has-text-align-center has-base-color has-text-color has-link-color wp-elements-2 wp-block-paragraph\" style=\"margin-top:20px\">Showcase visual differences with a stylish Image Comparison widget for WordPress. Let visitors compare two images side by side with a smooth interactive slider, making it easy to highlight before-and-after results, design changes, product differences, and visual transformations.<\/p> <div class=\"wp-block-group is-content-justification-center is-layout-flex wp-container-core-group-is-layout-211891db wp-block-group-is-layout-flex\" style=\"padding-top:14px\"> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-5240d5 wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-primary\" target=\"_self\"> <span class=\"shapeblock-button-text\">Get Started Now<\/span> <\/a> <\/div> <div class=\"shapeblock-block shapeblock-button-block-wrap shapeblock-button-31oq4y wp-block-shapeblock-button\"> <a href=\"#\" class=\"shapeblock-button shapeblock-button-outline\" target=\"_blank\" rel=\"noopener\"> <span class=\"shapeblock-button-text\">Documentation  <\/span> <\/a> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-8-inline-css\">\n.shapeblock-layout-row-26szii { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:40px;padding-right:15px;padding-bottom:40px;padding-left:15px;background-color:#e8e3fd;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-26szii { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-26szii { padding-right:15px;padding-left:15px; } }\n.shapeblock-block.shapeblock-layout-row.shapeblock-layout-row-26szii { margin-top:60px; }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-26szii > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-9l1cw7 { flex:0 1 calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important; }.shapeblock-heading-block-wrap.shapeblock-heading-50fdzx .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-6-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-7-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-8-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-26szii is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-9l1cw7 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\" \/> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-50fdzx wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Image Comparison Layout<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-18-inline-css\">\n.shapeblock-layout-row-gfo8zo { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-top:100px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-gfo8zo { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-gfo8zo { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-gfo8zo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-gfo8zo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-gfo8zo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-sww33d { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-sww33d > .shapeblock-column__inner { display:flex;flex-direction:column;gap:30px; }.shapeblock-heading-block-wrap.shapeblock-heading-gvpfd2 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-9-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-812h9q .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-812h9q .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-812h9q .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-812h9q .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-10-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-11-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-gh2hpj { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-gh2hpj > .shapeblock-column__inner { display:flex;flex-direction:column;gap:30px; }.shapeblock-heading-block-wrap.shapeblock-heading-hawdik .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-12-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-wpsq9z .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-wpsq9z .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-wpsq9z .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-wpsq9z .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-13-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-14-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-3vewtd { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-3vewtd > .shapeblock-column__inner { display:flex;flex-direction:column;gap:30px; }.shapeblock-heading-block-wrap.shapeblock-heading-rfce2i .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-15-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-lsr4f6 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-lsr4f6 .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-lsr4f6 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-lsr4f6 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-16-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-17-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-18-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-gfo8zo is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-sww33d wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-gvpfd2 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Horizontal Layout<\/h2>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-812h9q wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-gh2hpj wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-hawdik wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Vertical Layout<\/h2>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-wpsq9z wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-3vewtd wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-rfce2i wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Diagonal\u00a0Layout<\/h2>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-lsr4f6 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-circle\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-21-inline-css\">\n.shapeblock-layout-row-s03ink { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:40px;padding-right:15px;padding-bottom:40px;padding-left:15px;background-color:#e8e3fd;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-s03ink { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-s03ink { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-s03ink > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-pvyg24 { flex:0 1 calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important; }.shapeblock-heading-block-wrap.shapeblock-heading-1rcs3r .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-19-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-20-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-21-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-s03ink is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-pvyg24 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\" \/> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-1rcs3r wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Image Comparison Label<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-40-inline-css\">\n.shapeblock-layout-row-tjlciv { flex-direction:row;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-top:60px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-tjlciv { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-tjlciv { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(5){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-tjlciv > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(6){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-7tolcg { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-7tolcg > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ks4yv2 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ks4yv2 .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ks4yv2 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ks4yv2 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-22-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-90t65u .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-23-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-24-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-1tu0ij { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-1tu0ij > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-xx876t .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-xx876t .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-xx876t .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-xx876t .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-25-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-2oxatb .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-26-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-27-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-klnd01 { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-klnd01 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-wrmvf9 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-wrmvf9 .shapeblock-comparison-container img { height:540px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-wrmvf9 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-wrmvf9 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-28-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-jkk3mk .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-29-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-30-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-gzzbd6 { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-gzzbd6 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-dl1ctb .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-dl1ctb .shapeblock-comparison-container img { height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-dl1ctb .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-dl1ctb .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-dl1ctb .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-31-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-0a3ezf .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-32-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-33-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-af36zl { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-af36zl > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3rpc0w .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3rpc0w .shapeblock-comparison-container img { height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3rpc0w .shapeblock-comparison-label { background:linear-gradient(135deg,rgb(89,51,255) 0%,rgb(255,51,126) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3rpc0w .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3rpc0w .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-34-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-k6yma1 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-35-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-36-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ayypxy { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-ayypxy > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3a4bib .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3a4bib .shapeblock-comparison-container img { height:540px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3a4bib .shapeblock-comparison-label { background:#ffffff00;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3a4bib .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3a4bib .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-37-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-ty90ww .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-38-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-39-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-40-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-tjlciv is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-7tolcg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-ks4yv2 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-90t65u wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Horizontal Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-1tu0ij wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-xx876t wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-2oxatb wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Vertical Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-klnd01 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-wrmvf9 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-circle has-labels\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-jkk3mk wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Diagonal\u00a0Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-gzzbd6 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-dl1ctb wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-0a3ezf wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Normal Background Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-af36zl wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-3rpc0w wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-k6yma1 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Gradient Background Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ayypxy wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-3a4bib wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-ty90ww wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Only Text Label<\/h3>\t<\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-61-inline-css\">\n.shapeblock-layout-row-redkh7 { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-top:0px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-redkh7 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-redkh7 { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(5){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(6){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-redkh7 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(7){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-jbezh3 { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-jbezh3 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:10px; }.shapeblock-heading-block-wrap.shapeblock-heading-vawart .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-41-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-42-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ox9wsg { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-ox9wsg > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-ygtqa8 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-43-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-g29ghv .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-g29ghv .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-g29ghv .shapeblock-comparison-label { background:linear-gradient(0deg,rgb(89,51,255) 0%,rgb(255,51,126) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-g29ghv .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-g29ghv .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-44-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-45-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-xf2nbf { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-xf2nbf > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-2y8ed1 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-46-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-m9yijf .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-m9yijf .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-m9yijf .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-m9yijf .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-m9yijf .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-47-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-48-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-rhv641 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-rhv641 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-s37aez .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-49-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3u7o8r .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3u7o8r .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-3u7o8r .shapeblock-comparison-label { background:#120d29; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3u7o8r .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-3u7o8r .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-50-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-51-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-oyl8u1 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-oyl8u1 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-ld84wf .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-52-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-s1avxf .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-s1avxf .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-s1avxf .shapeblock-comparison-label { color:#120d29;background:#ffffff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-s1avxf .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-s1avxf .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-53-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-54-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-338r5e { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-338r5e > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-0wapb7 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-55-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-lkv4o9 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-lkv4o9 .shapeblock-comparison-container img { height:400px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-lkv4o9 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-lkv4o9 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-56-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-57-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-7ho6p2 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-7ho6p2 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-0qnr6n .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-58-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-9ub82m .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-9ub82m .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-9ub82m .shapeblock-comparison-label { background:linear-gradient(135deg,rgb(89,51,255) 0%,rgb(51,207,255) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-9ub82m .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-9ub82m .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-59-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-60-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-61-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-redkh7 is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-jbezh3 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-vawart wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Image Comparison Label Position<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ox9wsg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-ygtqa8 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Top)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-g29ghv wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-start\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-xf2nbf wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-2y8ed1 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Middle)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-m9yijf wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-rhv641 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-s37aez wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Bottom)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-3u7o8r wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-end\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-oyl8u1 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-ld84wf wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Left)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-s1avxf wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle has-labels labels-start\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-338r5e wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-0wapb7 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Center)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-lkv4o9 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-7ho6p2 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-0qnr6n wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Label Position (Right)<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-9ub82m wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-circle has-labels labels-end\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-64-inline-css\">\n.shapeblock-layout-row-0v5ncx { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:40px;padding-right:15px;padding-bottom:40px;padding-left:15px;background-color:#e8e3fd;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-0v5ncx { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-0v5ncx { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-0v5ncx > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-tjrlsc { flex:0 1 calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important; }.shapeblock-heading-block-wrap.shapeblock-heading-qb5s6h .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-62-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-63-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-64-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-0v5ncx is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-tjrlsc wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\" \/> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-qb5s6h wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Image Comparison Handle Type<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-83-inline-css\">\n.shapeblock-layout-row-pju8uo { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-top:60px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-pju8uo { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-pju8uo { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(5){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-pju8uo > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(6){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-2zsirc { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-2zsirc > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-a35wo0 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-65-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ek6xbz .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ek6xbz .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ek6xbz .shapeblock-comparison-label { background:linear-gradient(0deg,rgb(89,51,255) 0%,rgb(255,51,126) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ek6xbz .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ek6xbz .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-66-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-67-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-ibm325 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-ibm325 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-7jvhfn .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-68-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-52wppk .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-52wppk .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-52wppk .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-52wppk .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-52wppk .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-69-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-70-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-b4sey4 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-b4sey4 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-mv20qa .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-71-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-pbgh9b .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-pbgh9b .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-pbgh9b .shapeblock-comparison-label { background:#120d29; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-pbgh9b .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-pbgh9b .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-72-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-73-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-g1eaq6 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-g1eaq6 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-bmk76c .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-74-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-iznhs9 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-iznhs9 .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-iznhs9 .shapeblock-comparison-label { color:#120d29;background:#ffffff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-iznhs9 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-iznhs9 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-75-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-76-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-yg3b78 { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-yg3b78 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-faic4m .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-77-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-bqrlia .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-bqrlia .shapeblock-comparison-container img { height:400px; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-bqrlia .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-bqrlia .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-78-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-79-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-cft6qn { flex:0 1 calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important;max-width:calc(33.33% - var(--bp-gap, 0px) * 66.67 \/ 100) !important; }\n.shapeblock-col-cft6qn > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-y24qik .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-80-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ievngh .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ievngh .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ievngh .shapeblock-comparison-label { background:linear-gradient(135deg,rgb(89,51,255) 0%,rgb(51,207,255) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ievngh .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ievngh .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-81-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-82-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-83-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-pju8uo is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-2zsirc wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-a35wo0 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Circle Outline<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-ek6xbz wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-ibm325 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-7jvhfn wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Circle Filled<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-52wppk wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-filled has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-b4sey4 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-mv20qa wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Rounded Square<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-pbgh9b wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-square has-labels\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-g1eaq6 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-bmk76c wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Pill<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-iznhs9 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-pill has-labels\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yg3b78 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-faic4m wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Glass<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-bqrlia wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-glass has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-cft6qn wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-y24qik wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Only Line<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-ievngh wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-line has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-98-inline-css\">\n.shapeblock-layout-row-t2vq2n { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-t2vq2n { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-t2vq2n { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-t2vq2n > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-t2vq2n > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-t2vq2n > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-t2vq2n > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-t2vq2n > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(5){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-yyk8mn { flex:0 1 calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100% - var(--bp-gap, 0px) * 0 \/ 100) !important; }\n.shapeblock-col-yyk8mn > .shapeblock-column__inner { display:flex;flex-direction:column;gap:10px; }.shapeblock-heading-block-wrap.shapeblock-heading-ferm9s .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-84-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-85-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-fj9pya { flex:0 1 calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important;max-width:calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important; }\n.shapeblock-col-fj9pya > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-6j4q39 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-86-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ncvmpo .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ncvmpo .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-ncvmpo .shapeblock-comparison-label { background:linear-gradient(0deg,rgb(89,51,255) 0%,rgb(255,51,126) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ncvmpo .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-ncvmpo .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-87-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-88-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-8v525f { flex:0 1 calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important;max-width:calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important; }\n.shapeblock-col-8v525f > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-0u8qe7 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-89-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-c2dgpl .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-c2dgpl .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-c2dgpl .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-c2dgpl .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-c2dgpl .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-90-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-91-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-6wn018 { flex:0 1 calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important;max-width:calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important; }\n.shapeblock-col-6wn018 > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-jonrwo .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-92-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-k9zlwj .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-k9zlwj .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-k9zlwj .shapeblock-comparison-label { background:#120d29; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-k9zlwj .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-k9zlwj .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-93-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-94-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-5wahrp { flex:0 1 calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important;max-width:calc(25.00% - var(--bp-gap, 0px) * 75 \/ 100) !important; }\n.shapeblock-col-5wahrp > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-heading-block-wrap.shapeblock-heading-oc9t6t .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-95-inline-css *\/\n\n\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-i6izil .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;min-height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-i6izil .shapeblock-comparison-container img { height:400px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-i6izil .shapeblock-comparison-label { color:#120d29;background:#ffffff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-i6izil .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-i6izil .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-96-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-97-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-98-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-t2vq2n is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-yyk8mn wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-ferm9s wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Handle Icon Variation<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-fj9pya wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-6j4q39 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Triangle Icon<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-ncvmpo wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-8v525f wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-0u8qe7 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Chevron Icon<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-c2dgpl wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-filled has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\" focusable=\"false\"><path d=\"M9 5 4 12l5 7M15 5l5 7-5 7\" \/><\/svg><\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-6wn018 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-jonrwo wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Double Arrow Icon<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-k9zlwj wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-square has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\" focusable=\"false\"><path d=\"M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4\" \/><\/svg><\/span> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-5wahrp wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-oc9t6t wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Without Icon<\/h3>\t<\/div> <\/div> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-i6izil wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-glass has-labels\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <\/div> <\/div> <\/div> <\/div> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-101-inline-css\">\n.shapeblock-layout-row-q4hfg8 { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;padding-top:40px;padding-right:15px;padding-bottom:40px;padding-left:15px;background-color:#e8e3fd;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-q4hfg8 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-q4hfg8 { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-q4hfg8 > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-rhuyg3 { flex:0 1 calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important;max-width:calc(100.00% - var(--bp-gap, 0px) * 0 \/ 100) !important; }.shapeblock-heading-block-wrap.shapeblock-heading-7e3m8l .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-99-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-100-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-101-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-q4hfg8 is-content-full wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-rhuyg3 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background\" \/> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-7e3m8l wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h2 class=\"shapeblock-title\">Image Comparison Item Style<\/h2>\t<\/div> <\/div> <hr class=\"wp-block-separator has-text-color has-primary-color has-alpha-channel-opacity has-primary-background-color has-background is-style-default\" \/> <\/div><\/div> <\/div><\/div>\n\n<style id=\"shapeblock-block-css-114-inline-css\">\n.shapeblock-layout-row-2tj8ve { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;row-gap:50px;padding-top:60px;padding-bottom:100px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-2tj8ve { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-2tj8ve { padding-top:60px;padding-right:15px;padding-bottom:60px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-2tj8ve > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-2tj8ve > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-2tj8ve > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(3){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-2tj8ve > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(4){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-xsfyvj { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-xsfyvj > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-8zomve .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;border-style:solid;border-color:#5933ff;border-width:16px 16px 16px 16px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-8zomve .shapeblock-comparison-label { background:linear-gradient(0deg,rgb(89,51,255) 0%,rgb(255,51,126) 100%); }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-8zomve .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-8zomve .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-102-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-iob5iy .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-103-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-104-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-mo12xg { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-mo12xg > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-5e54se .shapeblock-comparison-container { border-style:solid;border-color:#5933ff;border-width:16px 16px 16px 16px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-5e54se .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-5e54se .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-5e54se .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-105-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-bqwxh9 .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-106-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-107-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-xtnd9k { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-xtnd9k > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-d7yekb .shapeblock-comparison-container { box-shadow:0 4px 16px 0 rgba(0,0,0,0.3); }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-d7yekb .shapeblock-comparison-label { background:#120d29; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-d7yekb .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-d7yekb .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-108-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-xumxhn .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-109-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-110-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-46jcgx { flex:0 1 calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n.shapeblock-col-46jcgx > .shapeblock-column__inner { display:flex;flex-direction:column;gap:16px; }.shapeblock-image-comparison-block-wrap.shapeblock-cmp-jvm8t2 .shapeblock-comparison-container { border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-right-radius:10px;border-bottom-left-radius:10px; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-jvm8t2 .shapeblock-comparison { --shapeblock-cmp-color:#5933ff;--shapeblock-cmp-bg-set:#120d29;--shapeblock-cmp-icon:#ffffff; }\n.shapeblock-image-comparison-block-wrap.shapeblock-cmp-jvm8t2 .shapeblock-comparison-label { background:#5933ff; }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-jvm8t2 .shapeblock-comparison-container { min-height:350px; } }\n@media (max-width: 767px) { .shapeblock-image-comparison-block-wrap.shapeblock-cmp-jvm8t2 .shapeblock-comparison-container img { height:350px; } }\n\/*# sourceURL=shapeblock-block-css-111-inline-css *\/\n\n\n.shapeblock-heading-block-wrap.shapeblock-heading-if3ntd .shapeblock-heading { text-align:center; }\n\/*# sourceURL=shapeblock-block-css-112-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-113-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-114-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-2tj8ve is-content-boxed alignfull wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-xsfyvj wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-8zomve wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-circle has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-iob5iy wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Border with Border Radius<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-mo12xg wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-5e54se wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-vertical is-handle-filled has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"vertical\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\" focusable=\"false\"><path d=\"M9 5 4 12l5 7M15 5l5 7-5 7\" \/><\/svg><\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-bqwxh9 wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Border without Border Radius<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-xtnd9k wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-d7yekb wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal shapeblock-comparison-diagonal is-handle-square has-labels\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"diagonal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-1.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-1.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-divider\" aria-hidden=\"true\"><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"><svg viewbox=\"0 0 24 24\" focusable=\"false\"><path d=\"M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4\" \/><\/svg><\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-xumxhn wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Box Shadow<\/h3>\t<\/div> <\/div> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-46jcgx wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <div class=\"shapeblock-block shapeblock-image-comparison-block-wrap shapeblock-cmp-jvm8t2 wp-block-shapeblock-image-comparison\"> <div class=\"shapeblock-comparison shapeblock-comparison-horizontal is-handle-square no-shadow has-labels labels-center\"> <div class=\"shapeblock-comparison-container\" data-offset=\"0.5\" data-orientation=\"horizontal\"> <img decoding=\"async\" class=\"shapeblock-comparison-before\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/before-2.webp\" alt=\"\"> <img decoding=\"async\" class=\"shapeblock-comparison-after\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/after-2.webp\" alt=\"\"> <div class=\"shapeblock-comparison-overlay is-before\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">Before<\/span><\/div> <div class=\"shapeblock-comparison-overlay is-after\" aria-hidden=\"true\"><span class=\"shapeblock-comparison-label\">After<\/span><\/div> <div class=\"shapeblock-comparison-handle\" role=\"slider\" tabindex=\"0\" aria-label=\"Drag to compare the images\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"> <span class=\"shapeblock-comparison-icon\" aria-hidden=\"true\"> <span class=\"shapeblock-comparison-left-arrow\"><\/span> <span class=\"shapeblock-comparison-right-arrow\"><\/span> <\/span> <\/div> <\/div> <\/div> <\/div> <div class=\"shapeblock-block shapeblock-heading-block-wrap shapeblock-heading-if3ntd wp-block-shapeblock-heading\"> <div class=\"shapeblock-heading\"> <h3 class=\"shapeblock-title\">Handle Style<\/h3>\t<\/div> <\/div> <\/div><\/div> <\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_blockode_hide_title":true,"footnotes":""},"class_list":["post-856","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=856"}],"version-history":[{"count":52,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/856\/revisions"}],"predecessor-version":[{"id":1848,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/pages\/856\/revisions\/1848"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}