ELEMENTOR documentation

Getting Started

How to Install Elementor

Elementor is a required plugin for TheGem theme (Elementor version). After installing TheGem you will get notification asking to install Elementor page builder

Follow the steps described in this documentation chapter installing plugins.
After successful installation and activation, you can start using Elementor.

What is Elementor

Elementor is a powerful easy-to-use frontend page builder for WordPress. It is available via official WordPress plugin directory https://wordpress.org/plugins/elementor/. With over 5 mio. downloads this page builder is at the moment the most popular page builder for WordPress.

How to Use Elementor

If you are new to Elementor page builder, check this “Getting started” video tutorial about the basic principles of working with Elementor: https://www.youtube.com/watch?v=nZlgNmbC-Cw

Please note: all TheGem pre-built websites and page templates are available via Demo Import module in WordPress admin dashboard, and not via Page Templates section as shown in this video. Check this video tutorial on how to import TheGem demos

Elementor Free vs. Elementor Pro

Elementor is an open-source page builder and is available for download in WordPress plugin directory free of charge: https://wordpress.org/plugins/elementor/ You do not need to pay anything to be able to use Elementor.

Elementor Pro is an extended premium version of Elementor page builder, which can be purchased separately. It includes different additional widgets and features.

Here you can find a comparison table between Elementor Free and Elementor Pro:

https://docs.elementor.com/article/146-benefits-elementor-pro

TheGem elements plugin enriches basic free version of Elementor with many useful features, widgets & designs. It includes 30+ flexible customizable content elements & extensions used across all pre-built TheGem demos. That’s why you don’t need to purchase Elementor Pro to be able to use TheGem and all its demos and templates. Read more about TheGem Elements plugin here.

However, if you still wish to purchase Elementor Pro or you already have Elementor Pro running, you can use TheGem with the pro version as well – it is also 100% compatible. 

Do I need to buy Elementor Pro?

Short answer is: no, you don’t. TheGem requires only the free version of Elementor. TheGem comes with TheGem Elements plugins, which enriches the free version of Elementor with many cool features and elements. So you don’t really need to purchase a pro version of Elementor. Read more aboutn Elementor Pro and the opposite is also true meaning that Elementor Pro may have some features that are not available in TheGem.  TheGem Elements plugin here

If you still want to use Elementor Pro, you can purchase it separately. TheGem theme is 100% compatible with Elementor Pro. TheGem offers some features that do not exist in Elementor Pro and the opposite is also true meaning that Elementor Pro may have some features that are not available in TheGem. 

Basic Elementor Widgets

Elementor includes some useful basic widgets. Here you can see, which basic widgets are available and how to use it https://elementor.com/widgets/

Useful Features

Elementor has a lot of useful features. Here we will list some of the most handy, which will speed up your workflow.

Moving Sections, Columns, Elements

There are several ways on how to move your sections, columns and elements within a page. Check this article for more details

Copy & Paste

In Elementor you can copy and paste any element, column or section within a page or across different pages. Check this article for more details

Duplicating Pages

In Elementor it is really very easy to duplicate your pages. Please refer to this article 

Duplicating Pages

Each element, column or section can be easily duplicated by right-clicking on the element icon in editor and selecting “Duplicate” in the context menu 

Section Templates

In Elementor you can create some global section templates and use it across your pages. You can save any section as template and then insert it from template library on any page you wish. In TheGem we use section templates to populate accordions, tabs&tours, sidebars and footer widget area (check this chapter)

Undo/redo

Еverything you do inside the editor can be undone, and then redone if necessary. Made a mistake? No worries! Simply hit Ctrl / Cmd + Z or open the history panel and browse through all your past actions. Check this in details https://elementor.com/blog/undo-redo-history/

Revision History

Elementor saves a backup version of all your actions on the page and you can simply switch between the various revisions. Learn more https://elementor.com/blog/v110-revision-history/

Navigator

This feature gives you a better overview over your page content structure as it works like a layer management in photoshop. Also, Navigator is useful to work with sections, which have negative margins and are situated above other section – with Navigator you have a better option to access the editor and settings of such section

Hotkeys

Check this description of hotkeys which can be used with Elementor

Dark Mode

Elementor comes with default design skin and includes a dark mode as well. Check here on how you can enable a dark skin in Elementor 

Page Layout Basics

For getting started on how to build and edit pages with Elementor please refer to this chapter how to use

The following chapter focuses on TheGem specific aspects of page layout templates, grids and responsiveness. Also, we share here some recommendations concerning the page building process.

Page Layout Templates

TheGem includes two main page layout templates, used depending on whether you wish to include a sidebar on your page or to make your page full width. 

TheGem Full Width Template

By default, when adding new page, post or portfolio item, TheGem Full Width template is used

This means, that your page content is located in a body page container and appears automatically over the whole section width (for content width options<span”> check this article) and is not limited by a sidebar. By selecting different content width settings in section you can specify, if your content should stay within the main body container (Boxed) or if it should be stretched to full width of the page (Full Width).

In this template, any sidebar is excluded, so it doesn’t matter if you have selected a sidebar in page options or not – the sidebar will not be displayed.

TheGem Boxed Template

This template always keeps page content inside the body page container, no matter whether you choose “Boxed” or “Full Width” content width in section settings. TheGem Boxed template should be used in case you wish to include a sidebar on your page. This template enables you to select left or right sidebar in page options and display it on page correspondingly

If used without any sidebar, this template behaves in the similar way, as TheGem Full Width template, however here your page content automatically stretches over the available content width via a javascript. That’s why If you don’t plan to include any sidebar on your page, we recommend to use TheGem Full Width template.

You can select “TheGem Boxed” layout template in page attributes selectbox

or directly in Elementor

There are also Elementor’s own templates, which are available: Elementor Full Width and Elementor Canvas

Elementor Canvas

This template removes your page’s header, page title area, footer and sidebars. This is great for creating specific pages inside your website, pages such as: landing pages, coming soon pages, maintenance mode pages etc. Please note: you can also disable your page’s header and footer in page options, still using TheGem Full Width template.

Elementor Full Width

This is an Elementor’s own full width template, which overrides TheGem theme’s page templates. We do not recommend to use this template, as its default settings (for example gaps) does not meet TheGem’s settings.

Grid System

TheGem grid system is an advanced responsive mobile first fluid grid system based on 12 columns bootstrap grid and uses a similar modular approach. It includes many settings enabling you to create any layout. There are few differences to a standard bootstrap default settings

Also, instead of

TheGem uses:

<div class=”container container-fullwidth”></div>

The grid system is used to create page layouts using Elementor’s sections and columns. Sections and columns are main containers for your content and elements.

You can add sections and columns to your page by clicking on “+” button and choosing your structure

 or by drag’n’dropping any content element from the Elementor editor panel to your page

Sections

Sections are the primary containers and they are used to create groups of columns. Sections can have different layouts, paddings, margins and layout settings. For details about section settings please refer to this article

Section Width

Sections can have boxed and full width content width, which can be selected in Layout tab > Layout section in Elementor’s section settings

Boxed content width places the content inside sections within the page body container.

Full width content width overrides the body container width limitation and puts content on the full available width.

Section Height

Sections can have default height or be full height. Moreover, you can manually specify the height of the section. To choose between this options, go to Layout tab > Layout section in Elementor’s section settings and use “Height” selectbox

Columns

Columns are put inside sections and are the only child elements of sections, containing content and elements. You can add up to 10 columns. For details about column settings please refer to this article

Columns Gap

Columns have gaps between each other. By default, TheGem’s columns gap is 42 px. You can also define whether there should be no gaps between columns or set different gaps. Columns gap is controlled via section settings. Go to Layout tab > Layout section in Elementor’s section settings and use “Columns gap” selectbox

Example: in case you wish to make your section’s content full width, having no gaps to the right and to the left, use this settings in Layout tab of a section:

  • Content Width: Full Width 
  • Columns Gap: No gaps 
Column Width

Each column can have different width, which can be specified in Columns settings in Column width control

The basic rule is: the sum of all columns width cannot exceed 100%. 


Off-Grid Column Size

In case you need to use some special column width, different to the standards of TheGem grid, please follow this rule: column sizes should be natural numbers divisible by 5 without a remainder (20%, 25%, 70%, 85%).

Nested Columns

In case you wish to create complex layouts, you can use nested columns. For this purpose Elementor delivers the widget “Inner Section”. Inner section allows you to create nested columns within a section. For more details check this article

Mobile & Breakpoints

TheGem Breakpoints

TheGem uses following breakpoints for different devices and screen resolutions:

  • Large Devices (Desktop): >= 1212px
  • Medium Devices (Notebooks): >= 992px
  • Small Devices (Tablets): >= 768px
  • Extra small devices (Phones): < 768px
Elementor Breakpoints

By default, Elementor uses following breakpoints for different devices and screen resolutions: 

  • Desktop: >= 1025px
  • Tablet: >= 768px
  • Phones: < 768px

This settings can be adjusted in Elementor’s settings as described here

Custom Breakpoints

As you can see, Elementor serves only three screen resolution ranges, while TheGem offers you a wider range of breakpoints, basing on Bootstrap. To resolve this mismatch, TheGem elements plugin includes an extension “Custom Breakpoints”. With this extension you have much more flexibility in managing your layouts under different screen resolutions. For more details on Custom Breakpoints please read this chapter 

Mobile Editing

TheGem Elements plugin includes responsive options on many controls and settings of each content element. Please check this details on how to work with mobile settings in TheGem Responsive Options.

Recommendations

In this section we list some basic recommendations on working with page layouts while building your pages. This principles have been used by our team while creating all TheGem demos and corresponds with the page building approaches by Elementor team.

Positioning

When positioning your content on the page, please follow TheGem grid and columns defaults. TheGem grid covers a wide range of layout designs and content structuring, so there is no need to make some extra adjustment.

In case you need to implement some exotic layout situations, there are two additional options:

Absolute Positioning 

We recommend to use absolute positioning only in special cases, if your design cannot be implemented using the standard grid and column settings of TheGem. Examples: 

  •  One content is placed upon the other content (in complicated cases; for simple positioning of one content upon the other content we recommend to use negative margins, see below)
  • Non-standard arrangement of content elements (for example you need to place some square or circle figure in the upper corner)

Margins

All sections, columns and elements have margin settings in “Advanced” tab. You can set positive and negative margins depending on your purposes. For example, if you wish to position some content above the other content, use negative top margin for this

