{"id":378,"date":"2014-06-18T13:27:18","date_gmt":"2014-06-18T13:27:18","guid":{"rendered":"http:\/\/stopdesign.cn\/codecanyon\/vc-extensions\/?page_id=378"},"modified":"2016-03-13T16:29:59","modified_gmt":"2016-03-13T16:29:59","slug":"figure-navigation","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/figure-navigation\/","title":{"rendered":"Figure Navigation"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row css=&#8221;.vc_custom_1457886596353{padding-bottom: 40px !important;}&#8221;][vc_column]<div class=\"cq-figure-cover\" style=\"width:\" data-buttonwidth=\"90%\" data-contentwidth=\"90%\" data-blockmargintop=\"\" data-itemheight=\"480\" data-mintemwidth=\"240px\" data-displaynum=\"1\" data-bordercolor=\"#87cefa\"><div class=\"cq-figure-item\" style=\"text-align:center;min-width:240px;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/purty_wood.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #87cefa;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/7455324282_392e39d42e_h_d-560x400.jpg);background-size:cover\"><\/figure><div class=\"handle \" style=\"color:;\"><span class=\"label\">1<\/span><\/div><div class=\"cq-figure-content\">\n<ul>\n<li>I am Content text 1. Edit the content in the setting.<\/li>\n<li>You can put the VC button here. [vc_button2 title=&#8217;My Profile&#8217; style=&#8217;outlined&#8217; color=&#8217;pink&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8217;]<\/li>\n<\/ul>\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Hello title 1<\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:center;min-width:240px;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/purty_wood.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #87cefa;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/8681566188_e700243aa8_h_d-560x400.jpg);background-size:cover\"><\/figure><div class=\"handle \" style=\"color:;\"><span class=\"label\">2<\/span><\/div><div class=\"cq-figure-content\">Yet another text block, you can use this add-on as a price table. You can customize to display which block by default in the backend.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;rounded&#8217; color=&#8217;blue&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8217;]\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Hello title 2<\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:center;min-width:240px;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/purty_wood.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #87cefa;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/2780009495_c592d5146f_b_d-560x400.jpg);background-size:cover\"><\/figure><div class=\"handle \" style=\"color:;\"><span class=\"label\">3<\/span><\/div><div class=\"cq-figure-content\">You can select the figure background color, figure font color, customize the border color, block background, each button&#8217;s margin-top etc in the setting.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;3d&#8217; color=&#8217;vista_blue&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||target:%20_blank&#8217;]\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Hello title 3<\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:center;min-width:240px;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/purty_wood.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #87cefa;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/2381995332_912121fcda_b_d-560x400.jpg);background-size:cover\"><\/figure><div class=\"handle \" style=\"color:;\"><span class=\"label\">4<\/span><\/div><div class=\"cq-figure-content\">Text block 4, you&#8217;ll notice that there is no title and description for this.<\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1457886522664{padding-top: 20px !important;padding-bottom: 20px !important;}&#8221;][vc_column]<div class=\"cq-figure-cover\" style=\"width:80%\" data-buttonwidth=\"90%\" data-contentwidth=\"90%\" data-blockmargintop=\"\" data-itemheight=\"480\" data-mintemwidth=\"240\" data-displaynum=\"1\" data-bordercolor=\"#663399\"><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:#5b5b5b;background:#727272 url() \"\" data-btnmargintop=\"12px\" data-bgcolor=\"#EEDD82\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #663399;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/03\/4188554513_c5edb4a845_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle pink\" style=\"color:;\"><span class=\"label\">i<\/span><\/div><div class=\"cq-figure-content\">\n<ul>\n<li>I am Content text 1. Edit the content in the setting.<\/li>\n<li>You can put the VC button here. [vc_button2 title=&#8217;My Profile&#8217; style=&#8217;outlined&#8217; color=&#8217;pink&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8217;]<\/li>\n<\/ul>\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:#5b5b5b;\">Different color<span style=\"font-size:;color:#5b5b5b;\">Each block<\/span><\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:#5b5b5b;background:#727272 url() \"\" data-btnmargintop=\"20px\" data-bgcolor=\"#D8BFD8\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #663399;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/03\/3779566018_d83c04941a_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle pink\" style=\"color:;\"><span class=\"label\">ii<\/span><\/div><div class=\"cq-figure-content\">Yet another text block, you can use this add-on as a price table. You can customize to display which block by default in the backend.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;rounded&#8217; color=&#8217;blue&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8217;]\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:#5b5b5b;\">I'm title 2<span style=\"font-size:;color:#5b5b5b;\">Description 2<\/span><\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:#5b5b5b;background:#727272 url() \"\" data-btnmargintop=\"8px\" data-bgcolor=\"#B0E0E6\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #663399;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/03\/3336545581_1575e468bb_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle pink\" style=\"color:;\"><span class=\"label\">iii<\/span><\/div><div class=\"cq-figure-content\">You can select the figure background color, figure font color, customize the border color, block background, each button&#8217;s margin-top etc in the setting.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;3d&#8217; color=&#8217;vista_blue&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||target:%20_blank&#8217;]<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:#5b5b5b;\">Hello title 3<\/h4><\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<strong>Features:<\/strong><\/p>\n<ul>\n<li>Optional figure label, background, color, border color, title, description and font size etc.<\/li>\n<li>Support other VC shortcode, for example you can put the VC buttons inside the content.<\/li>\n<li>Optional background image for each block, you can choose the image repeat or not.<\/li>\n<li>Optional header image and image size.<\/li>\n<li><strong>Retina<\/strong>, you can choose to display the header image in retina or not.<\/li>\n<li>Optional block height, block background.<\/li>\n<li>Block width depends on the container width and item number, for example, if set the container to 90% width, there are 3 blocks in it, each block will be in 30% width.<\/li>\n<li>Optional display which block by default.<\/li>\n<li>Extend the Visual Composer, work fine with the VC in a theme or as a plugin.<\/li>\n<\/ul>\n<p>And more demos below:[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1457886544808{padding-top: 40px !important;}&#8221;][vc_column]<div class=\"cq-figure-cover\" style=\"width:\" data-buttonwidth=\"90%\" data-contentwidth=\"90%\" data-blockmargintop=\"\" data-itemheight=\"480\" data-mintemwidth=\"240\" data-displaynum=\"1\" data-bordercolor=\"#dd4b16\"><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/giftly.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #dd4b16;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/5101510772_b44fd3cf17_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle orange\" style=\"color:#ffffff;\"><span class=\"label\">D<\/span><\/div><div class=\"cq-figure-content\">\n<ul>\n<li>I am Content text 1. Edit the content in the setting.<\/li>\n<li>You can put the VC button here.\u00a0[vc_button2 title=&#8221;My profile&#8221; color=&#8221;green&#8221; size=&#8221;md&#8221; link=&#8221;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8221;]<\/li>\n<\/ul>\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Different background<span style=\"font-size:;color:;\">Hello Description 1<\/span><\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/giftly.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #dd4b16;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/03\/2540078331_263003388f_b-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle orange\" style=\"color:#ffffff;\"><span class=\"label\">A<\/span><\/div><div class=\"cq-figure-content\">Yet another text block, you can use this add-on as a price table. You can customize to display which block by default in the backend.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;rounded&#8217; color=&#8217;violet&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8217;]\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Alice <span style=\"font-size:;color:;\">Web Designer<\/span><\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/giftly.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #dd4b16;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/03\/4188554513_c5edb4a845_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle orange\" style=\"color:#ffffff;\"><span class=\"label\">T<\/span><\/div><div class=\"cq-figure-content\">You can select the figure background color, figure font color, customize the border color, block background, each button&#8217;s margin-top etc in the setting.[vc_button2 title=&#8217;Text on the button&#8217; style=&#8217;3d&#8217; color=&#8217;vista_blue&#8217; size=&#8217;md&#8217; link=&#8217;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||target:%20_blank&#8217;]\n<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">The dog<span style=\"font-size:;color:;\">Hello Description 3<\/span><\/h4><\/div><div class=\"cq-figure-item\" style=\"text-align:;min-width:240;color:;background: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/06\/giftly.png) \"\" data-btnmargintop=\"\" data-bgcolor=\"\" data-fontcolor=\"\"><figure class=\"cq-figure\" style=\"border-bottom:4px solid #dd4b16;background-image: url(https:\/\/stopdesign.cn\/demo\/wp-content\/uploads\/2014\/04\/2381995332_912121fcda_b_d-640x480.jpg);background-size:cover\"><\/figure><div class=\"handle orange\" style=\"color:#ffffff;\"><span class=\"label\">H<\/span><\/div><div class=\"cq-figure-content\">Text block 4, lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.[vc_button2 title=&#8221;Text on the button&#8221; color=&#8221;blue&#8221; size=&#8221;md&#8221; link=&#8221;url:http%3A%2F%2Fcodecanyon.net%2Fuser%2Fsike%3Fref%3Dsike||&#8221;]<\/div><h4 class=\"cq-figure-title\" style=\"font-size:;color:;\">Hello title<\/h4><\/div><\/div>[\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1457886596353{padding-bottom: 40px !important;}&#8221;][vc_column][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1457886522664{padding-top: 20px !important;padding-bottom: 20px !important;}&#8221;][vc_column][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]Features: Optional figure label, background, color, border color, title, description and font size etc. Support other VC shortcode, for example you can put the VC buttons inside the content. Optional background image for each block, you can choose the image repeat or not. Optional header image and [&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\/378"}],"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=378"}],"version-history":[{"count":8,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/378\/revisions"}],"predecessor-version":[{"id":2354,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/378\/revisions\/2354"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}