At the start of a template file you can add an inline template that can be included like any other template file. This is handy if you have small parts of your template you want to extract, and don't want or need to create separate templates files.

@template("list-item")
    <li>{{item.name}}</li>
@endtemplate

<h1>My List</h1>
<ul>
    @each(item in items)
        @include("list-item")
    @endeach
</ul>

Setting an anchor in a template file will list it and allow it to be linked to from the Link Panel in the Editor.

<div id="@anchor("myAnchor")"></div>

And using a property:

<div id="@anchor(myAnchorProperty)"></div>

Adding the @raw() tag around templte content will stop Element properties from being processed.

@raw()
    ‹div class="text-sm text-black-600">{{message}}</div>
@endraw

Dropzone Naming

A dropzones is an area within a template where child element can be added. Each dropzone requires a name giving you a consistent & reliable way to manage child items.

@dropzone("extraItems")

@dropzone(name: "content")

@dropzone("zone-1", title: "Zone 1")

@if(edit)
   @dropzone("extraItems")
@elseif(preview)
   @dropzone("extraItems")
@endif

Resource Dropzone

Sometimes you want to allow the user to drop the resources directly into the Editor, this can be achieved with the rwResourceDropZone key.

The following example shows how to support dropping a folder of images directly into the Editor. Place the following in the Template HTML:

<div class="grid grid-cols-4 gap-4" rwResourceDropZone="images">
    @if(!images.isFolder)
        <!-- if the `images` resource property is not a folder, display this message -->
        <h3 class="font-bold text-lg uppercase text-brand-500 p-10 col-span-full place-self-center">
            Drop a folder of images here!
        </h3>
    @else
        <!-- Otherwise we have a folder of resources (yay!) -->
        @each(image in images.resources)
            <img src="{{image.image}}" alt="{{image.caption}}" />
        @endeach
    @endif
</div>

You also need a corresponding image control in the Properties file:

{
    "groups": [{
        "title" : "Content",
        "properties" : [{
            "title" : "Images",
            "property": "images",
            "resource": {
                "types": ["image"]
            }
        }]
    }]
}

The following tags should be placed in the html template file. Using any of the following tags enable editable areas with the page. No setup of configuration in the properties file is required.

Editable Text

Add a simple editible text area with optional default text.

@text("heading")

An editable text area with a default value of "Hello World!".

@text("heading", default: "Hello World!")

Editable Typography

Adds a text area that support the Typography feature.

 @richtext("heading", default: "Hello World!")