Installation Requirements
To install Sanabel Wrodpress theme, you need:
- Wordperss 3.5 or higher.
- Running webserver and working version of WordPress installed.
- PHP and MySQL Installed on the server.
- Purchasing Sanabel theme licence from Themeforest.
How To Install Sanabel
Now we assume that you already have WordPress installed and working on your server and you have Sanabel package you purchased from Themeforest, if you didn’t have WordPress Site working yet, we advice you to follow this page which has been provided by WordPress to show you installation process details. if you already has it installed so it’s time to start installing Sanabel, simply choose one of the following 2 ways to install the theme.
Install Via WordPress Control Panel
- Download the package you purchased from Themeforest, and extract the .zip in your computer.
- Login to your WordPress control panel and click on the „Appearance“ tab then go to „Themes“ page.
- From the top of the page click on „Add New“ button then click on „Upload Theme“.
- Choose sanabel.zip file from your computer and click „Install Now“.
- After theme installation complete click „Activate The Theme“ and now theme should be ready to work.
Uploading Via FTP
- Download the package you purchased from Themeforest, and extract the .zip in your computer.
- Use FTP client to access your WordPress installation directory.
- Now you need to extract sanabel.zip file in your computer.
- Then upload the entire folder sanabel to this path inside WordPress installation ‚wp-content/themes‘.
- From WordPress control panel go to „Appearance“ then „Themes“ and you will find sanabel theme in the listed themes
- Click „Activate“ and now theme should be ready to work.
Installing Recommended Plugins
After installing and activating the theme, you have to install some plugins to complete the power of Sanabel and get the most of it, just after activating you will get a notification to begin installing plugins, some of plugins are required and others are optional, but we recommend you to install all of them if you want your site to work as our demo site. to install plugins:
- Click on „Begin Installing Plugins“.
- Check all plugins from the list.
- Then from „Bulk Actions“ box select „Install“ then click „Apply“.
- Plugins will take a while to be installed and required plugins will get activate automatically.
- Now click on „Return to Required Plugins Installer“ to see plugins needing activation manually.
- Check all of them then select „Activate“ from „Bulk Actions“ box.
- Click „Apply“ and now Sanabel is ready to use.
Importing Demo Content
Sanabel offers multi demo concepts, if you don’t want to create your own style and want to use one of Sanabel demos to start from, you can easily import all content from any demo you like, you don’t need to install plugins or upload files to your site, you can get everything done and managed for you by just one click.
- From your WordPress control panel and click on the „Appearance“ tab then go to „Theme Options“ page.
- From the left tabs navigate to „Import Demo Sites“ tab.
- Below the demo you want to import click „Import Demo Content“ and wait for minutes to get everything imported.
Using Sanabel Options
Sanabel has is a scalable theme with powerfull ways to customize the page, you can set some primary options to work across all pages of your website, and you can also set unique options for specific pages, now we will help you understand how do Sanabel options work.
Theme Options Sections
Theme Options should be your first page after you activate sanabel, Sanabel has an advanced theme options panel with powerfull options to help you customize your site the way you want it to be, from WordPress control panel go to „Appearance“ then „Theme Options“ so you can change every aspect of the page, upload your own logo and images and change colors and fonts, any option you set from this option panel will work in all pages in your site, of you want to set different options for specific pages, you can do this by change the options from the page it self.
- Header Settings: In this section you can customize your header, upload your site logo and favicon, select header appearance and style and functionality, and you can add additional code or css to header.
- Spaces & Sizes Settings: After uploading your own logo and customizing the header, you will need to changed spaces, margins and paddings to make the site looks perfect for you, this section helps you to manage header and elements spaces.
- Footer Settings: Here you can select your footer layout and style, show or hide footers, and add your site copyright text, you can also add any tracking code to site footer.
- Posts Settings: This section contains blog page and blog posts options, you can change blog page style and resize posts thumbnails and you can show or hide any part of blog post.
- Pages Settings: In this section you can select which elements to show by default when you create now page.
- Portfolio Settings: Anything related to portfolio page and projects will be under this tab, you can change your portfolio main style and select which features to show in projects.
- Sidebars Settings: Sanabel has native sidebars for posts, pages and footer, if you want to register new sidebar so you can use it in specific page or post, you can add it here.
- Posts Icons Settings: Every blog post format has a unique icon, this section will help you style your icons, change them or switch them off.
- Social Settings: Here you can add your social profiles links, and some important data to make your site works good with Facebook, Twitter and Google Maps.
- Layout Settings: Here you can change the default layout options, make your site boxed or fluid and change the grid size and default sidebar position.
- Fonts: In this section you can change to used font for 4 main parts of your site, we only added 4 parts because more fonts means heavy load and bad typography in your site.
- Typography: Here you can change the typography of any part of your site, every part has an option to change font-size line-height font-style and color.
- Styling Settings: Any thing related to backgrounds colors will be under this tab, you can change the colors of any part in your theme.
- Borders Colors Settings: If you modified theme colors you may find that some borders is no more suitable for the design, so you can change borders in this section.
- Backgrounds: Here you can add background images or patterns to your site, and change the background of some sections.
- Import Demo Sites: In this tab you can import any of our predefined demo sites.
- Backup Options: Here you can backup your current options in case you lost or modified them and want to bring them back.
How Options Work
Since options names in this panel are clear enough to understood, we will just explain some of them, and if you have any problem understanding or using them, please feel free to contact us anytime.
- Retina Logo: you need a retina logo to make your logo looks sharp and clean on retina devices, it’s same to your default logo but with double size, for example, if your logo size is 120×40 you need to upload the retina logo with 240×80 size.
- Sticky Logo: if your default logo doesn’t look good on the small sticky header, you can upload a different smaller one here so it appears when the header becomes sticky.
- Crop Banner: when images are tall or squared, it won’t look good on the blog and post page, this option will crop the images thumbnails in blog or post page.
- Sticky Sidebars: will make the sidebar sticky when you scroll the page, it’s not recommended if the sidebar is too long, will be useful only if the sidebar is small and the content is long.
- Blog Page URL: after creating your blog page, you need to copy the page url in this field, the theme use it in breadcrumb.
- Portfolio URL Slug: the word appear in project permalink, we recommend that you change this option before start adding projects in your theme, changing permalink on live site is not good for SEO.
- Google Map Javascript API: to add Google Maps to your site you need to create Google Map API first.
- Facebook APP ID: in order to use facebook functions in your site you need to create an application from facebook developer tools and copy the application ID in this field.
- Add Facebook SDK library to header: if you are using third-party plugin for Facebook it will conflict with this code, so you need to disable it.
- Twitter Access Token and Consumer Key: To get latest tweets from your twitter account you need create an application and create access token then copy them to this field.
- Include Vector Icons: by default we include Fontawesome package in the theme, in this option you can include additional package to use in the theme, you can only include one to prevent heavy load in your site.
- Site Global Typography: Some layouts doesn’t look good with small fonts here you can adjust the best typography to fit in your site.
- Site Custom Background: if you want to add background pattern to your site, you can enable this option and choose one of the exist patterns, or disable it and upload your own background image, this background will only appear in the boxed version.
General Page Options
This bundle of options is available in posts, pages, projects and products, here you can override the main options you set in theme options panel, if you want to change an option only from one page or one post you can change it here, you can switch features from this page or post and modify it’s layout, you will find these group of options below the post or page editor under the main options box.
Page Options
Page options are a bundle of options only shown when you are adding a page to your site, they are options which affect page layout and switch on or off page features
- Layout: select the sidebar position on the page, you can select between right, left and no-sidebar option
- Custom Sidebar: by default the Blog Sidebar are shown for pages, if you want to use another sidebar for this page, you can add it via theme options panel, add widgets to it via Widgets page then assign it to the page via this option.
- Sticky Sidebar: this option will make the side bar sticky while scrolling the page, it’s good if the sidebar contains important information to show, but it’s not recommended if the sidebar is too long or the content is too small.
- Full page Scroll: if you want to make your page uses full page scroll set this option to use, it will make all sections in full height, and puts all the content in the center of the page, try to use it for sections with shortcontent.
- Meta Info: select whether to show or hide the meta info in the page.
- Author Box: show or hide the box below the page content which shows more info about the author for the box.
- Author Name in Meta: this only controls the author name in the meta info line, you can show or hide it.
- Post Date and Time in meta: show or hide the time and date of this page in meta info.
- Post Share: enable or disable icons to share page on social networks.
- Post Comments: you can show or hide wordpress comments from this this option.
- Before Content: if you want to add any data before showing the main content you can add it to this field.
- After Content: if you want to add any data after showing the main content you can add it to this field.
- Shop Products Style: if you are creating a page which shows WooCommerce shop you can choose products style here.
Post Options
This is a bundle of options only shows for posts.
- Layout: select the sidebar position on the post, you can select between right, left and no-sidebar option
- Custom Sidebar: by default the Blog Sidebar are shown for posts, if you want to use another sidebar for this post, you can add it via theme options panel, add widgets to it via Widgets page then assign it to the post via this option.
- Sticky Sidebar: this option will make the side bar sticky while scrolling the page, it’s good if the sidebar contains important information to show, but it’s not recommended if the sidebar is too long or the content is too small.
- Next and Previous Posts Links: Show or hide links for next post and previous post
- Meta Info: select whether to show or hide the meta info in the post.
- Author Box: show or hide the box below the post content which shows more info about the author for the box.
- Author Name in Meta: this only controls the author name in the meta info line, you can show or hide it.
- Post Date and Time in meta: show or hide the time and date of this post in meta info.
- Post Share: enable or disable icons to share post on social networks.
- Post Tag Cloud: show are hide tags below the post content.
- Post Comments: you can show or hide wordpress comments from this this option.
Project Details
Here you can add some details about each project you add such as the project date, the client name, logo and website url, you can also add a preview link to the project if it’s an online project or to preview the client site.
Project Options
This is a bundle of options to control project layout and turn on or off features.
- Layout: This controls the project details box position, you can put it to right, left or make it a full width project.
- Next and Previous Posts Links: show or hide links for next post and previous post.
- Project Overview: show or hide project overview, project overview is the description text you write as a content of your project.
- Project details: show or hide project details section
- Project Social Like: enable or disable social networks like buttons on this project.
- Project Details: show or hide the section shows other projects from your portfolio.
Setting Site Header
In Sanabel theme you can create different header styles depending on your needs, you can change header options for all site or give unique options for some specific pages, so you have two places to control header:
- From Theme Options: go to „Appearance“ then „Theme Options“ then „Header Settings“ and this will change header settings for all site pages.
- From Post Options: when you add new post, project or page and this will change header settings for the current page or post only.
Header Options
To set header via theme options go to „Appearance“ then „Then Options“ and go to „Header Settings“, here you will find all options you need to setup your header.
Uploading Logo: It’s time to upload your site logo, you need to upload your default logo for most devices, and retina logo for retina devices, and if you are willing to use sticky header in your site you may want to upload sticky header logo and sticky header retina logo, so when you scroll the page and the header becomes sticky, default logos will disappear and sticky logos will appear, this feature is useful if your logo is too big and doesn’t look nice in the small sticky header.
Setting Logo Size: you need to set logo and sticky logo dimensions, these are width and height of the logo, if you want to only set width or only set height, just set the other value to zero and the logo will auto scale, for example if you want logo height to be 40px just set height to 40 and set width to 0 then the logo will nicely scale to this height. (note: there is a tab in theme options for sizing and spacing of the header, we didn’t include logo sizes in this tab and preferred to put it just below uploading logo options).
Favicon URL: favicon the small icons which appears on browser tab of your site and when you save site’s pages to bookmarks, it’s the icon of site, such icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and you can upload .png or .ico files.
Apple Icons: the icon of your site if you add it to Home Screen from Safari in iPhone or Ipad, site icon should looks like any other application installed on your device, you need to upload 4 icons, 2 for default iPhone and retina iPhone and other 2 for default iPad and retina iPad, icon sizes are written beside each option, and they should be 57×57, 72×72, 114×144 and 144×144 pixels in size.Setting Top Header: top header is the small top bar holding your email address, phone number and social networks icons, to make this bar appears in the site, you just need to show contact info or social icons or both of them in the header, you have two options to write down your email address and phone number, and about the social profiles, you need to go to Social Settings tab and paste your social networks profiles links and they will appear in the header.
Top Header Skin: you have two top header skins, you can switch between light or dark top header, if you don’t like both of them you can style your own, just go to Styiling Settings tab to change to change top header color and go to Typography tab to change texts and links colors.
Main Header Style: here you select your main header style, if you want to make the header transparent just go to Transparent Header option and set it you yes, this option will be effective only if you select overlay or overlapping header style, and it won’t be transparent when it becomes sticky because transparent sticky header won’t be a good choice for your site style.
Main Main Style: default style and classic style are almost similar, the only difference is the hover effect in the classic style, but the full width menu is completely different, it will change your menu to full screen and adds button in header to open this menu, it’s good if you have few links in the menu without any dropdown links, if you have many links or any link contains dropdown meny this menu will be broken in your site.
Header and Slider Wrapper Width: these options are useful if you want to make only header or slider the same width as the page content, without converting your site to boxed style.
Header Items Position: you can keep the default position of header items, the logo to left, main menu search and other icons to right, but if you want everything to be in center you can select the center position.
Dark Header: you simply need to select yes in this option to make your header dark, and if you don’t like both default and dark skin, you can feel free to go to Styiling Settings tab to change to change header colors and go to Typography tab to change texts and links colors.
Show Cart in Header: set this option to show if you are using WooCommerce and want to show the cart icon in the header.
Sticky Header: if you want you header to stay visible on the screen when you scroll the page you need to set this option to yes, you can also make it sticky on large screens and disable it on tablets and mobile screens.
Header Custom Code: you can add any html or js code in this area and will be added to your site header before the body starts, if you are adding a tracking code it’s recommended to add to footer not to header to prevent slowing your site loading time, only add it here if this is important and you know what you are doing.
CSS Custom Code: if you now CSS and need to add some customization to your site CSS you can id here, don’t worry about losing them, this are will be saved in theme options so you can update your theme files any time without losing your modifications.
Spaces & Sizes Settings
After uploading your own logo, adding your menu items and configuring your header options, new elements may not fit in the header, you can need to navigate to Spaces & Sizes Settings in theme options to change the spaces, margin and padding of header elements until it they look perfect in your site.
Page Title Holder
Page title holder is the bar over each page which contains the bold title and the breadcrumb (the path of the current page) you can easily customize this title holder for your site or for each page separately, you will find options for this are under Posts Settings in theme options panel, you can choose to hide the title holder for page, or just hide title or breadcrumb, and you can also select the default style or to center all items in this area from the option Page Title Style, if you want to change padding from top or bottom you will fine options for this in Spaces & Sizes Settings tab, you also have the option to add background and overlay color to this area, to do so simply navigate to Backgrounds then upload or choose an image for Page Title Holder. to add an overlay color so all texts looks good over the background image, just turn on Enable Page Title Overlay Color feature and select your preferred color.
Adding Menu
Adding menu is a WordPress feature which not relate to the theme, Sanabel only controls menu location on the site and we offer 2 locations for the menu the Main Menu and Footer Menu, so if you are familiar with WordPress you should already know how to add menu to your site and set them in header and footer, if you are new to WordPress and need help adding your first menu, then here are the steps
- From Wordperss control panel go to „Apperance“ then „Menus“.
- Click „Create New Menu“ and type any name then click „Create Menu“ button.
- From the left side you can drag any category, pages or add new links to the menu.
- Drag and sort them from the right area and you can add some menus under other menu to create dropdown.
- Click „Save Menu“ to save the items you sorted.
- After saving the menu, new settings will appear below.
- From „Theme Locations“ select whether to add it to Main Menu or Footer Menu and click „Save Menu“ again.
Setting Mega Menu
Sanabel supports mega menu in the header, it’s very easy to manage your mega menu in the same place you manage the WordPress menu, here we will guide you to know the way of setting up and managing your mega menu, to create a mega menu you need to add menu link and add divide it into columns then add items to each column, the images to the right shows you how to setup this (Note: these color borders will not appear in WordPress, we just added them to this image to help you understand how the mega menu works).
Gray Border item is the menu link, here you need to select „Menu Menu?“ check box and select number of „Columns“ you need to show under the mega menu.
Blue Border items are the columns of the mega menu, each one will create new column and items below it will be the content of this row, you can use this column as a title or as menu item, if you want it to look as a title just check the „Menu Title?“ check box, if you don’t check this it will look be the first link in this column.
Orange Border items are the content of each row, you add a third level menu item under the column so you can fill it with content, if you don’t want to fill the column with links only you can change the „Column Type“ of any item to Text instead of Menu, then fill the „Text Block“ area below with the text you want to add, you will be able to add shortcodes too.
Creating Site Pages
Additional to creating default pages for your site, you are able to add page templates, these templates are ready pages with unique style and content, for example you can add a page to show latest blog posts or latest projects, to create a default page just from your WordPress control panel go to Pages then Add New, and write your content and save, this page will appear nowhere but you can add a link for it in a menu or use navigate to through any part of your site.
If you want to select another template than the default one, just from „Page Attribute“ Box in the right side, under „Template“ select box, you can choose any of our ready templates, we currently have these templates.
Clean Page: this template gives you a clean page with all settings and blocks turned off even if you select to enable them, boxes like share buttons and author box will only removed from this page so you only have a content and sidebar, this is useful to write general info about your site like About Us page.
Default Blog Page: this template creates a page to show blog posts you add in your site, it has many styling options, once you select it, main editor will be useless so you don’t fill it with any content, and another new box „Blog Template Options“ will appear in the page, under this box you can select options for this blog page.
Default Portfolio Page: this template creates a page to show portfolio projects within the standard with of your site, it has many options to control appearance style, pagination style and number of columns per row, once you select it a new box „Portfolio Template Options“ will appear in the page so you can control page options.
Full Portfolio Page: this also create a template for portfolio items but will show it in full width style, this template also will show the box „Portfolio Template Options“ to control appearance options.
Landing Page: this creates a template useful for creating landing pages and site’s home page, it gives you a clear empty page, new sidebar no other options like comments or author details, no meta, just content to insert data and shortcodes into your page, in this page most options under „Page Options“ will have no effect, but you can select the option „Full Page Scroll“ to yes to convert section into full height and convert the page into full page scroll.
WooCommerce Ready Page: this template is good for pages created by WooCommerce plugin, since page elements like comments, meta and share buttons will mess out your WooCommerce page, this template will get rid of them and clean up the page for WooCommerce functions.
Setting Up Home Page
By default WordPress home page shows latest blog posts, if you want to create a home page you need to create it as any other page, select it’s template and add content to it, but after creating it you need to set it as home page so WordPress understand that this page is the home page of the site, to set up the home page you need to
- From WordPress control panel go to „Settings“ then „Reading“.
- Under „Front page displays“ option select „A static page“.
- From the „Front page“ dropdown below select one of the pages you created and it will work as home page.
- Click „Save Changes“ and enjoy your site’s home page.
Create Full Page Scroll
Sanabel has an option to create a modern page with full page scroll, you can select when adding a new page, set page template to „Landing Page“ and set „Full Page Scroll“ to yes, but please note that this page will set all sections in the page to full screen section like one here, and any content in the section will be centered, and the default scroll behaviour will get disabled and replaced by new scroll which jumps between sections, so if the section content is longer than the screen height it will jump out of the screen and you can scroll to see all content, so only use this style if the content in your section is short and can’t be longer than screen height. you can import Demo 6 (Sana Broccoli) and study it since it’s home page is built using full page scroll feature.
And here is some instructions on how to built it, first you need to use section shortcode to divide the page and put all the content inside sections, in the section you can divide it into slides so user can slide right and left for more content, here is how the sections should look like
[section]Content of first section[/section[section]Content of second section[/section
And if you want to separate second section content into three slides you need to build it this like.
[section]Content of first section[/section[section][slide]Content of second section, Slide 1[/slide][slide]Content of second section, Slide 2[/slide][slide]Content of second section, Slide 3[/slide][/section
Creating One Page Scroll Menu
In Sanabel you have the ability to create a menu for one page scroll with nice scroll and tracking page position to know where you are in the page exactly, so if you are in some section in the page, the menu of this section will hilighted, to link menu link with a section you need give a unique ID to this section and set the menu link target to this ID, sanabel offers you many ways to put IDs in the page, you can add them to section shortcode, title shortcode or just add them anywhere in the page using the id shortcode.
[section id="UniqueID"]content[/section][title id="TitleUniqueID"][/title][id value="FreeUniqueID"]
The first line in the above code creates a section with the ID UniqueID, the second one create a title with TitleUniqueID, the third one lets you put the ID FreeUniqueID anywhere in the page in the page, just write this shortcode in any place and give it any ID you want and it will create a hidden section in this place with the ID you gave to it.
In WordPress you can manage sidebars by going to „Appearance“ then „Widgets“ and add ready widgets to selected sidebar, Sanabel originally has 1 sidebar for blog posts and pages (Blog Sidebar), and 6 sidebars for footer, you can select to show only some of them in footer, not necessary to show all the six.
When you drag any widgets to Blog Sidebar, it will appear in blog page, blog posts, tags and category pages, if you add any widget to one of the footer widgets it will appear in the footer based on the footer layout you chose from theme option panel.
Adding Custom Sidebar
Sometimes you need to add different sidebars for different pages or posts, so you don’t want the default Blog Sidebar to stick in all pages, Sanabel allows you to add unlimited number of sidebars and use them in any pages, so if you want to add different sidebar to a page then you need to
- Go to Appearance then Theme Options and navigate to Sidebars Settings.
- Click Add New Sidebar and type it’s name then click Save All Settings.
- Go to Appearance then Widgets and you will find your sidebars added in the right side.
- Drag widgets you want into the new created sidebar.
- Add new page or edit an old one, then from Custom Sidebar option select the sidebar you created.
- Click Save or Update and you will find the custom sidebar appears in the page.
Adding Menu To Sidebar
To add a menu to sidebar you need to create it as the default menu, but this time you don’t need need to assign it to any location, just create, manage and save it, then go to Widgets page, and from widgets area drag Custom Menu widget into the sidebar you want, after putting it in the place you want, you should select the menu you created from the dropdown box and click Save.
Adding Posts & Projects
After creating and managing your pages, now you are ready to add posts and add projects to you site and to show them on a page of your site, we will guide you on how to add a post or a page.
Adding Post
To add posts you need to make sure that you installed and activated Post Formats plugin included in the theme, if you didn’t install it please read about „Installing Recommended Plugins“ in „How To Install Sanabel“ section, if you already have the plugin activated then you can start now.
- Go to Posts then Add New to create new post.
- From the top tabs select the post format (label 1).
- In the field below write your post title (label 2).
- In the editor type the content of the post (label 3).
- Under Post Options box you can control this post option (label 4).
- From right side you need to add this post to one or more categories (label 5).
- Then add tags to the post if you want (label 6).
- Now click „Publish“ to save the post (label 7).
Adding Projects
Now you are ready to add projects to your site and show them in portfolio page you created or by using projects shortcode.
- Go to Portfolio then Add New to create now project.
- From the top tabs select the project format (label 1).
- In the field below write your project title (label 2).
- In the editor type the project description (label 3).
- Under Project Details box add more details about your project (label 4).
- Under Project Options box you can control this project option (label 5).
- Then add tags to the projects so you can filter them if you want (label 6).
- Set Featured Image, this image will be the project thumbnail (label 7).
- Now click „Publish“ to save the post (label 8).
Post Formats
If you want to change the banner of the blog post or the project you can use Post Fortmats, you can select post formats from tabs above the project and post title, and you can choose between
- Standard: doesn’t show any banner, only text and description.
- Audio: adds an embedded audio to the top of the post.
- Gallery: adds image slider above the content.
- Image: uses post featured image of the post and adds it as a banner before the content.
- Video: adds embedded video on the top of the post
Gallery Post Format
To set gallery post format, just select Gallery tab then click on Upload Images, after uploading all images you want to show in the gallery, don’t click „Insert into post“ just click the „X“ on the top right to close the window and all uploaded image to this post will be used as a gallery.
Understanding Shortcodes
Shortcodes is the most powerful part in Sanabel, they are the way to create creative and amazing design, well organized content, and nice page layout.
some shortcodes are useful to create the page, and others are useful to enhance the content typography and texts, if you want to shortcodes to create the page, you just write them yourself if you know them, or get Sanabel assist to add shortcodes, Sanabel helps you generate shortcodes by the shortcode generator, above the content editor you will find the button „Insert Shortcode“, click this button and you will get a complete list of shortcodes used in Sanabel, select the shortcode you want to add and you will get some fields to fill then you can insert it into post.
Shortcode List
If you don’t want to use shortcode generator, here is a list of all shorcodes used in Sanabel with detailed description about shortcodes attributes.
- width: the entire content width.
- Options: full/fixed
- Default: fixed
- bg: the type of background.
- Options: color/image/video/half_image_left/half_image_right
- Default: color
- bg_color: the code of background color.
- bg_image: a link for background image.
- mobile_image: show ore hide background image on mobile (yes/no).
- bg_overlay: the code of overlay color.
- image_style: the background image style.
- Options: default/cover/patter/responsive/fixed
- Default: cover
- parallax: parallax background style.
- Options: no/yes/fixed/animated
- Default: no
- parallax_speed: in case of parallax set to yes, this is the parallax speed relative to page scroll, it can be any value between 0 and 2, which means that 0.5 is half slower than the page scroll and 1.5 is one and half faster than the scroll.
- Default: 0.8
- video_mp4: in case of video background this is the link of mp4 video.
- video_webm: in case of video background this is the link of webm video.
- video_m4v: in case of video background this is the link of m4v video.
- video_ogg: in case of video background this is the link of ogg video.
- padding_top: the top padding of the section is the entire empty space from the section start and the first content inside, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px padding.
- padding_bottom: the bottom padding of the section is the entire empty space from the section end and the last content inside, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px padding.
- margin_top: the space between this section and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this section and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- title: the main title of the section.
- subtitle: the subtitle or the description text of the section.
- title_icon: icon image url or vector icon class name if you need to show icon before the section title, read more in Icons Sections if you don’t know how to get icon class names.
- title_icon_color: the color code of icon title.
- title_icon_size: if you added image icon url to title_icon this will be the width of the image icon, if you added a vector icon class name this will be the size of the icon in pixels, example ( if you write „30“ will make the image width 30px and will make the vector icon font size 30px).
- Default: 60
- title_align: align the title to center, left or right.
- Options: left/right/center
- Default: center
- title_color: color code of the section title.
- subtitle_color: color code of the section subtitle.
- content_color: color code of the content you will add in this section, this will not affect all content since some other blocks in this section will use it’s own color option, so you need change their color to be affected.
- content_align: the default align of this section content.
- Options: left/right/center
- title_divider: add a border divider between sectoin title area and the content.
- Options: no/underline
- Default: no
- title_divider_color: color code of the divider color if it’s not set to no.
- title_margin: the space between title area and the content, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- border_top: if you want to add border to the top of section, add color code to this attribute and it will add a border with this color.
- border_bottom: if you want to add border to the bottom of section, add color code to this attribute and it will add a border with this color.
- effect: name of the effect if you want to add an effect to this section when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
- unique_word: if want to make a word from the title has it’s unique color just type it here, this word should be included in the section title and it will get the theme default color unless you want to change it
- Example: if the title is „Welcome To Sanabel“ this unique word can be „Welcome“.
- unique_color: color code if you want to change the color of the unique word in the title.
- pointer: if you want to draw a rectangle pointer in the top or the bottom of this section.
- Options: top/bottom/both
- Default: no
- id: if you want to add a unique ID to this section, this ID can’t be written anywhere else in the site, you can use it as a target for the links in this page to make them point this section.
- class: if you want to add any class to this section so you can use it to create custom css style.
Example:
[section width="fixed" bg="color" bg_color="#f5f5f5" border_bottom="#e3e3e3" title="Welcome To Sanabel" title_divider="underline" title_divider_color="#26bdef" unique_word="Sanabel" subtitle="The amazing wordpress theme" padding_bottom="20" pointer="bottom"]Content[/section]
- margin_top: the space between this row and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this row and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
Example:
[row][one_third]Content[/one_third][one_third]Content[/one_third][one_third]Content[/one_third][/row]
- type: the type of this service block, if it shows text only, image icon or vector icon.
- Options: text/icon/image
- Default: icon
- title: title of the service box.
- icon_style: the style of this service block icon.
- Options: default/circle
- Default: default
- icon_position: where to show the icon of this service.
- Options: top/left/right
- Default: top
- icon_color: color code of the vector icon.
- icon_bg_color: color code of the icon background.
- icon_size: in case of vector icon, this is the size of icon, it should be any number, and this number will be measured in pixels, example: ( 30 ) will make icon font size 30px.
- icon_width: this is the width if icon wrapper, you use it to define the space should be taken for the icon, if you set icon style to circle it will be the circle width, and if you set icon position to left or right, it will be the empty space icon have in the left or right, it should be any number, and this number will be measured in pixels, example: ( 60 ) will give 60px width.
- align: this is the align position of the title and description text.
- value: this is a small text below the service you can use it to represent service price or just a read more link.
- link: if this service links to another page, this should be the url of the page.
- target: where should this link open, in the same tab or new tab _self will open it in the same tab and _blank will open it in new tab.
- Option: _self/_blank
- Default: _self
- icon: vector icon class name if service type is set to icon, read more in Icons Sections if you don’t know how to get icon class names.
- image_url: icon image url if service type is set to image.
- image_width: the width of the icon image. it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px width.
- image_height: this is not important since the image will scale based on width but you can use it if you want to define a height to the image icon.
- margin_top: the space between this block and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this block and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- title_color: color code of the service title.
- text_color: color code of the section description text.
- value_color: color code for the service value.
- frame: if you want to add a frame to the image icon in case you set the type to image.
- Options: no/light/dark
- Default: no
- box: if you want to put the service content inside a box.
- Options: yes/no
- Default: no
- box_color: color code for the box background.
- size: the overall size of the service block typography.
- Options: small/medium/big
- Default: small
- skin: the skin of the service, if you don’t want to change colors you can simply switch skin of the service.
- Options: light/dark/theme_color
- Default: dark
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[service type="icon" icon="fa fa-tablet" title="Responsive & Retina Ready" value="Read More..." link="#"]Some words about your service[/service]
- url: the link that button should point to.
- Alternative: link
- style: choose from button predefined styles.
- Options: default/soft/gradient/flat
- Default: default
- skin: if you don’t want to change colors you can simply change the skin of the button.
- Options: light/dark/theme_color
- Default: theme_color
- color: color code for the button background color.
- text_color: color code for the button text color.
- size: select button size.
- Options: small/medium/large
- Default: small
- radius: the size of border radius, use it to make rounded corners, it should be a number, and this number will be measured in pixels, example: ( 4 ) will give 4px border radius.
- width: by default the width will be based on the button text length, but you can define a preferred width, width unit should be defined to, so if you want to make the button width equals 300px you should write (300px) and if you want to add full width button you should set width to (100%).
- icon: vector icon class name if you want to add icon beside the button text, read more in Icons Sections if you don’t know how to get icon class names.
- icon_color: color code of the icon.
- target: where should this button’s link open, in the same tab or new tab _self will open it in the same tab and _blank will open it in new tab.
- Options: _self/_blank
- Default: _self
- margin_top: the space between this button and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this button and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[button width="100%" url="#" size="small" icon="fa fa-check-square"]Click Here[/button]
- color: color code of the title
- size: font size of the title, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- weight: font weight of the title
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Default: 700
- Note: some fonts doesn’t support all the above font weights.
- line_height: it’s the space between lines if the title has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- margin_top: the space between this title and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this title and the block below ,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- align: the direction you need to align the title.
- Options: left/center/right
- Default: left
- divider: the divider style between the title and the content below.
- Options: no/single/double/thick/part/part_thick
- Default: no
- divider_color: if you set divider this will be the divider color code.
- divider_width: the width of the title divider, width unit should be defined to, so if you want to make the divider width equals 300px you should write (300px) and if you want to add half width divider you should set width to (50%).
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
- id: if you want to add a unique ID to this title, this ID can’t be written anywhere else in the site, you can use it as a target for the links in this page to make them point this title.
Example:
[title divider="part_thick"]Title About Sanabel[/title]
- title: the title of the alert.
- style: select a predefined style.
- Options: light/dark/info/warning/success/danger/skin
- Default: light
- close: select if user should be able to close or hide this alert from the page after he see it.
- Options: yes/no
- Default: yes
- bg_color: color code to change the alert background color.
- border_color: color code to change the alert border color.
- content_color: color code to change the text color in the alert box.
- margin_top: the space between this alert and the block above,it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this alert and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
Example:
[alert close="yes" style="skin" title="Notice Something."]Please notice this alert box[/alert]
- title: the text appear on hover.
- position: the position of the tooltip.
- Options: top/bottom/left/right
- Default: top
- delay: set how long time should wait before the tooltip appear on the screen, this time in mellisecconds, which means that the value (1000) will make the effect happens after 2 seconds from the hover.
Example:
[tooltip position="right" delay="200" title="This Text Appear On Hover"]Hover Here[/alert]
- color: color code for the text color.
- weight: font weight of the content
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Note: some fonts doesn’t support all the above font weights.
Example:
[color]Colored Text[/color]
- url: the link that button should point to.
- target: where should this link open, in the same tab or new tab _self will open it in the same tab and _blank will open it in new tab.
- Option: _self/_blank
- Default: _self
Example:
[color]Colored Text[/color]
- style: the style of the dropcap letter
- Options: default/skin/circle/square
- Default: default
Example:
[dropcap]Colored Text[/dropcap]
- color: color code for the text color.
- size: size of the icon, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- name: vector icon class name, read more in Icons Sections if you don’t know how to get icon class names.
- align: icon align to the content
- Options: left/right/center
- theme_color: if you don’t want to set custom color, you can set this to yes and it will be in theme main color
- Options: yes/no
- Default: no
Example:
[icon name="fa fa-tablet" theme_color="yes"]
- size: the height of the empty space, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px height.
Example:
[space size="30"]
- id: this ID should be unique and can’t be written anywhere else in the site, you can use it as a target for the links in this page to make them point this area.
Example:
[marker id="UniqueSection"]
- value: this ID should be unique and can’t be written anywhere else in the site, you can use it as a target for the links in this page to make them point this area.
Example:
[id value="UniqueSection"]Your Content Here[/id]
- color: color code for the text color.
- weight: font weight of the content
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Note: some fonts doesn’t support all the above font weights.
Example:
[bold]This is bold[/bold]
- color: color code for the text color.
- cite: source of the quotation, can be an author name, a book name or journal release.
- cite_color: color code of the cite name.
- align: the placement of the quotation.
- Options: left/right/center
- size: the font size of the quotation, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- weight: font weight of the quote
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Default: normal
- Note: some fonts doesn’t support all the above font weights.
- line_height: it’s the space between lines if the text has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- margin_top: the space between this quote and the block above, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this quote and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[quote align="left" cite="Steve Jobs"]Your quote lines here[/quote]This is a text about something.
- color: color code for the text color.
- size: the font size of the text, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- weight: font weight of the text
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Default: normal
- Note: some fonts doesn’t support all the above font weights.
- line_height: it’s the space between lines if the text has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- align: the alignment of the list items.
- Options: left/right/center
- margin_top: the space between this text and the block above, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this text and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- paragraph: if you want to add this text as a new paragraph, not mixed with the previous or the next text block.
- Options: yes/no
- Default: no
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[text color="#999999" size="16"]Text with custom style and color.[/text]
- color: color code for the list items color.
- size: the font size of the list items, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- weight: font weight of the text
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Default: normal
- Note: some fonts doesn’t support all the above font weights.
- line_height: it’s the space between lines if the title has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- margin_top: the space between this list and the block above, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between list text and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
- color: color code for the list items color.
- size: the font size of the list items, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- icon: vector icon class name if you want to add an icon before the list text, read more in Icons Sections if you don’t know how to get icon class names.
- icon_color: color code for the icon color.
- icon_size: in case you added a vector icon, this is the size of icon, it should be any number, and this number will be measured in pixels, example: ( 30 ) will make icon font size 30px.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example about list and list_item:
[list color="#999999"][list_itemicon="fa fa-check-square"]First list item.[/list_item][list_itemicon="fa fa-check-square"]Second list item.[/list_item][list_itemicon="fa fa-check-square"]Third list item.[/list_item][/list]
- name: name of the effect, read the effect names list to know more about effect.
Example:
[set effect="bounceIn"][service title="Block"]Block to appear[/service][service title="Block"]Block to appear[/service][service title="Block"]Block to appear[/service][/set]
- color: color code for the content color.
- size: the font size of the content texts, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- weight: font weight of the text in this block
- Options: 100/200/300/400/500/600/700/800/900/light/normal/bold
- Default: normal
- Note: some fonts doesn’t support all the above font weights.
- line_height: it’s the space between lines if the text has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- align: the alignment of the text in this block.
- Options: left/right/center
- margin_top: the space between this block and the block above, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this block and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[content size="18" align="right"][/content]
- style: the style of the testimonial block
- Options: default/center
- Default: default
- author: the name of person who said these words about you.
- image: the client logo or image url for the person.
- url: the webpage url for this client.
- position: use this is if you want to write the position or the job of this person.
- bg_color: if you want to change the background color add the color code here.
- text_color: color code of the text color.
- name_color: color code for the author name.
- position_color: color code for the author position.
- size: the font size of the content texts, it should be any number, and this number will be measured in pixels, example: ( 18 ) will give 18px font size.
- line_height: it’s the space between lines if the text has more than one line, it should be any number, and this number will be measured in pixels, example: ( 23 ) will give 23px line height.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[testimonial author="Bill Gates" position="Microsoft CEO"]Some words from Bill Gates about your service.[/testimonial]
- align: the alignment of the client logo images in this block.
- Options: left/right/center
- Default: center
- margin_top: the space between this block and the block above, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- margin_bottom: the space between this block and the block below, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px margin.
- tooltip: whether you want to show a tooltip when hover on client image or not
- Options: yes/no
- Default: no
- image: client logo image url.
- name: client name.
- url: client webpage url.
- max_height: if you want to set max height for the logo image, this is useful if you are using big images and you want to set a smaller height, it should be any number, and this number will be measured in pixels, example: ( 30 ) will give 30px max height.
- effect: name of the effect if you want to add an effect to this block when it appears on the screen, read the effect names list to know more about effect.
- effect_delay: set how long time should wait before the effect happen on the screen, this time in mellisecconds, which means that the value (2000) will make the effect happens after 2 seconds from appearing on the screen.
Example:
[clients tooltip="yes"][client name="Apple" image="#" url="#"][client name="Microsoft" image="#" url="#"][client name="Envato" image="#" url="#"][client name="Google" image="#" url="#"][/clients]
- number: number of projects to show.
- style: the style of projects grid.
- Options: default/classic/grid/text/full
- Default: default
- order: how to sort the project.
- Options: date/title/modified/rand/comment_count
- Default: date
- button: the text of show more button, this button will go to the default portfolio page.
- url: the url of your portfolio page.
- columns: number of columns per row in this portfolio grid.
- Options: 1/2/3/4/5/6
- Default: 4
- button_style: you can select between default or full width button, the full button is useful in case you have full style grid.
- Options: default/full
- Default: default
- except: if you want to exclude any project from appearing in this grid, you can add the project id here.
- Note: you can add any number of projects IDs, just seperate them by comma
- tags: if you want this grid to show only projects from specific tags, you can type them here and seperate them by comma.
- one_by_one: if you want the projects in this grid to appear one after one.
- Options: yes/no
- Default: no
- effect: name of the effect if you set the projects to appear one by one, read the effect names list to know more about effect.
- gray: if you want to add grayscale to make projects image black and white.
- Options: yes/semi/no
- Default: no
Example:
[projects number="6" style="text" columns="3" one_by_one="yes" effect="fadeIn"]
- number: number of blog posts to show.
- style: the style of blog posts.
- Options: list/grid
- Default: grid
- order: how to sort blog posts.
- Options: date/title/modified/rand/comment_count
- Default: date
- button: the text of show more button, this button will go to the default blog page.
- url: the url of your blog page.
- words: number of words in blog post description.
- except: if you want to exclude any blog posts from appearing in this list, you can add the post id here.
- Note: you can add any number of posts IDs, just seperate them by comma
- tags: if you want this list to show only posts from specific tags, you can type them here and seperate them by comma.
- show_date: if you want to show post date in meta info.
- Options: yes/no
- Default: yes
- show_time: if you want to show post time in meta info.
- Options: yes/no
- Default: no
- show_comments: if you want to show number of comments in meta info.
- Options: yes/no
- Default: yes
- show_author: if you want to show post author in meta info.
- Options: yes/no
- Default: yes
- one_by_one: if you want the blog posts in this list to appear one after one.
- Options: yes/no
- Default: no
- effect: name of the effect if you set the blog posts to appear one by one, read the effect names list to know more about effect.
- image_width: the width of the post image. it should be any number, and this number will be measured in pixels, example: ( 40 ) will give 40px width.
- bg_color: color code of the background color.
- title_color: color code of the blog posts title color.
- text_color: color code of the blog posts description text color.
- meta_color: color code of the blog posts meta info color
Example:
[blog_posts style="list" number="3"]
- width: width of the map, width unit should be defined to, so if you want to make the map width equals 300px you should write (300px) and if you want to add full width map you should set width to (100%).
- Default: 100%
- height: height of the map, height unit should be defined to, so if you want to make the map height equals 300px you should write (300px).
- Default: 500px
- style: choose from predefined styles.
- Options: any number from 1 to 20.
- Default: 1
- zoom: the map zoom level, 1 is the farest point, and 19 is the nearest point.
- Options any number from 1 to 19
- Default: 15
- marker: the image url you want to use as map pointer.
- frame: if you want to add a frame to the map.
- Options: no/light/dark
- Default: no
- name: name of the location.
- lat: the latitude of the location on the map.
- long: the longitude of the location on the map.
Note: if you want to find latitude and longitude of any location you go here and search about the location then you will get it’s info.
Example:
[map frame="light" style="6" ][location name="First Branch" lat="-37.815689" long="144.955373"][/location][location name="Second Branch" lat="45.236218" long="3.515625"][/location][/map]
Extra Information
Here we provide you some extra important information may help you complete building your website as you like.
Where To Find Icon Names
You can use vector icon names across your website, Sanabel includes Font Awesome vector icon package by default, and you can easily include Fontello or IcoMoon in your site from theme options panel, if you want to use icon from Font Awesome in your site in shortcodes, options or visual composer, you will need the icon name from Font Awesome icons list Here , choose the icon you want to use and click on it, it will open a page with details about the icon, you will find icon name starting with fa fa- like this „fa fa-name“ for example, the name of search icon should be like this „fa fa-search“.
For Fontello and IcoMoon we only included some icons based on our choice to prevent heavy loading of all icons, you can use any of included icons, or you can create your own list of Fontello icons or IcoMoon icons, to get the list of icon names you will find them in side the folder named „Extra“ inside the package of Sanabel you downloaded from Themeforest, open the icon list you want to use and you will find all icon names like this „icon-music“