{"id":14878,"date":"2021-03-17T10:56:22","date_gmt":"2021-03-17T10:56:22","guid":{"rendered":"https:\/\/helpdesk.spider-themes.net\/docs\/docy-wordpress-theme\/using-shortcodes\/direction\/"},"modified":"2021-03-17T10:56:22","modified_gmt":"2021-03-17T10:56:22","slug":"direction","status":"publish","type":"docs","link":"https:\/\/landpagy.twixxer.com\/index.php\/docs\/docy-wordpress-theme\/using-shortcodes\/direction\/","title":{"rendered":"[direction]"},"content":{"rendered":"\r\n<p>You may see some direction or steps highlighted on the theme doc demo pages as like the below screenshot.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/docs.creativegigs.net\/wp-content\/uploads\/2021\/03\/image-3-1024x576.png\" alt=\"\" class=\"wp-image-3003\"\/><\/figure>\r\n\r\n\r\n\r\n<p>We used the [<code>direction<\/code>] shortcode to render the design of the steps. Your shortcode could be [direction]Theme Options &gt; Header &gt; Top of Header &gt; Menu Element[\/direction]  Use the &gt; character as the direction separator icon. This character (&gt;) will be replaced with an arrow-right icon by default.<\/p>\r\n\r\n\r\n\r\n<p>You can change the icon with some custom CSS. See the code below-<\/p>\r\n\r\n\r\n\r\n<pre class=\"wp-block-code\"><code>.direction_step + .direction_step:before {\r\n  content: \"\\35\";\r\n  font-family: eleganticons;\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n<p>\u200bHere the content value is the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.elegantthemes.com\/blog\/resources\/elegant-icon-font\" target=\"_blank\">Elegant Icon<\/a>\u200b&nbsp;code. You would not find the icon code directly on the Elegant Icon&#8217;s website. Inspect the icon by right-clicking on it from&nbsp;their website. Then navigate to the CSS ::before&nbsp;CSS Pseudo-elements&nbsp;to see the icon code. Watch the below GIF to see the process of inspection and taking of the icon code.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-embed is-type-rich is-provider-imgur wp-block-embed-imgur\"><div class=\"wp-block-embed__wrapper\">\r\nhttps:\/\/i.imgur.com\/7zac94t.gif\r\n<\/div><\/figure>\r\n\r\n\r\n\r\n<p> <\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>You may see some direction or steps highlighted on the theme doc demo pages as like the below screenshot. We used the [direction] shortcode to render the design of the steps. Your shortcode could be [direction]Theme Options &gt; Header &gt; Top of Header &gt; Menu Element[\/direction] Use the &gt; character as the direction separator icon. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":14877,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-14878","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/docs\/14878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/comments?post=14878"}],"version-history":[{"count":0,"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/docs\/14878\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/docs\/14877"}],"wp:attachment":[{"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/media?parent=14878"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/landpagy.twixxer.com\/index.php\/wp-json\/wp\/v2\/doc_tag?post=14878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}