Extensions

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

In this Article

Custom Breakpoints

Sticky Column

Section Parallax

Custom CSS

Elementor Template Sidebar Widget

Heading Widget

TinyMCE, Drop Caps and Mixed Heading Styles

Drop Caps

Divider Widget

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

Sticky Column

This feature makes any column sticky once activated. To enable sticky column, go to Advanced tab of column and open “TheGem Options” section. Enable “Sticky Column” setting and you will get additional set of settings

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

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

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.

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