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

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”

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

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”

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:

1. Open Appearance → Themes
2. Click “Add New Theme” and hit upload link
3. Find the the file “TheGem_Elementor.zip” on your hdd and hit install now button
4. After the theme is installed click on “Activate”

TheGem for WPBakery Theme Installation

Follow this installation steps:

1. Open Appearance → Themes
2. Click “Add New Theme” and hit upload link
3. Find the the file  “TheGem_WPBakery.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.

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.

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”

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

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_Elementor.zip (for Elementor version of TheGem) OR TheGem_WPBakery.zip (for WPBakery version of TheGem)
2. Login to your hosting space via an FTP Client
3. Upload the whole contents of the unzipped file 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 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

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

Here you can choose:

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

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:

SETTING UP MENUS

After the demo website is imported, all menus are imported automatically as well so you do not need to undertake any further steps here.

However, in case you wish to set menu locations manually, you can do this in following way:

and finally click on “Save Changes”.

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:

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

Global Website Settings

General

Theme Layout

You can define the general global layout of your website by selecting “General – Theme Layout” in Theme Options.

LAYOUT STYLE

In this section you can select the general website layout for desktop resolutions starting from 1260px and above.

Fullwidth: page body covers the whole browser width.

Boxed: page body is in the box of 1260px width and has a fullwidth background.

Body Frame: page body has a frame around it.

MAIN CONTENT AREA

Define the global style settings for main content area.

PAGE SIDEBAR

Enable or disable sidebar for all pages / posts of your website. You can also switch on/off sidebar for individual posttypes and individual posts/pages separately. Read more about sidebars & widgets

SMOOTH SCROLL

This setting allows you to enable smooth vertical scrolling on your website.

“SCROLL TO TOP” BUTTON

Allows you to enable/ disable “scroll to top” button which appears in the bottom corner of your website

PRELOADERS

In this section you can define if you wish to use page preloader globally on your website and specify its colors. Also you can select the preloader type for ajax content elements (like for example portfolio grids).

Logo & Identity

LOGO

To set up your website’s logo go to “General – Logo & Identity”.

Desktop Logo 

Depending on the background color of your menu & header area, to maintain optimum contrast and visibility, TheGem offers you to upload two color versions of your logo: one version for the light backgrounds and one version for the dark backgrounds. You can then vary between default (light backgorunds) and light (dark backgrounds) logo using the setting “Use light menu & logo” in “Menu” settings on all three levels:

• Global: in “Menu & Header – Layout” settings menu of Theme Options

• Single & Archive Pages: in “Single Pages” or “Archive Pages” settings menu of Theme Options -> “Menu & Header” settings section

• In individual pages or posts in “Menu & Header” settings menu in page options

Mobile & Sticky Menu Logo

This logo is used on mobile devices and in sticky menu (if sticky menu is enabled).

Recommended sizes (retina)

For best retina results please upload image file, which width is 3 times larger than the width specified in slider. Example: on TheGem’s demo website the logo width for desktops is specified with 164 px -> the logo image file uploaded has 164 px x 3 = 492 pix width.

FAVICON

To set up your website’s favicon, navigate to “Favicon” settings section in “General – Logo & Identity”. Here you can upload your favicon file.

Menu & Header

In this settings menu you can define the layout and styles of your website’s menu & header. 

Menu & Header Layout

LAYOUT

This section contains a set of settings to define the menu & header layout.

TheGem comes with two options for adding website header:

Option 1: Built-In Headers

Built-in headers include many different header layouts which all can be flexible managed via Theme Options. Please check the description below.

Option 2: Header Builder

Header Builder is the feature allowing you to create any header layouts in a flexible and comfortable way using page builders of your choice (Elementor or WPBakery). Please check the description in this article

MENU

