T3element Builder

Estimated reading: 9 minutes 76 views

How to use T3Element builder:

Login/Registration:

Open the URL https://ce.t3element.com/auth/login
Log in with your credentials if you are already a user.
Or create an account by registration.
Fill up the details to complete your registration.
1. Add Name and Company Name and press OK.
  
  Fill up the below details like this to complete your registration.
2. Add Email and Phone.
3. Add Country and City Name.
4. Add Password and Confirm Password.
5. After Password and Confirm Password press OK and you will see the below screen:
6. Then open your mail and find mail from T3element, open it, and press on “Activate” to activate your custom element builder.
7. After pressing “Activate“, you will be redirected to this screen.
8. Press “Click to Verify“.
9. Hurray!! You are a Registered User now.

How to create a package:

After registration, you can create your package, and in that package, you can create your custom elements. You can add multiple custom elements in one package and you can add multiple packages too. Create your package by following below steps:
1. Enter your package name. The package name will be converted to lowercase and will remove the space automatically if you have entered the package name in any other case except lowercase or have added any space.
2. Enter your Vendor and click OK.
3. Enter the Description of your package and click OK.
4. Select the TYPO3 version and press the button “Create Package”.
After creating the package, you will be redirected to this screen.
In the Elements tab, press the button “New Element” to create a new element.
There are 2 tabs – “Elements” and “Assets”.
1. Elements
  1. You will be able to create custom elements from here.
2. Assets
  1. You will be able to create a Header and footer and upload CSS and JS files from here. And also you can write custom CSS and JS.

Create your custom elements:

Fill up the Info like Title, Short Title, Description, and Icon.

Description and Icon are not mandatory fields, so if you do not add the icon, it will take the default icon which is displayed on the right of the field.
After pressing “Next”, you will be redirected to this screen.

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.

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.
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.
Add repeating element.
Now you will see 2 tabs “General” and “Fields”.
In the General Tab, you can fill up details of the “Repeating” field as you can see in below screenshot.
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.

Now all the required fields are added, press on the “Next” button and you will see the template which has been generated according to the fields you chose to create the Slider element.

Use the template to structure your element as you can see in the below screenshot. Save the template.

The template code is:

<div class="slider-section my-4">
    <div class="container container-xxl">
        <div class="row">
            <div class="col-md-12">
                <div class="column-inner">
                    <f:if condition="{sliderelement1716975317175}">
                        <f:for each="{sliderelement1716975317175}" as="record" iteration="iteration">                            
                                <div class="slide">
                                    <h2 class="title">{record.data.title1718631893965}</h2>
                                    <div class="slider-img">
                                        <f:if condition='{record.slideimage1718632444436}'>
                                            <f:for each="{record.slideimage1718632444436}" as="image">
                                                <div class="slide-img">
                                                    <f:media file="{image}" width="400" height="375" />
                                                </div>
                                            </f:for>
                                        </f:if>
                                    </div>
                                    <div class="btn-linkk btn btn-primary my-4">
                                        <f:link.typolink parameter='{record.data.buttonlink1718632898015}'>
                                            {record.data.buttontext1718632882162}</f:link.typolink>
                                    </div>
                                </div>                            
                        </f:for>
                    </f:if>
                </div>
            </div>
        </div>
    </div>
</div>

You can use the above template if you want the same structure, but make sure that you are using your markers, instead of in above template code.

When you click on the “Save Template” button, you will find the element you just created in the element list as you can see in the below screenshot and you can edit or delete the element and you can edit the template file also.

As mentioned before, you can add multiple Elements in one package. Here 2 more elements are added for “Teaser box” and “CTA (call to action)” as you can see in the below screenshot of the custom element’s list.

Add assets to your package:

After creating custom elements, now add assets to the package. Here you can upload some basic assets like logo, favicon, CSS/JS files, fonts, etc.

Go to the Assets tab.
You can create a header and footer, upload CSS and JS files, and also can write custom CSS and JS.
Let’s understand by adding assets.

Add Header

Upload logo, favicon, CSS file, JS file, and fonts.

Add Footer

Add copyright text and upload a JS file for the footer.

Add Custom CSS and JS Code

Write custom CSS and JS.

All assets will be saved automatically once the package has been built.

Download the package:

After creating all the elements, and added assets now we will build the package. Click on the bottom right button to build the package.
After that, you will be redirected to the package list.
Then download the package in your system.
Now the package can be installed in your TYPO3 setup.

Package Installation:

Configurations

Open your TYPO3 setup.
1. Follow the steps below, before the extension upload to prevent any error in extension installation in the latest versions of TYPO3 (specifically 12.x.x & 13.x.x here).
  Ref.: https://forge.typo3.org/issues/100730
  
  Go to Admin Tools > Settings > Extension Configuration and click on Configure extensions
  
  Then the popup will open as seen below screenshot, in that popup go to the extensionmanager > Install extensions automatically after download from TER or file upload (basic.automatic Installation [boolean])) and uncheck the checkbox & click on the Save “extensionmanager” configuration button.

Upload extension/package and include Typoscript

Go to the Admin Tools > Extensions tab from the left sidebar. Upload the extension/package you have created with T3element Builder by following the above process.
After uploading, you will find your extension in the list of installed extensions.
Include the TypoScript for your extension.

Use the extension/package

Go to Web > Page from the left sidebar, add a new page where you want to add your custom elements and enable the page.
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.

There are already 17 custom elements created in another package so the total count is 20, but you can see the 3 highlighted elements created with mypackageone are also listed.
Let’s use the Slider element.
1. After clicking on the “Slider” element from the popup, the element will be open to let you add the data.
2. 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.)
3. After the slide is added, you will be able to add the data into the fields.
4. Fill up the data and then add more slides as per your requirement.
5. 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 at the time of package building.
6. 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 directly from the file.
  In this example, we set the maximum item limit of slides to 4 in the Slider Element (1.5), so after the 4^th slide has been added, the “+Add Slide” button will disappear.
7. This way you can create your custom elements by using T3Element Builder.