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]]"
}
}
}
-
template-id:
The template property of the element defines what template to use in the format of library/number.
Example
basic/001
. - settings: The settings object of the element defines your customizations to the template, and can have multiple item objects as properties. Each item represents a visual element in the template, like the headline, an image or a card.
- item properties: With the item properties you can change the look and behaviour of the item and they are basically CSS properties plus a few propietary properties.
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:
Types of templates
Template elements provide ready-to-use templates in multiple forms:
- Text animations: elements that create text animations
- Cards: elements that can show text and images with a pre-defined layout
- Components: elements that provide a feature in the scene, like a lower-third, a watermark animation, an animated button, etc.
- Scene templates: elements that cover the whole scene, like a slide or screen in a presentation deck
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",
"scenes": [
{
"duration": 5,
"elements": [
{
"type": "component",
"component": "basic/050",
"settings": {
"headline": {
"text": "Lorem ipsum dolor sit amet"
}
}
}
],
"background-color": "#4392F1",
"cache": true
}
]
}
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": 1920,
"height": 1080,
"quality": "high",
"draft": true,
"scenes": [
{
"background-color": "#4392F1",
"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,
"width": -1,
"height": -1,
"start": 0,
"extra-time": 0,
"z-index": 0,
"cache": true,
"position": "custom",
"x": 0,
"y": 0
}
],
"duration": -1
}
],
"resolution": "full-hd"
}
Other examples
Check other template examples in the Templates section.