Shortcodes
1. Brief about shortcodes
When a shortcode is inserted in a WordPress post or page, it is replaced with some other content. In other words, we instruct WordPress to find the macro that is in square brackets [] and replace it with the appropriate dynamic content, which is produced by a PHP function.
2. Enable Jannah shortcodes
To let the shortcodes to be in action, you should install Jannah Extension plugin that comes with the theme for free. It's Required.
Go to Jannah > Install Plugins > Jannah Extensions plugin, and click on Activate.
3. Jannah Shortcodes
Jannah comes with a big variety of shortcodes that you always need them while editing process.
After installing the Jannah Extensions plugin, the TieLabs shortcode icons will appear as the following:
3.1 Block Editor (Gutenberg):
You can use Jannah - Shortcodes in the new Block Editor, by adding a Classic Editor Block
3.2 Classic Editor:
We’ll walk through what each of these shortcodes will do.
4. Shortcodes Overview
4.1 Boxes
Click on Box from the shortcodes menu, the popup window will appear
- Style - the box style, chose one from (Shadow, Info, Success, Warning, Error, Download, and Note).
- Alignment - Box Alignment left, right or center.
- Custom Class - if you want more customization by CSS, you can add a custom class and use it in your CSS file.
- Width - the width of the box, add the unit to the value e.g. 500px or 50%.
- Content - box content, your text goes here.
- After finishing, click on OK button to add the shortcode to the page content.
4.2 Buttons
Click on Button from the shortcodes menu, the popup window will appear
- Color - the button color, choose one from the available colors.
- Size - small, medium or Big.
- Link - the button link that will go to it.
- Text - the button text.
- Icon (use full Font Awesome name) - such as "fa fa-home", Font Awesome Cheatsheet
- Open the link in a new window/tab or open it in the same tab.
- Nofollow - "Nofollow" provides a way for webmasters to tell search engines "Don't follow this specific link." it's important for Untrusted content, Paid links and Crawl prioritization. More Info
- After finishing, click on OK button to add the button shortcode to your page content.
4.3 Tabs
Click on Tabs from the shortcodes menu, the popup window will appear
Choose the tabs style, Horizontal or Vertical then click on OK button to add the shortcode, the tabs shortcode will look like:
Replace the " Tab x Title" with your custom head title, and "Tab x | Your Content" with the tab content.
4.4 Toggle Boxes
Click on Toggle Box from the shortcodes menu, the popup window will appear
- Title - the toggle box title.
- State - the default toggle box state (opened or closed).
- Content - the toggle box content.
- after finishing, click on OK button.
4.5 Content Slideshow
Locate the cursor pointer in any place in the page content, then click on the Content Slideshow from the shortcodes menu
The content slideshow shortcode will be added in the place of the cursor pointer 
Put your content in each slide Instead of the Slide x | Your Content in the [tie_slide] Slide 1 | Your Content [/tie_slide].
By default, we add three slides for you, you can add more slides by copy and paste the slide code [tie_slide] Slide 1 | Your Content [/tie_slide] below of each [tie_slide]. Also, You can put any content you want, text, images, or video.
4.6 Author Bio
Click on Author Box from the shortcodes menu, the popup window will appear
- Title - the author bio box title (most often is the author name).
- Author Image URL - the full author image URL.
- Content - the author bio content.
- After finishing click on OK button to add the author bio shortcode to the page content.
4.7 Flickr
Click on Flickr from the shortcodes menu, the popup window will appear
- Account-ID - the account id, you can get it from http//idgettr.com.
- Number of Photos - the number of photos you want to display.
- Sorting - sort the photos by recent or random.
- After finishing click on OK button to add the Flickr shortcode to the page content.
4.8 Display Feeds
Click on Display Feeds from the shortcodes menu, the popup window will appear
- The feeds URL.
- The number of feeds you want to display.
- After finishing click on OK button to add the Feeds shortcode to the page content.
4.9 Tooltip
Click on Tooltip from the shortcodes menu, the popup window will appear
- Title - the text that you will hover over it to display the tooltip.
- Content - the text that will display in the tooltip bubble when you hover over the tooltip title.
- Direction - the tooltip direction, display on the top of the title, bottom, right, or left.
- After finishing click on OK button to add the tooltip shortcode to the page content.
4.10 Share Buttons
Click on Share Buttons from the shortcodes menu, the popup window will appear
- Check the buttons you want to display.
- Twitter Follow Button - show/hide the twitter follow button.
- Twitter Username - used by Twitter follow button. Also, will display the following button.
- After finishing click on OK button to add the shortcode to the page content.
4.11 Dropcap
Select the
4.12 Tags Cloud
- Locate the Cursor Pointer.
- Click on Tags Cloud from the shortcodes menu, the Tags Cloud shortcodes will be added, as the following
4.13 Highlight Text
Locate the cursor pointer at the place you want to add the highlighted text and then Click on Highlight Text from the shortcodes menu, the popup window will appear
- Color - choose the highlight color.
- Text - the text that will be in the highlight color.
- After finishing click on OK button to add the shortcode to the page content.
4.14 Padding
If you want to take some paddings for some of the content paragraphs, you can do that. You can control the padding Left/Right Values.
Click on Padding from the shortcodes menu, the popup window will appear
- Padding left amount, you can specify the amount by one of the CSS measurements units.
- Padding right amount.
- After finishing click on OK button to add the shortcode to the page content.
4.15 Divider Line
Click on Divider Line from the shortcodes menu, the popup window will appear
- Style - choose the style of the divider line, Solid, Dashed, Normal, Double, or Dotted.
- Margin Top/Bottom - the margin space above/below the line.
- After finishing click on OK button to add the shortcode to the page content.
4.16 Lists
Locate the cursor pointer at the place you want to add the list, from the shortcodes menu select Lists → choose the list type, the list shortcodes will be added as the following:
tack more space between the opening and closing shortcode tags as the following: 
and then click on the Bulleted list 
then add the menu items: 
4.17 Restrict Content
Select the content that you want to restrict for registered or guests only, from the shortcodes menu select Restrict Content → choose Registered or Gusts, the shortcode will be added around the content that you selected as the following:
Now, this line " Register on our site to get our new updates" will be displayed for Guests only. Also, you can restrict some of the content for Registered users only.
4.18 Columns
Click on Columns from the shortcodes menu and choose the layout you want, Jannah offers 9 columns layouts.
After clicking on the layout you want, the shortcode will be added to the place that you refer to by the cursor pointer as the following:
Then add your content instead of Add Content here statement in each column.
4.19 Google Maps
Locate the cursor pointer at the place you want to add the map, Click on Google Maps from the shortcodes menu, the popup window will appear
Enter the Google Maps URL, more info about getting the map URL
4.20 Video
Click on Video from the shortcodes menu, the popup window will appear
- Video URL - the full video URL.
- Video width.
- Video height.
- After finishing click on OK button to add the shortcode to the page content.
4.21 Audio
Click on Audio from the shortcodes menu, the popup window will appear
Enter the MP3 or M4A or OGG file at the place that you refer to by the cursor pointer.
4.22 Lightbox
Click on Lightbox from the shortcodes menu, the popup window will appear
- Full Image or Youtube/Vimeo Video URL.
- Title - will appear at the bottom of the opened lightbox model.
- Content - the links text, when clicking on it the lightbox will be opened.
- After finishing, click on OK button to add the shortcode to the page content.
4.23 Quote
Click on Quote from the shortcodes menu, the popup window will appear
- Content - the quote content.
- Alignment - the quote alignment, Left, Right, or Center.
- Author - the quote author, will appear at the bottom of the quote.
- Style - the quote style, Dark, Light, or Simple.
4.24 Login Form
Click on Login Form from the shortcodes menu, the login shortcode will be added as the following image
4.25 Fullwidth Image
Click on Fullwidth Image from the shortcodes menu, the Fullwidth image shortcode will be added as the following
Then put the cursor pointer after the opening tag [tie_full_img] and upload the image by clicking on Add Media button, upload a new image or select one from existing images.
4.26 Content Index
Content Index Shortcode is one of the coolest features that Jannah comes with, For more info check this article