
THEME DOCUMENTATION
In case of any questions please do not hesitate to contact us via our support forum at https://codexthemes.ticksy.com/
Please don’t forget to rate TheGem and leave a nice review, it means a lot for us and our theme.
Simply log in into your Themeforest, go to Downloads section and click 5 stars next to the TheGem WordPress theme.
INSTALLATION
INSTALLING WORDPRESS
To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions here: http://codex.wordpress.org/Installing_WordPress
To use TheGem, you must be running WordPress 3.9 or higher. We have tested it with Mac, Windows and Linux. It has been tested on Chrome, Firefox, Safari, Opera, Internet Explorer 10+
NOTE: One regular license allows you to use TheGem on one localhost, one development and one final production website. Please check License Terms for naming rules about naming rules for localhost and development environments.
downloading thegem
TheGem comes in two versions. One version is for WPBakery page builder. The other one is for Elementor page builder. Depending on which page builder you prefer, please use the corresponding theme version. If you are not sure, which page builder to choose, we would recommend to choose Elementor, as this page builder is faster, easier and has more customization options.
To get an access to both theme versions, you need to login to your themeforest account, go to “Download” category (https://themeforest.net/downloads), find TheGem in your downloads, click on “Download” button and select “All files & documentation”

NOTE: if you choose “Installable WordPress file only”, you will download WPBakery version of TheGem, not Elementor version
By clicking on “All files & documentation” you will get complete TheGem package, including both theme versions & child themes. The downloaded file is called “themeforest-(randomcode)-thegem-creative-multipurpose-highperformance-wordpress-theme.zip”.
NOTE: Do not upload the entire themeforest-(randomcode)-thegem-creative-multipurpose-highperformance-wordpress-theme.zip file to your WordPress, trying to install the theme – this file is not an installable TheGem theme, it is a main package including all TheGem theme versions!
Unzip it. In this file you have everything you need:
TheGem_Elementor.zip
Installable zip file of TheGem for Elementor page builder theme. In case you choose to use Elementor as page builder, please use this zip file to upload to your WordPress in order to install TheGem for Elementor (see below). Do not unzip this file.
TheGem_WPBakery.zip
Installable zip file of TheGem for WPBakery page builder theme. In case you choose to use WPBakery as page builder, please use this zip file to upload to your WordPress in order to install TheGem for WPBakery (see below). Do not unzip this file.
Folder “Child_Theme”
This folder contains three subfolders:
Subfolder “For_TheGem_Elementor”
- TheGem_Elementor_child.zip: child theme for Elementor’s version of TheGem theme
Subfolder “For_TheGem_WPBakery”
- TheGem_WPBakery_child.zip: child theme for WPBakery’s version of TheGem theme
- TheGem_child_user_icons.zip: this child theme is used for additional custom icons
- TheGem_Coin_child.zip: this child theme is required for Gemcoin, ICO & Cryptocurrency Install
- TheGem_CryptoCoin_child.zip: this child theme is required for Cryptocurrency & Ico Landing Install
Subfolder “For_WooCommerce”
- TheGem-child-for-zoom-magnifier-plugin.zip: this child theme uses default WooCommerce gallery for WooCommerce products instead of TheGem’s gallery
Folder “Demo_Sliders”
All demo sliders we have used on our demo websites. Please note: demo sliders will be installed automatically during the import of demo websites. You don’t need to import this sliders manually. We have provided you with this demo slider only for the case if some sliders will not be installed or you will need to re-install only sliders (without re-importing the whole demo).
License Terms
Please refer to Envato’s license policy for all questions concerning the purchased license: https://themeforest.net/licenses/terms/regular To keep it short: one regular license allows you to use TheGem on one localhost, one development and one final production website. You can manage your licenses and activations in TheGem license manager: https://codex-themes.com/thegem/license_manager
Localhost environment naming rules
An installation will be considered as a localhost installation in this cases:
a) Domain name is an IP, belonging to localhosts, for example: 127. 0.0.0 – 127.255.255.255 , 10. 0.0.0 – 10.255.255.255, 172. 16.0.0 – 172. 31.255.255, 192.168.0.0 – 192.168.255.255
b) Domain name consists of one word
c) One of the following TLDs is used *.local, *.localhost, *.loc, *.test, *.dev, *.home, *.mamp
Development environment naming rules
An installation will be considered as a development installation in this cases:
a) Domain name is an IP (except IPs, belonging to localhosts, see above)
b) If one of the following subdomains is used: dev.*, staging.*, test.*
c) If one of the following subfolders is used: /development/, /dev/, /staging/, /test/
In all other cases an installation will be considered as a final production website (live website).
INSTALLING THEGEM IN WORDPRESS ADMIN
TheGem for Elementor Theme Installation
You can check this video tutorial showing the installation and setup steps.
Follow this installation steps:
- Open Appearance → Themes
- Click “Add New Theme” and hit upload link
- Find the the file “TheGem_Elementor.zip” on your hdd and hit install now button
- After the theme is installed click on “Activate”

THEME ACTIVATION
After theme installation you need to activate it using your purchase code. By clicking on “Activate” here

