Help Center

Components Overview

This overview is about the components feature available with the JetEngine plugin for WordPress.

The Component feature allows for creating and adjusting a custom widget/block/element, adding and reusing it on any needed page or template later. 

For instance, a developer can build a custom widget and define what controls it will have. Then, this widget can be used by a client in the builder and customized according to their needs.

Things to know

The component itself can be built with the help of the Blocks Editor (Gutenberg), Elementor, Bricks, or Timber/Twig. Once it is ready, the component can be used on the pages/templates built with the Blocks Editor (Gutenberg), Elementor, or Bricks.

Listings/Components Directory

The components directory can be found in WordPress Dashboard > JetEngine > Listings/Components.

Both Listing templates and components are presented in one list.

One can also switch between the “All,” “Listing Items,” and “Components” lists and check the number of items already created (numbers next to the list labels).

To build a new component, one should press the “Add New Component” button.

listing items and components directory

In the opened pop-up, one should complete the following fields:

setup component pop-up
  • Component name  — a field that will be later displayed as the widget/block/element name;
  • Component view — a dropdown menu with options that indicate the builder that will be used to build the component. Among possible options are: “Elementor,” “Bricks,” “Timber/Twig,” and “Blocks (Gutenberg).”
Warning

The mentioned Component view options appear only if the corresponding plugins/theme are installed and activated. Additionally, to have the “Timber/Twig” option in the list, one should activate the Timber/Twig Views toggle in the WordPress Dashboard > JetEngine > JetEngine > Performance tab.

To proceed to the editor, the “Create Component” button should be clicked.

Elementor Builder

At first, one should add the widgets to the page and define them as controls.

The Component Settings can be found by clicking the “gear” icon in the bottom left corner.

widgets added to elementor component

Here, three settings tabs are presented: General Settings, Component Content Settings, and Component Style Settings.

General Settings

In this tab, one can change the following settings:

general settings tab in elementor
  • Title — a title of the component. This title can be changed if needed;
  • Status — status of the current component that can be changed to: “Draft,” “Pending Review,” “Private,” or “Published.”

Component Content Controls

This tab contains the main content settings of the current component. 

Inside the tab, there is one section called Component Controls. By default, it includes one Text Control tab and the “Add Item” button below it.

Next to the item label, one can find the “duplicate” and “delete” icons.

component content controls tab in elementor

When unfolded, the item tab contains the following settings:

component content controls item in elementor
  • Control Label — a label of the control that will be later displayed in this component’s widget/block/element settings;
  • Control Name — a name attached to the control that will be saved to the database. This key should be unique for both styles and controls and include only lowercase Latin letters, numbers, and “_” symbol instead of spaces;
  • Control Type — a type of control. It can be set to “Text,” “Textarea,” “Select,” or “Single Media”. If the “Select” option is picked, the Options field becomes available for customization. There, one can specify the options for the current “Select” control.
Things to know

In the Options field, one option should be put per line. The option should contain a label and value, which should be split by “::” (e.g., “red::Red”).

  • Default Value — a default value set for the current control.

The new item can be added by pushing the “Add Item” button.

Component Style Controls

Warning

For now, only color controls are supported in the component style settings.

In the Component Style Controls settings tab, the Style Controls section is presented. 

To adjust a new style control, one should press the “Add Item” button.

component style controls item in elementor
  • Control Label — a field indicating the label of the control that will be later displayed in this component’s widget/block/element settings;
  • Control Name — a name attached to the control that will be saved to the database. This key should be unique for both styles and controls and include only lowercase Latin letters, numbers, and “_” symbol instead of spaces;
  • Default Value — a default value set for the current control.

Control Names

Every widget that will later be changed by control should have a Control Name attached. 

To do so, the “dynamic tags” icon should be clicked in the corresponding widget’s settings, and the “Component Control Value/Component Control Image/Component Control Color” macro should be selected.

Warning

Another option to attach control is to select the “Component Control Value” Source and add its Control Name right in the proceeding settings field of the needed widget.

Then, the Control Name field should be completed with a value set earlier in the Control Name field of the Component Settings.

component control value macro settings in elementor

Check more information on How to Create a Component in Elementor.

Block Editor (Gutenberg)

The components’ settings can be found in the Component Settings section of the Listing Item/Components tab of the Block Editor.

Component Settings

There, the Component Settings tab is available. If it is opened, the following two buttons are presented:

component settings tab in gutenberg
  • Add/Edit Content Controls — a button that opens the editing pop-up for the content controls;
  • Add/Edit Style Controls — a button that opens the editing pop-up for the style controls.

Once the “Add/Edit Content Controls” button is clicked, the editing pop-up is opened.

