{"id":52097,"date":"2015-08-11T04:11:09","date_gmt":"2015-08-11T08:11:09","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=52097"},"modified":"2017-07-31T06:30:15","modified_gmt":"2017-07-31T10:30:15","slug":"cherryframework-4-how-to-use-shortcodes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-use-shortcodes.html","title":{"rendered":"CherryFramework 4. How to use shortcodes"},"content":{"rendered":"

This tutorial shows how to use shortcodes in CherryFramework 4.<\/p>\r\nCherryFramework 4. How to use shortcodes<\/a>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n

CherryFramework 4 allows extended possibilities for working with shortcodes. Shortcodes can be used for both posts and pages. Click ‘Insert Shortcode’ <\/strong>button on top to create one: <\/p>\r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_1\"<\/a>\r\n\r\n

This will open a list of available shortcodes. Feel free to use ‘Search for shortcodes’<\/strong> field on top: type the shortcode title there if you remember it. ‘Filter by type’<\/strong> allows selecting required shortcodes depending on the content type.<\/p>\r\n\r\n

They are divided into few sections for more convenient usage. These are Grid, Typography, Content, Media, Components<\/strong> and others<\/strong>:\r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_2\"<\/a>\r\n<\/p>\r\n

    \r\n
  1. \r\n

    Grid<\/strong> – used to display containers and elements of column formatting and to display grids;<\/p><\/li>\r\n

  2. \r\n

    Typography<\/strong> – sets up the elements of layout formatting;<\/p><\/li>\r\n

  3. \r\n

    Content<\/strong> – shows up elements of interface formatting;<\/p><\/li>\r\n

  4. \r\n

    Media, Components<\/strong> – used for additional content elements;<\/p><\/li>\r\n

  5. \r\n

    Other<\/strong> – used for subsidiary elements of content advanced management.<\/p><\/li>\r\n<\/ol>\r\n

    When selecting any shortcode type from the list, you’ll get the extended form to fill in. The form differs for various shortcode types, though you can still find some common options. They are Presets, Last Used Settings <\/strong>(if you have already used this type of the shortcode before), Live Preview,<\/strong> and Insert Shortcode<\/strong>: \r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_3\"<\/a>\r\n<\/p>\r\n

    Once you fill in the fields for the shortcode, click the ‘Live Preview’<\/strong> button in the bottom to see the way it looks. Edit shortcode options if not satisfied with the temporary result: \r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_4\"<\/a>\r\n<\/p>\r\n

    You might need exactly the same shortcode for the future modifications. Use the Presets<\/strong> option. This avoids generation of the same shortcode settings for future editing. Hover over the ‘Presets’ <\/strong>button and press ‘Save current settings as preset’<\/strong>. Create a list of various presets with this option to use in future for other posts\/pages: \r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_5\"<\/a>\r\n<\/p>\r\n

    Click ‘Insert Shortcode’ <\/strong>button in the bottom once completed with changes. This will generate a shortcode line and will put it to the page\/post content: \r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_6\"<\/a>\r\n<\/p>\r\n

    If you need to edit the created shortcode line after inserting that to a page\/post, highlight this shortcode line, press ‘Insert Shortcode’ <\/strong>button, and select the same shortcode type from the list<\/strong>. Then hover over Presets > Last used settings <\/strong>and modify those. Insert shortcode to the page, this will update already created one with new settings: \r\n\r\n\"CherryFramework_4_How_to_use_shortcodes_7\"<\/a>\r\n<\/p>\r\n

    CherryFramework 4 allows creating various types of shortcodes; these are rows, columns, boxes, posts, lists, tabs, portfolios<\/strong> and others. New items have been added \u2013 swiper carousel, lazy local effect, follow, counter and others<\/strong>. Now you can use color picker, icon picker (for FontAwesome icons), set up layout for different screen views (extra small devices, small devices, medium devices, and large screens), specify thumbnail dimensions, and others within shortcode options directly. <\/p>\r\n

    Please, check the documentation of the CherryFramework 4 <\/a>for more details on using specific shortcodes and their options. <\/p>\r\n\r\n

    Feel free to check detailed video tutorial below on how to use above described options and specific shortcode types:<\/p>\r\n\r\nCherryFramework 4. How to use shortcodes<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial shows you how to use shortcodes in CherryFramework 4.<\/p>\n","protected":false},"author":66,"featured_media":52106,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[2012,1415,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52097"}],"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\/66"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=52097"}],"version-history":[{"count":3,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52097\/revisions"}],"predecessor-version":[{"id":82326,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52097\/revisions\/82326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/52106"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=52097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=52097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=52097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}