This section controls additional settings for website’s menu on a global level. Here you can enable menu transparency and set its opacity, switch on light menu & logo in case your website has a dark background in header. Also you can enable/disable search button in header. Additionally, here you can enable/disable sticky menu (so the menu bar sticks to the top while vertical scrolling).

TOP AREA

Top area is an additional top bar which is displayed above the main menu if enabled. 

Like in the “Menu” section, in this settings section you can define various settings for Top Area of your website.

Menu & Header Typography

MAIN MENU

Here you can define the typography of your website’s main menu and specify font menu colors for main menu items.

SUBMENU

Here you can define the typography of your website’s submenus and specify font menu colors for submenu items.

OVERLAY MENU

Typography settings for “Overlay” menu layout.

TOP AREA

Font colors for top area.

Menu & Header Colors

BACKGROUNDS

This section controls the background colors for menu & header. The “Background Type” control allows you to switch between different background types for the header area. Level 1, Level 2, Level 3+ colors give you an option to specify background colors for menu items.

HAMBURGER

Color settings for hamburger icon for “Hamburger”, “Perspective” and “Overlay” menu layouts.

OVERLAY MENU

Color settings for overlay background in case “Overlay” menu layout has been selected.

MEGA MENU

Color settings for mega menus.

TOP AREA

Background type and additional color settings for top area.

Title Area

Title area includes post/page title, excerpt and breadcrumbs.

GENERAL

• Regular Title: the layout & style of title area is controlled via theme options below

• Custom Title: in TheGem you can create any layouts/templates for your title area using page builder. You can create this templates in “Custom Titles” menu option in your WordPress admin and then select it in the “Select Cutom Title” control here in theme options

Learn more about “Custom Titles” here

In case of selecting “Custom Title” for your Title Area you have then an option to embed additional styling options in the selected custom title dynamically. By activating “Dynamic Settings” option you get additional settings for title & excerpt colors as well as for title area background, which will be applied to the selected custom title automatically.

Additionally, in “General” section of “Title Area” settings you can set up breadcrumbs.

STYLE & ALIGNMENT

In this settings section you can control different layout & style settings of the regular title.

BACKGROUND

Here you can specify the background type for title area.

Footer

Footer Layout

Set of settings to define the layout of your website’s footer.

GENERAL

Here you can enable or disable website’s footer globally.

FOOTER WIDGET AREA

Footer widget area is a widgetized area which can be enabled to display in website’s footer. Footer widget area is an area below the main body where you can use different sidebar widgets.

You can populate the footer widget area with different widgets in “Appearance – Widgets” menu of your WordPress admin. 

BOTTOM AREA

Bottom area is also referenced as a copyright area of the website. Here you can enable or disable this area for the whole website globally.

CUSTOM FOOTER

In TheGem you can create any layouts/templates for your footer using page builder of your choice. Please check this article for details about “Footer Builder”

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

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:

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

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:

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 „General“ 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 title area

(Only for TheGem WPBakery version)

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:

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:

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 or Elementor Page Builder:

For TheGem WPBakery:

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

For TheGem Elementor:

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

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.

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.

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

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

Heading

With this element you can add headings to your page content, make different format & style settings and activate heading animation effects. You can find this element here

Heading Source
Here you can specify the source for your headings’s content. By selecting “Custom text” you can enter your heading’s content (text) in the repeater below. By selecting “Post or Page Title” your heading’s content will be dynamically populated by the title content of the current page.

Heading Content
To add headings content (text) use repeater control

Here you can add additional words, which will be rotated on the frontend.

URL (Link)
With this setting you can link your heading.

HTML Tag
Using this settings you can define the HTML formatting for the heading. It is very useful for SEO as this settings separate the appearance and the HTML tag. You can add for example H5 tag which will look like H1 heading and vice versa.

Inline element
Specify if your heading should be added as inline element.

Max width
With this setting you can control the width of your heading.

Use custom font size?

By activating this checkbox you can specify custom settings for the font used for heading. 

