{"id":44766,"date":"2024-06-21T09:10:52","date_gmt":"2024-06-21T09:10:52","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=44766"},"modified":"2025-09-25T12:33:10","modified_gmt":"2025-09-25T12:33:10","slug":"how-to-reuse-the-created-component","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-reuse-the-created-component\/","title":{"rendered":"How to Reuse the Created Component"},"content":{"rendered":"\n

Create a Component<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> tab. Press the “Add New Component<\/strong>” button to create a new component.<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n

Fill in the Setup Component<\/strong> pop-up fields: type the Component name<\/strong> in the appropriate field and select the editor in the Component view<\/strong> drop-down list.<\/p>\n\n\n\n

Here, we set the “Component for Books” Component name<\/strong> and chose \u201cElementor\u201d as the Component view<\/strong>.<\/p>\n\n\n\n

\"setup<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Adjust the Settings of the Component<\/strong><\/h2>\n\n\n\n
\n

In the given case, we created the component that displays the post title and the “Author,” “Cover,” and “Description” meta fields of the pre-created “Books” Custom Post Type<\/strong>. Therefore, we set three controls, each for the appropriate widget.<\/p>\n\n\n\n

The Custom Meta Fields O<\/a>v<\/a>erview<\/a> tutorial details how to create the meta fields.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

Components can include both static and dynamic widgets you need.<\/p><\/div><\/div>\n\n\n\n

The How to Create Custom Post Types in WordPress<\/a> tutorial details all features of CPT <\/strong>creation.<\/p>\n\n\n\n

We navigated to the bottom left corner of the opened component page, pressed the “gear<\/strong>” icon to unroll the Component Settings<\/strong> tab, and moved to the Component Content Controls<\/strong> block.<\/p>\n\n\n\n

\"component<\/a><\/div>\n\n\n\n

Press the “Text Control<\/strong>” tab to unroll its settings. Then, complete the Control Label<\/strong> and Control Name<\/strong> text fields, select its type in the Control Type<\/strong> drop-down list, and set the Default Value<\/strong>. To add another control, press the “Add Item<\/strong>” button.<\/p>\n\n\n\n

Here, we set the following settings for a widget that will be added to display the post title: typed the “Title” text in the Control Label,<\/strong> the <\/strong>“title” in the Control Name<\/strong> text fields; selected the “Text” option in the Control Type<\/strong> drop-down list, and then typed the “Title” text in the Default Value<\/strong> text field.<\/p>\n\n\n\n

\"component<\/a><\/div>\n\n\n\n

To add controls for other widgets, press the “Add Item<\/strong>” button.<\/p>\n\n\n\n

For instance, we set the following controls: <\/p>\n\n\n\n