Headless

To create a custom container element, go to T3theme > Elements > Container Elements.

Create Container Element

To Create a container element please follow the below steps:

1. Add Element: Create a container element by clicking on the button “New Container 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, and you can add a new column by clicking on the “+New Column” button.
            
         2. You can add a number of columns as per your requirement by clicking on the “+New Column” button, after adding the columns, add titles for the columns as seen in the screenshot below. You can delete the column from the delete icon placed at the far right.
            
         3. Click on the “Next” button, and you will be redirected to the “Templates” tab.
      3. Templates
         1. You will see a basic template according to your fields/columns as seen in the screenshot below.
            
         2. You can edit this template to add classes or any other attributes as seen in the screenshot below, but you should be careful while editing the template as it is the React/Next Template, not just a simple HTML, for example, we have to use the “className” attribute instead of “class”.
            
         3. Markers
            1. Above the template code, there are some markers from where you can copy the code for the specific field. E.g. If you want to add a completely new custom template, then you can use these markers to copy the code and paste it into your new template. You can try by just click on the marker and you will get the message “Marker Copied! Paste where you want to add”.
               
               
      4. After clicking on the “Save” button the template will be saved and you will see the element in the list of the element.
         

Perform actions on the container Element

You can perform some actions on the custom element. You can edit the element, delete the element, and also you can edit the template file directly.

1. Edit the element:
   1. After creating the element, you can edit the element you have added.
   2. Click on the edit icon to edit the element as seen in the above screenshot.
   3. You can Edit info, fields, and template code by this.
   4. Here one important thing to note is; that if you have done your templating already and now you want to add a new field in your element, then you can add the field easily by edit the element, and it will not affect your template. But after adding a new field when you press on the “Next” button you will see that your template is as it is, but you will get a marker for the new field, you can copy the new field code by clicking on that marker and can paste in your template. Below is an example of template editing:
      1. When you edit any element that is already in use, you will see a dialogue like this:
         
      2. Go ahead by clicking on Yes, and you will see all the 3 tabs you saw at the time of element creation which are info, field, and template.
      3. If you want to edit the title or short title or description, you can edit them and click on the “Next” button.
      4. You will see the fields/columns we added at the time of the element creation.
         
      5. Now let’s add one new column named “Service links” and replace it with the “Contact Details” column and edit the name of the “Contact details” column too.
         
      6. After clicking on the Next button the template below will open, there are no updates in the template file as you can see, but there is one marker on top, let’s copy the code of the new field by clicking on that marker and then set it in that template.
         
      7. Now after copying the code, we can paste the code into the template.
         
      8. You can structure the code well, and then click on the “Save” button to save the template
         
2. Edit the container template
   1. If you want to just edit the template and not add any new field, then you can click on the 3^rd and the last icon and you will be redirected to the template directly. You can edit the template and save it.
   2. After edit the template, make sure to run the below command to synchronize the data with the headless theme.
      Command : node src/themebuilder.js
3. Delete the element
   1. If you want to delete any container element, you can delete it by clicking the 2^nd icon which is a delete icon.
   2. If you are going to delete any element that is already in use then you will get a warning like this.
      
   3. But if you are going to delete any element that is not in use then you will get a dialogue with just a confirmation message.
      
   4. And when you will give confirmation, the element will be deleted and you will see the message on the screen for “Element Deleted!!”
      
      

Custom content element

To create the custom content element, go to T3theme > Elements > Custom Elements

Create content element

To Create a content element please follow the below steps:

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

1. 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
         1. Add “String” or “Text” type for the Title, expand the field by clicking on the arrow on the far right side, and fill up the details of fields.
            
      2. Image
         1. Add “File”, expand the field, and fill up the details.
            
      3. Button
         1. 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.
      
      
      1. When you click on the “Save” button, you will find the element you just created in the element list as you can see in the below screenshot.
         

Perform actions on the custom content element

You can edit or delete the element and you can edit the template file also.

1. Edit the element
   1. You can edit the element by clicking on the edit icon and you will see all the 3 tabs, info, fields, and template.
      1. When you edit the element, if the element is in use then the dialogue will remind you and warn you that “Element is in used, This action can lost data or error can be occurred, Do you want to really edit element?”
   2. If you want to rename the title, short title, or description you can edit them and press “Next”.
   3. Now the important part of element editing is here, suppose you want to add a new field at the time of element editing, then you can add any number of fields. For example, here one element has been added for the main heading of the slider section.
      
   4. Then click on the next button, and you will see your template will not overwrite, so the new field will not be added to the template but you can get the code of the new field from the marker.
      
   5. Then click on the “Save” button and you are done with the element editing.
   6. And if you don’t want that newly added field any more, you can just delete it, and the marker will also be deleted.
      
2. Edit the template
   1. If you just want to edit the template, you can edit it by clicking the 3^rd icon on the element listing.
   2. Before you edit the template. Keep in mind that this is the React/Next template and not just a simple HTML template.
