URL copied to clipboard
Create Custom element
18 views
__readtime__ Min
read
To create the custom element, go to t3headless > Elements > Custom Elements
To Create a Custom element please follow the below steps:
Add Element: Create a content element by clicking on the button “+ Create New Element”.
By clicking on the button, you will see 3 tabs there i) Info, ii) Fields, and iii) Template.
1. Info
1. The first tab that will open is “Info”, and you will have to add information like Title, Short Title, Description, etc., and click on the Next button.
2. Fields
1. You will be redirected to the “Fields” tab.
2. You can add elements from the available list of elements on the left side. Add an element or field by clicking on the “+” icon or drag the element and drop it into the box, that way you will add the desired fields and will create the elements, e.g. Slider, Teaser Box, CTA, etc
Here is an example. Let’s create an element to be more clear about how to create custom elements by using T3Element Builder. Let’s create a Slider element.
Slider Element
To Create a Slider Element, we have to use the “Repeating” element.
1. This “Repeating” element is specially built for elements like sliders that have the same field or group of fields in a loop, like an image slider; which has an image in a loop or a slider with a group of fields that have a Title, Image and Button.
2. Let’s go with an example of a group of fields to create a Slider.
Each slide will contain a Title, an Image, and a Button.
3. Add repeating element.
4. Now you will see 2 tabs “General” and “Fields”.
5. In the General Tab, you can fill up details of the “Repeating” field as you can see in below screenshot.
6. In the Fields Tab, you can add fields for the slider like Title, Image, and Button. Hover over the icons and you will see the type of field.
1. Title
Add “String” or “Text” type for the Title, expand the field by clicking on the arrow on the far left side, and fill up the details of fields.
2. Image
Add “File”, expand the field, and fill up the details.
3. Button
To add the button, you will need to add a String for the button text and a Link to link the button as you can see in the below screenshot.
7. Now all the required fields are added, press on the “Next” button and you will see the React/Next template that has been generated according to the fields you chose to create the Slider element.
Here you can customize this template, and write the template according to your requirements, but you should keep in mind that this template is not a simple HTML template, it is the React/Next template you so must use attributes according to the React/Next template, like using “className” instead of “class”. For more details, you can check here.
Also, we are providing markers as you can see in the above screenshot, you can copy the code by clicking on the marker for the field you have added and paste it into your customized template.
Below is the example of the customized template, you can see the new structure of the same element “Slider element” with an added custom className.
8. When you click on the “Save Changes” button, you will find the element you just created in the element list as you can see in the below screenshot.
Share
