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+

downloading thegem

Download the TheGem.zip file from themeforest.net and unzip it. In this zip file you have everything you need:

TheGem_theme.zip
the main theme zip file you need to upload to your WordPress in order to install TheGem (see below). In this zip you will find the theme itself. NOTE: Do not unzip this file. Do not upload the entire TheGem.zip file you get from ThemeForest, upload  ONLY TheGem_theme.zip

Child_Theme
here you will find TheGem’s child theme

Demo_Sliders
All demo sliders we have used on our demo website.

Demo_Default_Widgets
Default widgets used for widgetised footer area and default page sidebars on our demo website.
XML Files with demo content, which you can use for manual content import in WordPress.

INSTALLING THEGEM IN WORDPRESS ADMIN

1. Open Appearance → Themes
2. Click “Add New Theme” and hit upload link
3. Find the the file “TheGem_theme.zip” on your hdd and hit install now button
4. 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:

1. Go to TheGem support page on Themeforest (https://themeforest.net/item/thegem-creative-multipurpose-wordpress-theme/16061685/support [^])
2. 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.

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:

1. Click on “Begin installing plugins”
2. Check all plugins, select “Install” and click on “Apply”

In order to use TheGem in its full, please note, that following plugins SHOULD BE installed during the theme installation (see installation instructions above):

In addition, you can take an advantage of enriching your TheGem’s experience with following recommended plugins:

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:

1. Unzip TheGem_theme.zip
2. Login to your hosting space via an FTP Client
3. Upload the whole contents of the unzipped TheGem_theme.zip into wp-content/themes/ folder under your wordpress installation.
4. 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:

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 400
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 import”, allowing you to import the whole demo content from the main multipurpose demo site (https://codex-themes.com/thegem/)Here you have three import options:

– Full demo import
– Import of selected demo concepts
– Partial demo import

Use this option if you wish to import all demo data, including all posts, pages, portfolios etc. and all media files like images, video etc. with one click.

1. In WordPress Admin go to “TheGem Import”
2. After that click on the button “Import Main Demo Content”
3. Import process will start. Do not close the active browser tab while importing. The import process of full demo content could take from 30 min to 1 hour because of media download and upload as well as generating of image thumbnails.
4. Wait until 100% of import is accomplished. After that you can just close this tab.

Pls note: full import & generating of image thumbnails may take from 30 min to 1 hour, depending on your server/hosting configuration.

With this option you can import all posts/pages and media content separately. This is useful for example if you wish to make a very fast import of demo content without importing all demo media. If you don’t want to import our demo images & videos, you can click on “Import content without media”. This import runs very fast and is done in minutes. In case you wish to import only media demo content (or add our demo images & videos after you’ve made “Import content without media”) you can click on “Import only media demo content”.
 

Lightweighted import option. Here you can select one purpose topic for demo import. It is useful if you are interested only in one special purpose (for example only business homepages) and don’t need any other demos. This import will install only homepages of the selected topic as well as demo pages from “Pages” category of our demo website (About Us, Services etc.) and demo pages from “Elements” category (to give you all examples of how to use different shortcodes and elements). Please note: this import works best on a new install of WordPress.

To proceed with import of selected demo concepts, choose the topic you wish to import by selecting corresponding tabs and click on import.

SETTING UP MENUS

After the demo content is imported, the next step would be to set menu locations for the demo menus:

Go to “Appearance -> Menus” page and select “Manage Locations” tab. Here select following

and finally click on “Save Changes”.

setting up footer

In order to import default demo widgets for default page sidebars

and default widgetised footer area

Pls. proceed as follows:

1. Go to “Plugins -> Add new” and search for “Widget Importer & Exporter” plugin here

2. Install & activate this plugin

3. Go to Tools > Widget Importer & Exporter

4. Select a demo_widgets.wie file from “Demo_Widgets” folder

5. Click on “Import Widgets”

That’s all.

Or, if you wish to set your footer widgetised area manually, please read “Widgetised Footer Area” chapter

selecting homepage

The next step would be to select the homepage of your choice for your website. 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

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.

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 Appearance – Theme Options to get the admin panel of TheGem. Let’s start with the first set of settings – General.

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.

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:

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 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.

menu / navigation

setting up navigation

There are three embeded menus in TheGem:

Top primary menu : main navigation in website’s header
Footer Menu: navigation in website’s footer
Top Area Menu: additional navigation location in website’s top area bar (see below)

To edit main menu do the following:

1.  Go to Appearance → Menus
2.  Select „Top primary menu“
3.  Edit your menu as usually

navigation layouts & styles

In order to set your prefered navigation layout, go to „Header → Main Menu & Header Area“ section of Theme Options. Here you have following options:

1. Disable Fixed Header
By checking this option you can disable the fixed menu header, which appears by vertical page scrolling

2. Main Menu & Header Layout
In TheGem you have 4 main layout options for displaying your navigation:

3. Main Menu & Header Style
Here you can select between 4 preset styles for displaying main menu and subnavigation. You can customize this styles using other theme options (see below).

4. Logo Alignment
Choose where to position your logo:

5. Menu appearance on tablets (portrait orientation) & Menu appearance on tablets (landscape orientation)
This two options are useful for defining the main menu appearance on tablets & mobile phones. You can choose between:

navigation colors & backgrounds

In order to set up colors for your main and sub-navigation, go to „Colors → Menu Colors“ in Theme Options. Here you can set any color for main navigation and subnavigation, including the „light“ menu version, which can be used on dark backgrounds (or vice versa in case you have a dark website).

If you wish to set different background color for the whole header area with main navigation panel, go to „Colors → Background And Main Colors“. Under „Main Menu & Header Area Background“ you can select the background color you wish to have in your menu header.

Additionally you can upload some background image instead of using background colors. Go to „Backgrounds → Background Images“ and upload the background image under „Main Menu & Header Area Background“

navigation fonts

In the same way, as described above, you can set your desired fonts to be used in navigation & subnavigation by going to „Font->Main Menu Font“ and „Font → Submenu Fonts“ sections in Theme Options and select the fonts and its settings here.

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:

1. Go to Appearance → Menus
2. Select „Top area menu“ from Location field
3. 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“

footer & widgetised footer area

In TheGem you have:

1. Footer with copyrights, links to social profiles and additional menu location
2. Widgetized Footer Area for different widgets of your choice

footer

By default the whole footer area is enabled in TheGem. But you can easily disable footer area by going to “Footer->Footer Options” and unchecking “Activate footer” option.

You can set some text content in footer as well. For example your copyrights. Pls note: here you can use shortcodes, delivered with TheGem.

You can set a custom background color for footer area by going to “Colors – Footer Background Color” .
Or in case you wish to use some image for your footer background, go to „Backgrounds → Footer Background“ and upload your image

widgetised footer area

You do not need to activate this area for your website. It will appear automatically as soon as you will add some widgets here.

In TheGem you can add different widgets to your footer widgetised area.

Go to „Appearance → Widgets“ . Here you will see „Footer Widget Area“ sidebar, where you can add / drag’n’drop your desired widgets from the widget list „Available Widgets“ to the left:

You can set a custom background color for widgetised footer area by going to “Colors – Footer Widgetised Area Background Color” .
Or in case you wish to use some image for your footer background, go to „Backgrounds → Footer Widgetised Area Background Image“ and upload your image

setting up homepage

Next step after making your general website settings would be to set your homepage – starting page of your website.

1. Go to “Settings -> Reading”
2. Select a static page option to be displayed as your front page
3. Choose a page from the select box “Front page” that should be your homepage
4. 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”.

page types / templates

TheGem is delivered with following page templates:

This is the main template for most of the content pages & portfolio items. It is used to display the page content in full-width mode or with sidebars.

Template for displaying blog posts

This is used to make the automatic redirect from this page to the fist subpage. This template is useful for navigation, if you like to redirect your website visitor from the toplevel menu option to the first sublevel menu option.

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.

custom / fancy page title

Check the „Page Title“ block of settings directly under the WYSIWYG editor. Here you can make following:

Let’s take a closer look at these settings.

setting style for page title

Check „Style & Alignment“ group of settings inside of „Page Title“ setting

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

ont 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:

enabling / disabling breadcrumbs

By default breadcrumbs are enabled and are shown in page title area. If you wish to hide / disable breadcrubms, use this option in „Title & Excerpt“ settings:

setting custom background

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

adding icon for page title

Additionally to page title and subtitle you can insert icon to be displayed in page title area. Check „Icon“ section in „Page Title“ settings:

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:

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:

adding page sidebars

Using „Page Sidebar“ page option you can add right or left sidebar to your page

If you wish to add additional sidebars to your page, you need to use WPBakery Page Builder. For this cases pls add following VC element to your page:

1. Add VC element, choose „Widgetised Sidebar“
2. Here select the additional sidebar you wish to add

adding custom sidebar widgets

To add some custom widgets to your page’s sidebar, pls check „Page Widgets“ page options. This option is only relevant if you have enabled a sidebar in “Page Sidebar” section. Here you can choose, whether you want to use a default sidebar (by selecting “default” setting) or customized sidebar on your page. Default sidebar is the set of widgets you have added in „Appearance → Widgets“. In case you would like to customize this widgets on some pages (use other widgets than default set), choose „Customize“ option.

To easily customize your page sidebar you can simply drag-and-drop any widgets of your choice from Available Widgets panel to the Page Sidebar panel. See chapter Sidebars for details.

adding sliders

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

After enabling one of this sliders, you will be prompted to choose the slideshow from the list if created slideshows.

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.

building pages

The easiest way of building your pages in TheGem is to use Frontend Editor of WPBakery Page Builder. Here you have the full control over layout of your content as well as all of the shortcodes and its options. WPBakery Page Builder  is a great tool for creating page layouts and content “on-the-fly”, in backend or in frontend mode by simple drag&drop of different content and page elements. WPBakery Page Builder  is a required plugin and should be installed in the process of TheGem’s theme installation (see Chapter “Installing TheGem”)

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 & News; 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.

buttons

To add some button anywhere in your content, use „Button“ element:

Here you have following options:

Button Text: type in the text, which should appear on your button

URL (Link): define the link for your button

Position: define position and alignment of this button

Style: TheGem buttons incluide two basic styles – flat (solid filling) and outline (ghost like)

Size: select the size for your buttonText weight: font weight for the button text

No uppercase: by checking this checkbox you disable uppercase letter styling for button text

Border radius: define the radius for rounded corners of the button

Text Color: Select the font color of the button’s text

Hover Text Color: Select the hover font color of the button’s text

Background Color: select the background color fill for the button

Hover Background Color: select the background color fill for the button in hover state

Separator Style: this option gives you a possibility to enable line separator to the left and to the right of the button

Icon pack: if you wish to use some icon in your button, here you can define the icon pack, where you 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

Icon Position: where to position the chose icon – to the left or to the right of the button’s text Choose the main font color of your title icon here

Lazy Loading enabled: here you can enable a lazy loading animation for your button

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.

news & blog

With this element you can insert your news or blog post lists anywhere in content, choosing among many different appearance styles.

Post types: select, which post types would you like to publish in this list – blog posts or/and news

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

For examples of different blog / news list styles visit our demo website → main menu „Blog“

Select Categories: you can select categories for your blog / news 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 news/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 / news posts in the list

Ignore Sticky Posts : with this option you can ignore displaying of sticky posts above at the top of posts/news lists

Hide date in title : this setting allows you to hide date in post title in your blog / news list

Hide author : this setting allows you to hide author in post in your blog / news list

Hide comments : this setting allows you to hide number of comments in post in your blog / news list

Hide likes : this setting allows you to hide likes in post in your blog / news 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 news/posts list by vertical scrolling

Loading animation : choose the animation effect for appearing of blog / news 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

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

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

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"}

Style: choose one of three pre-made styles of displaying horizontal (line) diagrams