{"id":72651,"date":"2016-07-01T09:21:49","date_gmt":"2016-07-01T13:21:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=72651"},"modified":"2017-08-09T06:08:57","modified_gmt":"2017-08-09T10:08:57","slug":"cherryframework-4-how-to-use-tabs-shortcode","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-use-tabs-shortcode.html","title":{"rendered":"CherryFramework 4. How to use Tabs shortcode"},"content":{"rendered":"<p>This tutorial shows how to use Tabs shortcode in CherryFramework 4 themes.<\/p>\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/zEKd8GVANGo\"><\/iframe>\r\n<\/div>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<ol>\r\n\t<li><p>In order to insert shortcode into the page, use the <strong>Insert Shortcode<\/strong> button in <strong>Page<\/strong> or <strong>Post editor<\/strong> of WordPress Dashboard.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_1-300x169.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72652\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li><p>Then, select <strong>Tabs<\/strong> shortcode.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_2-300x120.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_2\" width=\"300\" height=\"120\" class=\"alignnone size-medium wp-image-72653\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_2-300x120.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_2-150x60.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_2.jpg 992w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t<p>It includes the following options:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_3-300x169.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_3\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-72654\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_3-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_3-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_3.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t<ol>\r\n\t\t\t<li><p><strong>Style<\/strong> &#8211; choose style for these tabs.<\/p><\/li>\r\n\t\t\t<li><p><strong>Active tab<\/strong> &#8211; select which tab is opened by default.<\/p><\/li>\r\n\t\t\t<li><p><strong>Vertical<\/strong> &#8211; shows tabs vertically.<\/p><\/li>\r\n\t\t\t<li><p><strong>Class<\/strong> &#8211; extra CSS class.<\/p><\/li>\r\n\t\t\t<li><p><strong>Content<\/strong> &#8211; the content of tabs.<\/p><\/li>\r\n\t\t<\/ol>\r\n\t<\/li>\r\n\t<li><p>After doing this, press the <strong>Insert shortcode<\/strong> button.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_4-300x116.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_4\" width=\"300\" height=\"116\" class=\"alignnone size-medium wp-image-72655\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_4-300x116.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_4-150x58.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_4.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li><p>In order to add another shortcode within a tab, insert your content between <strong>[cherry_tab][\/cherry_tab]<\/strong> elements like the following:<\/p>\r\n\t\t<pre>[cherry_tab title=\"All\"]\r\n[cherry_services limit=\"4\" order=\"desc\" orderby=\"modified\" categories=\"default\" size=\"monstroid-thumb-475x300\" order_button_text=\"Buy Now!\" col_xs=\"12\" col_sm=\"6\" col_md=\"3\" col_lg=\"3\" template=\"template-1.tmpl\"][\/cherry_services]\r\n[\/cherry_tab]<\/pre>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_5-300x134.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_5\" width=\"300\" height=\"134\" class=\"alignnone size-medium wp-image-72656\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_5-300x134.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_5-150x67.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_5.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n\t<li><p>Press the <strong>Update<\/strong> button to save changes and refresh your website.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_6-192x300.jpg\" alt=\"cherryframework_4._how_to_use_tabs_shortcode_6\" width=\"192\" height=\"300\" class=\"alignnone size-medium wp-image-72657\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_6-192x300.jpg 192w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_6-96x150.jpg 96w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/07\/cherryframework_4._how_to_use_tabs_shortcode_6.jpg 323w\" sizes=\"(max-width: 192px) 100vw, 192px\" \/><\/a>\r\n\t<\/li>\r\n<\/ol>\r\n<p>That is the end of the tutorial. Now you know how to use Tabs shortcode in CherryFramework 4 templates.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=zEKd8GVANGo?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 4. How to use Tabs shortcode<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to use Tabs shortcode in CherryFramework 4 themes.<\/p>\n","protected":false},"author":106,"featured_media":72658,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,1415,1462],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72651"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=72651"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72651\/revisions"}],"predecessor-version":[{"id":82625,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/72651\/revisions\/82625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/72658"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=72651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=72651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=72651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}