You can choose between default animation effects of the page builder and advanced animations delivered with TheGem. We would strongly recommend to use “Advanced” animations as this animations are in pure CSS, are very lightweight and visually very appealing. So in this way you will get better page performance and excellent visual effects. Additionally, “Advanced” animations have more settings to control the animation: speed, interval, delay and easings.

In this tab you can activate interaction effects (on scroll, mouse) for your heading.

Use the settings in this tab to control responsive appearance of your heading on tablets and mobiles.

With this element you can add products grids to your page.

You can find “Products Grid” element in editing panel of WPBakery in “ WooCommerce” group

Products

In this section you can choose products to display in products grid. 

Source: you can select products by categories and / or attributes. Depending on your selection additional controls for selecting categories and product attributes (and their values) will appear.

Sorting: specify the default sorting order for displaying products in grid 

Sorting on Frontend: enable/disable sorting control to be displayed above the products grid 

Layout

Skin: TheGem comes with 26 pre-made skins / presets for products grid to accelerate your work. All this skins are customizable and editable.  

Columns Desktop, Tablet, Mobile: select number of columns to display in products grid on different screens. In case of selecting 100% width for desktop, your products grid will be automatically stretched to the 100% width of the page and you will get an additional option “100% Width Columns” to specify the number of columns for 100% width grid for screen resolutions greater than 1920px. Please note: 100% width doesn’t appear as 100% width in Elementor edit mode as the element is always limited by section/column’s width settings. However on the front end the gallery grid will take the full 100% width.

Layout: specify grid layout of products grid. You can choose between justified, masonry and metro style layouts

Image Aspect Ratio: you can choose between portrait and square aspect ratios for displaying product images in grid

Caption

Caption contains product title, product price, product categories, product rating, add to cart and add to wishlist. In this section you can enable/disable displaying of this elements in product container in grid.  

Caption Position: In TheGem products grid caption can be shown below image, on image or on image hover. Here you can specify the position of caption

Add to Cart: in TheGem products grid there are two types of “Add to cart” element. It can be displayed as button or as icon. Use “Type” field to select the type of “Add to cart” element. “Select options” element is displayed instead of “Add to cart” in case of variable product. 

Add to Wishlist: this element can be enabled in case you have installed “YITH WooCommerce Wishlist” plugin. With this element (heart icon by default) your website visitors can add any product in grid to their wishlist. You can control the behavior of clicking on “Add to wishlist” element in the settings of “YITH WooCommerce Wishlist”. For example, if you wish, that by repeated clicking on “Add to wishlist” element (heart icon) the product should be removed from wishlist, you need to make this setting

in “YITH WooCommerce Wishlist” plugin.

Pagination

This section is for selection of pagination type of products grid.

Items per page: select, how many portfolio items should be visible in grid on one page

Pagination: enable/disable pagination for products grid

Pagination Type: select type of pagination.

• Numbers: classic numbered pagination
• Load More Button: additional items will be loaded by clicking on load more button
• Infinite Scroll: additional items will be automatically loaded while scrolling down

In case “Load More Button” type is selected, you can further specify the button text and optionally add some icon to load more button. You can automatically stretch this button to content fullwidth by activating “Stretch to Full Width” or add separator to the left and to the right of the load more button by activating “Separator” control.

Labels

This section is for specifying different product labels to be displayed in products grid. 

Labels Style: TheGem comes with 4 different styles of labels, which can be further customized in “Styles” sections (see description below). 

“New” Label: enable/disable displaying of “New” label for new products and specify its text 

“Sale” Label: enable/disable displaying of “Sale” label for products on sale. You can specify whether to display product price discount or some text. 

“Out of stock” Label: enable/disable displaying of “Out of stock” label for out of stock products and specify its text 

Grid Images Style

Gaps: specify gaps between products in products grid

Product Separator: enable/disable product separator in grid and adjust its settings 