3. Delete the template
   1. You can delete the element if you want. When you delete the element if the element is already in use, the dialogue will open to remind you that the element you are going to delete is already in use.

How to use the custom content element

After creating the element, now it’s the time to use the element. We can place the custom element on any page like other elements.

1. Go to Web > Page from the left sidebar, open any existing page, or create a new page where you want to place the custom element and enable the page.
   
2. Now start to add custom elements by clicking on the +Content button as seen in the above screenshot and the pop-up will open as shown in the below screenshot, and then go to the “Custom Elements” tab from the left side of the pop-up.
   
3. After clicking on the “Slider” element from the popup, the element will be open to let you add the data.
   
4. As it is seen in the above screenshot, the option is showing “Slider Element”, and it will allow you to add slides by clicking on the button “+Add Slide” (as we named the “Create New” button to “Add Slide” at the time of custom element creation.)
5. After the slide is added, you will be able to add the data into the fields.
   
6. Fill up the data and then add more slides as per your requirement.
   
7. Then save the page and check in the front end, and you will see the element is rendering with the design according to the CSS file and template you have added.
   
8. The organized view can be seen only if you have structured the template properly and uploaded CSS and JS files for your slider. If you haven’t updated the template file or CSS/JS, then you can edit the template, CSS, and JS.
   
9. This way you can create your Custom content elements.

Headless Elements Synchronize

After any element operation like creating an element, updating an element, deleting an element, or updating a template of the element, if you don’t get any impact in the headless theme, and if you are getting a message on the screen as seen in the screenshot below;

You will have to run the below command into the root directory of the headless theme Next.js setup.
Command: node src/themebuilder.js

Run setup again in dev mode by Command: yarn dev

OR

Run setup again in production mode by Command: yarn build && yarn start

Now check in frontend and you will see the error has been gone.

React Next Template Notes

Class Attribute

1. In normal HTML we use the “class” attribute, while in the React Next JS template, we must use the “className” attribute.

Link Attribute

1. In normal HTML we use <a> tag to render the link, while in the React Next JS template we should not use <a> tag, instead we can use the Next.JS Link component. You can check this guideline for more details about the Link component.
   
   Note: According to the guideline, before using the Link component, we should import the component, but please note here that in the T3theme template, we don’t need to import the Link component before using it.

Image

1. In normal HTML we use <img> tag, while in React Next JS template, we must use the Image component of the element. You can check this guideline for more details about the Image component.
   
   But here in T3theme, you must use the “Nimage” component which is a custom component and it does override the Image component and will support each property of the Image component. The example is given code below.
   

   {_data?.images?.length > 0 ? _data?.images.map((immg: any, index: any) =>
   <Nimage
   key={_data?.uid + immg?.url + index}
   immg={immg}
   data={data}
   width={500}
   height={500}
   className="w-100 h-auto"
   alt="Image"
   title="Image"
   />
   )) : null}

   Note: According to the guideline, before using the Image component, we should import the component, but please note here that in the T3theme template, we don’t need to import the Image component or Nimage component before using it.

Nimage attribute details

Check the below explanation of the Nimage attributes. The attributes that contain the ‘*’ sign are mandatory.

1. key*: Key attributes are mandatory to avoid the key warnings of Next.JS
2. immg*: to pass the immg object is mandatory, which will be fetched from the loop.
3. data*:  It is the mandatory attribute to render the image.
4. width: It is not a mandatory attribute, but if we add the width, the image will take the given width, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
5. height: It is not a mandatory attribute, but if we add the height, the image will take the given height, otherwise the image will be rendered with the original width which is the width of the image at the time of upload.
6. className: It is not a mandatory attribute; we can use this to add a class to the image.
7. alt: it is the mandatory attribute but suppose if you don’t specify this then it will take the alt text from the file details.
8. title: It is the mandatory attribute, but suppose if you don’t specify this then it will take the alt text from the file details.

Image as background

If you want to use the image as a background image, then you will need the URL of the image. To get the URL of the image, you can use the object immg?.url as seen in the code below.

{_data?.images?.length > 0 ? _data?.images.map((immg: any, index: any) =>
    <div style={{backgroundImage: `url(${immg?.url})`}}></div>
)) : null}

React Bootstrap component

You can use any react-bootstrap component using the prefix “All “.

Accordion

Use All.Accordion as seen in the screenshot below.

<All.Accordion defaultActiveKey="0">
    {_data?.qa1710764520?.map((__rcd: any, _k: any) => (
    <All.AccordionItem eventKey={_k} key={_k + "qa1710764520" }>
        <All.AccordionHeader> {__rcd?.ques1710764541}</All. AccordionHeader>
            <All.AccordionBody>
                <div dangerouslySetInnerHTML={{ __html: __rcd?.answer1710764538 }}></div>
            </All.AccordionBody>
    </All.AccordionItem>
    ))}
