{"id":10251,"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:\/\/speedara.org\/?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         <span class=\"direction_steps\">\r\n            <span class=\"direction_step\">Theme Options &gt; Header &gt; Top of Header &gt; Menu Element<\/span>        <\/span>\r\n          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\n<blockquote class=\"imgur-embed-pub\" lang=\"en\" data-id=\"7zac94t\"><a href=\"https:\/\/imgur.com\/7zac94t\">View post on imgur.com<\/a><\/blockquote><script async src=\"\/\/s.imgur.com\/min\/embed.js\" charset=\"utf-8\"><\/script>\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 Use the &gt; character as the direction separator icon. This character (&gt;) will be replaced with an arrow-right icon by [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":10250,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-10251","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/docs\/10251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/speedara.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10251"}],"version-history":[{"count":0,"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/docs\/10251\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/speedara.org\/index.php?rest_route=\/wp\/v2\/docs\/10250"}],"wp:attachment":[{"href":"https:\/\/speedara.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10251"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/speedara.org\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_tag&post=10251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}