{"id":44722,"date":"2024-06-21T09:25:27","date_gmt":"2024-06-21T09:25:27","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=44722"},"modified":"2024-08-13T08:56:37","modified_gmt":"2024-08-13T08:56:37","slug":"how-to-create-components-in-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/","title":{"rendered":"How to Create Components in Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"build-a-component\">Build a Component<\/h2>\n\n\n\n<p>Initially, go to <strong><em>WordPress Dashboard &gt;<\/em><\/strong> <strong><em>JetEngine &gt; Listings\/Components<\/em><\/strong> to start <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/components-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">building a component.<\/a><\/p>\n\n\n\n<p>Click the \u201c<strong>Add New Component<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-1024x618.webp\" alt=\"listing items and components directory\" class=\"wp-image-44723\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Setup Component <\/strong>pop-up, complete the <strong>Component name <\/strong>and select the \u201cElementor\u201d option in the <strong>Component view <\/strong>dropdown.&nbsp;<\/p>\n\n\n\n<p>Press the \u201c<strong>Create Component<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-1024x618.webp\" alt=\"setup component pop-up\" class=\"wp-image-44785\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/setup-component-pop-up-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Add the needed widgets that will later become dynamic. For instance, we add the following widgets:&nbsp;<\/p>\n\n\n\n<ul>\n<li><strong>Image <\/strong>\u2014 the image of the service;&nbsp;<\/li>\n\n\n\n<li><strong>Heading<\/strong> \u2014 the title of the service;<\/li>\n\n\n\n<li><strong>Text Editor <\/strong>\u2014 a description of the service;<\/li>\n\n\n\n<li><strong>Button <\/strong>\u2014 a button with the link that leads to the page with additional information about the service.<\/li>\n<\/ul>\n\n\n\n<p>To adjust controls, click the \u201c<strong>gear<\/strong>\u201d icon in the panel at the bottom of the page.<\/p>\n\n\n\n<p>Open the <strong>Component Content Controls <\/strong>tab.&nbsp;<\/p>\n\n\n\n<p>The <strong>Text Control<\/strong> tab is presented here by default. For now, we delete it by pressing the \u201c<strong>cross<\/strong>\u201d icon.<\/p>\n\n\n\n<p>Then, we push the \u201c<strong>Add Item<\/strong>\u201d button to create our custom controls.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-1024x618.webp\" alt=\"component control settings tab\" class=\"wp-image-44725\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-control-settings-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In our case, the first <strong>Control Label <\/strong>will be set to \u201cService Image,\u201d its <strong>Control Name<\/strong> to \u201cservice_image,\u201d the <strong>Control Type<\/strong> to \u201cSingle Media,\u201d and the <strong>Default Value <\/strong>to the custom image selected in the <strong>Media Library<\/strong>.<\/p>\n\n\n\n<p>Then, we press the \u201c<strong>Add Item<\/strong>\u201d button to add the next control.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-1024x618.webp\" alt=\"service image control\" class=\"wp-image-44726\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The following control represents the service title, so its <strong>Control Label<\/strong> is set to \u201cService Title,\u201d its <strong>Control Name<\/strong> to \u201cservice_title,\u201d its <strong>Control Type<\/strong> to \u201cText,\u201d and its <strong>Default Value <\/strong>to \u201cService Title.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-1024x618.webp\" alt=\"service title control\" class=\"wp-image-44727\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>We also add the third \u201cService Description\u201d control with the \u201cTextarea\u201d <strong>Control Type<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-1024x618.webp\" alt=\"service description control\" class=\"wp-image-44728\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The next \u201cService Link\u201d control is also set to \u201cText\u201d <strong>Control Type<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-1024x618.webp\" alt=\"service link control\" class=\"wp-image-44729\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The last control is called the \u201cService Button\u201d and has the \u201cLearn More\u201d <strong>Default Value<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-1024x618.webp\" alt=\"service button settings\" class=\"wp-image-44730\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once all the content controls are added, open the <strong>Component Style Controls <\/strong>tab.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">For now, only color control adjustments are supported for components.<\/p><\/div><\/div>\n\n\n\n<p>Click the \u201c<strong>Add Item<\/strong>\u201d button to customize the control.<\/p>\n\n\n\n<p>The settings here are the same as in the <strong>Component Content Controls <\/strong>tab.<\/p>\n\n\n\n<p>We set the <strong>Control Label <\/strong>to \u201cBackground Color\u201d and the <strong>Control Name <\/strong>to \u201cbackground_color\u201d and pick the desired color as the <strong>Default Value<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-1024x618.webp\" alt=\"component style controls tab\" class=\"wp-image-44731\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-style-controls-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Now, the created controls should be attached to the added widgets.<\/p>\n\n\n\n<p>First, we want to attach the color control to the container. To do so, we proceed to the container editing.<\/p>\n\n\n\n<p>We open the <strong>Style <\/strong>settings tab and click the color selector next to the <strong>Color <\/strong>field in the <strong>Background <\/strong>tab.<\/p>\n\n\n\n<p>There, we press the \u201c<strong>Dynamic Tags<\/strong>\u201d button and select the \u201cComponent Control Color\u201d macro.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-1024x618.webp\" alt=\"dynamic tags button in the color settings\" class=\"wp-image-44732\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/dynamic-tags-button-in-the-colorpicker-settings.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>We put the \u201cbackground_color\u201d value as the <strong>Control Name<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-1024x618.webp\" alt=\"background color control attached\" class=\"wp-image-44733\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/background-color-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Then, we click on the <strong>Image <\/strong>widget to open its settings. Then, press the \u201c<strong>Dynamic Tags<\/strong>\u201d button and find the \u201cComponent Control Image\u201d macro.<\/p>\n\n\n\n<p>Specify the <strong>Control Name <\/strong>you have previously added, which has the \u201cSingle Media\u201d <strong>Control Type<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-1024x618.webp\" alt=\"service image control attached\" class=\"wp-image-44734\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-image-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The following widget we attach the control to is <strong>Heading<\/strong>.&nbsp;<\/p>\n\n\n\n<p>The control is attached to it similarly to the <strong>Image <\/strong>widget. Click the \u201c<strong>Dynamic Tags<\/strong>\u201d button next to the <strong>Title <\/strong>field and select the \u201cComponent Control Value\u201d macro.<\/p>\n\n\n\n<p>Then, specify the needed <strong>Control Name<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-1024x618.webp\" alt=\"service title control attached\" class=\"wp-image-44735\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-title-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The following widget is a <strong>Text Editor<\/strong>. For this widget, the \u201cComponent Control Value\u201d macro should be selected, and the needed <strong>Control Name <\/strong>specified.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-1024x618.webp\" alt=\"service description control attached\" class=\"wp-image-44736\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-description-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The last widget of the component is the <strong>Button<\/strong>.&nbsp;<\/p>\n\n\n\n<p>First, we push the \u201c<strong>Dynamic Tags<\/strong>\u201d button next to the <strong>Text <\/strong>field. There, we select the \u201cComponent Control Value\u201d macro and set the <strong>Control Name <\/strong>to \u201cservice_button.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-1024x618.webp\" alt=\"service button control attached\" class=\"wp-image-44737\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-button-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Also, we repeat the same step with the <strong>Link <\/strong>field, but this time the <strong>Control Name <\/strong>is set to \u201cservice_link.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-1024x618.webp\" alt=\"service link control attached\" class=\"wp-image-44738\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/service-link-control-attached.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>You can also style the appearance of the component, and once it\u2019s ready, press the \u201c<strong>Update<\/strong>\u201d button.<\/p>\n\n\n\n<p>For more visual cues, proceed to our <a href=\"https:\/\/youtu.be\/hDDaOzEOCL8?si=HNLmvUksi9U_bYlz&amp;t=234\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Components<\/strong> creation video<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-component-to-page\">Add Component to Page<\/h2>\n\n\n\n<p>Go to the page where you want to place the component. We proceed to <strong><em>WordPress Dashboard &gt; Pages <\/em><\/strong>and open the already-built page in the Elementor Page Builder.<\/p>\n\n\n\n<p>We search for the new component by typing its name into the search bar. Then, we place the component on the page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-1024x618.webp\" alt=\"services component widget\" class=\"wp-image-44739\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/services-component-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Now, you can observe the <strong>Content <\/strong>and <strong>Styles <\/strong>settings tabs. Let\u2019s adjust the <strong>Content <\/strong>settings first.<\/p>\n\n\n\n<p>You can initially change the <strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/making-your-component-dynamic\/\" target=\"_blank\" rel=\"noreferrer noopener\">Component Context<\/a><\/strong> if needed; now, we leave it as \u201cDefault Object.\u201d<\/p>\n\n\n\n<p>Then, the controls you created earlier are presented. Ours are <strong>Service Image<\/strong>, <strong>Service Title<\/strong>, <strong>Service Description<\/strong>, <strong>Service Link<\/strong>, and <strong>Service Button<\/strong>, respectively.<\/p>\n\n\n\n<p>So, we complete these fields with the needed values.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-1024x618.webp\" alt=\"component content settings in elementor\" class=\"wp-image-44740\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-content-settings-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Styles <\/strong>tab, the <strong>Background Color <\/strong>for the container<strong> <\/strong>can be changed if desired.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-1024x618.webp\" alt=\"component styles settings in elementor\" class=\"wp-image-44741\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/component-styles-settings-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Then, we add and customize two more components.<\/p>\n\n\n\n<p>Once done, press the \u201c<strong>Publish\/Update<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-1024x618.webp\" alt=\"several components added in elementor\" class=\"wp-image-44742\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/several-components-added-in-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-result\">Check the Result<\/h2>\n\n\n\n<p>Open the page you created on the front end. The built components are now displayed on the page.<\/p>\n\n\n\n<p>We can also click the \u201c<strong>Learn More<\/strong>\u201d button to open the additional landing pages.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-1024x618.webp\" alt=\"result on the front end\" class=\"wp-image-44743\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/result-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>That\u2019s all; now you know how to create a component in Elementor with the help of the <em>JetEngine <\/em>plugin for WordPress websites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, you will learn how to build a JetEngine component in the Elementor Page Builder to reuse it later on different pages of your WordPress website.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[568],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-13T08:56:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-1024x618.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/\",\"name\":\"How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-06-21T09:25:27+00:00\",\"dateModified\":\"2024-08-13T08:56:37+00:00\",\"description\":\"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Components in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock","description":"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock","og_description":"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/","og_site_name":"Help Center","article_modified_time":"2024-08-13T08:56:37+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/06\/listing-items-and-components-directory-1-1024x618.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/","name":"How to Create Components in Elementor Page Builder \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-06-21T09:25:27+00:00","dateModified":"2024-08-13T08:56:37+00:00","description":"Discover how to build components in the Elementor Page Builder with the JetEngine plugin for WordPress. Create components to reuse them later on different WordPress pages.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-components-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create Components in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/44722"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=44722"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=44722"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=44722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}