At first, only one “Add new item” button is presented. Once it is clicked, the settings for item adjusting are shown. These are identical to the Elementor Component Content Controls settings described in the previous part.

Every new item can be added by pressing the “Add new item” button.

To save the items, one should press the “Save Controls” button.

edit content controls pop-up in gutenberg

If one pushes the “Add/Edit Style Controls” button, another pop-up opens. It is identical to the one for the content controls described above.

To add a new item, one should press the “Add new item” button. 

The style control settings here are the same as in the Component Style Controls tab of Elementor Builder.

Warning

The Default Value should be presented as a hex code (e.g., #0DC167).

The “Add new item” button should be pressed every time a new control should be added.

edit style controls pop-up in gutenberg

Component CSS

In Gutenberg, the corresponding Component CSS tab allows for specifying the CSS classes for a component.

component css tab

The added style components are stored below the Component CSS textarea and can be used in the CSS code.

component css completed

Control Names

Once the controls are set, they should be attached to the corresponding blocks. To do so, in the Block Editor, one should click the “Dynamic Tags” button above the field.

Here, in the Data Source tab, one should pick the “Custom data” SOURCE and find the “Component Control Value” in the SELECT DATA TO SHOW dropdown menu.

Then, the CONTROL NAME should be specified.

Things to know

Also, if the image control is attached, one should activate the Is Image toggle and adjust the following settings to showcase the value correctly.

dynamic tags button in gutenberg

The controls can also be set right in the block settings. For instance, for the Dynamic Image, one should select the “Component Control Value” SOURCE and define the needed control name in the OR SET MANUALLY FIELD.

image settings in gutenberg

Bricks

To edit a component in Bricks, one should first define its controls in the WordPress Dashboard > JetEngine > Listings/Components directory. 

The “Edit component” button should be clicked once hovered over the item, and then the needed controls defined.

The first Content Controls tab in the opened pop-up has the same settings as described earlier in the Component Content Controls part of the overview.

set up content controls for bricks

The Style Controls tab is identical to the one described in the Component Style Controls part of the overview.

Then, the “Save & Go To Editor” button should be clicked.

set up style controls for bricks

In the editor, the needed elements should be added and attached to controls.

To do so, the “Dynamic Data” button should be clicked in the needed element settings, and the set control should be found and selected.

The mentioned steps should be repeated for all the needed elements.

heading content settings in bricks

Also, one can attach the style controls by opening the STYLE tab and finding the “Dynamic Data” button.

For instance, to set the Background color in the BACKGROUND tab, one should click the “drop” icon, select the “RAW” option, and press the “Dynamic Data” button.

raw background color

Once done, one can pick the created style control.

heading style settings in bricks

Timber/Twig

The component controls can also be adjusted in the Timber builder by clicking the “Settings” button.

component editing in timber

Once done, the pop-up is opened. It contains two tabs: Content Controls and Style Controls.

Below the tab title is a “New Control” button, which should be clicked to adjust the control.

The settings here are identical to those presented in the Component Content Controls tab of the Elementor Page Builder.

content controls pop-up in timber

The Style Controls tab also includes the “New Control” button, which, when clicked, activates the style control’s settings.

The setting fields here are the same as in the Component Style Controls tab available in Elementor.

style controls pop-up in timber

In the Default Value field, one can use the custom colors or global Elementor colors.

To use global Elementor colors, one can click the “Use CSS Variable” button below the Default Value field to select the needed value.

use css variable button in the style controls pop-up in timber

To use the added content controls in HTML code, one should press the “Dynamic data” button next to the HTML section.

There, the “Component Control Value” macro should be picked.

component control value macro in timber

Once clicked, the Control Name and Is Image settings become available.

To save the settings and insert the control into the code, the “Insert” button should be clicked.

component control value settings in timber

The previously added style controls can be inserted into the CSS code with the help of the “var()” button.

css variables in timber

Settings in the Dashboard

The control settings can also be adjusted right in the WordPress Dashboard > JetEngine > Listings/Components directory. 

The “Edit Component” button appears when the items are hovered over; it should be clicked to trigger the pop-up with the settings.

edit component settings button

Here, both Content Controls and Style Controls are presented.

The settings in the Content Controls tab are the same as those described earlier in the Component Content Controls part of the article.

content controls tab

The Style Controls settings are identical to those described in the Component Style Controls part of the article.

style controls tab

Component in the Editor

Once the content is adjusted and saved, it can be used in the Elementor, Block Editor, or Bricks editors.

The component can be found by its name in the search bar of the preferred editor.

component widget in elementor

That’s all about the components feature available with the JetEngine plugin for WordPress websites.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.