{"id":3516,"date":"2018-10-13T15:13:18","date_gmt":"2018-10-13T15:13:18","guid":{"rendered":"http:\/\/stopdesign.cn\/demo\/?page_id=3516"},"modified":"2018-10-14T09:35:32","modified_gmt":"2018-10-14T09:35:32","slug":"image-toggle","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/image-toggle\/","title":{"rendered":"Image Toggle"},"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-imagetoggle cq-imagetoggle-position-right cq-imagetoggle-shape-square\" data-position=\"right\" data-bgcolor=\"\" data-isdisplay=\"\" data-elementheight=\"\" data-autodelay=\"5\"><div class=\"cq-imagetoggle-content\" style=\"height:\"><div class=\"cq-imagetoggle-text\" style=\"background-color:\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">image can be on left or right<\/p>[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|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"\"><\/div><\/div><\/div><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2017\/10\/photo-nic-co-uk-nic-224385-640x427.jpg);\"><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-left cq-imagetoggle-shape-square\" data-position=\"left\" data-bgcolor=\"#ac92ec\" data-isdisplay=\"\" data-elementheight=\"\" data-autodelay=\"5\"><div class=\"cq-imagetoggle-content\" style=\"height:\"><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/tomasz-zagorski-1097343-unsplash-640x640.jpg);\"><\/div><div class=\"cq-imagetoggle-text\" style=\"background-color:#ac92ec\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">image can be on left or right<\/p><div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid #ac92ec; border-left: 30px solid transparent; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/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\/3&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-right cq-imagetoggle-shape-square\" data-position=\"right\" data-bgcolor=\"#d770ad\" data-isdisplay=\"\" data-elementheight=\"\" data-autodelay=\"0\"><div class=\"cq-imagetoggle-content\" style=\"height:\"><div class=\"cq-imagetoggle-text\" style=\"background-color:#d770ad\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">image can be on left or right<\/p>[vc_btn title=\"Download\" 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|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid #d770ad; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/radek-grzybowski-66457-unsplash-640x472.jpg);\"><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/3&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-left cq-imagetoggle-shape-rounded\" data-position=\"left\" data-bgcolor=\"#3bafda\" data-isdisplay=\"\" data-elementheight=\"\" data-autodelay=\"0\"><div class=\"cq-imagetoggle-content\" style=\"height:\"><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/daniel-korpai-1081297-unsplash-640x800.jpg);\"><\/div><div class=\"cq-imagetoggle-text\" style=\"background-color:#3bafda\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Different shape<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">image can be on left or right<\/p>[vc_btn title=\"Download\" 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|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid #3bafda; border-left: 30px solid transparent; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/3&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-right cq-imagetoggle-shape-round\" data-position=\"right\" data-bgcolor=\"#da4453\" data-isdisplay=\"\" data-elementheight=\"\" data-autodelay=\"0\"><div class=\"cq-imagetoggle-content\" style=\"height:\"><div class=\"cq-imagetoggle-text\" style=\"background-color:#da4453\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">image can be on left or right<\/p>[vc_btn title=\"Download\" color=\"green\" style=\"modern\" shape=\"rounded\" link=\"url:https%3A%2F%2Fcodecanyon.net%2Fitem%2Fvisual-composer-extensions-addon-all-in-one%2F7731868%3Fref%3Dsike|title:download|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid #da4453; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/tomasz-zagorski-1097343-unsplash-640x640.jpg);\"><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1539506694808{padding-top: 104px !important;padding-bottom: 154px !important;background-color: #656d78 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-right cq-imagetoggle-shape-square\" data-position=\"right\" data-bgcolor=\"#222f46\" data-isdisplay=\"\" data-elementheight=\"320px\" data-autodelay=\"0\"><div class=\"cq-imagetoggle-content\" style=\"height:320px\"><div class=\"cq-imagetoggle-text\" style=\"background-color:#222f46\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">Image can be on left or right, optional element shape, optional button. Auto delay popup.<\/p>[vc_btn title=\"Download\" 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|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid transparent; border-left: 30px solid #222f46; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/radek-grzybowski-66457-unsplash-640x472.jpg);\"><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h4 style=\"color: #ffffff; font-size: 2em; line-height: 140%;\">Optional button, element shape,\u00a0\u00a0auto delay popup etc in the editor&#8217;s setting.<\/h4>\n<p><span style=\"color: #ffffff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/span><\/p>\n<p><span style=\"color: #ffffff;\">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.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1539506800017{padding-top: 200px !important;padding-bottom: 240px !important;background-color: #3d284b !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][vc_empty_space][vc_column_text]<\/p>\n<h4 style=\"color: #ffffff; font-size: 2em;\">Image on the left.<\/h4>\n<p><span style=\"color: #ffffff;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/span><\/p>\n<p><span style=\"color: #ffffff;\">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.<\/span>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/2&#8243;]<div class=\"cq-imagetoggle cq-imagetoggle-position-left cq-imagetoggle-shape-rounded\" data-position=\"left\" data-bgcolor=\"#f6bb42\" data-isdisplay=\"\" data-elementheight=\"320px\" data-autodelay=\"5\"><div class=\"cq-imagetoggle-content\" style=\"height:320px\"><div class=\"cq-imagetoggle-imagecontainer\" style=\"background-image:url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2018\/10\/radek-grzybowski-66457-unsplash-640x472.jpg);\"><\/div><div class=\"cq-imagetoggle-text\" style=\"background-color:#f6bb42\"><h3 class=\"cq-imagetoggle-title\" style=\"color:;font-size:\">Auto delay show the text block<\/h3><p class=\"cq-imagetoggle-description\" style=\"color:;font-size:\">Image can be on left or right, optional element shape, optional button. Auto delay popup.<\/p>[vc_btn title=\"Download\" 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|target:%20_blank\" align=\"center\" size=\"xs\"]<div class=\"cq-imagetoggle-arrowcontainer\"><div class=\"cq-imagetoggle-arrow\" style=\"border-top: 30px solid transparent; border-right: 30px solid #f6bb42; border-left: 30px solid transparent; border-bottom: 30px solid transparent;\"><\/div><\/div><\/div><\/div><div class=\"cq-imagetoggle-moretext\" style=\"background-color:#ededed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum dictum accumsan. Duis dictum purus eget lectus convallis tempor. Phasellus a scelerisque lorem. Duis faucibus consectetur elementum. Vivamus ultrices euismod nulla in ultricies.<\/div><\/div>[\/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\/3&#8243;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][\/vc_column][vc_column width=&#8221;1\/3&#8243;][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1539506694808{padding-top: 104px !important;padding-bottom: 154px !important;background-color: #656d78 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text] Optional button, element shape,\u00a0\u00a0auto delay popup etc in the editor&#8217;s setting. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit [&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\/3516"}],"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=3516"}],"version-history":[{"count":19,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3516\/revisions"}],"predecessor-version":[{"id":3539,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/3516\/revisions\/3539"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=3516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}