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