{"id":830,"date":"2019-01-21T01:59:27","date_gmt":"2019-01-21T01:59:27","guid":{"rendered":"https:\/\/faststartblog.com\/demos\/bold\/?page_id=830"},"modified":"2025-06-11T12:43:11","modified_gmt":"2025-06-11T12:43:11","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/faststartblog.com\/demos\/bold\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"\n<h3>\n\t\t\tShortcodes Examples\t<\/h3>\n\t<p>Shortcodes are small snippets of code that you can use to quickly add buttons, info boxes, tabs, accordions, and more, to your posts or pages. Don&#8217;t worry&#8230; you won&#8217;t have to know anything about coding to do this.<\/p>\n<p>Your blog post or page editor has a button that looks like this at the top of your text editor:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/faststartblog.com\/demos\/bold\/wp-content\/uploads\/2025\/05\/CleanShot-2025-05-30-at-08.54.19.png\" alt=\"\" width=\"150\" height=\"47\" \/><\/p>\n<p>Click on that, and you&#8217;ll get dozens of elements to choose from. You can customize many of them to match your site colors and branding. The examples below are just a very few of what&#8217;s actually available to you.<\/p>\n<strong>Buttons<\/strong>:<br \/>\n<a href=\"https:\/\/faststartblog.com\/demos\/bold\" class=\"su-button su-button-style-default\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:7px\" target=\"_self\"><span style=\"color:#FFFFFF;padding:0px 20px;font-size:16px;line-height:32px;border-color:#6cadf4;border-radius:7px;text-shadow:none\"> Button text<\/span><\/a>\n<hr \/>\n<strong>Animated Text<\/strong>:<br \/>\n<div class=\"su-animate\" style=\"opacity:0;-webkit-animation-duration:1s;-webkit-animation-delay:1.5s;animation-duration:1s;animation-delay:1.5s;\" data-animation=\"bounceIn\" data-duration=\"1\" data-delay=\"1.5\">Animated content<\/div>\n<hr \/>\n<strong>Tabs<\/strong>:<br \/>\n<div class=\"su-tabs su-tabs-style-default su-tabs-mobile-stack\" data-active=\"1\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-tabs-nav\"><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Tab name<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Tab name<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Tab name<\/span><\/div><div class=\"su-tabs-panes\"><div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Tab name\">Tab content<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Tab name\">Tab content<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Tab name\">Tab content<\/div><\/div><\/div>\n<hr \/>\n<strong>Accordion<\/strong>:<br \/>\n<div class=\"su-accordion su-u-trim\"><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Spoiler title<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Hidden content<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Spoiler title<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Hidden content<\/div><\/div>\n<div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Spoiler title<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">Hidden content<\/div><\/div><\/div>\n<hr \/>\n<strong>Highlighted Text<\/strong>:<br \/>\n<span class=\"su-highlight\" style=\"background:#ddff99;color:#000000\">&nbsp;Highlighted text&nbsp;<\/span>\n<hr \/>\n<strong>Quote<\/strong>:<br \/>\n<div class=\"su-quote su-quote-style-default su-quote-has-cite\"><div class=\"su-quote-inner su-u-clearfix su-u-trim\">&#8220;Continuous improvement is better than delayed perfection.&#8221;<span class=\"su-quote-cite\">100 Simple Truths<\/span><\/div><\/div>\n<hr \/>\n\n","protected":false},"excerpt":{"rendered":"<p>Shortcodes Examples Shortcodes are small snippets of code that you can use to quickly add buttons, info boxes, tabs, accordions, and more, to your posts or pages. Don&#8217;t worry&#8230; you won&#8217;t have to know anything about coding to do this. Your blog post or page editor has a button that looks like this at the&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"tpl-sidebar.php","meta":{"footnotes":""},"class_list":["post-830","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/pages\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":18,"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/pages\/830\/revisions"}],"predecessor-version":[{"id":33085,"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/pages\/830\/revisions\/33085"}],"wp:attachment":[{"href":"https:\/\/faststartblog.com\/demos\/bold\/wp-json\/wp\/v2\/media?parent=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}