Spacings

Spacings between sections and content elements can be set via margins, paddings and spacer widget. All approaches are valid, however we use this simple rule: 

Spacings between sections

For top and bottom spacings in sections we mostly use section paddings

Spacings between elements

To set spacings between content elements we mostly use margins

What about spacer widget?

This widget can also be used to set spacings. However, in our templates we use this widget in 2 cases:

  •  in column without any content, but with background image

Navigator

Elementor has a cool feature “Navigator”. This feature gives you a better overview over your page content structure as it works like a layer management in photoshop. Check this article about it

In our templates we have always paid attention on the correct structure and naming of sections for navigator. If you enable navigator on any of our templates, you will see, that all sections are named, giving you a better overview over the page content and making your page editing simpler. We always recommend to use navigator as it is really a very helpful feature. 

TheGem Elements Plugin

First Steps

TheGem Elements Plugin is a required plugin, bundled with TheGem theme (Elementor version), which includes 30+ flexible customizable content elements & extensions used across all pre-built TheGem demos. TheGem elements plugin enriches basic free version of Elementor with many useful features, widgets & designs. As you may still want to use Elementor Pro, please note: with TheGem Elements plugin it is absolutely not required – all you need is only a basic free version of Elementor.

Installation

During the installation of TheGem theme (Elementor version) TheGem Elements plugin will be automatically proposed as required plugin. Select this plugin from the “Plugins” list and proceed with installation

Access to Elements / Adding & Editing

Note: you need Elementor plugin installed to get an access to TheGem Elements.

To access TheGem elements:

1. Create or edit any page, post, portfolio page or product and click on “Edit with Elementor

Elementor will start loading. Once finished, on the left of your page you will see Elementor editing panel with all available widgets

2. On the top you will see “Basic” and “General” widgets of Elementor basic free version. Scroll down and you will see four main groups of TheGem Elements:

  • TheGem Elements
  • TheGem Portfolios
  • TheGem Blog
  • TheGem WooCommerce (visible only in case of installed WooCommerce plugin)

3. Open any of this groups to get a list of available elements. Drag any of this elements to the section / column area of the page and drop it there

4. The editing options of this selected elements will open in Elementor editing panel on the left. Now you can start editing this element

UI Overview

The editing interface of all TheGem Elements follows the principle of content & design separation. Each element has three main tabs. All settings in this tabs are grouped in different sections

Content Tab

Content tab contains all settings needed to work with content (not its style). Here you can select content to be published, its main layout, preset/skin as well as different visibility options and extras. (for more details check this article)

Style Tab

