• spider-themes helpdesk logo Helpdesk
  • EazyDocs
  • SpiderThemes
Spider Themes Helpdesk Spider Themes Helpdesk
  • Home
  • Forums
    • All Forums
    • Docy – WordPress Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
    • Zoomy WordPress Theme
    • AMA WordPress Theme
  • Docs
    • All Docs
    • Docy WordPress Theme
    • EazyDocs Documentation Plugin
    • Docy Jekyll Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
  • Blog
Ask/Login
Spider Themes Helpdesk Spider Themes Helpdesk
Ask/Login
Spider Themes Helpdesk
  • Home
  • Forums
    • All Forums
    • Docy – WordPress Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
    • Zoomy WordPress Theme
    • AMA WordPress Theme
  • Docs
    • All Docs
    • Docy WordPress Theme
    • EazyDocs Documentation Plugin
    • Docy Jekyll Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
  • Blog
loading
  1. Home
  2. Docs
  3. Docy WordPress Theme
  4. Shortcodes and HTML Classes
  5. [direction] Shortcodes for Documentation
Updated on September 26, 2023

Docy

Docy WordPress Theme

  • Folder icon closed Folder open iconGetting Started
    • Server Requirements
    • Theme Installation
    • Plugins Installation
    • Demo Import
  • Folder icon closed Folder open iconDocy Options
    • Page Options
    • Theme Settings
  • Folder icon closed Folder open iconElementor
    • Explore the Docy Template Library
  • Folder icon closed Folder open iconTips / How To on Docy
    • How to create Changelogs
    • How to Edit the Footer
    • Updating The Theme
    • Optimize Images with Image Optimizer Plugins
    • Language Translations
    • How to create Sign in and Sign up pages
    • How to add description with menu item
  • Folder icon closed Folder open iconShortcodes and HTML Classes
    • CSS Helper Classes
    • [direction] Shortcodes for Documentation
    • Conditional Content [conditional_data]
    • [terms] Shortcode
  • Folder icon closed Folder open iconFrequently Asked Questions
    • How to Paginate a Post?
    • How to set the site’s favicon?
    • How to Change the Author’s Avatar?
    • How to update premium plugins?
    • How to apply custom CSS code.

[direction] Shortcodes for Documentation

Estimated reading: 1 minute 331 views Contributors

You may see some direction or steps highlighted on the theme doc demo pages like the one below.

We used the [direction] shortcode to render the design of the steps. Your shortcode could be Theme Options Header Top of Header Menu Element Use the > character as the direction separator icon. This character (>) will be replaced with an arrow-right icon by default.

You can change the icon with some custom CSS. See the code below-

.direction_step + .direction_step:before {
  content: "\35";
  font-family: eleganticons;
}

In this case, the content value represents the Elegant Icon code. Please note that you will not find the icon code directly on the Elegant Icon website.

To obtain the code, inspect the icon by right-clicking on it from their website and navigating to the CSS ::before CSS Pseudo-elements to locate the icon code. Check out the GIF below to see the process of inspecting and obtaining the icon code.

View post on imgur.com

Shortcodes and HTML Classes - Previous CSS Helper Classes Next - Shortcodes and HTML Classes Conditional Content [conditional_data]

Still stuck? How can we help?

How can we help?

A premium WordPress theme with integrated Knowledge Base, providing 24/7 community based support

Was this page helpful? Yes No

Leave a Comment Cancel reply

Share this Doc

[direction] Shortcodes for Documentation

Or copy link

Clipboard Icon
CONTENTS

Powered By EazyDocs

Leaf Illustration

This website is made with Docy