{"id":3332,"date":"2017-12-21T08:56:45","date_gmt":"2017-12-21T08:56:45","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=3332"},"modified":"2017-12-22T08:55:47","modified_gmt":"2017-12-22T08:55:47","slug":"image-compare","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/image-compare\/","title":{"rendered":"Image Compare"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1503595817152{padding-top: 60px !important;padding-bottom: 100px !important;background-color: #222f46 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagecompare cq-imagecompare-shape-square cq-imagecompare-bg-aqua  \" data-bgcolor=\"\" data-autodelay=\"4\" data-minheight=\"300\"><div class=\"cq-imagecompare-contentcontainer\"><div class=\"cq-imagecompare-captioncontainer\">\n                    <div class=\"cq-imagecompare-caption cq-imagecompare-item-aqua\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Auto delay slide<\/h4><div class=\"cq-imagecompare-text\"><p>With built-in color style, and optional button. This element let you add 2 image side by side with caption.<\/p>\n<\/div>[vc_btn title=\"Download\" color=\"blue\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div><div class=\"cq-imagecompare-caption cq-imagecompare-item-grass\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Optional title here<\/h4><div class=\"cq-imagecompare-text\"><p>The button is from\u00a0WPBakery Page Builder (formerly Visual Composer), you can select the style\/shape, add link etc. Title and caption are all optional. And support HTML, for example, <a href=\"https:\/\/codecanyon.net\/item\/visual-composer-extensions-addon-all-in-one\/7731868?ref=sike\">a link here<\/a>.<\/p>\n<\/div>[vc_btn title=\"Get this plugin\" color=\"violet\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div>\n                    <\/div><div class=\"cq-imagecompare-imagecontainer\">\n                      <div class=\"cq-imagecompare-img1\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/shttefan-284259-640x427.jpg) no-repeat center;background-position:center center;background-size:cover;\"><\/div><div class=\"cq-imagecompare-img2\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/nathan-mcbride-229639-640x427.jpg) no-repeat center;background-position:center center;background-size:cover;\"><\/div>\n\n                      <button class=\"cq-imagecompare-btn\"><i class=\"cq-imagecompare-icon entypo-icon entypo-icon-left-open-big\"><\/i><\/button>\n                    <\/div> <\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagecompare cq-imagecompare-shape-square cq-imagecompare-bg-aqua  \" data-bgcolor=\"\" data-autodelay=\"0\" data-minheight=\"300\"><div class=\"cq-imagecompare-contentcontainer\"><div class=\"cq-imagecompare-captioncontainer\">\n                    <div class=\"cq-imagecompare-caption cq-imagecompare-item-grass\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Auto delay slide<\/h4><div class=\"cq-imagecompare-text\"><p>With built-in color style, and optional button. This element let you add 2 image side by side with caption.<\/p>\n<\/div>[vc_btn title=\"See More Information\" color=\"turquoise\" style=\"modern\" shape=\"square\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div><div class=\"cq-imagecompare-caption cq-imagecompare-item-mediumgray\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Yet another image<\/h4><div class=\"cq-imagecompare-text\"><p>The button is optional.\u00a0It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.<\/p>\n<\/div><\/div>\n                    <\/div><div class=\"cq-imagecompare-imagecontainer\">\n                      <div class=\"cq-imagecompare-img1\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/photo-1444942436885-ca7deb7d9a33-640x426.jpeg) no-repeat center;background-position:center center;background-size:cover;\"><\/div><div class=\"cq-imagecompare-img2\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/photo-1452009899134-7f5be16c604d-640x436.jpeg) no-repeat center;background-position:center center;background-size:cover;\"><\/div>\n\n                      <button class=\"cq-imagecompare-btn\"><i class=\"cq-imagecompare-icon entypo-icon entypo-icon-left-open-big\"><\/i><\/button>\n                    <\/div> <\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; parallax=&#8221;content-moving&#8221; parallax_image=&#8221;2468&#8243; css=&#8221;.vc_custom_1458627636523{padding-top: 120px !important;padding-bottom: 180px !important;background-color: #3d284b !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagecompare cq-imagecompare-shape-round cq-imagecompare-bg-aqua  \" data-bgcolor=\"\" data-autodelay=\"4\" data-minheight=\"313\"><div class=\"cq-imagecompare-contentcontainer\"><div class=\"cq-imagecompare-captioncontainer\">\n                    <div class=\"cq-imagecompare-caption cq-imagecompare-item-darkgray\" style=\"background-color:\"><div class=\"cq-imagecompare-text\"><p>Optional title above.\u00a0Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<\/p>\n<\/div>[vc_btn title=\"Get it\" color=\"violet\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div><div class=\"cq-imagecompare-caption cq-imagecompare-item-bluejeans\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Yet another demo<\/h4><div class=\"cq-imagecompare-text\"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.<\/p>\n<\/div>[vc_btn title=\"Get this plugin\" color=\"orange\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div>\n                    <\/div><div class=\"cq-imagecompare-imagecontainer\">\n                      <div class=\"cq-imagecompare-img1\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/11\/photo-1455383333344-451b6147021b-640x426.jpg) no-repeat center;background-position:center center;background-size:cover;\"><\/div><div class=\"cq-imagecompare-img2\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/ben-o-sullivan-382817-640x427.jpg) no-repeat center;background-position:center center;background-size:cover;\"><\/div>\n\n                      <button class=\"cq-imagecompare-btn\"><i class=\"cq-imagecompare-icon entypo-icon entypo-icon-left-open-big\"><\/i><\/button>\n                    <\/div> <\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagecompare cq-imagecompare-shape-rounded cq-imagecompare-bg-aqua  \" data-bgcolor=\"\" data-autodelay=\"4\" data-minheight=\"313\"><div class=\"cq-imagecompare-contentcontainer\"><div class=\"cq-imagecompare-captioncontainer\">\n                    <div class=\"cq-imagecompare-caption cq-imagecompare-item-darkgray\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Different shape, square or round<\/h4><div class=\"cq-imagecompare-text\"><p>Optional title above.\u00a0Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<\/p>\n<\/div>[vc_btn title=\"Download\" color=\"blue\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div><div class=\"cq-imagecompare-caption cq-imagecompare-item-darkgray\" style=\"background-color:\"><div class=\"cq-imagecompare-text\"><p>Optional title above.\u00a0Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<\/p>\n<\/div>[vc_btn title=\"Download\" color=\"blue\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div>\n                    <\/div><div class=\"cq-imagecompare-imagecontainer\">\n                      <div class=\"cq-imagecompare-img1\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/04\/photo-1448932223592-d1fc686e76ea800-640x427.jpeg) no-repeat center;background-position:center center;background-size:cover;\"><\/div><div class=\"cq-imagecompare-img2\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/04\/photo-1448932223592-d1fc686e76ea800-640x427.jpeg) no-repeat center;background-position:center center;background-size:cover;\"><\/div>\n\n                      <button class=\"cq-imagecompare-btn\"><i class=\"cq-imagecompare-icon entypo-icon entypo-icon-left-open-big\"><\/i><\/button>\n                    <\/div> <\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1513932802148{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #656d78 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagecompare cq-imagecompare-shape-round cq-imagecompare-bg-aqua  \" data-bgcolor=\"\" data-autodelay=\"5\" data-minheight=\"313\"><div class=\"cq-imagecompare-contentcontainer\"><div class=\"cq-imagecompare-captioncontainer\">\n                    <div class=\"cq-imagecompare-caption cq-imagecompare-item-sunflower\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Responsive<\/h4><div class=\"cq-imagecompare-text\"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using &#8216;Content here, content here&#8217;, making it look like readable English.<\/p>\n<\/div><\/div><div class=\"cq-imagecompare-caption cq-imagecompare-item-lavender\" style=\"background-color:\"><h4 class=\"cq-imagecompare-title\" style=\"color:;font-size:\">Yet another demo<\/h4><div class=\"cq-imagecompare-text\"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.<\/p>\n<\/div>[vc_btn title=\"Get this plugin\" color=\"peacoc\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|\" size=\"xs\"]<\/div>\n                    <\/div><div class=\"cq-imagecompare-imagecontainer\">\n                      <div class=\"cq-imagecompare-img1\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/11\/photo-1455383333344-451b6147021b-640x426.jpg) no-repeat center;background-position:center center;background-size:cover;\"><\/div><div class=\"cq-imagecompare-img2\" style=\"background:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2016\/03\/photo-1454506185424-4098f059c9e9-640x427.jpeg) no-repeat center;background-position:center center;background-size:cover;\"><\/div>\n\n                      <button class=\"cq-imagecompare-btn\"><i class=\"cq-imagecompare-icon entypo-icon entypo-icon-left-open-big\"><\/i><\/button>\n                    <\/div> <\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_empty_space][vc_column_text]<\/p>\n<h4 style=\"font-size: 2em; color: #fff;\">Yet another demo<\/h4>\n<p style=\"color: #fff;\">Optional link for whole element<\/p>\n<p style=\"color: #fff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\n<p style=\"color: #fff;\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1503595817152{padding-top: 60px !important;padding-bottom: 100px !important;background-color: #222f46 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; parallax=&#8221;content-moving&#8221; parallax_image=&#8221;2468&#8243; css=&#8221;.vc_custom_1458627636523{padding-top: 120px !important;padding-bottom: 180px !important;background-color: #3d284b !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1513932802148{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #656d78 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_empty_space][vc_column_text] Yet another demo Optional link for whole element Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3332"}],"collection":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":24,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3332\/revisions"}],"predecessor-version":[{"id":3357,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3332\/revisions\/3357"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}