The main purpose of the style tab is to customize the look of the element without any coding. Here you can control each and every pixel of the selected element: backgrounds, borders, colors, typography etc. (for more details check this article:(for more details check this article)

Advanced Tab

This tab gives more options to control the appearance of the element on page. Here you can define visibility options for responsiveness, add motion effects to your element, specify the positioning etc. (for more details check this article)

Content Tab

Settings in content tab of each TheGem element are usually divided in following sections:

Layout

The purpose of this section is to specify the main layout of the selected element. Almost all TheGem elements come with so called skins or presets, allowing you to quickly select some predefined appearance and style of the element. In this section you can select skins and presets. In grid elements (like portfolios, galleries etc) you can specify grid appearance like number of columns, grid style etc. (for more details check this article)

Content

This section’s name differs across different TheGem elements, depending on which content should be added. For example in “Accordion” element this section is called “Accordion”, in “Clients” element – “Clients” etc

In this section you can specify the content of the element. 

Following common types of content controls are available in TheGem elements plugin: 

  • Selectbox: used for selecting categories of different TheGem posttypes to be displayed
  • Repeater: used in the elements with multiple content items & grouped content like quickfinders, accordion, clients etc.
  • TinyMCE editor: rich text editor with html formatting options for text
  • Icon: control for selecting icons from icons library
  • Image: control for selecting images from media library
  • Link: control to specify URL / link

There are more types of content controls like inputs etc, which all are available in combination with each other depending on the type of TheGem element.

Options

This section contains additional content options like navigation, autoscroll, activation of lazy loading animations etc.

Style Tab

Styling options for content of selected TheGem elements are absolutely different, depending on the layout nature of this element. However, in common, all elements can consist of following parts: container, image, icon, text, button. That’s why all settings inside the style tab are logically divided in corresponding sections:

Container Style

The name of this section can differ, depending on its purpose, like “General Container Style”, “Image Container Style”, “Caption Container Style” etc. To simplify, container is the main area of the element, surrounding all other parts of the element like text, icon, image etc. which can have some background, borders, margins and paddings. In case the selected element has such container, in this section you can specify the styles of this container

Image Style

In this section you can specify different styling settings for the image, used in the selected element

Title & Description Style

The name of this section can differ, depending on its purpose, like “Name Style”, “Caption Style” etc. This section is aimed to work with text content by offering different typography settings.

Button style

Set of options to control the appearance of button inside the selected element.

There are more specific style sections available in TheGem Elements plugin, which all follows the main principle: to control the style and appearance of the specific part of the selected element.

Advanced Tab

In advanced tab you can make additional advanced settings to your elements, columns and sections. This tab is always the same for all elements and is described here

Responsive options

Mobile Editing

Most of the settings in TheGem elements have a control to switch between different responsive modes: desktop, tablet and mobile

By clicking on the device icon near the setting’s name you can switch between these modes. In this way you can control the style of the selected element across different devices. For example you can set different paddings and margins for different screen resolutions, select different colors and spacings and much more. For more details check this article

Custom Breakpoints

Additionally, the standard column settings of Elementor are extended with custom breakpoints settings to give more flexible control on layout appearance on additional screen resolutions, beyond standard desktop, tablet and mobile resolutions set in Elementor.  For more details check “Extensions – Custom Breakpoints” article 

Presets & Skins

The cool thing in TheGem elements plugin is availability of so called skins for most all of TheGem elements. Skins are design presets or predefined layouts of the selected element which are pre-configured by TheGem team and look great out-of-the-box. By selecting different skins you don’t need to waste your time on further design & style customizations, simply picking the pre-made design and using it on your page. All main skins styles (colors, fonts) are controlled via Theme Options and can be changed globally across the whole website at once (check this article about “Theme Options”).

Skins can be selected in Content Tab – Layout Section

Note: as skins are presets with pre-configured styles, switching between different skins will overwrite any style customizations made in style tab for a previously selected skin.

Styling Controls

Common styling controls frequently used in TheGem elements are described here. For specific controls or specific control behaviour of TheGem elements check the article “Element Overview”

Margin

Margin is used to control external spacings (top, right, bottom, left) of the element or part of the element. It can be specified in px, %, rem or em.

Spacing

Slider control, similar to margin, but controls only one specific external spacing, mostly top or bottom spacing.

Padding

Padding is used to control internal spacings (top, right, bottom, left) of the element or part of the element. It can be specified in px, %, rem or em.

Border Type

Select whether to enable border around the element or part of the element as well as specify border type. This control opens additional controls to select border width and border color.

Radius

Specify the radius of the element or part of the element

Background Type

 

Most of TheGem elements and their parts can have three different background types: color, image, gradient.

Position & Alignment

With this two controls you can specify the position and/or alignment of some element’s parts inside the element (for example text content, image, icon etc.)

Typography

Grouped control allowing you to customize different font settings for the text parts of the selected TheGem element.

Color

Colorpicker to specify color of some part of the selected element. In colorpicker you can add colors to “Favorites” by selecting some specific color and clicking on “+” button

Shadow

With this control you can add shadow to some part of the selected element (for example to add shadow to container or to image inside container).

Normal / Hover

Here you can switch between normal and hover states of the part of the element. In this way you can make different styling settings for the same part of the elements, for example change color settings for text or backgrounds, adds shadow for hover state, rotate icons etc.

Icon Library

Section Templates

Some content elements like accordions and tabs & tours can include advanced section templates instead of simple content. Section templates are pre-made page sections which can be added or edited under Elementor -> Templates menu in WordPress admin

This templates can be also used in sidebars or footer widget area via “Elementor Template” widget

We have used section templates in accordions, tabs&tours, in sidebars and footer widget areas across TheGem demos. To give you a better overview, which template is where used, we have followed a strict naming convention: Location – Content. For example, if you see this template

you know, that this is a clients grid used in sidebar. 

Extensions

TheGem Elements plugin extends some standard settings and options of basic Elementor plugin with following features:

Custom Breakpoints

Custom Breakpoints is a feature which allows you to control the behaviour of columns under different screen resolutions. By default, Elementor offers three standard responsive modes: desktop (>= 1025px), tablet (>= 768px), mobile (< 768px). Sometimes it can be insufficient, as there are many other screen resolutions out there, for example popular laptop resolutions like 1366x or 1280x px. TheGem Elements plugins gives you the ability to specify the column behaviour in different screen resolutions by:

  • Selecting the resolution 
  • Selecting the behaviour 

This feature can be found in Advanced Tab of the column widget. Here you have “TheGem Options” section.

By clicking on “Add Item” you can specify: 

  • Screen resolution range by selecting min and max screen width 
  • Column visibility 
  • Column width 
  • Column margin
  • Column padding
  • Column order: this setting is used for the case if you need a different columns order under some specific screen resolutions

Custom Breakpoints is a repeater control, enabling you to specify multiple screen resolution ranges with different column appearance and behaviour.

Example of usage:

https://codex-themes.com/thegem/sites/agency-media/ – on this page both columns
have different width on devices with screen resolution in range 992px – 1199px

Section Parallax

This feature adds parallax effects to sections and inner sections. To enable parallax for your section or inner section, go to Style tab of section / inner section and open “TheGem Section Parallax” section. Enable “Parallax Background” setting and you will get additional set of settings

  • Background Type: select background for your section / inner section
  • Image: select image for parallax background 
  • Parallax type: select type of parallax effect to be applied. You can choose between vertical parallax, horizontal parallax and fixed background parallax effect 
  • Parallax on mobiles: once activated, parallax will be active on mobile devices as well. By default it is deactivated because of the performance aspects.
Custom CSS

TheGem Elements plugin is really very flexible and highly customizable. All TheGem demos are built without any single line of custom css. All elements have a wide range of different settings, allowing you to control every pixel of the element.
However, sometimes you might need to add some extra css on your page. Or make some very specific customization of some element, not covered by all the available settings. For this case you can use Custom CSS option, which is available for all sections, columns and elements.

This feature is located in Advanced tab of any element. Open “TheGem Options” section and you will see custom css editor.

Note: use “selector” to target wrapper element. Examples:

selector {color: red;} // For main element

selector .child-element {margin: 10px;} // For child element

.my-class {text-align: center;} // Or use any custom selector
Elementor Template Sidebar Widget

If you use sidebars with sidebar widgets and / or footer widget area with footer widgets on your pages, you can take advantage of “Elementor Template” feature of TheGem elements plugin. With this feature you can create any content template in Elementor and use it in sidebars and / or in footer widget area.

Here is an example of usage on TheGem online magazine demo website – clients grid has been added using Elementor template  (https://codex-themes.com/thegem/sites/news-magazine/):

In Sidebar:

In Footer Widget Area:

To add any Elementor template to your sidebar or footer widget area proceed as follows:

1. Go to “Templates – Add New” and create new Elementor template

For details on creating Elementor templates please check this article

2. While editing any page or post, scroll down to “Page Widgets” section. Here you can customize your page sidebar and / or footer widget area by adding different sidebar widgets (check this article for more details: https://codex-themes.com/thegem/documentation/#sidebars-and-widgets). To add elementor template, select “Elementor template” widget from the list of available widgets and drag’n’drop it to your page sidebar or footer widget area

3. Open this widget. Now you can specify title of the widget and select elementor template from the list of all available templates

We have used elementor templates in sidebars and footer widget areas across TheGem demos. To give you a better overview, which template is where used, we have followed a strict naming convention: Location – Content. For example, if you see this template

you know, that this is a clients grid used

Heading Widget

Heading widget is a basic Elementor widget which is used to add headings on page and is located here

TheGem elements plugin extends the settings of basic heading widget, adding more preset heading styles to accelerate your work. All heading presets are controlled via theme options, check this article

For standard headings H1-H6 we have added an option to select from two preset title weights: bold and thin

Also we have added an option to select “div” html tag, giving you more options to control onpage SEO. By selecting “div” html tag for your heading, you can still display the same heading styles for H1-H6 headings avoiding using H1-H6 html tags in source code. Also, besides H1-H6 headings, you can select special headings like xLarge title or styled subtitle using “DIV Style” selectbox

TinyMCE, Drop Caps and Mixed Heading Styles

TinyMCE text editor is used in many widgets, like for example Text Editor in basic Elementor widgets

TheGem Elements plugin adds a neutral gray background color in this editor to improve UX by editing text in white color – it is quite useful if you place white text on dark backgrounds.

Mixed Headings

Also we have added TheGem format presets for different text styles, making the work with headings more flexible. For example, you can combine different format presets to achieve headings in mixed styles. The most common use case is to create some heading, containing bold and thin heading styles in different colors.

Say you wish to create this type of H1 heading

1.   Add “Text Editor” widget to your page by drag and dropping it in some section
2.  Type in your heading content
3. Select this content in TinyMCE and open “Formats” selectbox

4.   Select “Title H1”
5.   After that, select the part of your heading content, which should be displayed in thin style, open “Formats” selectbox again and choose “Light Title”

6.   Ok, now you can just select the part of your heading content, which should be displayed in other color and define its color by clicking on “Text color” control in TinyMCE panel

Drop Caps

Drop Caps can be used in regular body text to highlight the first text letter or to add numbers for styled lists .

TheGem elements plugin extends the basic drop cap functionality of Elementor by adding following controls:

  • Bottom Space: for better control of bottom spacing between drop cap and text
  • Vertical Position: for better control of drop cap position vertically 
Divider Widget

Divider is a basic Elementor widget located here

In TheGem theme divider widget is used to create headings with some lines to the left and to the right, like in this example

To give the ability to select different heading styles, this widget has been extended with the “Text Style” selectbox, where you can choose between different preset heading styles of TheGem theme

Dynamic Content

Dynamic Content draws content from the website, or from the current pages. Normally, dynamic content feature is only available in Elementor Pro version. However, TheGem Elements plugin includes this feature and makes it available in a standard free Elementor version as well.

You can check this article to understand, what exactly this feature does and how it works:

https://docs.elementor.com/article/310-dynamic-content

In TheGem elements plugin you can use following dynamic tags:

For text content (like, for example, text area in Heading widget or TinyMCE editor in Text Editor widget)

  • Page/Post Title: draws content from the current page title
  • Page/Post Excerpt: draws content from the current page excerpt
  • Page/Post Date: draws content from the current page date
  • Page/Post Time: draws content from the current page time
  • Author Name: displays the name of the page’s author
  • Comments Number: displays number of comments of current page

For images (like, for example, background image in section)

  • Page/Post Featured Image: gets image from featured image of the post

Custom Titles

Custom titles are special global templates for page/post title area, which can be used globally across your website by selecting it in page options of any page/post.

Say you wish to make some fancy creative page title, which will be used on all of your pages with the same layout and design, but with different background, title and excerpt, coming dynamically from the corresponding page/post.

Instead of wasting your time on making the same title design for each page each time individually, you can create one global template and then use it on your pages.

Adding Custom Title

1. Go to “Custom titles -> Add new” in WordPress backend

2. Click on “Edit with Elementor”. Elementor loads and now you can start creating your page title area template
3. Drag’n’drop elements you need to be used in title area design
4. Save your custom title
5. Open any page where you wish to use this custom title
6. Go to “Page Title” section of Page Options and select your custom title here

Some of the main elements to be used in your page title area are: 

  • Heading: for page headings we would recommend to use Heading widget
  • Excerpt / Subtitle: for page excerpts/subtitles you can use Text editor widget or Heading widget as well
  • Background: backgrounds can be defined in section settings in Style tab
Dynamic Title & Excerpt

At least title and excerpt/subtitle should use dynamic content to get title and excerpt from the corresponding page (obviously, titles and excerpts differ from page to page). To do this, click on “Dynamic Tags” icon to get the list of available dynamic tags

For headings and excerpts/ subtitles you can choose between: 

  • Page/Post Title: draws content from the current page title
  • Page/Post Rich Content Title: draws content from the current page rich content title. It can be found in page options in “Page Title” section
  • Page/Post Excerpt: draws content from the current page excerpt
Dynamic Background Image

Moreover, you can also use dynamic tags to use dynamic content for images (like section background) as well. Go to Style tab of your section and click on “Dynamic Tags” icon in Background Type – Image

  • Background Image (set in Page Options): gets image dynamically from the current page title background image specified in Page Title section of Page Options

IMPORTANT: “Use Page Own Style & Background Settings” checkbox should be activated and background image should be defined in page options of the corresponding page/post.

Dynamic Background Video

If you wish to use video background for your title area and to add video content dynamically from the corresponding page, select video as background type of your page title section and click on “Dynamic Tags” icon in “Video Link” setting

  • Background Video (set in Page Options): gets video dynamically from the current page title background video specified in Page Title section of Page Options

IMPORTANT: “Use Page Own Style & Background Settings” checkbox should be activated

and video background  should be defined in page options of the corresponding page/post.

To add background fallback in case selected video can’t be played on some devices, use “Background Fallback” setting and click on “Dynamic Tags” here:

  • Background Video Poster (set in Page Options): gets video poster dynamically from the current page title background video poster specified in Page Title section of Page Options

Custom Footers

Just like custom titles, custom footers are special global templates for page/post footer area, which can be used globally across your website by selecting it in page options of any page/post.

Similar to custom titles, if you wish to create some creative website footer and don’t want to waste your time on re-creating it for each page/post individually, you can create one global footer template and then use it on your pages.

Adding Custom Footer

1. Go to “Custom Footer -> Add new” in WordPress backend

2. Click on “Edit with Elementor”. Elementor loads and now you can start creating your page title area template
3. Drag’n’drop elements you need to be used in footer area design
4. Save your custom footer
5. Open any page where you wish to use this custom footer
6. Go to “Page Footer” section of Page Options and select your custom footer here

Fullpage Scroller

Fullpage (or fullscreen) vertical slider is a creative trendy way to present your webpage to your website visitors. You can check some demos here:

DEMO 1 (fixed backgrounds, continuous scrolling)

DEMO 2 (parallax, continuous scrolling)

DEMO 3 (static scrolling)

Enabling Fullpage Scroller

Please check this article on how to enable fullpage vertical scroller in Page Options

https://codex-themes.com/thegem/documentation/#vertical-slider

Preparing Slides

After fullpage vertical scroller is enabled and set in Page Options, click on “Edit with Elementor”. Elementor loads and you can start making slides.

1.  Click on “Add section”

2. In Layout tab, Layout section of Section widget you can optionally select “Fit to Screen” in “Height” setting to automatically position your columns in the middle vertically (it is not required)

3. Optionally, you can add some background to your slide by selecting background type in Style tab of the section

4. Now you can start adding content to your slide by drag’n’dropping elements and widgets to your section / column area
5. After you are done with your first slide, scroll down and click on “Add section” again to add new slide.
6. Proceed with the same steps as described in 2-3.
7. And so on.

Once done, save your page and check it on front end. You will see, that your page has been automatically transformed to fullpage vertical scroller.

Setting slide’s name

Slide’s name can be used in navigation dots as navigation labels

In case you wish to show slide names in the dot navigation of your slider, you need to name your slides in section settings. Go to Layout tab of your slides section and open “TheGem Fullpage Slider” section. In “Slide Name” field you can now specify the name of your slide.

Linking Menu

To link your main menu with the slides you have created, use “Slide anchor” input field in “TheGem Fullpage Slider” section in Layout tab of the section

Specify the slides anchors here, after that go to menu settings in WordPress admin area and create menus with the anchors you have added to your slides.

WooCommerce

For general information about TheGem and WooCommerce please check this chapter

With TheGem Elementor you can edit your products content and use different WooCommerce elements on any pages / posts (see below in chapter “TheGem WooCommerce”).

Using Elementor for products

After installing TheGem, TheGem Elements plugin, Elementor and WooCommerce plugin by default Elementor is active for products and you can start editing. However, in case you cannot start Elementor for editing your products, please go to “Elementor – Settings” in your WP admin are and check if the checkbox “Products” is enabled in “Post Types” field

Each product contains three content areas:

Short description 

Product description

Extended content area

In TheGem you can use Elementor to edit the extended content area, where you can enrich the basic product information with any of TheGem elements (see below chapter “Elements overview”).

“Cart”, “Checkout”, “My Account”, “Wishlist” pages

After importing WooCommerce TheGem demos, all this pages will be automatically imported and available. If you don’t want to import any demos and build your shop from scratch, you will need to add this pages to your shop.

In TheGem it is very easy:

1.  Create new page, open it in Elementor, use “Shortcode” element and add it to your page

2.  Insert following WooCommerce shortcode in “Shortcode” element to display:

  • Cart: [woocommerce_cart]
  • Checkout: [woocommerce_checkout]
  • My Account: [woocommerce_my_account order_count=”15″]

To add wishlist to your page please use YITH Wishlist element

Elements Overview

In this chapter we describe content elements available in TheGem Elements plugin. We focus on some specific points of each element. For description of common settings and styling controls used across all elements please check this article Styling Controls.

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.

Check this demo page showing different accordion style presets available in TheGem:

https://codex-themes.com/thegem/elements/accordions-toggles/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed. 

You can find “Accordion” element in editing panel of Elementor in “TheGem Elements” group:

Content Tab

Layout

Skin: we have added 6 design presets for different accordion styles you can choose from

Accordion

Each accordion section is an item, which can be edited in “Accordion” section. As content source you can select between TinyMCE text editor or template from Template Library

By clicking on “+ Add Item” you can add additional accordion sections

Style Tab

Here you can separately style accordion item container, item content, closed item and item title.

Button

TheGem button is an extended version of simple button, bringing you additional styles and style settings to make really attractive buttons in a quick and simple way.

Check this demo page showing different button styles:

https://codex-themes.com/thegem-elementor/elements/push-the-button/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Button” element in editing panel of Elementor in “TheGem Elements” group


Content Tab

Layout

Skin: there are two major skin presets for TheGem button – flat button and outline button.

Size: you can choose between 5 different button size presets

Stretch to Full Width: if enabled, the button will be automatically stretched to full width.

Content

In this section you can specify the button text, select text style preset (bold or thin), optionally add an icon to your button, and, of course, specify button’s link.

Separator

TheGem button can optionally have a separator, which can be enabled in this section.

Style Tab

Button Style

A set of settings to style your button.

Text Style

Style settings for button’s text.

Icon Style

Style settings for button’s icon (in case icon is enabled).

Call to Action

Call to Action is a special text box with icon and buttons, aiming to attract user’s attention on something and force him to take an action (for example, click a button). CTAs are widely used on landing pages and shop pages to increase visitors involvement and conversions.

Check this demo page showing different call to action style presets available in TheGem:

https://codex-themes.com/thegem-elementor/elements/alert-boxes-2/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Call to Action” element in editing panel of Elementor in “TheGem Elements” group


Content Tab

Layout

Skin: choose between 4 design presets for call to action boxes.

Title & Description

As content source you can select between “Editor” for title text input and TinyMCE editor for description or choose template from Template Library . For titles you have multiple H-heading presets with two weight variants (bold and thin), as well as an option to disable H-Tag in source code, which can be useful for SEO.

Icon / Image

Here you can select, whether to use an icon for your call to action box, or image or disable both icon and image.

Button

There could be one or two CTA buttons in your CTA box. Or you can disable button and it will not appear in CTA box.

Style Tab

Container Style

In this section you can style the main container of the CTA box. Using “Top Shape” and “Bottom Shape” select boxes you can add some fancy shapes to your CTA box. Please note: if you change the background color of the main container, the colors of the shapes should be changed separately using “Top Shape Color” and “Bottom Shape Color”.

Title & Description Style

Specify styles for your CTAs title and description

Icon/Image Style

Depending on whether you have decided to use icon or image in your CTA box, here you can specify different style settings for your image or icon. For icons, you can choose between presets for shape, size and color split of the icon. For image, you can select size and padding- Also you can specify vertical and horizontal position of icon/image inside the CTA box. For “left” and “right” horizontal positions, you can additionally choose text wrapping options:

  • No wrapping
  • Inline without wrapping (text will not wrap the icon)
  • Wrap text (text will wrap the icon)

Button Style

Specify style of the button used in CTA box. You can select button position, choose between TheGem button size and style presets and customize with additional styling options.

Clients

“Clients” content element is useful to show your clients/customers, for whom you have made projects, provided services, products etc. The usual way to do this is to show an overview of your “best of” customers logos/identities in a grid or carousel.

Check this demo page showing different clients styles:

https://codex-themes.com/thegem-elementor/elements/clients/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Clients” element in editing panel of Elementor in “TheGem Elements” group


Content Tab

Layout

Skin: you can choose between grid layout or carousel. In case you have selected “grid”, you can additionally specify:

Rows: number of rows in your clients grid

Columns: number of columns in your clients grid

In case you have selected “carousel”, you can then enable a full width carousel using Stretch to Full Width.

Clients

This section contains a repeater, where you can add any number of clients for your grid/carousel. Each client is one item, containing:

Logo: here you can upload your client’s logo or choose one in media library. You can use SVGs as well.

Link: you can specify a link for each client

Brand Name: to have a better overview over the added clients, we recommend to use this field, which is a title of this client in the repeater

Options

Image Size: select which WP image size you wish to use for images in grid

Navigation Dots: for grid layout, in case you have added more clients then it can be displayed in the selected rows and columns, a navigation dots paginator will automatically appear below the grid, allowing a website visitor to slide to another portion of clients. You can also disable this paginator in case you don’t need it

Navigation Arrows: for carousel, you can enable or disable display of navigation arrows

Autoscroll: if enabled, you can then additionally specify the autoscroll speed

Style Tab

Container Style

This style section appears in case you have selected grid layout. Here you can specify different container settings like height and gaps, select background, border etc.

Image Style

Style settings for images in grid / carousel.

Navigation Dots Style

For clients grid: in this section you can style navigation arrows for clients carousel.

Arrows Style

For clients carousel: in this section you can style navigation arrows for clients carousel.

Contact Form 7

With this element you can add contact forms to your page, created with Contact Form 7 plugin and style this forms in an intuitive easy-to-use way without coding. Please note: you need to install Contact Form 7 plugin in order to be able to use this element.

Check this demo page showing different contact form styles:

https://codex-themes.com/thegem-elementor/elements/contact-forms/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Contact Form 7” element in editing panel of Elementor in “TheGem Elements” group


Content Tab

Layout

Skin: we have added 5 pre-designed style presets for contact forms which you can select here.

Contact Form

In this section you can select the contact form you have created in Contact Form 7 plugin, which you wish to add to your page.

Style Tab

Form Fields Style

In this section you can style the appearance of fields, used in the selected contact form. You can specify width, bottom spacing and many other settings.

Fields Content Style

Here you can customize style settings for input text and placeholders.

Label Style

Specify position, alignment and other settings for form’s labels

Radio & Checkbox

By default, the style of radio and checkboxes, used in contact form, bases on the style of form fields. However you can customize this style individually for radio and checkboxes by activating “Custom Style” option.

Submit Button Style

Here you can control the appearance of submit button, used in selected contact form.

Errors Style

This section enables you to customize alert messages, error messages, validation errors and appearance of fields with errors.

Countdown

This element is useful to display a countdown timer for some event which will take place in future. It is widely used on landing pages for some events and on coming soon pages”.

Check this demo pages showing different contact form styles:

https://codex-themes.com/thegem/coming-soon/coming-soon-01/
https://codex-themes.com/thegem/coming-soon/coming-soon-02/
https://codex-themes.com/thegem/coming-soon/coming-soon-03/
https://codex-themes.com/thegem/coming-soon/coming-soon-04/
https://codex-themes.com/thegem/coming-soon/coming-soon-05/
https://codex-themes.com/thegem/coming-soon/coming-soon-06/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Countdown” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: here you can choose between 5 different style presets for countdowns

Countdown

Due Date: specify the due date of the event (i.e. the date on which the event will take place).
In case you have selected “Circles” in “Layout->Skin”, you will get one additional field to specify – “Starting Date”. Here you need to specify the date on which the circles progress should start. You can select some date in the past or current date. Please note: “Starting Date” should not be later than the “Due Date”, i.e. it cannot be after the “Due Date”.

Labels

In this section you can decide, which labels should be shown in countdown timer. You can also change the default label text to your own.

Link

Here you can link your counter with some internal or external link.

 Once activated, additional styling section appear in Style tab

Style Tab

Depending on the skin you have selected in Layout -> Skin, you will get different sections here.

Container Style

Customization options for countdown containers. By default, all settings made here are simultaneously applied to all container. However, if you wish to style each container individually, you can use “Customize separately” switch.

Once activated, additional styling section appear in Style tab.

In this section you can then customize the look of each container individually.

Numbers Style

Styling options for numbers in countdown timer. Similar to container style, by default this settings are simultaneously applied to all numbers. For individual customization of each number, use “Customize separately” switch. Once activated, individual styling settings for numbers will appear in additional styling sections in Style tab (see screenshot above).

Labels Style

Styling options for labels in countdown timer. Similar to container style, by default this settings are simultaneously applied to all labels. For individual customization of each label, use “Customize separately” switch. Once activated, individual styling settings for labels will appear in additional styling sections in Style tab (see screenshot above).

Counter

Counter is a very popular content element which helps to highlight some facts and achievements in an attractive way. Counters may consist of number, description and icon. 

Check this demo page showing different contact form styles:

https://codex-themes.com/thegem-elementor/elements/counters/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Countdown” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: TheGem comes with 3 style presets for counters, one of which has a vertical layout.

Numbers Format: in this field you can set a pattern for displaying the counter number. Depending on your number format standard (American, European, British etc.), you can specify here your decimal separator pattern.

Counter

Starting number: this number is used in case you have enabled animated counting effect in “Additional Options”

Ending number: resulting end number of your counter

Number suffix: optionally you can specify some suffix for your number, for example %, $ etc.

Spacing: activate in case you need spacing between suffix and number

Description: here you can type in description for your counter

Link: you can also set a link to your counter

Icon: select icon for your counter. You can also remove an icon, leaving just number and description.

Additional Options

In this section you can enable the animated counting effect for your counter

In case you have selected “Vertical Style” in Layout-> Skin, additionally you will get a “Team Person” section

Vertical Style” allows you to add a team person on top of the counter: 

Show Team Person: activate this setting in case you wish to display some team person on top of your counter

Select Team Person: here you can select which team person should be displayed.

After that you can optionally show/hide different content parts of team person like image, name, position etc. 

Connector: this setting allows you to activate a connector between two vertical counters (see description below “Vertical Style – How To”). 

Style Tab

Container Style

In this section you can customize styles of your counter’s container.

Number Style

Style settings for number in counter.

Description Style

Style settings for description in counter.

Icon Style

In this styling section you can customize the look of the icon used in counter (in case you have added some icon).

Connector Style

This section appears only in case you have selected “Vertical Style” in Layout->Skin and have enabled “Connector” in “Team Person” section in “Content Tab” (see description below), In this section you can customize connector between two counters in vertical layout.

Vertical Style – How To

How to create a vertical counter, consisting of multiple counters, placed one below the other? Very easy: 

1. Add first “Counter” element to your section/column and select “Vertical Style” in Layout->Skin
2. Style your counter, as you wish
3. Now duplicate this element by right clicking on blue pencil icon and selecting “Duplicate”

4. Duplicated counter will appear below the first one. Click on this second counter to open its editing options in the left Elementor panel

5. Now open “Team Person” section and enable “Connector” setting. After this the second counter will be automatically connected with the first one using a connector.

Icon

TheGem icon is an extended version of simple icon, bringing you additional styles and style settings to make really attractive icons in a quick and simple way.

Check this demo page showing different icon styles:

https://codex-themes.com/thegem-elementor/elements/icons/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Icon” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Shape: in TheGem we have added 5 shape presets for icons, which you can select here

Size: size presets for icons. Each size can be freely customized; this size presets accelerate your work by adding pre-made size

Color Split: TheGem icons can be splitted in two colors. Here you can specify if you wish to use color split and if yes, im which style. Gradient icon color is also available in this setting

Icon

Select an icon from icon library or upload your own svg icon. Also here you can set an icon’s link.

Style Tab

Icon Style

Various settings to customize the look and position of the added icon.

Image

TheGem image is an extended version of simple image widget, bringing you additional styles and style settings to insert really attractive images in a quick and simple way.

Check this demo page showing different TheGem image styles:

https://codex-themes.com/thegem/elements/styled-images/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Image” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: TheGem comes with 13 style presets for images which you can select in this select box.

Content

Here you can select the image to be inserted. You can select an image from Media Library or upload a new image. Once selected you can then select an image size to be inserted (the size is also customizable in Style tab).
You can also set a link for the image:

  • Media File: click on image will open the original image size. Here you have an option to activate “Lightbox” setting in case you wish that the original image opens in a lightbox (fancy box).
  • Custom URL: specify any custom URL for the image link
  • None: disable click on image

Options

Activate or disable lazy loading animation effect for the image.

Style Tab

Image Style

Customization options for the image appearance. You can set an image size, image position and a bunch of other options. In case you have activated an image link in Content tab -> Content, here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover, select this icon and customize its appearance

Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container.

Mailchimp Opt-In

With this element you can add mailchimp subscription forms to your page, created with EasyForms for Mailchimp plugin and style this forms in an intuitive easy-to-use way without coding.
Please note: you need to install EasyForms for Mailchimp plugin in order to be able to use this element.

You can find “Mailchimp Opt-In” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 5 pre-designed style presets for mailchimp opt-in forms which you can select here.

Opt-In Form

In this section you can select the mailchimp opt-in form you have created in EasyForms for Mailchimp plugin, which you wish to add to your page.

Title & Description

In case you wish to show title and description, which you have added to your form in EasyForms for Mailchimp plugin, you can activate this settings.

Submit Button

Here you can specify the submit button’s text and optionally add some icon to your button.

Style Tab

Form Fields Style

In this section you can style the appearance of fields, used in the selected mailchimp opt-in form. You can specify width, bottom spacing and many other settings.

Fields Content Style

Here you can customize style settings for input text and placeholders.

Label Style

Specify position, alignment and other settings for form’s labels

Submit Button Style

Here you can control the appearance of submit button, used in selected contact form. In case your mailchimp opt-in form uses inline position of fields and submit button (you can specify it in EasyForms plugin in forms settings

switching to responsive mode enables you to disable inline button position in case you wish to position the submit button below the last input field – for this you can use “Disable Inline” control in responsive mode.

Title & Description Style

This section enables you to customize styles for title & description, added in EasyForms for Mailchimp plugin.

Pricing Table

Check this demo pages showing different pricing table style presets available in TheGem:

https://codex-themes.com/thegem/elements/pricing-tables/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Pricing Table” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 8 design presets for pricing table you can choose from
Highlighted: in case you wish to highlight your pricing table (for example to attract visitor’s attention to some special offer), activate this setting.

Title

Here you can select whether to show the title of pricing table and specify its text.

Pricing

Specify whether to show the price, which price to show and optionally add some period for the periodic price.

Features

Section with repeater control allowing you to specify content for features you might wish to list in your pricing table. You can type in the description of the feature and use N/A control to strikethrough some not available feature. Use “Add Item” button to add more features.

Footer

This section helps you to add a button in the footer of your pricing table, specify the button text and button link

Label

In case you wish to add some label to your pricing table, use this section to activate the label and to add label’s text

Style Tab

Title

In this section you can style the title area and title content of the pricing table

Pricing

A set of settings to customize the look and alignment of pricing section of the pricing table. Also you can style the pricing typography here.

Features

Settings to control the style of features containers and content. You can also add some icons to the feature list here.

Footer

Customization options to style the footer area of the pricing table. Also you can style the button in case a button has been added to pricing table in Content tab -> Footer section.

Label

A set of options to design the look of label in pricing table and set its position.

Progress Bars

This element helps you to insert progress bars and progress diagrams in your page.

Check this demo pages showing different progress bar styles:

https://codex-themes.com/thegem/elements/diagram/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Progress Bars” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Layout: here you can select a layout for progress bars. You can choose between linear and circular layout

Style: for linear progress bars you can choose between two different design presets

Items

This section contains a repeater, where you can add any number of progress bar items you need. In each item you can specify:

  • Skill text
  • Progress level in percent

In case you wish to customize this bar item individually, activate “Want to customize?” switch to get additional options:

  • Level Color
  • Base Color
  • Name Color
  • Percentage Color

Options

In this section you can specify whether you wish to show percentage and enable lazy loading animation for progress bars

Style Tab

Bars Style

In this section you can customize the look of progress bars. Note: the color settings here are applied only to the items, which have not been individually customized in Content tab -> Items section.

Name Style

Specify the typography, colors and spacings of the skill names

Percentage Style

Specify the typography, colors and spacings of the skill names

Progress Donut

Like Progress Bars, this element helps you to insert progress donut in your page.

You can find “Progress Donut” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Value & Label

Value: specify the percentage value to be shown in progress donut

Show Label: enable/disable the display of value’s label

Label: here you can specify the label of the progress donut

Unit: here you can specify the unit to be shown in progress donut

Icon: instead of label you can add an icon to be shown in progress donut

Style Tab

Bar Style

In this section you can customize the look of the donut’s bar.

Text Style

Specify the typography and colors for the donut’s text

Quickfinders

Quickfinder is a useful content element which can help to highlight some special advantages/properties of the products or services. Also it can help website visitor to navigate through the website. Quickfinder looks and works like a grid of text boxes, consisting of icon/image, title, description and button (optional). The cool thing is that in case you need to add multiple text boxes and don’t want to waste time on setting up each text box individually, you can add one quickfinder with multiple items and control its style within one place.

In the Elementor version of TheGem theme there is no special custom posttype for quickfinders, like in WPBakery theme version, as with Elementor it is no more needed. Now you can manage your quickfinders, its content, style and appearance all in one place, getting immediate visual results.

Check this demo pages showing different quickfinder styles:

https://codex-themes.com/thegem-elementor/pages/services-quickfinders/quickfinders-01/
https://codex-themes.com/thegem-elementor/pages/services-quickfinders/quickfinders-02/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Quickfinder” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Quickfinder Items

This section contains a repeater, where you can add any number of quickfinder items you need. Each quickfinder item contains general and additional content options

Under “General” you can:

  • specify item’s title. For titles you have multiple H-heading presets with two weight variants (bold and thin), as well as an option to disable H-Tag in source code, which can be useful for SEO.
  • use TinyMCE editor to type in item’s description
  • specify item’s link

Under “Additional” you can:

  • select icon or image to use in quickfinder item. You can also disable icon/image in case you don’t need it in your item
  • enable/disable button with corresponding button content settings

Layout

Skin: we have added 12 design presets for quickfinders, divided in “Grid” and “Vertical” groups

Columns: in case you have selected any of grid present, here you can specify number of columns for this grid (including responsive settings for different devices)

No Gaps: this setting allows you to automatically disable any gaps between quickfinder items in grid. It is useful in case you use some boxed style presets and wish to “connect” boxes with each other, avoiding double border

Style Tab

Container Style

In this section you can style the main container of the quickfinder item.
For grid style presets, using “Horizontal Gaps” and “Vertical Gaps” you can control the spacings between quickfinder items in your grid.
For vertical style presets, using “Content Position” you can control the position of title and description relative to icon/image.

Title & Description Style

Specify styles for quickfinder item’s title and description

Icon Style

Here you can specify different style settings for your icon. You can choose between presets for shape, size and color split of the icon. Also you can specify vertical and horizontal position of icon inside quickfinder item. For “left” and “right” horizontal positions, you can additionally choose text wrapping options:

  • No wrapping
  • Inline without wrapping (text will not wrap the icon)
  • Wrap text (text will wrap the icon)

Image Style

In case you have selected to use image instead of icon in “Layout” tab -> Quickfinder Items section, here you can specify styles for image.

Button Style

In case you have enabled a button for your quickfinder item, in this section you can specify style of the button. You can select button position, choose between TheGem button size and style presets and customize with additional styling options.

Connector Style

This section appears in case you have selected any of vertical quickfinder presets. This is a set of settings to control the connector between quickfinder items.

Quoted Text

This element helps you to insert quoted text in different customizable styles to your page.

Check this demo page showing different quoted text style presets available in TheGem:

https://codex-themes.com/thegem/elements/typography/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Quoted Text” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 5 design presets for quoted text you can choose from.

Content

TinyMCE editor to add text content

Style Tab

Container Style

In this section you can style the main container of the quoted text box.

Quoted Text Style

Specify styles for your quoted text content

Quote Style

Customize the look and position of the quote in quoted text box.

Tabs & Tours

Tabs & tours are useful for grouping your content according its topical meaning and displaying it in a compact user-friendly form on the page.

Check this demo page showing different tabs & tours style presets available in TheGem:

https://codex-themes.com/thegem-elementor/elements/tabs-styles/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Tabs & Tours” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 4 design presets for different accordion styles you can choose from

Tabs

Each tab section is an item, which can be edited in “Tabs” section. Here you have a repeater with multiple tab items. Each item’s content contains:

Title, title’s icon (optional) and section id

Description, which can be edited via TinyMCE editor

The cool thing about TheGem’s tabs& tours is that you can use any Elementor template from Template Library as content for your tab item. To do this, just select “Template” in Content Source and choose a template you wish to insert in your tab item.

By clicking on “+ Add Item” you can add additional tab items.

Style Tab

In this tab you can style tab item’s title, title’s container, item’s content and its container.

Team

Team element is a perfect feature to present your team inside your page content. This element adds selected sets of team persons added in “Team” custom posttype of TheGem. Please check this article on how to add teams and team persons in TheGem

Check this demo page showing different team style presets available in TheGem:

https://codex-themes.com/thegem/elements/teams/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Team” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 6 design presets for teams you can choose from.

Columns: specify the number of columns in teams grid

Number of posts: specify the number of team persons to display in grid

Content

In this section you can choose teams to be displayed as well as content elements for each team person

Style Tab

Container Style

In this section you can style the main container of team person. Also you can specify the gap between team persons in the grid.

Image Style

Options to customize the look of team person image.

Name Style

Styling options for team person’s name.

Position Style

Styling options for team person’s position.

Description Style

Styling options for team person’s description.

Phone Style

Styling options for team person’s phone.

Email Style

Styling options for team person’s email.

Social Icon Style

Styling options for team person’s social icons.

Testimonials

Testimonials element is useful to present your customers opinion about you and your work. This element adds selected testimonial sets added in “Testimonial” custom posttype of TheGem. Please check this article on how to add Testimonials

Check this demo page showing different testimonial style presets available in TheGem:

https://codex-themes.com/thegem/elements/testimonials/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Testimonial” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 2 design presets for teams you can choose from.

Stretch to fullwidth: this setting allows you to stretch the added testimonial to the fullwidth of your page

Content

In this section you can choose testimonials to be displayed as well as content elements for testimonials.

Options

Here you can enable/disable arrows as well as autoplay option and select autoplay speed.

Style Tab

Container Style

In this section you can style the main container of testimonial.

Image Style

Options to customize the look of testimonials image.

Name Style

Styling options for testimonial’s name.

Position Style

Styling options for testimonial’s position.

Company Style

Styling options for testimonial’s company.

Description Style

Styling options for testimonials’s description.

Quote Style

Set of options to customize the look of quote in testimonial.

Arrows Style

Set of options to customize the look of arrows in testimonial.

Text Box

TheGem text box is not just a simple text box. It is enriched with additional styles and design options, making it a very creative and useful content element. Text boxes could be used to highlight some content parts, to attract the visitor’s attention to some important facts, to promote something.

Check this demo pages showing different text box style presets available in TheGem:

https://codex-themes.com/thegem-elementor/elements/fancy-textboxes/

https://codex-themes.com/thegem-elementor/elements/styled-textboxes/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Text Box” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: we have added 14 design presets for text boxes you can choose from

Title & Description

As content source you can select between “Editor” for title text input and TinyMCE editor for description or choose template from Template Library . For titles you have multiple H-heading presets with two weight variants (bold and thin), as well as an option to disable H-Tag in source code, which can be useful for SEO.

Icon / Image

Here you can select, whether to use an icon for your text box, or image or disable both icon and image

Button

Here you can enable button for your text box and specify its content.

Textbox Link

Besides defining separate links for your icon/image and button, additionally you can add a link to the whole text box in this section.

Style Tab

Container Style

In this section you can style the main container of the text box. Using “Top Shape” and “Bottom Shape” select boxes you can add some fancy shapes to your text box.
Please note: if you change the background color of the main container, the colors of the shapes should be changed separately using “Top Shape Color” and “Bottom Shape Color”.

Title & Description Style

Specify styles for your text box title and description

Icon/Image Style

Depending on whether you have decided to use icon or image in your text box, here you can specify different style settings for your image or icon. For icons, you can choose between presets for shape, size and color split of the icon. For image, you can select size and padding- Also you can specify vertical and horizontal position of icon/image inside the CTA box. For “left” and “right” horizontal positions, you can additionally choose text wrapping options:

  •  No wrapping
  • Inline without wrapping (text will not wrap the icon)
  • Wrap text (text will wrap the icon)

Button Style

In case you have enabled a button for your text box, in this section you can specify style of the button. You can select button position, choose between TheGem button size and style presets and customize with additional styling options.

TheGem Portfolio Elements

This set of elements is used to add portfolios to your page in different customizable layouts & styles. For detailed information about TheGem Portfolios custom posttype, on how to add portfolio items & pages, about different portfolio item types please read this article

Portfolio Grid

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

Check this demo pages showing different portfolio grid style presets available in TheGem:

https://codex-themes.com/thegem/portfolios/justified-portfolio-demos/
https://codex-themes.com/thegem/portfolios/masonry-grids/
https://codex-themes.com/thegem/portfolios/metro-portfolio-grid-demo/
https://codex-themes.com/thegem/portfolio-packery-higlights/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Portfolio Grid” element in editing panel of Elementor in “TheGem Portfolios” group

Content Tab

Layout

Columns: select number of columns to display in portfolio grid. In case of selecting 100% width your portfolio 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 portfolio grid. You can choose between justified, masonry and metro style layouts

Portfolios

In this section you can choose portfolio categories to be displayed and enable or disable displaying of different content elements in each portfolio item in grid.

Caption

Caption contains title, description, date and categories of portfolio item. In TheGem portfolio grid caption can be shown below image, on image or on image hover. Here you can specify the position of caption by selecting it in Caption Position.

Pagination

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

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

Pagination: enable/disable pagination for portfolio grid

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

Social Sharing

Here you can enable social sharing button to be shown in portfolio item in grid as well as select social networks where the item can be shared.

Animations

Here you can enable lazy loading animation of portfolio items in portfolio grid and select animation effect in “Animation Effect” select box.

Metro Options

This section appears only in case if “Metro Style” has been selected in Layout section. Due to its specificity, metro grid automatically defines the row’s height in a grid. Using “Max. row’s height in metro grid (px)” setting you can specify the maximum allowed height of an item in a grid for best appearance (380px recommended).

Style Tab

Grid Images Style

In this section you can control gaps between portfolio items in grid and customize items images. In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings.

You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear in the Style tab – “Hover Icons (Custom)”

Here you can customize each icon separately by choosing the icon from Icon Library, setting its color and rotation.
In Grid Images Style section you can also enable shadow. 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: title, description, date etc.

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.

Filter Buttons Style

Settings to control the appearance of filter buttons in portfolio grid. This section appears only in case filter buttons have been activated in Content tab – Portfolio section.

To customize the appearance of filter in responsive mode, use settings in “Filter in responsive mode” group

Sorting Style

Settings to customize the appearance of sorting buttons in portfolio grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Likes Style

Section to customize the look of “like” icon in portfolio grid. You can select any icon from Icon Library, specify its colors and typography for likes number. Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section

Portfolio List

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

Check this demo pages showing different portfolio list style presets available in TheGem:

https://codex-themes.com/thegem/portfolios/one-list-portfolio-grid-demo/one-list-portfolio-1/
https://codex-themes.com/thegem/portfolios/one-list-portfolio-grid-demo/one-list-portfolio-2/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Portfolio List” element in editing panel of Elementor in “TheGem Portfolios” group

Content Tab

Layout

Aspect Ratio: with this setting you can select the image aspect ratio to be displayed in portfolio list.

Portfolios

In this section you can choose portfolio categories to be displayed and enable or disable displaying of different content elements in each portfolio item in list.

Caption

Caption contains title, description, date and categories of portfolio item. In TheGem portfolio list caption can be shown to the right and to the left of the image, also you can select “zigzag” style or choose to display caption on image hover. Here you can specify the position of caption by selecting it in Caption Position.

Pagination

This section is for selection of pagination type of portfolio list.

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

Pagination: enable/disable pagination for portfolio list

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.

Social Sharing

Here you can enable social sharing button to be shown in portfolio item in list as well as select social networks where the item can be shared.

Animations

Here you can enable lazy loading animation of portfolio items in portfolio list and select animation effect in “Animation Effect” select box.

Style Tab

Grid Images Style

In this section you can control gaps between portfolio items in list and style items images.
In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings

You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear Style tab – “Hover Icons (Custom)”

In this section you can customize each icon separately by choosing the icon from Icon Library, setting its color and rotation.
In this section you can also enable shadow. 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: title, description, date etc.

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 “right”, “left” or “zigzag” in Content tab – Caption section.

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

Details Button Style

Here you can customize the appearance of “Details” button

Filter Buttons Style

Settings to control the appearance of filter buttons in portfolio list. This section appears only in case filter buttons have been activated in Content tab – Portfolio section.

To customize the appearance of filter in responsive mode, use settings in “Filter in responsive mode” group

Sorting Style

Settings to customize the appearance of sorting buttons in portfolio grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Likes Style

Section to customize the look of “like” icon in portfolio grid. You can select any icon from Icon Library, specify its colors and typography for likes number. Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section.

Portfolio Slider

With this element you can add portfolio slider to your page.

Check this demo page showing different portfolio slider style presets available in TheGem:

https://codex-themes.com/thegem/portfolios/portfolio-sliders-demo/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Portfolio Slider” element in editing panel of Elementor in “TheGem Portfolios” group

Content Tab

Layout

Columns: select number of columns to be displayed in portfolio slider. In case of 100% width selection, portfolio slider will be automatically stretched to the full width of the page. Witn additional option – “100% Width Columns” – you can specify number of columns 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.

Portfolios

In this section you can choose portfolio categories to be displayed and enable or disable displaying of different content elements in each portfolio item in slider.

Caption

Caption contains title, description, date and categories of portfolio item. In TheGem portfolio slider caption can be shown below image, on image or on image hover. Here you can specify the position of caption by selecting it in Caption Position.

Social Sharing

Here you can enable social sharing button to be shown in portfolio item in list as well as select social networks where the item can be shared.

Animations

Here you can specify the sliding animation type and enable lazy loading animation of portfolio items in portfolio slider.

Additional Options

In this section you can enable autoscroll for portfolio slider (and select autoscroll speed). Also you can enable/disable arrows and select icons for left and right arrow from Icon Library.

Style Tab

Images Style

In this section you can control gaps between portfolio items in portfolio slider and style items images.
In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings. You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear Style tab – “Hover Icons (Custom)”

In this section you can customize each icon separately by choosing the icon from Icon Library, setting its color and rotation.
In this section you can also enable shadow. 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: title, description, date etc.

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 3 different color presets for caption container, which can be further customized with additional settings.

Arrows Style

in this section you can style navigation arrows for portfolio slider.

Likes Style

Section to customize the look of “like” icon in portfolio grid. You can select any icon from Icon Library, specify its colors and typography for likes number. Note: this section appears only in case if “Caption Position” is set to “Below Image” in Content tab – Caption section.

Project Info

This element is especially useful for project/product pages, contact pages or any pages, where you wish to emphasize some brief facts using separate fields with nice icons.

Content Tab

Project Items

Repeater control where you can add different project infos. Each repeater’s item consist of two tabs:

  • Content: here you can add title (with different title presets) and description
  • Icon: here you can select an icon from the Icon Library. Also you can customize the colors of the icon individually by activating “Want to customize?” control

Layout

Skin: choose between two predefined customizable styles for appearance of items

Content Tab

Container Style

In this section you can style the main container of each item.

Title & Description Style

Specify styles for title and description of project info items.

Icon Style

Customize the look and position of icons in project info element.

TheGem Blog Elements

This set of elements is used to add blog grids and lists to your page in different customizable layouts & styles. For detailed information about TheGem blog and blog posts please read this article 

Blog Grid

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

Check this demo pages showing different blog grid style presets available in TheGem:

https://codex-themes.com/thegem/blog/masonry-grids/blog-masonry-3-x-list/

https://codex-themes.com/thegem/blog/justified-grids/post-grid-a/

https://codex-themes.com/thegem/blog/masonry-grids/blog-masonry-100/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Blog Grid” element in editing panel of Elementor in “TheGem Blog” group

Content Tab

Layout

Skin: choose between two customizable design presets to display blog grid

Columns: select number of columns to display in blog grid.

Layout: specify grid layout of blog grid. You can choose between justified and masonry style layouts (for more layouts check “Extended Grid” element in TheGem Blog – see details below).

Blog

In this section you can choose blog categories to be displayed and enable or disable displaying of different content elements in each blog post in grid. Also you can enable or disable “Read More” button, specify its text and optionally add icon to this button.

Pagination

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

Items per page: select, how many blog posts should be visible in grid on one page.

Pagination: enable/disable pagination for blog 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.

Social Sharing

Here you can enable social sharing button to be shown in blog post in grid as well as select social networks where the post can be shared.

Animations

Here you can enable lazy loading animation of blog posts in blog grid and select animation effect in “Animation Effect” select box.

Additional Options

Enable or disable highlighted appearance of sticky posts.

Style Tab

Depending on the chosen grid layout, selected in Content tab – Layout section, the sections in Style tab vary.

General

In this section you can control the general settings for the blog grid. For “Masonry” layout you can specify gaps between blog posts and enable/disable common shadow for both image and caption container. For “Justified” layout you can here also customize the common container for caption and image (in “Masonry” layout you have a separate “Caption Container Style” section for customizing caption container).

Image Style

Customization options for image appearance. Here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover, select this icon and customize its appearance

Image Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container.

Caption Style

Here you can customize the style and typography of caption elements: title, description, date etc.

Caption Container Style

Set of settings to customize the appearance of caption container. Note: This section appears only if “Masonry” layout is selected for blog grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

“Read More” Button Style

Here you can customize the appearance of “Read More” button

Sharing Style

This section contains settings to customize the look of sharing button (in case sharing button has been enabled in Content tab – Social sharing section)

Sticky Post Container Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post container, making it look different from other posts.

Sticky Post Caption Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post caption, making it look different from other posts.

Blog List

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

Check this demo pages showing different blog list style presets available in TheGem:

https://codex-themes.com/thegem/blog/classic-list/blog-list-default/
https://codex-themes.com/thegem/blog/styled-lists/blog-list-styled-1/
https://codex-themes.com/thegem/blog/styled-lists/blog-list-styled-2/
https://codex-themes.com/thegem/blog/blog-list/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Blog list” element in editing panel of Elementor in “TheGem Blog” group

Content Tab

Layout

Skin: blog list is available in 5 customizable design presets, which you can select here

Blog

In this section you can choose blog categories to be displayed and enable or disable displaying of different content elements in each blog post in list. Also you can enable or disable “Read More” button, specify its text and optionally add icon to this button.

Pagination

This section is for selection of pagination type of blog list.

Items per page: select, how many blog posts should be visible in list on one page.

Pagination: enable/disable pagination for blog list

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.

Social Sharing

Here you can enable social sharing button to be shown in blog post in list as well as select social networks where the post can be shared.

Animations

Here you can enable lazy loading animation of blog posts in blog list and select animation effect in “Animation Effect” select box.

Additional Options

Enable or disable highlighted appearance of sticky posts.

Style Tab

Depending on the chosen skin, selected in Content tab – Layout section, the sections in Style tab vary.

General

In this section you can control the general settings for the blog list. You can specify bottom gap and enable common shadow for image container and caption container.

Image Style

Customization options for image appearance. Here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover and customize its appearance

Image Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container.

Caption Style

Here you can customize the style and typography of caption elements: title, description, date etc.

Caption Container Style

Set of settings to customize the appearance of caption container. Note: This section appears only if “Masonry” layout is selected for blog grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

“Read More” Button Style

Here you can customize the appearance of “Read More” button

Sharing Style

This section contains settings to customize the look of sharing button (in case sharing button has been enabled in Content tab – Social sharing section)

Sticky Post Container Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post container, making it look different from other posts.

Sticky Post Caption Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post caption, making it look different from other posts.

Blog Slider

With this element you can add blog slider to your page.

You can find “Blog Slider” element in editing panel of Elementor in “TheGem Blog” group

Content Tab

Blog

In this section you can choose blog categories to be displayed and enable or disable displaying of different content elements in each blog post in blog slider.

Arrows

Here you can enable or disable slider arrows and select icons for arrows.

Options

Enable or disable autoscroll for blog slider and specify autoscroll speed.

Style Tab

Container Style

Customize the appearance of blog slider’s main container. You can control the height of the slider and make additional adjustments.

Image Style

Customization options for image appearance. With “Position” control you can specify background image position inside the blog slider.

Caption Style

Here you can customize the style and typography of caption elements: title, description, date etc.

Caption Container Style

Set of settings to customize the appearance of caption container. You can control width and height of caption container, specify vertical and horizontal spacing and make more style adjustments.

Arrows Style

in this section you can style navigation arrows for blog slider.

Blog Timeline

With this element you can add blog timeline to your page.

Check this demo pages showing different blog timeline style presets available in TheGem:

https://codex-themes.com/thegem/blog/timelines/blog-timeline-style-a/
https://codex-themes.com/thegem/blog/timelines/blog-timeline-dark/
https://codex-themes.com/thegem/blog/timelines/blog-timeline-style-b/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Blog Timeline” element in editing panel of Elementor in “TheGem Blog” group

Content Tab

Layout

Skin: blog timeline is available in 2 customizable design presets, which you can select here

Blog

In this section you can choose blog categories to be displayed and enable or disable displaying of different content elements in each blog post in timeline. Also you can enable or disable “Read More” button, specify its text and optionally add icon to this button.

Pagination

This section is for selection of pagination type of blog timeline.

Items per page: select, how many blog posts should be visible in list on one page.

Pagination: enable/disable pagination for blog timeline

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.

Social Sharing

Here you can enable social sharing button to be shown in blog post in timeline as well as select social networks where the post can be shared.

Animations

Here you can enable lazy loading animation of blog posts in blog timeline and select animation effect in “Animation Effect” select box.

Additional Options

Enable or disable highlighted appearance of sticky posts.

Style Tab

Depending on the chosen skin, selected in Content tab – Layout section, the sections in Style tab vary.

General

In this section you can control spacing between blog posts in blog timeline by adjusting “Bottom Gap” control.

Image Style

Customization options for image appearance. Here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover and customize its appearance

Caption Style

Here you can customize the style and typography of caption elements: title, description, date etc.

Caption Container Style

Set of settings to customize the appearance of caption container.

Timeline Style

Customize the appearance of connector in timeline and make additional adjustments for timeline elements.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

“Read More” Button Style

Here you can customize the appearance of “Read More” button

Sharing Style

This section contains settings to customize the look of sharing button (in case sharing button has been enabled in Content tab – Social sharing section

Sticky Post Container Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post container, making it look different from other posts.

Sticky Post Caption Style

This section appears only if “Ignore sticky posts” setting has been disabled in Content tab – Additional options section. Here you can customize the look of the sticky post caption, making it look different from other posts.

Extended Grid

With this element you can add extended blog grids to your page. 

Check this demo pages showing different extended grid style presets available in TheGem:

https://codex-themes.com/thegem/grid-extended/
https://codex-themes.com/thegem/grid-extended/blog-grid-on-hover/
https://codex-themes.com/thegem/grid-alternative/
https://codex-themes.com/thegem/grid-alternative/on-hover/

 

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Extended Grid” element in editing panel of Elementor in “TheGem Blog” group

Content Tab

Layout

Skin: we have added two skin presets for extended blog grid appearance you can choose from.

Columns: select number of columns to display in extended blog grid. In case of selecting 100% width your extended 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 extended blog grid. You can choose between justified, masonry and metro style layouts

Blog

In this section you can choose blog categories to be displayed and enable or disable displaying of different content elements in each blog post in grid.

Caption

Caption contains title, description, date, categories and author of blog post. In TheGem extended blog grid caption can be shown below image or on image. Here you can specify the position of caption by selecting it in Caption Position.

Pagination

This section is for selection of pagination type of extended blog grid.

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

Pagination: enable/disable pagination for extended grid

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

Social Sharing

Here you can enable social sharing button to be shown in blog post in grid as well as select social networks where the item can be shared. Note: this section appears only for “Alternative” skin.

Animations

Here you can enable lazy loading animation of blog posts in extended blog grid and select animation effect in “Animation Effect” select box.

Additional Options

Enable or disable highlighted appearance of sticky posts.

Metro Options

This section appears only in case if “Metro Style” has been selected in Layout section. Due to its specificity, metro grid automatically defines the row’s height in a grid. Using “Max. row’s height in metro grid (px)” setting you can specify the maximum allowed height of an item in a grid for best appearance (380px recommended).

Style Tab

Grid Images Style

In this section you can control gaps between blog posts in grid and customize posts images. In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings.

In this section you can also enable shadow. 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: title, description, date etc.

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.

Filter Buttons Style

Settings to control the appearance of filter buttons in extended blog grid. This section appears only in case filter buttons have been activated in Content tab – Blog section.

To customize the appearance of filter in responsive mode, use settings in “Filter in responsive mode” group

Sorting Style

Settings to customize the appearance of sorting buttons in extended blog grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Sharing Style

This section contains settings to customize the look of sharing button (in case sharing button has been enabled in Content tab – Social sharing section)

TheGem WooCommerce

This set of elements is used to add products & WooCommerce options to your page in different customizable layouts & styles. For detailed information about WooCommerce, on how to add products, categories, shop settings etc. please read this article.

PRODUCTS GRID

With this element you can add products grids to your page.
You can find “Products Grid” element in editing panel of Elementor in “TheGem WooCommerce” group

Content Tab

Layout

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

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 

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

Pagintaion 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 

Filters

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

Notification

When your website visitor takes some actions in products grid (for example adding product to cart, adding product to wishlist etc.) the notification bar appears notifying this user about taken action. In this section you can specify different notification text fragments.

Social Sharing

Here you can enable social sharing button to be shown in products in grid as well as select social networks where the item can be shared.

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: enable/disable Quick View feature for products in grid. 

Metro Options

This section appears only in case if “Metro Style” has been selected in Layout section. Due to its specificity, metro grid automatically defines the row’s height in a grid. Using “Max. row’s height in metro grid (px)” setting you can specify the maximum allowed height of an item in a grid for best appearance (380px recommended).

Style Tab

Grid Images Style

Gaps: specify gaps between products in products grid

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

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

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.  

Sorting Style 

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

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Labels Style

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

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

CLASSIC GRID

Another element for adding products grids to your page – this is a classic (legacy) implementation of TheGem products grid.

Check this demo pages showing different classic grid style presets available in TheGem:

https://codex-themes.com/thegem/sites/shop-justified/
https://codex-themes.com/thegem/masonry-shop/
https://codex-themes.com/thegem/sites/shop-metro/
https://codex-themes.com/thegem/sites/shop-nature/
https://codex-themes.com/thegem/sites/shop-grid-based/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Classic Grid” element in editing panel of Elementor in “TheGem WooCommerce” group

Content Tab

Layout

Columns: select number of columns to display in classic grid. In case of selecting 100% width your classic 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 portfolio grid. You can choose between justified, masonry and metro style layouts

Products

In this section you can choose products categories to be displayed and enable or disable displaying of different content elements in each product in grid.

Caption

Caption contains product title, product description, product price and product rating. In TheGem classic grid caption can be shown below image, on image or on image hover. Here you can specify the position of caption by selecting it in Caption Position.

Pagination

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

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

Pagination: enable/disable pagination for classic grid

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

Social Sharing

Here you can enable social sharing button to be shown in products in grid as well as select social networks where the item can be shared.

Animations

Here you can enable lazy loading animation of products in product grid and select animation effect in “Animation Effect” select box.

Metro Options

This section appears only in case if “Metro Style” has been selected in Layout section. Due to its specificity, metro grid automatically defines the row’s height in a grid. Using “Max. row’s height in metro grid (px)” setting you can specify the maximum allowed height of an item in a grid for best appearance (380px recommended).

Style Tab

Grid Images Style

In this section you can control gaps between products in grid and customize product images. Also you can enable a separator between products, define its color and width. In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings.

You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear in the Style tab – “Hover Icons (Custom)”

Please note: if some product has a product gallery (more than one product image –

and in case if “Caption Position” is set to “Below Image” in Content tab – Caption section, the hover effect will be automatically set to show the second product image from the product image gallery.

In Grid Images Style section you can also enable shadow. 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: title, description, 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.

Filter Buttons Style

Settings to control the appearance of filter buttons in classic grid. This section appears only in case filter buttons have been activated in Content tab – Products section.

To customize the appearance of filter in responsive mode, use settings in “Filter in responsive mode” group

Sorting Style

Settings to customize the appearance of sorting buttons in classic grid.

Pagination Style

In this section you can customize the look of number pagination. This section appears only in case if “Numbers” pagination type has been selected in Content tab – Pagination section.

“Load More” Button Style

Here you can customize the look of load more button. This section appears only in case if “Load More Button” pagination type has been selected in Content tab – Pagination section. Here you have presets for button style (flat, outline) and button size and many other additional customization settings. In case you have enabled separator in Content tab – Pagination section, here you can also choose between 4 different style presets and further customize its size, weight and color

Labels Style

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

Products Slider

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

Check this demo page showing different portfolio slider style presets available in TheGem:

https://codex-themes.com/thegem/creative-shop/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Products Slider” element in editing panel of Elementor in “TheGem WooCommerce” group

Content Tab

Layout

Columns: select number of columns to be displayed in products slider. In case of 100% width selection, products slider will be automatically stretched to the full width of the page. With additional option – “100% Width Columns” – you can specify number of columns 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 products slider will take the full 100% width.

Products

In this section you can choose products categories to be displayed and enable or disable displaying of different content elements in each product in slider.

Caption

Caption contains product title, product price and product reviews (stars). In TheGem products slider caption can be shown below image, on image or on image hover. Here you can specify the position of caption by selecting it in Caption Position.

Social Sharing

Here you can enable social sharing button to be shown in product in slider as well as select social networks where the item can be shared.

Animations

Here you can specify the sliding animation type and enable lazy loading animation of portfolio items in product slider.

Additional Options

In this section you can enable autoscroll for product slider (and select autoscroll speed). Also you can enable/disable arrows and select icons for left and right arrow from Icon Library.

Style Tab

Images Style

In this section you can control gaps between products in product slider and style items images. Also you can enable a separator between products, define its color and width.

In “Hover” tab you have “Hover Effect” setting with different presets for hover effect, which can be further customized with additional settings. You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear Style tab – “Hover Icons (Custom)”

You can also specify, if you wish to show icons on hover, style its color and size. If you wish to use other icons and style each icon separately, use “Want to customize?” control. Once activated, additional section will appear in the Style tab – “Hover Icons (Custom)”

Please note: if some product has a product gallery (more than one product image –

and in case if “Caption Position” is set to “Below Image” in Content tab – Caption section, the hover effect will be automatically set to show the second product image from the product image gallery.

In Grid Images Style section you can also enable shadow. 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: title, description, date etc.

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 3 different color presets for caption container, which can be further customized with additional settings.

Arrows Style

in this section you can style navigation arrows for products slider.

Labels Style

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

Sorting Style

Settings to customize the appearance of sorting buttons in products grid.

Labels Style

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

Frequently Asked Questions

1. What do you recommend to use? WPBakery or Elementor? And why?

We would recommend to use Elementor:

  • Elementor is one of the fastest frontend page builders with intuitive and easy editing process. It guarantees a pixel perfect design: your page looks exactly the same both in edit mode and live. With Elementor you will build your pages faster, getting instant pixel perfect results.
  • With Elementor and TheGem you have a full control of responsiveness as almost each setting can be easily adjusted for different screen resolutions and devices
  • Elementor offers you plenty of settings and options to take full control over your page layout. Sections, columns, margins, paddings, spacings, positions etc. – every inch of your page is under your control and can be easily adjusted.
  • Elementor includes many handy features like copy/paste, undo/redo, duplicate, hotkeys which will accelerate your work

If you prefer fast working frontend page builder with plenty of cool options, we would go with Elementor.

 

2. Could you compare WPBakery and Elementor? Does Elementor has the same features like WPBakery?

Editors

Elementor has the same features as WPBakery and even more (check here https://codex-themes.com/thegem/documentation/elementor/#useful-features )
Both builders are good, however Elementor is an excellent choice for frontend content editing and WPBakery could be a good choice for those, who prefer backend editing. Though WPBakery comes with frontend editor as well, in performance and responsive aspects Elementor is a definite winner offering faster editing and more customization options.

TheGem Elements

Both Elementor and WPBakery are enriched with the same set of unique TheGem content elements. Visit our demo website codex-themes.com/thegem/ to check the wide selection of elements coming with TheGem theme.
The Elementor’s version of TheGem elements plugin is optimized for Elementor’s approach. It means mix of easiness and flexibility. On one hand you have “skins” – pre-made designs and presets for content elements, which you can insert with one click and that’s it. On the other hand, all elements have been reworked and extended with much more customization options. You can customize any skin & preset in any imaginable way. And you have definitely better control over responsiveness.

 

3. Will there be updates and features for WPBakery in future?

Hi, yes, sure. As TheGem theme evolves, both versions (TheGem for WPBakery and TheGem for Elementor) are being updated consequently with the same features. Both WPBakery team and Elementor team continue to work on their builders. Elementor’s team makes tremendous progress in extending their editor.

 

4. Everything on my page is written with WPBakery so on. Is it possible to switch to Elementor seamlessly?

WPBakery and Elementor are not compatible with each other. WPBakery uses the shortcode principle, Elementor not. So there are no automation tools to migrate. The only way is to make it manually. The question is how much customization did you make? In case you have used our prebuilt demos and only replaced images and text, so you can recreate it in Elementor very fast. If you have made deep design customization, it could take bit more time, but the cool thing in Elementor is its easiness and speed, so it should take less time to migrate your pages in Elementor as you have spent on building it with WPBakery.

 

5. Do I need to buy Elementor Pro?

No, you don’t. TheGem requires only the free version of Elementor. TheGem comes with TheGem Elements plugins, which enriches the free version of Elementor with many cool features and elements. So you don’t really need to purchase a pro version of Elementor. Read more about TheGem Elements plugin here https://codex-themes.com/thegem/documentation/elementor/#thegem-elements-plugin.
If you still want to use Elementor Pro, you can purchase it separately. TheGem theme is 100% compatible with Elementor Pro. TheGem offers some features that do not exist in Elementor Pro and the opposite is also true meaning that Elementor Pro may have some features that are not available in TheGem.