Image Border: specify width and color of the border around image. By using checkbox “Apply border on caption container” you can automatically apply the specified border on caption container as well (in case caption position is set to “Below Image” in Appearance tab) 

Hover Effect: select hover effect for product images while hovering on product in grid. This control works only in case you have added more than one image for your product. 

Fallback Hover: in case some product has only one product image, here you can specify which hover effect should be applied in this case. 

Used in Fullwidth Section: in case you wish to put your products grid in Elementors fullwidth section, here you can enable better quality for product images to be displayed in such sections. 

In Grid Images Style section you can also enable shadow and border. By default, shadow is applied only on image container. By activating “Apply shadow on caption container” setting you can enable a common shadow for image container and caption container.

Caption Style

Here you can customize the style and typography of caption elements: product categories, product title, price, rating stars.

Caption Container Style

Set of settings to customize the appearance of caption container. 

Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section.

Preset: here you can select between 4 different color presets for caption container, which can be further customized with additional settings.

Icons Style

Settings to control appearance of icons in products in grid: “Add to wishlist” icon, “Add to cart” icon (in case “Add to cart” element has been set to “Icon” in Content tab – Caption section), sharing icon. 

Buttons Style

Settings to control appearance of buttons in products grid: “Add to cart” button, “Select options” button etc. (in case “Add to cart” element has been set to “Button” in Content tab – Caption section).

Pagination Style

In this section you can customize the look of pagination.

Sorting Style 

Style settings for sorting control in products grid. Here you can also adjust different text fragments used in sorting control. 

Labels Style

Section to customize the look of labels, which appear on products in grid: new, sale, out of stock.

In this section you can enable filters for products grid. 

Filters Style: you can choose between 3 styles of filters. Standard style will display filter controls as dropdowns above the products grid. Sidebar will display filters in a sidebar to the left of the products grid. Hidden sidebar will display a button above the products grid – by clicking on this button a hidden sidebar with filters will appear. 

Categories: enable/disable filter by product categories. You can enable categories hierarchy to be displayed in filter and add product counts for displaying available amount of product in this categories. 

Price: enable/disable filter by price range.

Attributes: enable/disable filter by attributes. This control is made as a repeater, so you can add as many product attributes as needed. Each repeater item contains controls for naming the attribute in filter, for selecting attribute and query type. 

Product Status: enable/disable filter by product status.

Product Search: enable/disable product search for searching products in grid. 

Text Labels: in this input fields you can specify different text fragments for filter cont

Filter Style (Standard) 

Style settings for filter controls in grid, if filter type has been set to “Standard” in Content tab – Caption section.

Filter Style (Sidebar) 

Style settings for filter controls in grid, if filter type has been set to “Sidebar” or “Hidden Sidebar” in Content tab – Caption section. Please note: in responsive mode all filters are always automatically changed to “Hidden Sidebar” – you can customize the styles of this hidden sidebar here as well.

With “Scroll to top” control you can enable/disable automatic scrolling to the top of the grid after choosing some filters.  

Additional Options 

Lazy Loading Animation: enable/disable and select type of loading animation for products in grid. 

Ignore Highlighted Products: in TheGem you can specify some products to be emphasized in products grid. You can make it in page options of this products by using this setting

In this way this products will be displayed double bigger as another products. This is a cool way of attracting visitors attention to some product highlights and to make creative grids.

By activating “Ignore Highlighted Products” control this products emphasizing will be ignored and all highlighted products will be displayed as normal products. 

Show only “Featured” products: by enabling this control only featured products will be displayed. All other products in your grid selection will be ignored. You can set a product as “featured” product in product settings here 

Show only “On Sale” products: by enabling this control only “on sale” products will be displayed. All other products in your grid selection will be ignored.

Quick View 

Quick View: enable/disable Quick View feature for products in grid. 

Notification Style

In this section you can customize the style of notification bar when your website visitor takes some actions in products grid (for example adding product to cart, adding product to wishlist etc.)