{"id":472,"date":"2014-08-11T10:07:10","date_gmt":"2014-08-11T10:07:10","guid":{"rendered":"http:\/\/stopdesign.cn\/codecanyon\/vc-extensions\/?page_id=472"},"modified":"2016-03-13T14:33:14","modified_gmt":"2016-03-13T14:33:14","slug":"image-with-arrow","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/image-with-arrow\/","title":{"rendered":"Image with Arrow"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457879351496{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #90caf9 !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/2&#8243;]<div style=\"height:px;margin:;\" class=\"cq-imgwitharrow-container cq-imagewitharrow-smallround left \" data-color=\"#424242\" data-background=\"#f5f7fa\" data-captionalign=\"left\" data-arrowtop=\"45%\" data-arrowleft=\"45%\" data-fontsize1=\"1.2em\" data-iwidth=\"50%\" data-iheight=\"100%\" data-twidth=\"50%\" data-theight=\"100%\" data-arrowsize=\"large\"><a href=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/08\/tumblr_n98smdYLPh1qfirfao1_1280.jpg\" class=\"cq-lightbox\" rel=ga1><div class=\"cq-imgwitharrow-photo\" data-url=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/08\/tumblr_n98smdYLPh1qfirfao1_1280-640x360.jpg\" style=\"width:50%;height:100%;\"><\/div><\/a><div class=\"cq-imgwitharrow-box\" style=\"width:50%;height:100%;\"><div class=\"cq-imgwitharrow-content\"><p class=\"cq-content\">\n                        <span style=\"color: #663399;\">&#8220;<\/span> Here is the content. You can change the background, content width, arrow position etc in the backend too. <span style=\"color: #663399;\">&#8220;<\/span>\n                      <\/p><\/div>\n                      <div class=\"cq-arrowborder-container\">\n                            <div class=\"cq-arrowborder1\"><\/div>\n                            <div class=\"cq-arrowborder2\"><\/div>\n                            <div class=\"cq-arrowborder3\"><\/div>\n                          <\/div><\/div><\/div>[vc_empty_space height=&#8221;24px&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h2><span style=\"color: #666; font-size: 1.4em;\">Updated after verstion 3.3.5<\/span><\/h2>\n<p><span style=\"color: #666;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Si qua in iis corrigere voluit, deteriora fecit. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Duo Reges: constructio interrete.i<\/span>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457879381878{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #cfd8dc !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h2><span style=\"color: #333; font-size: 1.4em;\">It&#8217;s square here<\/span><\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Si qua in iis corrigere voluit, deteriora fecit. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Duo Reges: constructio interrete.i[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;]<div style=\"height:px;margin:;\" class=\"cq-imgwitharrow-container square right \" data-color=\"#ffffff\" data-background=\"#663399\" data-captionalign=\"right\" data-arrowtop=\"45%\" data-arrowleft=\"45%\" data-fontsize1=\"\" data-iwidth=\"65%\" data-iheight=\"100%\" data-twidth=\"35%\" data-theight=\"100%\" data-arrowsize=\"large\"><a href=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/08\/tumblr_n98sgcjz3l1qfirfao1_1280.jpg\" class=\"cq-lightbox\" rel=ga1><div class=\"cq-imgwitharrow-photo\" data-url=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/08\/tumblr_n98sgcjz3l1qfirfao1_1280.jpg\" style=\"width:65%;height:100%;\"><\/div><\/a><div class=\"cq-imgwitharrow-box\" style=\"width:35%;height:100%;\"><div class=\"cq-imgwitharrow-content\"><p class=\"cq-content\">\n                        <\/p>\n<h3>Hello title<\/h3>\n<p>Here is the content. You can change the background, content width, arrow position etc in the backend too.\n                      <\/p><\/div>\n                      <div class=\"cq-arrowborder-container\">\n                            <div class=\"cq-arrowborder1\"><\/div>\n                            <div class=\"cq-arrowborder2\"><\/div>\n                            <div class=\"cq-arrowborder3\"><\/div>\n                          <\/div><\/div><\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457879578485{padding-top: 100px !important;padding-bottom: 100px !important;background-color: #c8e6c9 !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div style=\"height:px;margin:;\" class=\"cq-imgwitharrow-container cq-imagewitharrow-largeround bottom \" data-color=\"#ffffff\" data-background=\"#967adc\" data-captionalign=\"bottom\" data-arrowtop=\"45%\" data-arrowleft=\"45%\" data-fontsize1=\"\" data-iwidth=\"65%\" data-iheight=\"60%\" data-twidth=\"35%\" data-theight=\"40%\" data-arrowsize=\"large\"><a href=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2015\/01\/IMG_9940b.jpg\" class=\"cq-lightbox\" rel=ga1><div class=\"cq-imgwitharrow-photo\" data-url=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2015\/01\/IMG_9940b.jpg\" style=\"height:60%;\"><\/div><\/a><div class=\"cq-imgwitharrow-box\" style=\"height:40%;\"><div class=\"cq-imgwitharrow-content\"><p class=\"cq-content\">\n                        <\/p>\n<h3 style=\"font-size: 1.3em;\">Lightbox support gallery<\/h3>\n<p>The lightbox image support image, you can specify the same gallery for the image in the backend editor. The text content can be in top, right, bottom or left.\n                      <\/p><\/div>\n                      <div class=\"cq-arrowborder-container\">\n                            <div class=\"cq-arrowborder1\"><\/div>\n                            <div class=\"cq-arrowborder2\"><\/div>\n                            <div class=\"cq-arrowborder3\"><\/div>\n                          <\/div><\/div><\/div>[vc_empty_space][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]<\/p>\n<h2><span style=\"color: #333; font-size: 1.4em;\">Top to bottom and rounded large<\/span><\/h2>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Si qua in iis corrigere voluit, deteriora fecit. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Duo Reges: constructio interrete.i[\/vc_column_text][\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457879403513{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #f5f7fa !important;}&#8221;][vc_column][vc_column_text]<\/p>\n<h2 style=\"font-size: 1.6em;\">In a full width demo<\/h2>\n<p>[\/vc_column_text]<div style=\"height:640px;margin:;\" class=\"cq-imgwitharrow-container cq-imagewitharrow-smallround top \" data-color=\"#ffffff\" data-background=\"#689f38\" data-captionalign=\"top\" data-arrowtop=\"45%\" data-arrowleft=\"48%\" data-fontsize1=\"1.2em\" data-iwidth=\"65%\" data-iheight=\"70%\" data-twidth=\"35%\" data-theight=\"30%\" data-arrowsize=\"large\"><a href=\"http:\/\/stopdesign.cn\/demo\/image-with-arrow\/\" target=\"\" title=\"Image with Arrow\"><div class=\"cq-imgwitharrow-photo\" data-url=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/11\/photo-1415226161018-3ec581fa733d-1600x1219.jpg\" style=\"height:70%;\"><\/div><\/a><div class=\"cq-imgwitharrow-box\" style=\"height:30%;\"><div class=\"cq-imgwitharrow-content\"><p class=\"cq-content\">\n                        Donec a laoreet purus. Maecenas iaculis porta imperdiet. Nullam sit amet est non augue accumsan sollicitudin sed vitae erat.\n                      <\/p><\/div>\n                      <div class=\"cq-arrowborder-container\">\n                            <div class=\"cq-arrowborder1\"><\/div>\n                            <div class=\"cq-arrowborder2\"><\/div>\n                            <div class=\"cq-arrowborder3\"><\/div>\n                          <\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1457879592464{padding-top: 100px !important;padding-bottom: 100px !important;background-color: #a0cecb !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div style=\"height:px;margin:;\" class=\"cq-imgwitharrow-container square left \" data-color=\"#ffffff\" data-background=\"#4fc1e9\" data-captionalign=\"left\" data-arrowtop=\"45%\" data-arrowleft=\"45%\" data-fontsize1=\"\" data-iwidth=\"60%\" data-iheight=\"100%\" data-twidth=\"40%\" data-theight=\"100%\" data-arrowsize=\"large\"><a href=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2015\/01\/IMG_6640b.jpg\" class=\"cq-lightbox\" ><div class=\"cq-imgwitharrow-photo\" data-url=\"https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2015\/01\/IMG_6640b.jpg\" style=\"width:60%;height:100%;\"><\/div><\/a><div class=\"cq-imgwitharrow-box\" style=\"width:40%;height:100%;\"><div class=\"cq-imgwitharrow-content\"><p class=\"cq-content\">\n                        Here is the content. You can change the background, content width, arrow position etc in the editor. Mauris ac lectus ut nullam.\n                      <\/p><\/div>\n                      <div class=\"cq-arrowborder-container\">\n                            <div class=\"cq-arrowborder1\"><\/div>\n                            <div class=\"cq-arrowborder2\"><\/div>\n                            <div class=\"cq-arrowborder3\"><\/div>\n                          <\/div><\/div><\/div>[vc_empty_space][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_column_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae porta justo, eget venenatis lectus. In hac habitasse platea dictumst. Integer a nisi ligula. Nullam at bibendum mi. Suspendisse lacinia lectus quis nulla aliquet, eu pretium ante fringilla.<\/p>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae porta justo, eget venenatis lectus. In hac habitasse platea dictumst. Integer a nisi ligula. Nullam at bibendum mi. Suspendisse lacinia lectus quis nulla aliquet, eu pretium ante fringilla.[\/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_1457879351496{padding-top: 100px !important;padding-bottom: 140px !important;background-color: #90caf9 !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_empty_space height=&#8221;24px&#8221;][\/vc_column_inner][vc_column_inner width=&#8221;1\/2&#8243;][vc_column_text] Updated after verstion 3.3.5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod cum dixissent, ille contra. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Ergo illi intellegunt quid [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/472"}],"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=472"}],"version-history":[{"count":10,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/472\/revisions"}],"predecessor-version":[{"id":2289,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/472\/revisions\/2289"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}