you will be automatically redirected to the welcome page of TheGem.
Here you need to activate your copy of TheGem. To do this, please proceed as follows:
- Go to TheGem support page on Themeforest (https://themeforest.net/item/thegem-creative-multipurpose-wordpress-theme/16061685/support [^])
- Below you will see section “Purchase codes”. Select and copy the purchase code you see here:

3 Paste the copied purchase code in the activation field of TheGem and click on “Activate” button. Below you will see section

Alternatively you can download your purchase code via your “Downloads” page on Themeforest (https://themeforest.net/downloads [^]). Here click on “Download” button for TheGem and select “License certificate & purchase code”,

After that open the downloaded document, select and copy the purchase code , paste it in the theme’s activation field and click on “Activate” button.
TheGem for WPBakery Theme Installation
Follow this installation steps:
- Open Appearance → Themes
- Click “Add New Theme” and hit upload link
- Find the the file “TheGem_WPBakery.zip” on your hdd and hit install now button
- After the theme is installed click on “Activate”

THEME ACTIVATION
After theme installation you need to activate it using your purchase code. By clicking on “Activate” here

you will be automatically redirected to the welcome page of TheGem.
Here you need to activate your copy of TheGem. To do this, please proceed as follows:
- Go to TheGem support page on Themeforest (https://themeforest.net/item/thegem-creative-multipurpose-wordpress-theme/16061685/support [^])
- Below you will see section “Purchase codes”. Select and copy the purchase code you see here:

3 Paste the copied purchase code in the activation field of TheGem and click on “Activate” button. Below you will see section

Alternatively you can download your purchase code via your “Downloads” page on Themeforest (https://themeforest.net/downloads [^]). Here click on “Download” button for TheGem and select “License certificate & purchase code”,

After that open the downloaded document, select and copy the purchase code , paste it in the theme’s activation field and click on “Activate” button.
Theme Deactivations
You can deactivate / deregister your license from an installation using TheGem license manager:
1. Open TheGem license manager by following this link: https://codex-themes.com/thegem/license_manager/
2. Log in using your purchase code and your Envato’s username
3. You will see a list of all your installations and licenses, beginning with the one you have used to log in

4. By clicking on “Deregister” button you can deactivate the license for the selected installation
In this way you can “unlink” this license to use it on another installation.
IMPORTANT: To prevent fraud, once deregistered, this purchase code cannot be used for the same installation again. You can use this purchase code on any other installation except this one.
INSTALLING PLUGINS
In order to get TheGem properly work you need to install some useful plugins. All this plugins are included in TheGem, you don’t need to purchase them extra!
After the theme is installed successfully you will get following message about installation of required and recommended plugins:
- Click on “Begin installing plugins”
- Check all plugins, select “Install” and click on “Apply”
TheGem for Elementor theme version

TheGem for WPBakery theme version

TheGem for Elementor theme version
In order to use TheGem for Elementor theme version, please note, that following plugins SHOULD BE installed during the theme installation (see installation instructions above):
- THEGEM THEME ELEMENTS (for Elementor) – native essential set of all TheGem’s features, functions, elements, extensions & custom post types
- ELEMENTOR – Elementor page builder for WordPress
NOTE: You don’t need to purchase Elementor Pro. Elementor free in combination with TheGem Elements plugin is absolutely enough to get an access to all premium features and elements of TheGem theme.
TheGem for WPBakery theme version
In order to use TheGem for WPBakery theme version, please note, that following plugins SHOULD BE installed during the theme installation (see installation instructions above):
- THEGEM THEME ELEMENTS (for WPBakery) – native essential set of all TheGem’s features, functions, elements, extensions & custom post types
- WPBAKERY PAGE BUILDER – WPBackery page builder for WordPress
NOTE: You don’t need to purchase WPBakery license. WPBakery is already included in TheGem as bundled plugin and is fully functional.
In addition, you can take an advantage of enriching your TheGem’s experience with following recommended plugins:
- THEGEM DEMO IMPORT – one-click import of TheGem’s demo websites and templates. This plugin is also available in two versions – one for Elementor demos and another one for WPBakery demos
- WORDPRESS PAGE WIDGETS – plugin for creating customized sidebars
- CONTACT FORM 7 – one of the most popular plugins for managing contact & feedback forms
- EASY FORMS FOR MAILCHIMP – allows you to generate and display mailing list opt-in forms anywhere on your site with ease
- REVOLUTION SLIDER – leading slider plugin for WordPress
- LAYERSLIDER – awesome multi-layer slideshow plugin
- ZillaLikes – Add “like” functionality to your posts and pages
That’s all! Now you are ready to go on with TheGem, installed on your WP.
ALTERNATIVE: UPLOAD THEGEM VIA FTP
In case you wish install the theme via FTP, proceed as follows:
- Unzip TheGem_Elementor.zip (for Elementor version of TheGem) OR TheGem_WPBakery.zip (for WPBakery version of TheGem)
- Login to your hosting space via an FTP Client
- Upload the whole contents of the unzipped file into wp-content/themes/ folder under your WordPress installation.
- Once you’ve uploaded the theme you can open Appearance → Themes page and activate the theme from list. After that you need to install and activate the plugins as described above.
INSTALLING CHILD THEME
If you plan to modify the source code of the main parent theme (php, js, style.css) we strongly recommend to install this child theme and make such modifications inside this child theme in order to avoid any possible problems & issues by installing updates of TheGem’s main parent theme in future. You can find this child theme in folder „Child_Theme“ – pls check for TheGem_child.zip
The installation of the child theme works in the same way as the installation of the main parent theme (see description above).
IMPORTING DEMO CONTENT
RECOMMENDED PHP SETTINGS
In order to avoid any possible import issues because of your server and php setings, we would recommend setting following PHP values in your server’s php.ini:
- Memory Size: memory_limit = 256M
- Script execution time: max_execution_time = 180
- Number of input variables: max_input_vars = 4000
If you don’t have an access to the php configurtation on your server, you can try to set this values in .htaccess file:
php_value max_input_vars 4000
php_value max_execution_time 180
php_value memory_limit 256M
Pls be careful, because some of hosting companies don’t allow to change php settings directly using .htaccess. In case you have some problems after modifying your .htaccess file, log in to your FTP account and remove these modifiactions from .htaccess
one-click import of demo content
TheGem comes with plugin “TheGem Demo Import”, allowing you to import any of the demo websites, demo pages & demo content you can see on TheGem’s demo: https://codex-themes.com/thegem/meta-splash/
TheGem for Elementor theme version
To use one-click demo import you need to go to “TheGem -> Demo Import” menu in your WordPress admin:

TheGem for WPBakery theme version
“To use one-click demo import you need to go to TheGem Dashboard and select “Demo Import” tab, or alternatively to click on “TheGem -> Demo Import” menu in your WordPress admin:

Here you have an overview of all TheGem’s demo websites which you have seen on this page https://codex-themes.com/thegem/meta-splash/. You can filter this overview by using this filters

and you can search for some specific demos by entering keywords here

Once you have found the website you need, just click on it and you will get the following overlay:

Here you have two installation options. You can either import the whole demo website as seen on TheGem’s demo or you can select single demo pages from this particular demo website to import in your installation (without importing the whole demo website).
In case you wish to import the whole pre-build demo website, select “COMPLETE PRE-BUILT WEBSITE” in this overlay. This installation option import the whole demo content of the selected demo website, including all menus and homepage. After selecting this option and clicking on “Next Step”, you will get an overlay with additional import options

Here you can choose:
- IMPORT THEME OPTIONS: by selecting this your current theme options will be completely overwritten with the theme options of the selected demo website. We always recommend to backup your theme options prior to import the whole new website.
- IMPORT REVOLUTION SLIDERS: this option will automatically import all of the demo revolutions sliders used in the chosen demo website
- IMPORT MEDIA: this option allows you to import all demo media content (images, video, audio) used in the chosen demo website
After you are all set, just click on “Submit” button and import process will start. Just wait a bit and your demo website will be fully imported, so you can start work on it.
Additionally to the import of the whole demo website you have also an option to select single demo pages from the selected demo website to import in your installation (without importing the whole demo website) by selecting “SELECT PAGES FOR IMPORT”.

This option is particularly good in case you wish to mix different demo pages inside your own TheGem’s installation. For example, you can choose to use some specific demo website (say, construction business) but you don’t like “About Us” pages of this demo website and wish to use “About Us” pages from the digital agency demo website instead. In this case you can just import the whole construction website, remove “About Us” pages you don’t need, go to Demo Import, select “digital agency” demo website and import only “About Us” pages from this demo website.
After choosing “SELECT PAGES FOR IMPORT” and clicking on “Next Step”, you will get this overlay with the list of demo pages used in this demo website:

Here you can easily choose which pages to import and click on “Submit” – after this only selected pages will be imported.
Please note: in the top area you have following options:
- IMPORT THEME OPTIONS: by selecting this your current theme options will be completely overwritten with the theme options of the selected demo website. In case of importing single pages we do not recommend to use this option if you don’t wish to overwrite the styles of the previous demo website you have already imported
- IMPORT REVOLUTION SLIDERS: this option will automatically import all of the demo revolutions sliders used in the chosen demo pages
- IMPORT MEDIA: this option allows you to import all demo media content (images, video, audio) used in the chosen demo pages
After you are all set, just click on “Submit” button and import process will start. Just wait a bit and the selected demo pages will be fully imported.
This option is good if you don’t need demo content, which you have not modified, anymore. Say you have imported the whole demo website, you have used some demo pages to build your own pages but the rest of the demo content you don’t need. By clicking on the theme will automatically remove all demo content WHICH HAS NOT BEEN MODIFIED BY YOU! In case you have edited (and saved) some posts, pages etc., this content will not be removed. This concerns media content as well. If you wish to keep some demo media on your website, you need to remove the word ” (Demo)” from the media description of the corresponding media file (image, video etc), otherwise this file will be removed as well.

selecting homepage
Homepage will be automatically selected after the import process is done. In case you wish to set another page as your homepage, you can do this in following way:
Go to “Settings -> Reading”, select a static page option to be displayed as your front page and choose for example “Homepage: Agency Light” page from the select box “Front page”. Save your changes.

importing demo sliders
In case you have selected “Import demo sliders” during the demo website import, all necessary demo sliders will be automatically imported so you do not need to do anything else. However, if you wish to import some sliders manually, you can proceed in following way:
1. Go to „Revolution Slider“ section in your wp admin

2. On the dashboard screen click on „Import Slider“ option

3. Choose the slider you wish to import from your hdd. Browse to the unzipped TheGem folder, you will find here „Demo_Sliders“ subfolder. Here you can see all sliders used in our demo pages. The sliders have the same names as the corresponding demo pages. I.e.
if you wish to import the slider used on „Business 02“ page, select „Business_02.zip“.
4. Click on „Import Slider“ and wait for while until the slider will be imported.
UPDATING THEME
1. In case new theme update is available, you will see the following notice in your WordPress admin area:

2. Updates also appear on the “Themes” page in your WordPress admin area:

and on the “Updates” page:

3. For the changelog just click the corresponding button and an overlay with updates history appear:

4. Before updating you need to read and confirm the following important notice:

Finally, just click on “Proceed with update” and it will start automatically.
UPDATING PLUGINS
In case new plugin updates are available, you can update in the way, shown in the following video:
first steps
First thing after installing TheGem would be to make some main general settings of your website, if you wish to change the default presets of the imported demo content. Go to TheGem – Theme Options (or click on “Theme Options” button in top bar in admin dashboard) to get the admin panel of TheGem.
NOTE: For documentation of Theme Options in TheGem for WPBakery theme version please check this chapter.
TheGem for Elementor
theme options
TheGem has an advanced admin panel for Theme Options, which gives you plenty of options and settings to customize your website.
Go to Appearance -> Theme Options and you will get TheGem admin panel. All settings are organized in logical sections and have brief descriptions of what they do. A lot of these settings are self explanatory.

- Always click on “Save changes” in order to make your settings take effect
- By clicking on “Reset options” you can reset all your settings to the skin defaults
- You can always make a backup and/or restore your settings by using “Backup” option in admin panel. So you can freely experiment with all of TheGem options without having fear to loose some of them
- Pls note: in order to ensure the correct working of theme options (saving your style changes) all caching plugins you may be using on your website should be better deactivated. After you are done with your changes you can activate this caching plugins again.

theme layout
You can choose between fullwidth or boxed layout for your pages. By default TheGem use fullwidth layout. If you like to use the boxed version, you can further configure the color or image for the general website background.

To configure background color choose “Colors” leftside in TheGem admin panel and here use the “Background Color For Boxed Layout” field in “Background And Main Colors” panel to choose the appropriate boxed background color.

To configure background image choose “Backgrounds” leftside in TheGem admin panel and here use the “Background for Boxed Layout” field to upload your background image. Or you can choose one of the included patterns by choosing one in “Background Patterns for Boxed Layout”

logo
types of logo
In TheGem you can differ between logo, which should be displayed on desktop computers and logo , which should be displayed on mobile devices. It is important, because the size of the logo could differ depending on screen sizes. So in order to preserve the perfect logo look, it is better to use separate logo versions: one for desktops, one for mobiles.
In some cases, if you will need to use transparent website header, where your logo and main menu will be placed above some dark image or background, you will need another colors for your logo as well. In order to prevent the situation, where your logo will not be seen, for instance because it is black on very dark background. For such cases you would prefer am inverted version of your logo, i.e. in white or light gray colors.
logo size
TheGem is retina ready. So in order to make your logo look sharp on modern retina displays, we recommend you to prepare your logo image for retina screens. It is quite simple: just take a standard logo size you wish to have on your website (on non-retina screens) and make it three times bigger. For instance: if your „normal“ logo should be 200 x 100 pix, your retina-ready logo should be 600 x 300 pix.
on our demo website we use following sizes:
- 164 px width for desktops (=492 px for retina)
- 132 px width for mobiles (=396 px for retina)
uploading your logo
In order to set up your logo, go to „General → Identity“ in Theme Options. As described above, here you can set:
- Logo width for desktop and mobile devices. Pls note: actually you can upload any logo image of any size and adjust its width here using this settings. However we recommend to initially prepare your logo in the right size in order to avoid some unwanted artefacts.
- Upload your logo images for different cases (see description above)
- Upload your favicon


logo position
In TheGem you have multiple options for positioning your logo on your website. You can set it to be displayed left or right to menu, above the menu or be centered within the main navigation. Pls check the next section for further details.
top area
In TheGem you can use top area bar above the main menu area to show some additional information like your contacts, links to social profiles, additional meta navigation and CTA button.

setting up top area
In order to define your contact data which should appear in top area bar, go to „Contacts & Socials → Top Area Contacts“ in Theme Options. Here you can set your contact information for the top area.

After that, go to „Header ->Top Area“ section in Theme Options and activate contacts for top area by checking „Show contacts“ field:

To set the links to your social profiles, go to Contacts & Socials → Socials in Theme Options. Here you must select the social networks, where you have your profiles; after that you can enter the URLs to this profiles.

After that, go to „Header ->Top Area“ section in Theme Options and activate socials for top area by checking „Show Socials“ field:

You can also use Top Area to display additional navigation / menu. In order to do this:
- Go to Appearance → Menus
- Select „Top area menu“ from Location field
- Edit your menu as usually

Additionally you can also insert some CTA button in your top area:
Go to „Header ->Top Area“ section in Theme Options. Here you can enter the button text as well as the button link

disable top area
If you don’t wish to have the top area bar on your website, you can easily disable it by going to „Header ->Top Area“ section in Theme Options and selecting „Disabled“ in „Top Area Style“ field.

Also you can disable top area bar to be fixed by vertical scrolling – by activating „ Disable Fixed Top Area“ (see image below, 1)
You can also selectively disable top area only for mobile devices by activating „ Disable Top Area For Mobiles“ field (see image below, 2)

top area styles
In order to set your prefered top area styles, go to „Header → Top Area “ section of Theme Options.
Here you have following options:

1. Top Area Style
Here you can select between 3 preset styles for displaying top area bar. You can customize this styles using other theme options (see below).
2. Top Area Alignment
Content alignment within the top area bar.
top area colors & backgrounds
In order to set up colors for your top area, go to „Colors → Top Area Colors “ in Theme Options. Here you can set any color for main navigation and subnavigation, including the background color for the whole top area.If you wish to set some background image for your top area, go to “Backgrounds → Background Images“ and upload the background image under „Top Area Background“
setting up homepage
Next step after making your general website settings would be to set your homepage – starting page of your website.
- Go to “Settings -> Reading”
- Select a static page option to be displayed as your front page
- Choose a page from the select box “Front page” that should be your homepage
- Save your changes

backing up settings
In TheGem admin panel you can easily save all your theme configurations as Backup in order to restore it later, if something goes wrong and you’d like to restore your previous state of theme settings. Go to Appearance – Theme Options and choose “Backup” in TheGem admin panel. In order to backup your settings, just click on “Backup settings”. If you would like to restore your previous Backup click on “Restore settings”. If you wish to save your current settings somewhere locally on your hdd, copy the content of the textbox below and paste it in your text editor – if you would like to restore these settings later, just copy this “code” from your text editor and paste it here in text box, and after that click on “Import Settings”.
PAGES
TheGem for Elementor
adding new page
You can add new page to your website by clicking on Pages ➜ Add new in the leftside wordpress
panel.
Here you have following content fields:

Title of your page = Title of your page’s content
Editor Control of Elementor page builder .
Here you enter your page’s content.
Further page options you can use to configure your page.
custom / fancy page title
Check the „Title Area“ block of settings directly under the WYSIWYG editor. Here you can make following:
- set style for page title
- enable / disable showing of page title
- add alternative customized page title (optionally using HTML formatting)
- add excerpt / subtitle
- set font colors for page title & page excerpt
- enable / disable breadcrumbs
- add custom background for page title area
- add icon(available only in TheGem for WPBakery page builder theme version)
- set video background for the page title-h4
Let’s take a closer look at these settings.

setting style for page title
- Enable Page Title: here you can enable or disable displaying of page tite for the page
- Alignment: set the alignment of page title. Pls note: if you add some icon to your page title (see below), its position depends on this setting. For example „Centered“ means your title, subtitle as well as your icon will be centered inside the page title area, etc.
- Padding Top: set the top padding for your page title
- Padding Bottom: set the bottom padding for your page title
alternative page title (with optional html formatting)
If you wish to add some alternative page title for your page (to display it instead of default page title of wordpress you have entered above) and optionall format this page title using some html code, you can use this option:

To enable this custom page title, activate „ Use rich content title“ checkox and you will see another wysiwyg editor, where you can enter your page title.
adding page excerpt / subtitle
To display some excerpt / subtitle in your page title area, use this field

in „Title & Excerpt“ settings
Font colors, width & margins for title & subtitle
To change font colors for your page title & excerpt as well as to set its width and margins, use following settings in „Title & Excerpt“ section:

setting custom background
In TheGem you can use background color or background image for your page title area. Check „ Background“ section:

- Background Image: here you can set the background image for page title bar. You can select from the set of pre-defined styles/images by clicking on one of them, or you can upload your own image
- Background Color: if you don’t wish to use an image for header’s background,
here you can choose some color using colorpicker
setting video background for page title
In „Video Background“ section of „Page Title“ settings you can optionally set some video to be played in the background of your page title:

- Video Background Type: select the source of your video – self-hosted html5 video, youtube or vimeo video
- Link to video or video ID : here you can enter the URL to the HTML5 video or use Video ID of corresponding youtube or vimeo video
- Video Background Aspect Ratio: here you can define the aspect ration for this video
- Video Overlay Color: in case you wish some overlay, here you can select the color for that
- Video Overlay Opacity (0 – 1): choose opacity for your video overlay
- Video Poster: select cover image to be displayed instead of video on mobile devices
transparent page header
In case you wish to set a transparent header on some page individually (transparent means: your main menu area will be positioned directly above the page with transparent background), check „Page Header“ settings in page options:

- Transparent Menu On Header: this setting enables the transparent menu on page header
- Header Opacity (0-100%): set the opacity for your transparent header
- Use Light Menu & Logo: in case you use some dark images in your page’s hero section, this option enables you to use different colors for main menu and logo (for example „white“). In order to set up colors for your light version of main menu and logo, go to „Colors → Menu Colors“ in Theme Options (for logo: „General → Identity“ ).
- Hide Top Area: if you don’t wish to show top area bar on the some page, just activate this checkbox
adding page sidebars
Using „Page Sidebar“ page option you can add right or left sidebar to your page (please note: In Elementor’s version of TheGem sidebar cannot be added if “TheGem Full Width” page template is selected in page attributes – check this

- Sidebar Position: here you can select, where you wish to have your sidebar
- Sticky Sidebar: with this option you can define if you wish your sidebar to be fixed positioned by vertical scrolling
While editing page in Elementor, choose “Sidebar” widget and add it to your page in the position, where you wish to have your sidebar

adding sliders
TheGem comes with two awesome premium sliders onboard: Revolution Slider and Layer Slider. To enable one of this sliders on top of your page, use „Page Slideshow“ page option:

After enabling one of this, you will be prompted to choose the slider from the list if created sliders.
enabling page preloader
If you wish to enable page preloader for your page, pls use „Page Preloader“ page option

By default page preloader is disabled.
If you wish to enable page preloading for all pages and posts etc. of your website, go to Theme Options → General → Theme Layout , here you have an option „Enable Page Preloader“

lazy loading & bottom margins
In this option you can activate or deactivate lazy loading animations for the content elements of your page. Also here you can “stick” the bottom of the page to the footer without any gaps.
TheGem for WPBakery
adding new page
You can add new page to your website by clicking on Pages ➜ Add new in the leftside wordpress
panel.
Here you have following content fields:

Title of your page = Title of your page’s content
Both Backend & Frontend Editor Controls of WPBakery page builder .
Here you enter your page’s content.
Further page options you can use to configure your page.
Title Area
Check the „Page Title“ block of settings directly under the WYSIWYG editor. Here you can make following:
- set style for title area
- enable / disable showing of title area
- add alternative customized title area (optionally using HTML formatting)
- add excerpt / subtitle
- set font colors for title area & page excerpt
- enable / disable breadcrumbs
- add custom background for page title area
- add icon(available only in TheGem for WPBakery page builder theme version)
- set video background for the title area/li>
Let’s take a closer look at these settings.

setting style for title area
Check „Style & Alignment“ group of settings inside of „Page Title“ setting
- Enable Title Area: here you can enable or disable displaying of title area for the page
- Alignment: set the alignment of page title. Pls note: if you add some icon to your title area (see below), its position depends on this setting. For example „Centered“ means your title, subtitle as well as your icon will be centered inside the title area, etc.
- Padding Top: set the top padding for your title area
- Padding Bottom: set the bottom padding for your title area
alternative title area (with optional html formatting)
If you wish to add some alternative title area for your page (to display it instead of default page title of wordpress you have entered above) and optionall format this page title using some html code, you can use this option:

To enable this custom title area, activate „ Use rich content title“ checkox and you will see another wysiwyg editor, where you can enter your page title.
adding page excerpt / subtitle
To display some excerpt / subtitle in your title area, use this field

Font colors, width & margins for title & subtitle
To change font colors for your page title & excerpt as well as to set its width and margins, use following settings in „Style & Alignment“ section:

setting custom background
In TheGem you can use background color or background image for your page title area. Check „ Background“ section:

- Choose Image: here you can set the background image for page title bar.
- Background Color: if you don’t wish to use an image for header’s background,
here you can choose some color using colorpicker
adding icon for title area

- Icon: here you can choose an icon from the font icon
- Icon Color: Choose the main font color of your title icon here
- Icon Color 2: If you wish to make your icon bicolored, here you can choose the second font color for your icon
- Icon Style: Needed for bicolored icons – here you can define the angle of color splitting on your icon
- Icon Background Color: Choose the background color of your icon
- Icon Border Color: Choose the border color of your icon
- Icon Shape: Here you can choose between different icon shapes
- Icon Size: In which size your icon should appear
setting video background for title area
In „Video Background“ section of „Title Area“ settings you can optionally set some video to be played in the background of your title area:

- Video Background Type: select the source of your video – self-hosted html5 video, youtube or vimeo video
- Link to video or video ID : here you can enter the URL to the HTML5 video or use Video ID of corresponding youtube or vimeo video
- Video Background Aspect Ratio: here you can define the aspect ration for this video
- Video Overlay Color: in case you wish some overlay, here you can select the color for that
- Video Overlay Opacity (0 – 1): choose opacity for your video overlay
- Video Poster: select cover image to be displayed instead of video on mobile devices
transparent page header
In case you wish to set a transparent header on some page individually (transparent means: your main menu area will be positioned directly above the page with transparent background), check „Menu“ settings in page options:

- Menu Transparency: this setting enables the transparent menu on page header
- Menu Opacity (0-100%): set the opacity for your transparent header
- Use Light Menu & Logo: in case you use some dark images in your page’s hero section, this option enables you to use different colors for main menu and logo (for example „white“). In order to set up colors for your light version of main menu and logo, go to „Colors → Menu Colors“ in Theme Options (for logo: „General → Identity“ ).
adding sliders
TheGem comes with two awesome premium sliders onboard: Revolution Slider and Layer Slider. To enable one of this sliders on top of your page, use „Slider“ page option:

After enabling one of this, you will be prompted to choose the slider from the list if created sliders.
enabling page preloader
If you wish to enable page preloader for your page, pls use „Page Preloader“ page option

By default page preloader is disabled.
If you wish to enable page preloading for all pages and posts etc. of your website, go to Theme Options → General → Theme Layout , here you have an option „Enable Page Preloader“

lazy loading & bottom margins
In this option you can activate or deactivate lazy loading animations for the content elements of your page. Also here you can “stick” the bottom of the page to the footer without any gaps.
Elementor
For documentation concerning Elementor’s version of TheGem theme and TheGem Elements for Elementor plugin please refer to this chapter
WPBakery Page Builder
WPBakery Page Builder
WPBakery Page Builder is the best drag’n’drop visual editor for building pages, posts etc. in WordPress. If you are not familiar with WPBakery Page Builder, we would recommend to take a look at following videos:
https://www.youtube.com/watch?v=XJz_XWiOK78
https://www.youtube.com/watch?v=ngDEopRPHoA
https://www.youtube.com/watch?v=XJz_XWiOK78https://www.youtube.com/watch?v=ngDEopRPHoA
https://www.youtube.com/watch?v=dn5TqabaBMk
https://www.youtube.com/watch?v=dtAAx_r9oLM
https://www.youtube.com/watch?v=waZqhu8tlo4
Under https://vc.wpbakery.com/video-tutorials/ you can find some other useful video tutorials.
Under https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress you will find the complete documentation.
Please note, that WPBakery Page Builder inside TheGem is optimised for this theme, so all content elements and shortcodes you have here are TheGem-related. All TheGem elements you will find in tab „The Gem“ in WPBakery Page Builder :

By default, WPBakery Page Builder is enabled for Pages, Portfolio, Products, Posts; however you can also enable it for other post types, if you need it. To do this go to “WPBakery Page Builder ” and make your selection.

To start creating new page layout you can choose wether to do it in backend or in frontend editor. We recommend to use Frontend Editor, because it is a real “What You See Is What You Get” way to build your pages. Click on “Front End Editor”

and you will be switched to WPBakery Page Builder Frontend Editor:
Here you might want to begin with adding a new content element by clicking on “Add element”. After that the overview of all content elements will be displayed.
You can begin with adding a new content row in your page; choose “Row”. You will be switched to your page with added row element. Now you can edit its properties like for example number of columns and layout.
In this way you can add and edit all other elements; you can combine them with each other and drag-n-drop them.
Pls check the detailed overview of all content elements delivered with TheGem:.
rows & columns
Each page / post building process begins with adding rows and columns, defining your block layout.Pls refer to this video tutorial: https://www.youtube.com/watch?v=dtAAx_r9oLM
spaces & margins
There are three main ways to control spaces, margins & paddings in TheGem.
This is a native TheGem shortcode. You can find it here

With this element you can manage your horizontal margins & paddings very precisely. The advantage of using this shortcode is, that it shows you inserted spaces using dashed areas. Another useful feature of this shortcode is to insert nice colorful content dividers.

Style: select the style of your separator. If you wish to use divider to set horizontal margins, use preselected “1px” style
Color: select the color of your separator.
Margin top: set the top margin in px.
Margin bottom: set the bottom margin in px. NOTE: you can also use negative values (i.e. -27) to reduce margins!
In WPBakery Page Builder you can swith to „design options“ tab in Rows or Columns properties and here you can set margins and paddings as well:



text block
To add some text block to your page, use „Text block“ element:


This element adds a WYSIWYG editor for inserting / formatting text blocks in a usual comfortable way.
icons
TheGem delivers three shortcodes for inserting buttons in your content.

icon
This shortcode inserts a standalone icon on any position in your content

Icon pack: if you wish to use some icon in your button, here you can define the icon pack, whereyou wish to choose your icon
Icon: here you can choose an icon from the font icon set you have selected in „Icon Pack“. Just click on “Show icon codes”, select and copy the code of the icon you wish to insert and paste this code here
Shape: Here you can choose between different icon shapes
Style: Needed for bicolored icons – here you can define the angle of color splitting on your icon
Color: Select font coor for your icon
Color 2: If you wish to make your icon bicolored, here you can choose the second font color for your icon
Background Color: Choose the background color of your icon
Border Color: Choose the border color of your icon
Size: In which size your icon should appear
Link & Link Target: enter an URL if you wish to link your icon
Centered: if you wish to automatically center this icon inside the content block where it is inserted, activate this option
Icon Top Margin & Icon Bottom Margin: here you can define the top & bottom margins of your button, in pixels
icon with text
This shortcode is quite similar to Icon shortcode described above, but it gives an option to insert a text container, starting with icon, and to control icon & text positions, margins and paddings very precisely. All settings are quite similar to the settings of Icon shortcode (see above). After inserting this element, you can then prepend or append text block inside this shortcode.
icon with title
This shortcode is quite similar to Icon shortcode described above, but it gives an option to insert some title in combination with the icon. All settings are quite similar to the settings of Icon shortcode (see above).
All icon element demos
styled & fancy textboxes
Styled boxes could be used to highlight some content parts, to attract the visitor’s attention to some important facts, to promote something. With this shortcode you can easily customize the colors of your box. To insert a styled box in your content use Textbox shortcode:


Style: you can select, if you wish to have a title bar in your textbox or not or if you wish to make a picture box (where the picture is placed above the textbox)
Content Text Color: Font color for the text in the textbox, Choose or enter color code, ex. #ffffff.
Content Background Color: here you can select the color for the background of your textbox
Content Background Image: if you wish to use an image as background of your textbox, here you can select this image from your media library
Background Style: choose a style of displaying background image
Background horizontal position: choose the horizontal position of your background imageBackground vertical position: choose the vertical position of your background image
Parallax: enable parallax effect if you wish to use parallax
If enabled:
Parallax type: choose parallax type you wish to use
Parallax overlay color: select overlay color for your parallax area
Padding top: set the top padding of the fullwidth area in pixel
Padding bottom: set the bottom padding of the fullwidth area in pixel
Padding left: set the left padding of the fullwidth area in pixel. NOTE: set this padding to “0” if you
wnat to avoid any paddings to the left
Padding right: set the right padding of the fullwidth area in pixel. NOTE: set this padding to “0” if
you wnat to avoid any paddings to the right
Border color: color of your CTA’s border
Border Width (px): width of the CTA’s border
Border Radius (px): radius for the rounded corners of the CTA’s border
Rectangle Corner: if you wish, you can select corners of the CTA’s border, which should stay non-rounded, like here

Top & Bottom Arеa Style: choose, which fancy style would you like to use for the top or for the bottom of your CTA. Be default fancy styles are disabled

Centered: Choose if you wish to center your icon / image / buttons inside the CTA container
Lazy Loading enabled: here you can enable a lazy loading animation for your button
If you choose to use a title in your textbox,

you can set following settings in „Title“ tab:
Icon pack: if you wish to use icon in your textbox’s title, here you can define the icon pack, where you wish to choose your icon from.
Icon: select the icon you wish to use in your textbox’s title by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field “Icon”.
Icon Shape: select the shape of the icon.
Icon Style: in TheGem you can use bicolored icons. In this field “Style” you can select the angle of color splitting in bicolored icon. By default only one color will be applied.
Icon Color: select the main font color of your icon using the colorpicker or typing the hex value
Icon Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above
Icon Background Color: choose the color of icon’s background using the colorpicker or typing the hex value
Icon Border Color: choose the color of icon’s border using the colorpicker or typing the hex value
Icon Size: select the size of your icon
Title Area: here you can enter your textbox’s title. Note: you can use any HTML or shortcodes here.
Title Text Color: Font color for the title of the textbox
Title Background Color: Background color of the title area in your textboxAfter you have inserted your textbox, you can start filling it with content by simply clicking on “+” symbol above the textbox.
100% width & parallax areas
By using „Fullwidth Container“ shortcode you can insert and style 100% width areas with optional parallax anywhere on your page and add to this area any content & shortcodes you wih. To insert fullwidth container, choose this element from the list of TheGem’s shortcodes here:


Color: select the font color for the text content you will insert in your fullwidth area
Background Color: select the background color for your fullwidth area
Background Image: select some image to be used as background image of fullwidth container. For parallax areas we advice to use large images in 1920 x 1200 px resolution
Background Style: choose a style of displaying background image
Background horizontal position: choose the horizontal position of your background imageBackground vertical position: choose the vertical position of your background image
Parallax: enable parallax effect if you wish to use parallax
Parallax type: choose parallax type you wish to use
Parallax overlay color: select overlay color for your parallax area
Padding top: set the top padding of the fullwidth area in pixel
Padding bottom: set the bottom padding of the fullwidth area in pixel
Padding left: set the left padding of the fullwidth area in pixel. NOTE: set this padding to “0” if you wnat to avoid any paddings to the left
Padding right: set the right padding of the fullwidth area in pixel. NOTE: set this padding to “0” if you wnat to avoid any paddings to the right
Container: enable this option if you don’t want to display the content inside your fullwidth area in 100% width layout, i.e. to display your content width limited to main website content width
Top & Bottom styled marker: choose if you wish to dispaly a styled marker and on which position After adding a fullwidth container, you can add any content element inside it by simply clicking on “+” symbol on it:

video backgrounds
To insert video backgrounds in your 100% fullwidth area, use „Fullwidth Container“ with following options:

Background video type: select the source of your video
Link to video or video ID : here you can enter the URL to the HTML5 video or use Video ID of corresponding youtube or vimeo video
Video Aspect Ratio: here you can define the aspect ration for this video
Video Overlay Color: in case you wish some overlay, here you can select the color for that
Video Overlay Opacity (0 – 1): choose opacity for your video overlay
call-to-action & alert boxes
To insert an CTA / alert box in your content use Alert Box / CTA Shortcode:


Icon pack: if you wish to use icon in your CTA block, here you can define the icon pack, where you wish to choose your icon from. Pls note: if you wish to use an image instead of an icon, choose „Image“ from this select box and select imahe from the media library:

Icon: select the icon you wish to use in your CTA by clicking on Show Icon Codes. The overview of all available icons will open. Select the code of the icon you wish to insert, copy it, close the overview and paste it in this field “Icon”.
Icon Shape: select the shape of the icon. Note, that this shape will also apply to your CTA image, if you have decided to use an image instead of an icon
Icon Style: in TheGem you can use bicolored icons. In this field “Style” you can select the angle of color splitting in bicolored icon. By default only one color will be applied.
Icon Color: select the main font color of your icon using the colorpicker or typing the hex value
Icon Color 2: select the second font color of your icon, if you wish to use bicolored icon. Your icon will then appear in two colors (color / color 2), splitted by the angle you have selected in Style field above
Icon Background Color: choose the color of icon’s background using the colorpicker or typing the hex value
Icon Border Color: choose the color of icon’s border using the colorpicker or typing the hex value
Icon Size: select the size of your icon
Text color: select the color of your CTA’s text
Background color: you can use background color for your CTA’s background
Background image: if you wish to use an image as background of your CTA, here you can select this image from your media library
Background Style: choose a style of displaying background image
Background horizontal position: choose the horizontal position of your background image
Background vertical position: choose the vertical position of your background image
Border color: color of your CTA’s borderBorder Width (px): width of the CTA’s border
Border Radius (px): radius for the rounded corners of the CTA’s border
Rectangle Corner: if you wish, you can select corners of the CTA’s border, which should stay non-rounded, like here

Top & Bottom Arеa Style: choose, which fancy style would you like to use for the top or for the bottom of your CTA. Be default fancy styles are disabled
Centered: Choose if you wish to center your icon / image / buttons inside the CTA container
For inserting buttons in your CTA / Alert Box, use „Button 1“ and „Button 2“ tabs in Alert Box / CTA shortcode.

Pls note: here you have all the same button options as in „Button“ shortcode – description see above in section „Button“
styled galleries


See detailed description of galleries in Chapter Galleries.
TheGem has a number of different gallery types which you can use to display your images in content by inserting a Gallery element:
Gallery: here you can select a gallery to display, which you have created under „Galleries“ in your wp admin
Gallery type: Here you can select the type of your gallery. You can choose between:
- Slider – gallery in form of slider with thumbnail bar below
- Grid – gallery in form of classic grid
Depending on which gallery type you have selected you have different options.
Layout: choose the layout of your grid gallery
Style: For grid galleries: choose the style of your grid here
Gaps size (px): Here you can set a gaps size between images in your grid gallery. Set „0“ for no gaps.
Hover type: select the onhover style here
Border style: choose the style of image borders in your grid views.
Title: If you would like to insert the title to your gallery, use this field and enter your gallery’s title.
Loading Animation: set the loading animation for your gallery items (images).
Layout: choose the layout of your slider gallery Fullwidth means, your main image in the slider gallery will be wider in proportions; half-size is meant to be used on pages with sidebars andcolumns, here is the proportion of the main image in slider more quadratic
Disable thumbnails bar : with this option you can hide the tumbnails bar displayed below the main image in the slider gallery. If disabled you can then choose if you wish to enable a pagination or not
Autoscroll : here you can set an autoscroll speed for your gallery slider (in milliseconds). Leave empty if you wish to disable autoscroll
map with text


Map With Text shortcode helps you to easily publish your google maps, styled in TheGem’s way and optionally enhanced with content layers above the map:
Background color: here yo can set a background color for your content container above the map
Map Height: Map height in pixels
Mab embed iframe: In this field you should paste a googlemaps embed code you have created in google maps. Just follow the steps described in the shortcode dialog
Grayscale: You can set here if you wish to show your google map in grayscale
Container: Choose this option if you don’t wish to display your map in 100% width if you have added it to fullwidth container
Deactivate Map Zoom By Scrolling: This option is useful especially for touch devices. If enabled, your added map will not scroll inside the iframe
Rounded Corners: Optionally add rounded colors to your map
After adding your map you can start inserting a content inside it. Just click on “+” symbol to open a shortcodes dialog.
Blog
With this element you can insert your blog post lists anywhere in content, choosing among many different appearance styles.


Style: select the design style of presenting your blog list
You can select from this styles:

For examples of different blog list styles visit our demo website → main menu „Blog“
Select Categories: you can select categories for your blog list by clicking on „Select Categories“ Tab

Pagination: which pagination style should be used
- Normal: classic pagination using page numbers
- Load More: by choosing this option your next posts will be loaded by clicking on „Load More“ button. Pls note: after choosing this option new settings tab „Load More Button“ appears, allowing you to style this load more button as you wish

- Infinite Scroll: lazy loadingof posts in the posts list by vertical scrolling
- Disable pagination: here you have an option to disable any pagination
Loading animation : choose the animation effect for appearing of blog posts in the list
Ignore Sticky Posts : with this option you can ignore displaying of sticky posts above at the top of postslists
Hide date in title : this setting allows you to hide date in post title in your blog list
Hide author : this setting allows you to hide author in post in your blog list
Hide comments : this setting allows you to hide number of comments in post in your blog list
Hide likes : this setting allows you to hide likes in post in your blog list
pricing tables
Pricing tables shortcode helps you to insert styled pricing tables in different styles in your content.

Inserting pricing tables in your page consist of three steps.
Select “Pricing tables” shortcode from the shortcode list. Here you will get following options to set:

Style: Select one of eight pre-defined styles for your pricing table
Button Icon: Icon to display on the button in pricing table.
Click on “Save changes”. After that, click on “+” symbol in your added Pricing table element to start inserting pricing columns

Select “Pricing table column” to insert a new column to your pricing table:

Top Choice: if you wish to set a marker label to your pricing column, you can write a short text here like “NEW!”
Highlighted: choose this option if you wish that this column will be highlighted / emphasized
Column width : here you can set the width of your column – should it be wider for 3 columns in the row or narrower for 4 columns in the row
Top Choice Color: set the font color for your „top choice“ text label
Top Choice Background: set the background color for your „top choice“ text label
Click on “Save changes” to insert your pricing column
Now you can start filling your pricing column with content. To do this click on “+” symbol in your added pricing column and select the content element you wish to add.

With this element you can define content and its style for the header of the pricing column:

Column title: Type in the title of your pricing column
Column subtitle: Type in subtitle of your pricing column. Pls note: this subtitle works not for all styles; in few styles it is hidden
Price background color: Choose a background color for your price in header area
Price backgroun image: Or, alternatively, here you can choose a background image for your price in pricing column’s header area
Currency: Type in the currency symbol to be show
Price: Enter the price to be shownTime period: Enter the period of time for the price, i.e. “per month”
Styles: Here you can choose, if you wish to use default styles for title, subtitle, price and time period or if you wish to customize it’s colors:

After adding a column’s header with title, price etc. you can additionally add different rows with descriptions

To add new row with column’s description, click on „+“ below tzhe header you have already added

and choose „Column’s Row“

After that you get a WYSIWYG editor, where you can start typing your decription. After saving, youcan clone this row several time in order to get additional rows with the same content – the easiest way to populate your column’s row:

And finally you would probably want to add a footer area to your pricing column with some button. In order to do this, choose following element:

You will get a settings dialog, where you can customize the look of your pricing column’s button (see description above in section „Button“ )
Sometimes it is useful to use some additional titles in your pricing row, for example:

To do this, use „Column’s extra title“ element,

fill it with content and move it on the position in your pricing column, where you wish to have it.
portfolios
TheGem comes with different styles to display your portfolio items on your content page by using Portfolio (for grids) or Portfolio Slider (for sliders) shortcode
portfolio grid


Select Portfolios: choose your desired portfolio set to be displayed. Click on „Select Portfolios“ tab:

Layout: choose a grid layout for your portfolio overview. Choose 1x column list if you wish to display your portfolio as classic list
Style: choose a grid style. For grids you can choose between justified, masonry or metro grid styles
Columns 100% Width (1920x Screen): If you have selected 100% width layout previously, here you can set a number of columns to be displayed on 1920 pix screen resolution
Gaps size (px): Here you can set a gaps size between images in your grid gallery. Set „0“ for no gaps.
Display Titles: here you can select how the portfolio item’s title & description should be displayed. You can choose to display it under the item’s featured image or on mouse hover on featured image
Background Style: if you have selected „On Page“ in „Display Titles“ field previously, here you can select the backround style of the caption with project’s title and description, which is displayed under the project’s featured image
Hover Type: select the hover type you wish to use in your portfolio grid: Please note: if „Gradient“ or „Circular Overlay“ are selected, the project title and descripion will be displayed on project’s featured image if „On Page“ in „Display Titles“ is selected.
Pagination: select the pagination style to apply. You can choose between:
- Normal: classic numbered pagination
- Load More: by choosing this option your next posts will be loaded by clicking on „Load More“ button. Pls note: after choosing this option new settings tab „Load More Button“ appears, allowing you to style this load more button as you wish

- Infinite Scroll: lazy loadingof posts in the posts list by vertical scrolling
Loading animation : choose the animation effect for appearing of blog posts in the list
Items per page: Here you can define, how many portfolio items should be displayed at once on one page.
Show date & sets: select if you wish to show dates & portfolio categories in your grid overview
Disable sharing buttons: by activating this option you can disable a scoial sharing panel in your grid overviews
Activate filter: Select if you wish to display a filter bar above your portfolio grid
Title: If you would like to insert the title to your portfolio overview, use this field and enter your portfolio’s title.
Activate likes: Select if you wish to activate likes / like button for your portfolio items
Activate sorting: Select if you wish to activate sorting option for your portfolio items in your portfolio overview. Pls note: default sorting is by the date, descending
Max. row’s height in grid (px) : this setting appears only if Metro Style is selected. It could be useful for defining the maximal height of one row in the metro grid for selecting the optiomal metro appearance.
Max. row’s height in grid (px) : this setting appears only if Metro Style is selected. It could be useful for defining the maximal height of one row in the metro grid for selecting the optiomal metroappearance.
1x column list portfolios
If you wish to display your portfolio overview as a classic one column list, select „1x column list“ in „Layout“ option of the portfolio shortcode

In this case you have following additional settings:
Layout Version : here you can choose between „fullwidth“ layout (in this case the portfolio item will be wider) or „With Sidebar“ (the proportion of the portfolio item will be more quatratic).
Caption Position : where the caption with project’s title and description should be placed – to the left of the project’s featured image, to the right or should it combine in a zigzag way
portfolio slider
Another way to showcase your portfolio is to use „Portfolio Slider“ shortcode


Title: If you would like to insert the title to your portfolio overview, use this field and enter your portfolio’s title.
Layout: choose a layout for your portfolio slider
Columns 100% Width (1920x Screen): If you have selected 100% width layout previously, here you can set a number of columns to be displayed on 1920x screen resolution
All other settings are similar to the settings of portfolio grid, described above.
STYLED IMAGES
In TheGem you can publish your images with awesome border and frames effects, making them look great and standing out. To do that use the Styled Image shortcode:

Width: Image width in pixels
Height: Image height in pixels
Choose Image: Select image from media library by clicking on Select or enter image URL
Alt: Enter image Alt-Attribute
Border Style: set the border/frame style for your image on the page.
Position: Here you can select the text alignment near your picture
Disable lightbox: activate this checkbox if you wish to disable the full-size image in lightbox

STYLED TABLE
To insert a styled table, use the “Table” shortcode.


Style: choose the style you wish to use
Content: here you can edit your table as usually
Row headers for responsive: choose how to display your rows in on mobile devices
STYLED LISTS
To insert a styled list, use the “Styled List” shortcode.


Type: choose a bullet icon you wish to use in your list
Color: choose a color for your bullet
Content: here you can edit your list as usually
TABS & TOURS
Tabs & tours are useful for grouping your content according its topical meaning and displaying it in a compact user-friendly form on the page.
TABS
In order to insert tabs in your content click on Tabs shortcode. This element is located in „Content“ tab of WPBakery Page Builder

Your tabs will be immediately added to your page.

Now you can start editing its settings. Just click on “edit” icon on your “Tabs” panel:

Style: TheGem comes with four different tabs styles you can choose here
Shape: Select tabs shape.
Color: Select tabs color. Pls note: if you wish to use TheGem pre-made colors, select „TheGem“
here.
Spacing: Select tabs spacing.
Gap: Select tabs gap.
Position: Select tabs navigation position.
Alignment: Select tabs section title alignment.
Autoplay: Select auto rotate for tabs in seconds
Active section: Enter active section number
Pagination style: Select pagination style.
In order to edit the title and properties of one section, click on “edit” icon on your “Section” panel:

After that you are ready to insert any content in your tab by clicking on “plus” symbol on the appropriate tab.
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
TOURS
Tours are actully vertical tabs. They work in the same way. In order to insert tours in your content click on Tours shortcode.

Your tours will be immediately added to your page. Now you can start editing its settings just in the
same way, as by tabs (see above).
TEAMS
Team shortcode is a perfect feature to present your team inside your page content. Use Team
shortcode:


Your tours will be immediately added to your page. Now you can start editing its settings just in the
same way, as by tabs (see above).
Style: choose the style for displaying your team set
Columns: select the number of columns to be displayed in the team grid
TESTIMONIALS
Testimonials shortcode is a good to present your customers opinion about you and your work.


To select testimonials to be displayed, click on „Select Testimonial Sets“ tab and activate the
appropriate checkboxes.
Style: choose the style for displaying your testimonial set
Image Size: choose the size of the testimonial image to be displayed
Fullwith: select this option if you wish to display testimonial in fullwidth layout
Autoscroll: select the autoscroll speed in milliseconds. Leave blank if you don’t want to have any
autoscroll
COUNTERS
Inserting counters in your page consist of two steps.
Select “Counter box” shortcode from the shortcode list. Counter box will be immediately added to your page

Additionally you can make general settings for your counter:

Style: choose the style for displaying your counter.TheGem comes with two horizontal counter styles and one vertical
Columns: for horizontal counters. Here you can choose number of columns in one row
Lazy loading enabled: here you can activate lazy loading animation for your counters
Number format: select the format for displaying your numbers in counter
Vertical counters look like this:

You can make following settings:
Connector color: select the color for vertical connector
Team Person: here you can select a team person to be displayed above. If „none“, team member box will not be displayed.
Now click on “+” symbol on the added counter box. And then click on “Counter” shortcode


You will get following settings dialog:

From: starting number to start counting animation, for example 0
To: final number to finish counting animation, for example 100
Text: title to be displayed under the number
Suffix: you can use it to display some symbol or unit for the numbers
Background Color: select background color for your counter element
Numbers Color: select font color for numbers
Text Color: select font color for title / text
URL (Link): you can link one counter element by defining a link here
To set some icon for your counter element, click on „Icon“ Tab above:

Here you have all same settings as in „Icon“ shortcode (explained above)
TOGGLES & ACCORDION
Accordions are useful to publish different additional content divided or grouped in different sections. In this way you can publish a lot of information in compact form, not blowing out the size of your page and attract the visitor’s attention on some special points in your article.
In order to insert tabs in your content click on Accordions shortcode. This element is located in „Content“ tab of WPBakery Page Builder

Your accordion will be immediately added to your page. Now you can start editing its settings. Just click on “edit” icon on your “Accordion” panel

Here you can make general accordions settings in the way as it is described for „Tabs & Tours“shortcode (see above)
In order to edit the settings of one accordion section, click on “edit” icon on your “Section” panel:

After that you are ready to insert any content in your accordion section by clicking on “plus” symbol on the appropriate tab.

DROPCAPS
Use Dropcap shortocode to insert a dropcap:


Letter: enter the symbol (number, letter etc.) for your dropcap
Shape: select the shape of your dropcap
Style: select the style of your dropcap
Color: use this option to customize default font color of your dropcap
Border Color: use this option to customize default border color of your dropcap
Background Color: use this option to customize default background color of your dropcap
QUOTED TEXT

To insert a quoted text in your page use Quoted Text shortcode:
Content: select the style for displaying your quoted text
VIDEOS
In TheGem you can easily insert your video media at any position in your main content or in widgets – anywhere you wish. You can choose to use a youtube, vimeo or self-hosted video. You can set the size of video container and choose the border/frame you wish
YOUTUBE & VIMEO VIDEO

Width: Video width in pixels
Height: Video height in pixels
Video Aspect Ratio: here you can define the aspect ration for this video
Video_id: Youtube video ID something like Js9Z8UQAA4E. You can find out the video ID in youtube URL address
Border Style: set the border/frame style for your video on the page.
Position: set the position of your video in your content
SELF-HOSTED VIDEO
In case of self-hosted html5 video, in addition to the general video settings as described for youtube & vimeo, you have following options:
Height: Video height in pixels
Video URL in mp4 or flv format: Select your video from media library or type in the URL address of the video
Poster Image: Select the preview/cover image for your video from media library
Style: set the border/frame style for your video on the page.
Position: set the position of your video in your content
QUICKFINDERS
See detailed description of quickfinders in Chapter „quickfinders“
To insert quickfinders in your page content use Quickfinder shortcode


To select quickfinder set to be displayed, click on „Select Quickfinders“ tab above and activate checkboxes on appropriate quickfinder sets.
Style: TheGem comes with many different styles of displaying your quickfinders. Here you can choose one of them.
> For„Default Style“:
Title Weight: you can choose wether you would like to have your item’s title bold or this
> For „Classic Box“, „Iconed Box“, „Binded Box“, „Binded Iconed Box“, „Tag Box“:
Number of columns: select number of columns in one row of the quickfinder grid
Box Style: choose from three different box styles
Box Background Color: select background color for one quickfinder item box
Alignment: select text and icon alignment inside the box
Icon Position: select icon position inside the box
Title Weight: you can choose wether you would like to have your item’s title bold or this
Activate Button: if you wish to activate buttons in quickfinder items, activate this checkbox. Pls note: buttons will appear only by quickfinder items, where you have defined URL/link (see detailed description in section „quickfinders“) If button activated, you can next style your button as usually (see description in section „Button“)
If you wish to set / define hover styles for your quickfinder items, click on „Hovers“ tab above:

For „Vertical Styles“:
Pls note: you should use quickfinder items of the same icon/image size to display vertical quickfinders properly. Otherwise some visual issues with connectros can appear.
Title Weight: you can choose wether you would like to have your item’s title bold or this
Connector color: select the color for vertical connector
CLIENTS
See detailed description of clients in Chapter „Clients“
To insert clients overview in your page content use Clients shortcode:

To select clients sets to display, click on „Select Client Sets“ and activate corresponsing checkboxes.

Style: choose whether to show your clients as grid or as slider/carousel
Autoscroll: here you can enable autoscroll and define autoscroll speed in milliseconds
Rows: in case you have selected “grid” for displaying your clients, here you can select number of rows for this grid
Columns: in case you have selected “grid” for displaying your clients, here you can select number of columns for this grid
DIAGRAMS
Use this shortcode to insert diagrams in your content:

Title: defines the title of your diagram
Summary: defines the summary text for your diagram
Type: choose the type of diagram to be displayed – lines/bars or circles.
Content: here you can edit the conten of your diagram by editing its shortcode
{"title":"Skill1","amount":"70","color":"#ff0000"}
{"title":"Skill2","amount":"70","color":"#ffff00"}
{"title":"Skill3","amount":"70","color":"#ff00ff"}
{"title":"Skill4","amount":"70","color":"#f0f0f0"}
- tag
{gem_skill}
defines one parameter/value/skill to be displayed in diagram. You can add as much values/skills as you wish - attribute “title” inside of tag [skill] defines the label/title of this parameter/skill
- attribute “color” defines the color whioch should be used in diagram to represent this parameter/skill
- attribute “amount” defines the value in percent of this parameter/skill
Style: choose one of three pre-made styles of displaying horizontal (line) diagrams
WIDGETS DEMO
You can find demonstration of all TheGem’s widgets on this page: WIDGETS DEMO
VISUAL EDITOR
This is a full-functional WYSIWYG Editor you can use to create some information boxes in the sidebar of your pages. As in any richt text editor, you can use any formatting or any media content you wish as well as all of the TheGem shortcodes.

TEXT
Text is a simple textbox/infobox you can use to highlight some brief facts / information for you page article. Here you don’t have any editor for formatting your text – you can do it only via HTML code.
PICTUREBOX
Picturebox is like an image infobox for your page. With this widget you can insert an image in your sidebar by selecting it from the media library or uploading it from your computer – with own title, own description and own link.

PROJECT INFO / CUSTOM ICONED FIELDS
This widget is especially useful for project/product pages, contact pages or any pages, where you wish to emphasize some brief facts using separate fields with nice icons.
There are two design styles of this widget you can choose from. This widget consists of ten fields. In each field you can define:
Field’s title: like a label of your field Field’s
value: values for this label
Field’s Icon: icon for this label. To define the desired icon just click on “Show Icon Codes”, find the icon you need, copy the icon code and paste it in this field.

PROJECT SLIDER
This widget is usefull for displaying your portfolio works in a compact form in page sidebar. Just enter the title of this widget (for example „Latest Works“), select portfolios (sets) to be displayed anddefine number of rows to be shown.
THEGEM GALLERY
Easy way to display a slider with some selected gallery in page sidebar. You can select one or more galleries and define autoscroll speed in milliseconds.
TEAMS
If you wish to show your team persons in the sidebar on some pages, use this widget. Just select one or multiple team sets by clicking on checkboxes. If you have several persons in the set, they will be shown on the page with a fading in / fading out effects. You can define autoscroll speed in milliseconds. For details concerning the adding and grouping your team members see chapter Team.
TESTIMONIALS
Just like your team members, you can show testimonials of your customers in the page sidebar. Just select one or multiple testimonial sets by clicking on checkboxes. If you have several testimonials in the set, they will be shown on the page with a fading in / fading out effects. In TheGem there are two different styles of displaying testimonials in sidebar; you can choose between them in selectbox “Style”. Also you can define autoscroll speed in milliseconds.
DIAGRAM
Diagrams are essential for demonstrating any kind of skills, developments, shares & ratios. TheGem has a built-in widget for displaying two different kinds of diagrams: bars & circles. Bar diagrams are animated and circle diagrams are interactive on mouse-over:
- Type: here you choose what kind of diagram you would like to show – lines/bars or circles.
- Skills: in this block you define one digram’s value, its label and color.
- Add Skill: in order to add one more value to your diagram click on “Add Skill” and fill in the appropriate fields.

FLICKR / PHOTOSTREAM
Diagrams are essential for demonstrating any kind of skills, developments, shares & ratios. TheGem has a built-in widget for displaying two different kinds of diagrams: bars & circles. Bar diagrams are animated and circle diagrams are interactive on mouse-over:
- Using this widget you can display a photostream from Flickr in the page sidebar. In order to activate the photostream you should enter the flickr ID of the corresponding profile (you can find out your flickr ID here: HTTP://IDGETTR.COM/ You can also define the number of images you would like to show in this widget – by setting them in the field Items
To add facebook plugin in your sidebar, use this widget. Just type the URL of your facebook profile page and you are done
Display your recent tweets in the page sidebar. To enable this widget you should first create your twitter app for your website here
HTTP://DEV.TWITTER.COM/APPS
After creating and enablng your twitter app, type the following values in the widget settings to activate this widget: Consumer Key, Consumer Secret, Access Token, Access Token Secret, Twitter ID.
In the field Number of Tweets you can define the number of recent tweets you’d like to show in your sidebar.
CUSTOM RECENT POSTS / POPULAR POSTS
Show your recent or most popular blog posts in the sidebar – just select the number of posts to be shown in the widget box.
CONTACTS
Display your contact information you have defined in theme options
MAILCHIMP SIGNUP
Adds the newsletter signup form to your sidebar
PORTFOLIOS
WHAT IS PORTFOLIO
Portfolios are very useful custom post types in TheGem, aimed to create and to highlight special content, different to usual pages and posts. Portfolios can be used to publish / demonstrate:
Portfolio can help you to emphasize the results of your company’s activities in some projects or to inform your customers about the successfull stories / case studies you have gained with your business by providing your services:
- you can describe, what kind of a project you have realized
- you can insert image galleries with some project outtakes/results
- you can add the project description, focusing on your skills and provided services
- you can publish media content like videos, showing your customers the development of the project
- you can introduce the development team, responsible for this project etc…
In the same way as projects and case studies you can use portfolios to highlight the products and services your company provides to customers. You can create the product descriptions (portfolio items) and structure it in different product groups / categories (portfolio sets), which than can be used in navigation or product filter.
Don’t waste time of your customers and show them what you can – just with one click! Portfolios give you the possibility to publish different media types and make it accessible in beautiful overviews. Layers with videos from youtube, vimeo, your own hosted videos or fullsize images in stylish lightboxes – all this can be done using different portfolio types.
Or you can use portfolios to give your website visitors the better overview about your articles, pages, posts. Different layouts of portfolio overviews in TheGem are very helpful for creating comfortable navigation across your website content
In order to understand how it works it is very important to understand the nature of portfolio.
Portfolio consists of two major parts:
- Portfolio items
- Portfolio sets
PORTFOLIO ITEMS
Portfolio items are custom posts. One portfolio item is like one page or one blog post – it is a single post used specially for representing your work, products, projects etc.
ADDING NEW ITEM
You can create new portfolio item using leftside wordpress menu or the button above the list of existing portfolio items (Add New Item)

TYPES OF PORTFOLIO ITEMS
There are different types of portfolio items you can use to demonstrate / publish your content:
This is a custom single post for describing / showing your project, case study, product etc. It works like a page: you can put the title, decription and images of your project, insert galleries, slideshows, related projects and so on. After creating the new portfolio item this type is selected per default.
Your portfolio item could be a link to some other page on your website – it is useful for redirecting the visitor from some overviews to specific articles, not situated in the same website category as the overview.
You can use any external URL to redirect your visitor to another website. It is useful for demonstrating the created projects on the web, or some galleries on external website or maybe some press releases in online magazines.
Use this in order to show your visitors some full-size images per one click. In this way you can use portfolio like a gallery – in an overview your visitors see a small thumbnails of the images, clicking on that opens the lightbox layer with original full-size image.
If you want to show your visitors some youtube videos just onpage, with one click – use this type of portfolio item. By clicking on this item in portfolio overview the vistor gets a lightbox layer with youtibe video – immediately on your website’s page, without redirecting to youtube website.
Use it in the same way, as YouTube Video type of portfolio item.
If you save all you videos directly in wordpress media library and want to stream it directly from here, use this type of portfolio item. In this case, just like in case of youtube or vimeo video, your visitor wioll get a layer with video player, streaming video content directly from your media library
In order to define the type of portfolio item use the select box Type of portfolio item in the panel General Settings in portfolio item
- Portfolio Page: you can start editing your page by entering your content and choosing the page options (see description below)
- Internal Link: use the field Link to another page or video ID to enter the relative URL (without the domain name, for example /content/page.html) of the page you would like to redirect your visitor to
- Full-Size Image: in this case the fullsize image of your Featured Image would be shown in the lightbox layer
- YouTube Video: use the field Link to another page or video ID to enter the YouTube Video ID (like for example YE7VzlLtp-4, you can find it in the youtube video’s URL) of the youtube video you like to show
- Vimeo Video: use the field Link to another page or video ID to enter the Video ID (like for example 1084537, you can find it in the vimeo video’s URL) of the vimeo video you like to show
- Self-Hosted Video: use the field Link to another page or video ID to enter the relative URL of the video in your media library. You can find the URL of the video, if you go in media library, choose the video and take a look at its properties
TheGem for Elementor theme version

TheGem for WPBakery theme version

more type”
ASSIGNING PORTFOLIO SETS
In order to define, to which portfolio set the portfolio item belongs, you should select the
corresponding portfolio sets in the panel Sets to the right.
You can make a multiple choice if your portfolio item suits to multiple different portfolio sets.
Of course you can create a new portfolio set from here by clicking on Add new set.

DEFINING SORT ORDER
It is possible to define the sort order of the portfolio item in one set by entering the order number in the field Sort Order in the right panel
Notice: if your portfolio item belongs to multiple portfolio sets, in all of them it will be on the same order position as entered in this field.

PORTFOLIO PAGE: CONTENT ELEMENTS & OPTIONS
generally portfolio page has all the same layout & template settings as a usual page. To activate a sidebar on your portfolio page, just select whoch sidebar position (left or right) you would like to have in the “Page Sidebar” setting
TheGem for Elementor theme version

TheGem for WPBakery theme version

Just like by any page you can start editing your portfolio page by entering the title and main text in the WYSIWYG editor.
In Elementor’s version of TheGem you have an option to use Elementor Page Builder to build your portfolio page with any of TheGem’s elements (see description of Elementor elements in chapter “Elements Overview ”
In WPBakery’s version of TheGem you have an option to use WPBakery Page Builder (backend and / or frontend editor) to build your portfolio page with any of TheGem’s elements (see description of WPBakery elements in chapter “WPBakery ”
TheGem for Elementor theme version

TheGem for WPBakery theme version

- 100% page layout: by activating this checkbox you define 100% width layout for your portfolio
page - Show as Highlight: this option is useful for making packery style of portfolio overviews. Packery overview consists of different portfolio items (their featured images), which are highlighted – they have a bigger size (double size) compared with the normal portfolio items. If you wish to display your portfolio item as highlighted (double size featured images), you can activate this option. Next, in the selectbox „Highlight Type“ you can choose, which orientation your highlighted item (its featured image) should have. „Squared“ means the featured image will have double width and double height of the normal item’s image. „Horizontal“ means your image will have a double width, and „vertical“ – double height of the normal item’s featured image in the portfolio overview.
- Overview title: here you can enter the alternative title of your portfolio page to be displayed in portfolio overviews (grids & sliders) – this could be useful if your portfolio page has a very long title, which doesn’t suit in to the item box in portolio overview.
- Project Preview Button Link: if you wish to add some project preview button on your project page, here you can enter the URL where the button should link. Note: this button will be used also in „one column“ style of portfolio overview.
- Project Preview Button Text: here you can enter the title of your button
- Back to overview URL: here you can define the url of the overview page with your portfolio sets, where this icon on portfolio page should link
- Type of portfolio item: here you can define the type of portfolio item (see description
above)
PORTFOLIO CATEGORIES
Portfolio categories are the categories or groups of portfolio items and are useful to structure your portfolio items. In this way you can create different scopes of your activities as different portfolio categories and assign your projects/products/case studies/reviews/media content (say your portfolio items) to these different activity scopes.
ADDING NEW PORTFOLIO CATEGORY
You can create new portfolio set by going in Portfolios ➜ Sets on the leftside wordpress menu.
You can create new portfolio category by going in Portfolios ➜ Portfolios on the left side wordpress menu.
After that you are already on the page of creating the new portfolio category. On the right side in the table you see the list of all existing portfolio categories – you can edit their properties by clicking on the title of the corresponding portfolio category.

Name
enter here the name of your portfolio category. This name will be used in the list of available portfolio categories in portfolio item (see above) Notice: this name will be also used as a filter name in portfolio overviews – in the case you publish your portfolio overview with the filter above.
Slug
slug is a userfriendly version of the name. Slug is important, because it is used in the shortcode Portfolio. So don’t forget to fill it if you are creating new portfolio category.
Description
just a brief description of your category, usually it is not needed
Order
here you can set the sort order position of your portfolio category. With this field you can make sorting of your portfolio sets.
That’s all – don’t forget to submit your changes by clicking on Add New Category
PUBLISHING PORTFOLIOS
In Elementor’s version of TheGem use “TheGem Portfolios” group in Elementor’s editor panel as described in this chapter.
In WPBakery’s version of TheGem use „Portfolios“ elements as described in details in chapter “WPBakery – Portfolios”
CUSTOMIZING PORTFOLIO STYLES
Just like all other elements of TheGem theme you can easily customize your portfolio styles using the theme option panel of TheGem. To open the admin panel go to Appearance ➜ Theme Options.
TheGem for Elementor theme version

TheGem for WPBakery theme version

FONTS
You can customize the fonts which are used to display the title text and description text of one portfolio item in portfolio overviews. To do this go to “Fonts” and use following panels:
Portfolio Title Font
Portfolio Description Font
Here you can choose standard fonts as well as a plenty of google fonts and their styles
COLORS
In order to customize all main portfolio colors navigate to “Colors” and open “Portfolio Colors” panel.
Following color settings could be customize:
Portfolio Overview Title Text
Color of portfolio item’s title text in overviews (inside content).
Portfolio Overview Description Text
Color of portfolio item’s description text in overviews (inside content).
PAGINATION COLORS
To change the color of pager buttons used for navigation through portfolio overviews inside content, go to “Colors” and open “Bullets, Icons, Dropcaps & Pagination” panel. Then use following options:

QUICKFINDERS (WPBakery)
NOTE: this custom posttype is available only in TheGem for WPBakery page builder theme version. In TheGem for Elementor theme version quickfinders are made as an Elementor element/widget and there is no need in a separate additional custom posttype. For Elementor description of Quickfinders element check this section
WHAT IS QUICKFINDER
Quickfinders are icons and/or images used to help user to navigate on the website or to highlight some special advantages/properties of the products or services. So quickfinders could be thought in two ways:
Navigation Support
In addition or instead of classic menu navigation you can use the graphical representation of subpages in form of some icons or thumbnail images with title and short description. It helps your website visitors to find quickly the subpages / subsections /information they need.
Advantages/Properties Overview
If you want to illustrate some special highlights of your products or services on the page, you can use quickfinders in form of icons to attract the visitor attention to these key issues among another page’s content
Like Portfolios, Quickfinders consist of two major parts:
Quickfinder items
Quickfinder sets
QUICKFINDER ITEMS
ADDING NEW QUICKFINDER ITEM
You can create new quickfinder item using leftside wordpress menu or the button above the list of existing quickfinder items. By creating a new quickfinder item you should fill following content fields:

Title
This is the title of the quickfinder item, which will be shown under the quickfinder item in the overview
Description
Short text which will be shown under the title
Link
If you like to link your quickfinder item, here you can enter the URL, which should be associated with this quickfinder item
Button text
If you wish to display some button under the description text, here you can define the label/text of this button.
Title text color
If you wish to display some button under the description text, here you can define the label/text of this button.
Description text color
Here you can freely define the font color of your item’s description. By default the color is set to the color, which is defined in Theme Options (see below)
Icon Pack:
select the icon pack you wish to choose an icon from
Icon:
here you can choose an icon from the font icon set you have selected in „Icon Pack“. Just click on “Show icon codes”, select and copy the code of the icon you wish to insert and paste this code here
Icon Color:
If you wish to make your icon bicolored, here you can choose the second font color for your icon
Icon Color 2:
If you wish to make your icon bicolored, here you can choose the second font color for your icon
Icon Style:
Needed for bicolored icons – here you can define the angle of color splitting on your icon
Icon Background Color:
Choose the background color of your icon
Icon Border Color:
Choose the border color of your icon
Icon Shape:
Here you can choose between different icon shapes . NOTE: this shape will be also applied on your image if you have chosen to use featured image as your quickfinder element
Icon Size:
In which size your icon should appear. NOTE: this size will be also applied on your image if you have chosen to use featured image as your quickfinder element
Featured Image
In TheGem you can freely choose whether to use images or icons to depict your quickfinder item. If you wish to insert image for an image quickfinder use this field “Featured Image”. Here you can upload/choose an image used to depict the quickfinder item in the overview on the page. Here you can use any graphics you wish.
Quickfinders
Here you can assign the given quickfinder item to some existing or new quickfinder set (see below)
ASSIGNING QUICKFINDER SETS
In order to define, to which quickfinder set this quickfinder item belongs, you should select the corresponding quickfinder sets in the panel “Quickfinders” to the right.
You can make a multiple choice if your quickfinder item suits to multiple different quickfinder sets. Of course you can create a new quickfinder set from here by clicking on “Add new set”.
DEFINING THE SORT ORDER
It is possible to define the sort order of the quickfinder item in one set by entering the order number in the field “Sort Order” in the right panel. Notice: if your quickfinder item belongs to multiple quickfinder sets, in all of them it will be on the same order position as entered in this field.
QUICKFINDER SETS
Quickfinder Sets are the categories or groups of quickfinder items and are useful to group/structure your quickfinder items. Actually to say in other way, quickfinder set is your quickfinder you wish to insert in your page. So you can organize different subpages or different services/product highlights as quickfinder items in one quickfinder navigation and publish it on a page.
ADDING NEW QUICKFINDER SET
You can create new quickfinder set by going in Quickfinders ➜ Sets on the leftside wordpress menu.
After that you are already on the page of creating the new quickfinder set. On the right side in the table you see the list of all existing quickfinder sets – you can edit their properties by clicking on thetitle of the corresponding set.

By editing the quickfinder set you have following fields:
Name
enter here the name of your quickfinder set. This name will be used in the list of available quickfinder sets in quickfinder item (see above)
Slug
slug is a userfriendly version of the name. Slug is important, because it is used in the shortcode “Quickfinder”. So don’t forget to fill it if you are creating new quickfinder set.
Description
just a brief description of your set, usually it is not needed
PUBLISHING QUICKFINDERS
Inserting quickfinder in a page is very simple. Use WPBakery Page Builder and „Quickfinders“ shortcodesas described in details in chapter „Shortcodes – Quickfinders“
FONTS
You can customize the fonts which are used to display the title text and description text of one quickfinder item in quickfinders. To do this go to “Fonts” and use following panels:
Quickfinder Title Font – Note: in TheGem there are two styles for quickfinder titles – Bold and Thin (in shortcode „Quickfinders“ you can choose which one to use)
Quickfinder Description Font
Here you can choose standard fonts as well as a plenty of google fonts and their styles
COLORS
In order to set default colors for quickfinder titles and descriptions, navigate to “Colors” and open “Quickfinder Colors” panel.
Quickfinder Title Text
Default color of quickfinder item’s title text in overviews inside content
Quickfinder Description Text
Default color of quickfinder item’s description text in overviews inside content
Galleries (WPBakery)
NOTE: this custom posttype is available only in TheGem for WPBakery page builder theme version. In TheGem for Elementor theme version galleries are made as an Elementor element/widget and there is no need in a separate additional custom posttype. For Elementor description of Gallery element check this section
Galleries are essential part of any business website. They give the possibility to illustrate some topics or information with a set of images, grouped together in a nice overviews of thumbnails with fullsize on-click lightboxes. In TheGem there are different kinds of galleries you can use on your pages in a flexible way.
CREATING NEW GALLERY
STEP 1
To add new gallery go to “Galleries” in the leftside WP navigation and choose “Add New Gallery“
(1).
Now you should enter the title of your gallery (2) and then click on “Add images” (3) in order to add images to your gallery.

ADDING IMAGES TO A GALLERY / SORTING / EDITING
Click on “Add Images” button and new layer with media library will appear. Now you can choose images from your media library or upload them from your computer. Note: you can choose multiple images by holding “Shift” or “Control” button on your keyboard and clicking on appropriate images. Also in the same way you can choose images for multiple upload from your computer.

In the right sidebar in media layer you can edit different image properties. Here you can enter the meta information (title, alt).
- If you want a title to be appeared on your image in the gallery, use the field “Caption“.
- If you want to insert a short description to your image to be appeared in the gallery, use the field “Description“.
- Show as Highlight: this option is useful for making packery style of galleries. This gallery consists of different images, which are highlighted – they have a bigger size (double size) compared with the normal images. If you wish to display your image as highlighted (double size featured images), you can activate this option. Next, in the selectbox „Highlight Type“ you can choose, which orientation your highlighted image should have. „Squared“ means the image will have double width and double height of the normal image. „Horizontal“ means your image will have a double width, and „vertical“ – double height of the normal image in the gallery
- By clicking on “Edit image” button you have a possibility to resize, crop, rotate, move your image or create a custom thumbnail.
After making your selection and editing image properties click on “Add images”. After that the selected images will be added to your gallery.
Now you have the possibility to define the sort order of your images in the gallery just per drag-and-drop:

If you want to remove some specific images from your gallery, click on “X” icon in the top right corner of the image.
If you want to edit properties of specific image from your gallery, just click on it. New tab will be opened, where you can edit image properties. After editing just save your changes and close this tab.

SAVING YOUR GALLERY
When you are done creating and editing your new gallery, click on “Publish” button in the right sidebar. Your gallery will be saved and image thumbnails will be created and shown instead of original scaled images.
PUBLISHING GALLERIES ON A PAGE
Inserting galleries in a page is very simple. Use WPBakery Page Builder and „Styled Gallery“ shortcode as described in details in chapter
„Shortcodes – Styled Gallery“
CUSTOMIZING GALLERY STYLES
You can easily customize your galleries styles using the theme option panel of TheGem (Admin Panel). To open the admin panel go to Appearance ➜ Theme Options .
FONTS
You can customize the fonts which are used to display the title text and description text on the images inside your gallery. To do this go to “Fonts” and use following panels:

Gallery Title Font – Note: in TheGem there are two styles for gallery titles – Bold and Thin (depending on the chosen hover)
Gallery Description Font
COLORS
In order to customize all main gallery colors navigate to “Colors” and open “Slideshow, Gallery And Image Box Colors” panel.

CLIENTS, TEAMS, TESTIMONIALS
Clients (WPBakery)
NOTE: this custom posttype is available only in TheGem for WPBakery page builder theme version. In TheGem for Elementor theme version clients are made as an Elementor element/widget and there is no need in a separate additional custom posttype. For Elementor description of Clients element check this section
“Clients” are useful to show your “Hall Of Fame”: Clients/customers, for whom you have made projects, provided services etc. The usual way to do this is to show an overview of your customers logos/identities.
However you can alos use any images to depict your customers – logos, icons, photos etc.
Like Quickfinders, Clients consist of two major parts:
Clients
Sets
ADDING NEW CLIENT
“Clients” are useful to show your “Hall Of Fame”: Clients/customers, for whom you have made projects, provided services etc. The usual way to do this is to show an overview of your customers logos/identities.
However you can alos use any images to depict your customers – logos, icons, photos etc.
Like Quickfinders, Clients consist of two major parts:
Clients
Sets

ou can create new client using leftside wordpress menu or the button above the list of existing clients. By creating a new client item you should fill following content fields:
Title
This is the name of your customer
Client Image
Here you can upload an image, depicting your customer (logo or photo)
Client Settings
Here you can enter the URL of the page, which should be associated with this Client
Clients Sets
Here you can assign the given client to some existing or new client set (see below). In order to define, to which set this client item belongs, you should select the corresponding sets in the panel “Sets” to the right. You can make a multiple choice if your client item suits to multiple different sets. Of course you can create a new client set from here by clicking on “Add new set“.
Sort Order
It is possible to define the sort order of the client item in one set by entering the order number in the field “Sort Order” in the right panel. Notice: if your client item belongs to multiple quickfinder sets, in all of them it will be on the same order position as entered in this field.
PUBLISHING CLIENTS ON A PAGE
Inserting clients in a page is very simple. Use WPBakery Page Builder and „Clients“ shortcodes as described in details in chapter „Shortcodes – Clients“
TEAM
ADDING NEW TEAM PERSON
To add new person to your teams, go to Team ➜ Add New Person in the leftside wordpress menu. You will get a page for adding the new person. Here you can define:


Title
it is a person’s title, which is used intern only for wordpress admin, for example in persons list
Text Editor
here you can enter some brief description or some quoted text concerning your person. This text will be displayed in one of team styles
In Person Settings you define the visible public settings, which will be displayed in person’s information on the website:
- Name: Person’s name
- Position: Position of person in your team / company
- Phone: telephone number for direct contact
- Email: email address for direct contact. If you don’t want to display the email directly onyour webpage, you can hide it by choosing “Hide Email option – in this case instead of emailaddress the link to contact will be displayed
- Link: here you can link your team person
- Social Profiles: here you can enter links to person’s social profiles
In panel Teams to the right you can select, to which teams in your company this person belongs. You can create new teams by going to “Team ➜ Sets” or directly here by clicking on “Add New Set”. You can make multiple selection if this person works in multiple teams
Featured Image is a picture of your contact person, which will be shown on the website while displaying teams. Click on “Set featured image” to select your person’s image from the media library or from your local hdd.
ADDING NEW TEAM
To add new team use Team ➜ Teams in the leftside wordpress menu. Sets are teams. Here you candefine following data:
Name
team’s name. Is used for team’s widget, where you can select teams to be displayed
Slug
slug is used in team shortcode, so be sure to fill this field properly with URL-friendly version of the
team’s name
Description
brief description of the team, is used only intern
After you are finished with filling the team’s data click on “Add New Set” and you are done – your new team will appear in the list of available teams in the right table.
PUBLISHING TEAM ON A PAGE
Elementor’s theme version: use “Teams” element as described in this chapter
WPBakery’s theme version: use “Teams” element as described in this chapter
TEAM WIDGET
You can also publish / display your team in a page sidebar or blog post sidebar on your website.
To activate the team widget go to “Page Sidebar” panel in page options below, choose the Team widget from the list of “Available Widgets” and rag it to the right panel “Page Sidebar”. Then open this widget “Team” by clicking on its title. Now you can fill your widget with general title -it is title of your widget, for instance “Key Accounts”. Under the general title you can select the team sets which you would like to show in your team widget. You can select multiple teams to be displayed.
When you are finished with setting up your widget, please DON’T FORGET to click on “Save” button at the widget’s bottom in order to save your content. Only after saving you widget you can publish your article.
TESTIMONIALS
To add new testimonial, go to Testimonials ➜ Add New Testimonial in the leftside wordpress menu. You will get a page for adding the new testimonial. Here you can define:


Title
it is a testimonial’s title, which is used intern only for wordpress admin, for example in testimonial lists
Text Editor
here you can enter the quoted text or brief description concerning your testimonial. It will be displayed in your testimonial on page
In Testimonial Settings you define the visible public settings, which will be displayed in
testimonial’s information on the website:
- Name: Name of the person, who has written this testimonial
- Position: Position of this person in your customer’s company
- Company: Company’s name of your customer
- Link to Company: URL of your customer’s website
In panel “Testimonial Sets” to the right you can select, to which testimonial sets this testimonial belongs. You can create new sets by going to Testimonials ➜ Sets or directly here by clicking on “Add New Set”. You can make multiple selection if this testimonial should be assigned to multiple sets.
“Featured Image” is a picture of your testimonial’s contact person, which will be shown on the
website while displaying teams.
ADDING NEW TESTIMONIAL SET
Testimonial sets are are useful to group a number of topical related testimonials in one set in order to show it on the certain website page. For example if you are editing a page with some industry specific product / service description, it would be beneficial to show a set of testimonials from this industry.
To add new testimonial set use Testimonials ➜ Sets in the leftside wordpress menu. Here you can
define following data:
Name
set’s name. Is used for testimonial widget, where you can select testimonial sets to be displayed
Slug
slug is a URL-friendly version of the sets’s name
Description
brief description of the set, is used only intern After you are finished with filling the set’s data click on “Add New Set” and you are done – your new testimonial set will apper in the list of available sets in the right table.
PUBLISHING TESTIMONIALS ON A PAGE
Elementor’s theme version: use “Testimonials” element as described in this chapter
WPBakery’s theme version: use “Testimonials” element as described in this chapter
TESTIMONIAL WIDGET
Just like your team members, you can show testimonials of your customers in the page sidebar. Just select one or multiple testimonial sets by clicking on checkboxes. If you have several testimonials in the set, they will be shown on the page with a fading in / fading out effects. In TheGem there are two different styles of displaying testimonials in sidebar; you can choose between them in selectbox “Style”. When you are finished with setting up your widget, please DON’T FORGET to click on “Save” button at the widget’s bottom in order to save your content. Only after saving you widget you can publish your article.

BLOGS
ADDING NEW BLOG POST
Just like in any wordpress installation you can create new blog post by choosing “Posts” and then “Add New” in leftside wordpress menu. A page for adding new blog post will open. Here you have:
TheGem for Elementor theme version


TheGem for WPBakery theme version

Title
Title of your blog post
Text Editor
Content of your blog post. Here you can use all of the TheGem shortcodes by using WPBakery Page Builder
Blog Item Settings
- Featured Image: here you can choose if you wish to show your featured content in your post or not
this is a set of settings for video blog post. They will be applied, if you choose „Video“ in format settings to the right
TheGem for Elementor theme version


TheGem for WPBakery theme version

- Video Type: select the source of your video – self-hosted html5 video,
youtube or vimeo video - Link to video or video ID: here you can enter the URL to the HTML5
video or use Video ID of corresponding youtube or vimeo video - Video Background Aspect Ratio: here you can define the aspect ration
for this video
this is a set of settings for video blog post. They will be applied, if you choose„Video“ in format settings to the right
TheGem for Elementor theme version


TheGem for WPBakery theme version

- Quote Text: you can use rich content (HTML formatting, TheGem shortcodes) to create the quote in WYSIWYG editor
- Quote Author: type the author’s name here
- Background Color: define background color for this quote
- Author & Link Color: choose the font color for displaying author’s name and link here
this is a set of settings for audio blog post. They will be applied, if you choose
„Audio“ in format settings to the right
TheGem for Elementor theme version


TheGem for WPBakery theme version

- Audio: here you can select an audio track for your audio post
this is a set of settings for gallery blog post. They will be applied, if you
choose „Gallery“ in format settings to the right
NOTE: Gallery post format is available only in TheGem for WPBakery page builder theme version as in Elementor version there is no additional custom posttype for galleries.

- Gallery: select the gallery which you wish to display (choose from the galleries you have created under „Galleries“ – see description above)
Here you can set multiple options for your blog post title including excerpt. It works in the same way, as in pages (see chapter „Pages -> Custom / Fancy Page Title“)
Various settings post header. Pls refer to – “Pages -> Transparent Page Header” for details.
Settings for enabling sidebar in your post. For details pls refer to – „Pages -> Enabling Sidebar“as well as „SIDEBARS & WIDGETS“
Here you can define, to which post categories belongs your post. You can add new blog categories in Posts ➜ Categories or directly here in Categories panel by clicking on “Add New Category”
In this panel you can tag your post. This feature is useful for “Tag Cloud” widget and for blog search
If you want to equip your blog post with some title image, which will appear in the list of blog posts and on the top of your blog post, use “Set featured image” to select an image from media library or to upload it from your hdd
In addition you can set if your blog post should be highlighted / emphasized in blog list by checking the option “Stick this post to the front page”.

After you are finished click on “Publish” to publish your blog post
PUBLISHING BLOG LIST ON A PAGE
Inserting blogs in a page is very simple.
Elementor’s theme version: use “TheGem Blog” group in Elementor’s editor panel and any blog element as described in this chapter
WPBakery’s theme version: use “Blogs” elements as described in this chapter
GENERAL BLOG SETTINGS
In order to customize some of blog settings use Theme Options of TheGem. Go to Appearance ➜Theme Options and you will get our Admin Panel. Here select “Blog & Portfolio” to get the blog options:
TheGem for Elementor theme version

TheGem for WPBakery theme version

EXTRAS
WPML
If you need to make your website multilingual, WPML could be the best solution to do it. WPML is the set of plugins, allowing you to easily translate your website in other languages. TheGem was carefully tested and is fully compatible with WPML.
In order to use WPML you need to purchase the license for this plugin here:
On the WPML.org website you can find very detailed documentation about using this plugin, check this link:
http://wpml.org/documentation/getting-started-guide/.
After purchasing WPML you will get free support from WPML team, you can use their support forum here:
http://wpml.org/forums/forum/english-support/.
Below you will find some specific aspects of using WPML with TheGem.
FIRST STEPS / SETTING UP WMPL
1. Install and activate following core WPML Plugins:
- WPML Multilingual CMS
- WPML String Translation
- WPML Translation Management
2. Go to “WPML->Languages”

and make initial WPML setup. Check WPML documentation for general description here http://wpml.org/documentation/getting-started-guide/ . For “Language URL format” we recommend to choose the first option “Different languages in directories”:

In order to enable language selector in the top menu, go to “WPML -> Languages”, section “Language switcher options” and make following selection:


pages translation
Go to “Pages” -> “All Pages”. You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page. Using these icons you can add a new language version of this page or edit the exiting one. The easiest way to start is to edit the original language page and here to check “duplicate” checkbox in “translate” box and then to click on “Duplicate”. In this way you create a copy of your page in other language version with all the content from original language, so you can easily translate it

You’ll probably be interested in the process of batch duplication of pages and posts. To use this feature, go to WPML->Translation Management, and from the Translation Dashboard, select the filter you want (Pages/Posts), and click ‘Filter’. Select the pages or posts you want to translate or duplicate (you can select them all by clicking the checkbox besides the ‘Title’ header or footer):

Then, at the bottom of the page, choose languages for which you want to translate or duplicate

In general, with WPML you can always choose between ‘translating’ or ‘duplicating’ content. If you do the former but want to import content from the original you can always use the buttons to ‘copy content from the original’ in their edit page; if you do the latter, you can always choose later ‘Translate independently’ so that you can save your edits. Try both procedures to see which one you find better for your workflow.
QUICKFINDERS, PORTFOLIOS, TESTIMONIALS, TEAMS ETC
TheGem comes with a rich set of custom post types such as portfolios, quickfinders, testimonials etc. and custom taxonomies. In order to get a similar interface & workflow for translation/duplication as for posts and pages (see description above), you need to go to WPML->Settings, and select the tab ‘Multilingual Content Setup’. At the bottom of the page you’ll see:



You need to select ‘translate’ for the custom post types you want to make translatable.
Ken Burns Effect
Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. Like parallax, this effect adds dynamics to large background areas. For example, it can be used in slides of fullpage vertical scroller, like in this demos:
Adding Ken Burns effect is very simple. Just go to the “Row” settings in backend or frontend editor


scroll down and activate “Ken Burns effect” checkbox.

After that you can add an image, which should be used as a background image with Ken Burns, select zooming direction as well as transition speed.
WOOCOMMERCE
TheGem is fully compatible with WooCommerce and includes templates integration. To get started with creating your online shop, you need to install the free WooCommerce Plugin here http://www.woothemes.com/woocommerce/. This documenation on using WooCommerce covers only the theme specific points you need to get started. To get full documentation on using WooCommerce use following links:
FIRST STEPS / SETTING UP WOOCOMMERCE
1. Install and activate following plugin:
2. While installing WooCommerce click the “Install WooCommerce Pages” button in the purple bar to install all the default pages. WooCommerce automatically creates the necessary pages. If you need to reassign the pages to different WooCommerce page designations, you can do so in the WooCommerce settings page.
3. Go to “WooCommerce->Settings” and make initial WooCommerce setup. Check WooCommerce documentation for general description here http://docs.woothemes.com/documentation/plugins/woocommerce/woocommerce-user- guide/getting-started/.
ADDING PRODUCTS
Follow the steps described in WooCommerce Documentation
- Click on “Products – Add Product” in WP Menu. Enter a name for your
product at the top of the page. - Enter the product description text into the post content field, this will be all theproduct information.
- The “Product Data” box is where you enter all the product details (price, SKU, shipping, and more).
- The “Product Short Description” box which will be the short intro copy that shows next to your main images.
- Set your main “Featured Image” in the right sidebar Featured Image box.This has to be done for every product.
- To use a gallery of images, insert more images in the “Product Gallery” box.
- When all your data is entered, click “Publish” and the item will now show onyour main shop page.
ONE-PAGE WEBSITE
In TheGem you have an option to create one-page website. It is a sort of sites like this one: https://codex-themes.com/thegem/app-one-pager/ If you click on main menu items above, you will be slightly scrolled down to the needed section.
The process of making one-page site is very simple and consist of two steps:
STEP 1
Create your page as described above in section „BUILDING PAGES“
While creating your page, choose sections you would like to be your main page sections and should be linked via main menu. Use „Row“ element of WPBakery Page Builder , click on „Edit row settings“ and use „Row ID“ field to insert an „anchor“ / unique block identifier for this section, like in this way:

While editing your page, go to “Additional Options” in page settings and activate checkbox “Page as One-Pager”

After you are done with building your page, save your changes and go to Appearance -> Menus. Here make your main menu using “Links” type of menu items. Pls note, that as “URL” you should type in the appropriate “Row ID” you have used in Rows settings in Step 1 previously.After you are done with building your page, save your changes and go to Appearance -> Menus. Here make your main menu using “Links” type of menu items. Pls note, that as “URL” you should type in the appropriate “Row ID” you have used in Rows settings in Step 1 previously.

Fullscreen Vertical Slider
Fullscreen (or full page) vertical slider is a creative trendy way to present your webpage to your website visitors. You can check some demos here:
In Page Options – One Page Options enable “Page as fullscreen vertical slider” option


1. Switch between different scroller types (using “Advanced” is recommended)
2. Disable/enable navigation dots
3. Select style for navigation dots
4. Continuous Scrolling: this option enables the endless scrolling, so the last slider of your fullscreen page scroller will continue with the first slide
5. Normal scroll on mobiles: in case you don’t wish to make you page as fullscreen page scroller on mobiles
6. Scrolling effect: choose between normal, fixed backgrounds or parallax scroll
Save/update your page and go to WPBakery Editor. Now you can start adding slides to your page:




– Go to row’s “Design options” and add some background image as “cover” to your row

In this way you have added new slide to your page. Now you can start adding content to your slide in a usual way, using WPBakery Page Builder
To change the dots style of your fullscreen vertical slider, go to Page Options – One Page Options and use “Select style for navigation dots” select box to choose between different dots styles

To enable scroll effects, go to Page Options – One Page Options and use “Scroll effect” select box to choose between different scroll effects. You can choose between normal scroll (default option), fixed background scroll as well as parallax scroll.





Interactions
TheGem Interactions is a set of trendy scrolling and mouse interactive animation effects which can be applied to your content elements without additional coding.
DEMO 1: https://codex-themes.com/thegem/interactions-landing/
DEMO 2: https://codex-themes.com/thegem/sites/agency-creative-dark/
DEMO 3: https://codex-themes.com/thegem/sites/lms-landing/
This effects can be enabled in page builder in elements settings.
Enabling interactions
TheGem Elementor
- Select the content element where you wish to enable interactions
- Go to “Advanced” tab
- Open “TheGem Options” section
- Scroll down to “Interactions” group of controls

Here you can enable:
- Vertical Scroll
- Horizontal Scroll
- Mouse Effects
TheGem WPBakery
- Edit the content element where you wish to enable interactions
- Go to “Interactions” tab

Here you can enable:
- Vertical Scroll
- Horizontal Scroll
- Mouse Effects
Note: in case of complex layouts with many content elements and exotic positioning of this elements on page (off-grid, overlapping etc.) we would recommend to use backend editor of WPBakery page builder to add and edit interactions.
Vertical Scroll
With this effect you can make your content move vertically at a different speed while scrolling the page. You can make following settings:
- Direction: Specify the moving direction
- Speed: Specify the moving speed
- Viewport: Specify the starting and ending position within the viewport
- Apply Effects On: Specify screen sizes / devices where the effect should be enabled
Horizontal Scroll
This interaction animates your content in the horizontal directions while scrolling the page.
- Direction: Specify the moving direction
- Speed: Specify the moving speed
- Viewport: Specify the starting and ending position within the viewport
- Apply Effects On: Specify screen sizes / devices where the effect should be enabled
Diagonal Scroll
By combining both vertical and horizontal scroll effects you can create different angles for moving your object / content element.
Mouse Effects
Mouse track effect makes a content element to move in relation to the user’s mouse movement. Depending on the movement of mouse cursor your content reacts and moves up, down, left right, creating a sense of depth.
- Direction: Specify the moving direction
- Speed: Specify the moving speed
Adding your own icons
Note: in Elementor’s version of TheGem theme you don’t really need to add any new custom icon packs. You can just insert SVG icons in any element, where icons can be used.
TheGem comes with three powerful icon packs (material design icons, font awesome and elegant icons), resulting in more than 2.500 icons in total. However, you have always an option to add additional icon pack – your own. To do this, you need to use the child theme „TheGem_child_user_icons“, included in theme. Proceed as follows:
- Step 1: Install child theme
Install and activate „TheGem_child_user_icons“ child theme, included in theme’s main package.
For installation instruction please refer to chapter „Installation“
- Step 2: Create your own icon pack.
You can use any online service, allowing to create icon fonts, for example https://icomoon.io/app/#/select
1. Create your own icon package. For details on how to do this pls refer to icomoon’s documentation here https://icomoon.io/#docs
2. After you are done with preparing your icon package, click on „Generate Font“

Optionally you can reset the numeration of the icons in your package to make it serially numbered

3. IMPORTANT: In the settings of the icon package you need to definee the Font Name as „UserPack“

4. After that, click on „Download“ to download the zip archive with your icon fonts „UserPack“. Unzip after downloading in a separate folder to get corresponding woff, svg, ttf, oet font files
5. Upload the unzipped woff, svg, ttf, oet files via FTP to the child theme’s folder „fonts/UserPack“ You will find this folder in the child theme „TheGem_child_user_icons“, which you have installed and activated in Step 1.
After you are done, you will get an additional icon pack „UserPack“ in the select box for selecting icon packs:

That’s all
Ken Burns Effect
Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. Like parallax, this effect adds dynamics to large background areas. For example, it can be used in slides of fullpage vertical scroller, like in this demos:
Adding Ken Burns effect is very simple. Just go to the “Row” settings in backend or frontend editor


scroll down and activate “Ken Burns effect” checkbox.

After that you can add an image, which should be used as a background image with Ken Burns, select zooming direction as well as transition speed.
LEGAL NOTES
DISCLAIMER
TheGem was tested to work in different browsers and wordpress versions (see Theme’s Page on themeforest.net). However we cannot guarantee, that TheGem will function with all third party plugins and server environments. We cannot provide support solving any conflicts with third party plugins.
CREDITS
Icons:
Free icon packs from Elegant Icons, Font Awesome and Material icons
Images on theme demo website:
Graphicriver.net (regular license), IDs: 6691601, 6993268, 7345815, 3484320, 6468313, 5705964
Photodune.net (regular license), IDs: 4555418, 3256414, 1689745, 914953, 6734927, 5848717, 5578933, 1373187, 1837889, 3307270, 5248341, 3979249, 1861062, 4555418, 369318, 358198, 353390, 5757567, 5652496, 2360811, 4807316, 1714557, 4016845, 5345409, 3419961, 514671, 5692739, 4807316
Images With Creative Commons Attribution License 3.0
Shutterstock.com (regular license), IDs: 179473799, 161730896, 166441373, 212589148, 153626741, 225388861, 183006680, 228152602, 183009029, 133300961, 182603093, 183009773, 128238317, 113168935, 114041509, 148724891, 159326039, 132366848, 230047054, 189842585, 230780998, 126492314, 173727986, 154766285, 197558105, 182603069, 214814665, 196294955, 206695300, 212621287, 159672671, 147893546, 141236470, 238047637, 88315597, 51719998, 133786706, 233683780, 184342181, 215470309, 99256976, 152291621, 96103796, 218526937, 155808509, 231299968, 207559387, 170924099
Fonts:
Coding:
Jquery http://jquery.com/
JS:
html5.js /** *
@preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
*/
jquery.carouFredSel.js
/* * jQuery carouFredSel 6.2.1
* Demo’s and documentation:
* caroufredsel.dev7studios.com
*
*
Copyright (c) 2013 Fred Heusschen
* www.frebsite.nl
*
* Dual licensed under the MIT and GPL licenses.
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*/
jquery.galleriffic.js
/**
* jQuery Galleriffic plugin
*
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php *
* Much thanks to primary contributer Ponticlaro http://www.ponticlaro.com)
*/
fancyBox /*!
* fancyBox – jQuery Plugin
* version: 2.1.4 (Thu, 10 Jan 2013)
* @requires jQuery v1.6 or later
*
* Examples at http://fancyapps.com/fancybox/
* License: www.fancyapps.com/fancybox/#license
*
* Copyright 2012 Janis Skarnelis – janis@fancyapps.com
*
*/
jquery-ui
/*! jQuery UI – v1.10.2 – 2013-03-14
* http://jqueryui.com
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.effect.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effectscale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.position.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
LayerSlider WP
/*
* Plugin Name: LayerSlider WP
* License: Extended License
* Plugin URI: http://codecanyon.net/user/kreatura/
* Description: LayerSlider is the most advanced responsive WordPress slider plugin with the famous Parallax
* Effect and over 200 2D & 3D transitions.
* Version: 5
* Author: Kreatura Media
* Author URI: http://kreaturamedia.com/
WPBakery Page Builder
/* Plugin Name: WPBakery Page Builder
* Plugin URI: http://vc.wpbakery.com
* License: Extended License
* Description: Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required.
* Version: 4.4.2
* Author: Michael M – WPBakery.com
* Author URI: http://wpbakery.com