You don't need to start your video from scratch. Even if you are not a graphical designer, you can use the Template elements to quickly create good-looking videos with no effort.

The template element is a very powerful tool to supercharge your videos with ready to use predefined designs. But these predefined designs are highly customizable using CSS and propietary properties.

Anatomy of a template element

Template elements have this blueprint:

{
    "type": "template",
    "template": "[[template-id]]",
    "settings": {
        "[[item]]": {
            "[[item-property]]": "[[item-value]]"
        }
    }
}

This is a full example of a template element:

{
    "type": "template",
    "template": "basic/001",
    "settings": {
        "card": {
            "background": "white",
            "border-radius": "10px",
            "padding": "1vw"
        },
        "headline": {
            "color": "red",
            "font-size": "5vw",
            "font-family": "Inter"
        }
    }
}

Supported CSS properties in templates

In the contrary of the HTML elements that support any HTML5 tag and any CSS3 declaration, Template elements support a limited sort of CSS3 properties.

The list of supported CSS properties are:

Propietary properties in templates

JSON2Video uses a few propietary properties to simplify the customization of the templates.

This propietary properties are:

Property
Description
easing
Sets the easing function for an animation
horizontal-align
Defines how an item aligns horizontally. Possible values: left | center | right
src
Defines the source URL of an item, usually an image. Example: https://example.com/image.jpg
vertical-align
Defines how an item aligns vertically. Possible values: top | center | bottom

Types of templates

Template elements provide ready-to-use templates in multiple forms:

Technically, all templates work exactly the same - there is no difference.

Template examples

Lower-third example

In the television industry, a lower third is a graphic overlay placed in the lower area of the screen, though not necessarily the entire lower third of it, as the name suggests.

JSON2Video library has a few lower-third templates you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

{
    "resolution": "full-hd",
    "quality": "high",
    "draft": false,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/new-york-01.mp4"
                },
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "card": {
                            "vertical-align": "bottom"
                        },
                        "headline": {
                            "text": "Broadway will allow theatergoers to go mask optional in July",
                            "font-size": "auto"
                        },
                        "lead": {
                            "text": "Proof of vaccination is no longer required for patrons of the city's indoor dining, fitness and entertainment venues.",
                            "font-size": "auto"
                        }
                    },
                    "start": 3
                }
            ]
        }
    ]
}

The basic/050 template is inpired on the lower thirds used by CNN.

You can get all details of basic/050 here.

Button example

This example showcases how to create a visual button you can add to your video as a call-to-action.

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#FAF3DD",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/050",
                    "settings": {
                        "button": {
                            "background": "#E3170A",
                            "border": "0.2vw solid rgba(0,0,0,20%)",
                            "border-radius": "3vw",
                            "padding": "0 15vw",
                            "box-shadow": "inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
                            "text": "Subscribe!",
                            "text-shadow": ".3vw .3vw rgba(0,0,0,0.4)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

Other examples

Check other template examples in the Templates section.