How to Use Global Sections?
In This Article
In Content
To add the global section template to the content of your page/post please use the “Global Section” content element. Just add this element in any place of your content and select the corresponding global section template – it will be automatically inserted and displayed.
WPBakery
Elementor
In a Sidebar
To add the global section template to a sidebar or in footer widgetised area please use “Global Section” sidebar widget
In WooCommerce Custom Tabs
TheGem includes “Additional Tabs” feature for WooCommerce store. This feature allows you to add any number of additional custom product tabs on product pages. As a content source for such custom tabs you can optionally use global section templates by selecting them in additional tabs settings.
Learn more about “Additional Tabs” feature
For Mobile Navigation
Global section templates are useful for creating custom mobile navigation layouts. By default, TheGem provides four built-in mobile navigation layouts. However, with the Templates Builder and global section templates, you're not limited to these four default layouts—you have complete freedom to design your own custom mobile navigation layouts.
Check out these examples of using a global section template for mobile navigation (please switch to mobile view by visiting the demo links below):
TheGem includes a library of prebuilt mobile navigation templates as well:
You can utilize the global section template for mobile navigation in the following ways:
- In the built-in header (via Theme Options). [Learn more]
- In the header template built with the header builder (via Templates Builder). [Learn more]
Learn more on how to use global section templates to build custom mobile navigation layouts in this documentation article: Mobile Navigation Builder
In Off Canvas Menu
Another cool way of using global section templates is adding them in offcanvas menus in Header Builder.
It is useful in case you wish to add some additional offcanvas content to your header, like “About Us”, “Contact Us”, “FAQs”.
Check this examples of using global section template in offcanvas menus (please click on “hamburger” icon to open the offcanvas area):
While making your website header you can add additional “Menu” element to your header and choose “Hamburger” or “Overlay” as desktop menu layout. After that you can select the content source for the offcanvas content area. By default the selected menu will be used, however you can select “Section Template” to be used instead of menu, adjust paddings and width of the offcanvas area.
In Elementor:
In WPBakery:
For Empty Cart
Global section templates can also be used as a content source for empty cart. You can select to use the global section for the empty cart in Theme Options -> WooCommerce -> Cart & Checkout -> Empty Cart Source
In Accordions, Tabs, Call to Action, Textbox (Elementor)
Additionally, you can use global sections as a content source in following elements:
- Accordions
- Tabs
- Call To Action
- TextBox
In all this elements you can find the “Content Source” option. Here you can select the “Global Section” option and then select the global section template you wish to use as a content of the respective accordion/tab section, textbox or CTA.
Anywhere using Shortcode
Each created global section is assigned its own shortcode, allowing you to use it anywhere on your website. To find the shortcode of a global section, follow these steps:
- Navigate to TheGem > Templates Builder > Global Section.
- In the list of global sections, locate the "Shortcode" column.
- Select the respective shortcode and copy it.
Now you can insert/paste the copied shortcode with the global section:
- In any text editor throughout WordPress and plugins (e.g. in product short description):
- In an HTML element:
(Elementor):
(WPBakery):
- In PHP code via
do_shortcode
function, e.g.:
echo do_shortcode( '[gem_template id="41490"]' );
(Note: The screenshot placeholder [gem_template id="41490"]
is an example. Replace it with your actual shortcode.)