</All.Accordion>

Slider

Use All.Slider for the slide’s wrapper and use All. SliderItem for the slides.
               Note: Attributes of the Swiper slider are used in All.Slider & All.SliderItem tag.

<All.Slider
    slidesPerView={1}
    direction="horizontal"
    navigation={true}
>
    {_data?.slider1713012365?.map((__rcd: any, _k: any) => (
        <div key={_k + "slider1713012365"}>
            <All.SliderItem key={_k + "slider1713012365"} >
                <div className="ECom_testimonial ECom_style_1 text-center">
                    <div className="ECom_testimonial_icon">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="icon icon-tabler icon-tabler-blockquote"
                            width="54"
                            height="54"
                            viewBox="0 0 24 24"
                            strokeWidth="2"
                            stroke="currentColor"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <path
                                stroke="none"
                                d="M0 0h24v24H0z"
                                fill="none"
                            />
                            <path d="M6 15h15" />
                            <path d="M21 19h-15" />
                            <path d="M15 11h6" />
                            <path d="M21 7h-6" />
                            <path
                                d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                            <path
                                d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"
                            />
                        </svg>
                    </div>
                    <blockquote
                        className="ECom_testimonial_text ECom_primary_color ECom_fs_29 ECom_medium text_anim"
                    >
                        <div dangerouslySetInnerHTML={{ __html: __rcd?.content1713012414 }}></div>
                    </blockquote>

                    <div className="ECom_testimonial_info">
                        <h3 className="ECom_fs_29 ECom_semibold title-anim">
                            {__rcd?.authorname1713012436}
                        </h3>
                        <p className="title-anim">
                            {__rcd?.authordesignation1713012457}
                        </p>
                    </div>
                </div>
            </All.SliderItem>
        </div>
    ))}
</All.Slider>

Go to top

If you want customization for the structure of the scroll to top button and to make the button work, then you can do that as seen in the screenshot below.
To make the button work you must add the class scroll-to-target. It is an event that will scroll up your page on the click of a button.

<button className="scroll-top scroll-to-target d-inline-block" onClick={All.goToTop} >
    <span className="far fa-angle-double-up"></span>
</button>

Show Go to top

This is an event that will show the “scroll to top” button when the user scrolls down the page and will hide the “scroll to top” button when the user scrolls up the page.

<All.ShowGoToTop></All.ShowGoToTop>
<button className="scroll-top scroll-to-target btn btn-secondary d-none position-fixed" onclick={All.goToTop} >
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-arrow-up"
    viewBox="0 0 16 16">
    <path fillRule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.70713.146 3.147a.5.5 0 0 0 .708-.7081-4-4a.5.5 0 0 e-.
    708 01-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"></path>
    </svg>
</button>

Image Modal

You can use the Image Modal component with “All” prefix if you want to show the image in a full-size popup. You should pass the immg from the loop and also pass the key as the repeater element will require the key.

<div className="single_portfolio_icon">
    {__rcd?.image1712384107?.length > 0 ? __rcd?.image1712384107.map((immg: any, i: any) => (
        <All.ImageModal immg={immg} key={i + "image_modal" }>
            <i className="bi bi-card-image"></i>
        </All.ImageModal>
    )):null}
</div>

Video Modal

You can use the Video Modal component with “All” prefix if you want to show the video in a full-size popup. You should pass the video URL as seen in the screenshot below.

<div className="video-icon style-two">
    <All.VideoModal url={youtubevideolink1712304638}>
        <i className="fa fa-play"></i>
    </All.VideoModal>
</div>

Animation

Use framer motion for animation. Use the motion component with the “All” prefix.

<All.MotionDiv 
    initial={{ opacity: 0.4, x: "100px" }} 
    whileInView={{ opacity: 1, x: "0px" }} 
    transition={{ 
        duration: 0.8,
        ease: "easeOut",
    }}
    viewport={{ once: false }}
    className="about-seven-images rmb-55">
    <Nimage immg={immg} data={data} className="w-100 h-auto object-fit-contain" />
</All.MotionDiv>

Supported motion tags are MotionDiv, MotionSpan, MotionA, MotionH1, MotionH2, MotionH3, MotionH4, MotionH5, MotionH6, MotionP, MotionLink.

CountUp

Use the CountUp component with the prefix “All“,

<All.CountUp className="count-text k-plus" 
             enableScrollSpy
             end={__rcd?.count1710755055 ? __rcd?.count1710755055: 0}
></All.CountUp>

Supported all the attributes from ReactCountUp

CircularProgressBar

Use the CircularProgressBar component with the prefix “All” if you want to use a circular progress bar.

<All.CircularProgressBar
    percentage={__rcd?.percenttext1712558215}
    duration={1000}
    size="0.5rem"
    color="#FF3C00"
/>

Supported all the attributes from the react percentage bar.