How to customize TheGem Elements (for Elementor)?

TheGem Elements are delivered with many settings and customization options out-of-the-box, so actually there is no need to write any custom code to achieve the desired results - everything can be made via element's settings right away in Elementor editor.
However, in case you have some very special customization requirements not covered via elements settings, you can customize templates with your own code as follows:
  1. Install the TheGem_Elementor_child.zip child theme, which is located in /Child_Theme/For_TheGem_Elementor/ folder of the main zip file, which you have downloaded in your "Downloads" category on themeforest.net. Check this article.
  2. Using FTP, copy the file of the template, which you wish to customize, from the TheGem Elements for Elementor plugin into a child theme. The path should be /wp-content/themes/thegem-elementor-child/templates/element-name/file-name.php

For example you wish to customize the template of blog grid element. Copy the output-blog-grid.php file from wp-content/plugins/thegem-elements-elementor/inc/elementor/widgets/blog-grid/templates/output-blog-grid.php into /wp-content/themes/thegem-elementor-child/templates/blog-grid/output-blog-grid.php Now you can start to customize this template.

Here is the list of TheGem elements, which have template files and the respective path, which should be used in the child theme for customizations:

  • Featured Post Slider: /wp-content/themes/thegem-elementor-child/templates/blog-featured-posts-slider
  • Blog Grid: /wp-content/themes/thegem-elementor-child/templates/blog-grid
  • Blog List: /wp-content/themes/thegem-elementor-child/templates/blog-list
  • Blog Slider: /wp-content/themes/thegem-elementor-child/templates/blog-slider
  • Blog Timeline: /wp-content/themes/thegem-elementor-child/templates/blog-timeline
  • Button: /wp-content/themes/thegem-elementor-child/templates/button
  • Call to Action: /wp-content/themes/thegem-elementor-child/templates/call-to-action
  • Clients: /wp-content/themes/thegem-elementor-child/templates/clients
  • Countdown: /wp-content/themes/thegem-elementor-child/templates/countdown
  • Counter: /wp-content/themes/thegem-elementor-child/templates/counter
  • Gallery Grid: /wp-content/themes/thegem-elementor-child/templates/gallery-grid
  • Gallery Slider: /wp-content/themes/thegem-elementor-child/templates/gallery-slider
  • Image: /wp-content/themes/thegem-elementor-child/templates/image
  • Infobox: /wp-content/themes/thegem-elementor-child/templates/infobox
  • Portfolio List: /wp-content/themes/thegem-elementor-child/templates/portfolio-list
  • Portfolio Slider: /wp-content/themes/thegem-elementor-child/templates/portfolio-slider
  • Pricing Table: /wp-content/themes/thegem-elementor-child/templates/pricing-table
  • Product Categories: /wp-content/themes/thegem-elementor-child/templates/products-categories
  • Products Grid: /wp-content/themes/thegem-elementor-child/templates/products-grid
  • Compact Products Grid: /wp-content/themes/thegem-elementor-child/templates/products-grid-compact
  • Progress Bars: /wp-content/themes/thegem-elementor-child/templates/progress-bars
  • Quickfinders: /wp-content/themes/thegem-elementor-child/templates/quickfinders
  • Quoted Text: /wp-content/themes/thegem-elementor-child/templates/quoted-text
  • Tabs & Tours: /wp-content/themes/thegem-elementor-child/templates/tabs-tours
  • Team: /wp-content/themes/thegem-elementor/templates-child/team
  • Testimonials: /wp-content/themes/thegem-elementor-child/templates/testimonials
  • TextBox: /wp-content/themes/thegem-elementor-child/templates/textbox

Elements located in the themes folder:

  • Posts Extended Grid: /thegem-elementor/gem-templates/blog/content-blog-extended-item.php
  • Portfolio Grid: /thegem-elementor/gem-templates/portfolio/content-portfolio-item.php
  • Products Grid: /thegem-elementor/gem-templates/products-extended/content-product-grid-item.php