{"id":96,"date":"2018-03-24T08:07:42","date_gmt":"2018-03-24T08:07:42","guid":{"rendered":"https:\/\/www.loftocean.com\/fallsky\/?p=96"},"modified":"2018-05-06T08:52:21","modified_gmt":"2018-05-06T08:52:21","slug":"how-to-add-shortcodes-into-page-or-post-content","status":"publish","type":"post","link":"https:\/\/www.loftocean.com\/fallsky\/style\/how-to-add-shortcodes-into-page-or-post-content\/","title":{"rendered":"How to add shortcodes into page or post content"},"content":{"rendered":"<p>Please make sure the required plugin &#8220;Fallsky Extension&#8221; has been installed and activated on your site. The shortcodes are included in the required plugin.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm.png\" alt=\"\" width=\"2478\" height=\"160\" class=\"alignnone size-full wp-image-108\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm.png 2478w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-300x19.png 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-768x50.png 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-1024x66.png 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-360x23.png 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-480x31.png 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-720x46.png 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-960x62.png 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-1440x93.png 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/Screen-Shot-2018-05-06-at-4.46.27-pm-1200x77.png 1200w\" sizes=\"(max-width: 2478px) 100vw, 2478px\" \/><\/p>\n<p>Currently we have provided 12 shortcodes for content:<\/p>\n<ul>\n<li><strong>Author List<\/strong> &#8211; Display authors of your site. 5 layouts to choose from. And can show all authors or choose by name\/role.<\/li>\n<li><strong>Drop Caps<\/strong> &#8211; Style the first letter of a selected paragraph. 5 styles to choose from.<\/li>\n<li><strong>Highlights<\/strong> &#8211; Select some words to add marker pen highlight effect. 2 styles to choose from.<\/li>\n<li><strong>Tweet It<\/strong> &#8211; Select content and allow readers to tweet the sentence by one click. Selected content can be inline or a whole paragraph. But please keep it short because Twitter only allows 140 charcaters.<\/li>\n<li><strong>Row<\/strong> &#8211; Create column layouts on your pages\/posts. You need to wrap the column shortcodes within row shortcodes.<\/li>\n<li><strong>Column<\/strong> &#8211; Create column layouts on your pages\/posts. This shortcode allows to add a column into an existing row easily.<\/li>\n<li><strong>Button<\/strong> &#8211; Add buttons. 4 different sizes. Unlimted colors.<\/li>\n<li><strong>Divider Line<\/strong> &#8211; Add divider lines. You can choose line&#8217;s style, size and color.<\/li>\n<li><strong>Tabs<\/strong> &#8211; Create a single content area with multiple panels, each associated with a header in a list.<\/li>\n<li><strong>Tab<\/strong> &#8211; Add a single tab into an existing tabs block. You need to wrap the tab shortcodes within tabs shortcodes.<\/li>\n<li><strong>Accordions<\/strong> &#8211; Displays collapsible content panels for presenting information in a limited amount of space.<\/li>\n<li><strong>Accordion<\/strong> &#8211; Add a single accordion into an existing group of accordions. You need to wrap the accordion shortcodes within accordions shortcodes.<\/li>\n<\/ul>\n<p>To add shortcodes into content, when edit a post or a page, click on the <strong>Add Shortcode<\/strong> button above the editor.<\/p>\n<figure id=\"attachment_98\" aria-describedby=\"caption-attachment-98\" style=\"width: 1600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-98\" src=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button.jpg\" alt=\"\" width=\"1600\" height=\"404\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button.jpg 1600w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-300x76.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-768x194.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-1024x259.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-360x91.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-480x121.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-720x182.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-960x242.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-1440x364.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/add-shortcode-button-1200x303.jpg 1200w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption id=\"caption-attachment-98\" class=\"wp-caption-text\">Add Shortcode Button<\/figcaption><\/figure>\n<p>Then choose which shortcode you&#8217;d like to add in the popup panel, then choose which style of this shortcode you want to use.<\/p>\n<figure id=\"attachment_99\" aria-describedby=\"caption-attachment-99\" style=\"width: 1839px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-99\" src=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel.jpg\" alt=\"\" width=\"1839\" height=\"761\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel.jpg 1839w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-300x124.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-768x318.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-1024x424.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-360x149.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-480x199.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-720x298.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-960x397.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-1440x596.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-panel-1200x497.jpg 1200w\" sizes=\"(max-width: 1839px) 100vw, 1839px\" \/><figcaption id=\"caption-attachment-99\" class=\"wp-caption-text\">Shortcodes Panel<\/figcaption><\/figure>\n<p>For example, if you&#8217;d like to insert a shortcode of drop cap, you can select a paragraph, and then click on the <strong>&#8220;Add Shortcode&#8221;<\/strong> button to open the shortcodes panel, then click on <strong>&#8220;Drop Caps&#8221;<\/strong>, there you will see the options you can choose for a drop cap. Click on <strong>&#8220;Insert Shortcode&#8221;<\/strong> button to wrap the selected content with this shortcode.<\/p>\n<figure id=\"attachment_100\" aria-describedby=\"caption-attachment-100\" style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-100\" src=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings.jpg\" alt=\"\" width=\"1600\" height=\"999\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings.jpg 1600w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-300x187.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-768x480.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-1024x639.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-360x225.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-480x300.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-720x450.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-960x599.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-1440x899.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/shortcode-settings-1200x749.jpg 1200w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><figcaption id=\"caption-attachment-100\" class=\"wp-caption-text\">Shortcode settings &#8211; Drop Caps<\/figcaption><\/figure>\n<p>The shortcode for drop caps will look similar to this:<\/p>\n<figure id=\"attachment_101\" aria-describedby=\"caption-attachment-101\" style=\"width: 1535px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-101\" src=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example.jpg\" alt=\"\" width=\"1535\" height=\"171\" srcset=\"https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example.jpg 1535w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-300x33.jpg 300w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-768x86.jpg 768w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-1024x114.jpg 1024w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-360x40.jpg 360w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-480x53.jpg 480w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-720x80.jpg 720w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-960x107.jpg 960w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-1440x160.jpg 1440w, https:\/\/www.loftocean.com\/fallsky\/wp-content\/uploads\/sites\/8\/2018\/05\/dropcap-shortcode-example-1200x134.jpg 1200w\" sizes=\"(max-width: 1535px) 100vw, 1535px\" \/><figcaption id=\"caption-attachment-101\" class=\"wp-caption-text\">An example of the shortcode of drop cap.<\/figcaption><\/figure>\n<hr \/>\n<p><strong>Please note:<\/strong> most of the shortcodes have an opening tag and a close tag and text content needs to be put between them. Please see below:<\/p>\n<p><span style=\"color: #3366ff;\">[lo_drop_caps] Content goes here. [\/lo_drop_caps]<\/span><\/p>\n<p>Or,<\/p>\n<p><span style=\"color: #3366ff;\">[lo_button size=&#8221;large&#8221; url=&#8221;#&#8221;] Contact Us [\/lo_button]<\/span><\/p>\n<p>The shortcodes for <strong>Author List<\/strong> and <strong>Divider Line<\/strong> don&#8217;t have a close tag because you don&#8217;t need to add any text content for these 2 shortcodes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Please make sure the required plugin &#8220;Fallsky Extension&#8221; has been installed and activated on your site. The shortcodes are included in the required plugin. Currently we have provided 12 shortcodes for content: Author List &#8211; Display authors of your site. 5 layouts to choose from. And can show all authors or choose by name\/role. Drop [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-style"],"_links":{"self":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":3,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/posts\/96\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loftocean.com\/fallsky\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}