# Base

{% hint style="info" %}
Only users with role **Designer** or **Admin** can access and edit Base
{% endhint %}

A template consist of the following elements:

* A Template [Base](#base)
* A series of [Blocks](#blocks)
* A series of [Inputs](https://documentation.alpaco.email/template/input-groups)

When [creating an email](https://documentation.alpaco.email/fundamentals/creating-an-email), the user first selects the name and which **Template** to use for that particular email. All the options, settings, design and [Blocks](#blocks) are all contained and confined within that template. The design rules are based on the universal language [Liquid](https://liquidjs.com/tutorials/intro-to-liquid.html) and opens up for immense possibilities.&#x20;

\
It's within and between the [Base](#base) and these [Blocks](#blocks), design-rules, data-rules and others are defined.

### Template Editor

<figure><img src="https://4158541773-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUZwvCYi7VuSyayWGoc6M%2Fuploads%2FiuTiuGdNDTfxLUJx6X8M%2FSk%C3%A6rmbillede%202023-09-26%20142835.png?alt=media&#x26;token=7ca46d1a-2ce3-41e7-adad-62bd89218faf" alt=""><figcaption><p>The Template Editor wtih Left,- Center,- and Right panel</p></figcaption></figure>

The **Template Editor** is divided into 3 panels:&#x20;

* **Left panel** - is a menu where you can navigate between the [Base](#base) and [Blocks](https://documentation.alpaco.email/template/blocks). By Clicking the + button here you create a new [Block](https://documentation.alpaco.email/template/blocks).&#x20;
* **Center panel -** this is where HTML, CSS and Liquid rules are inserted and highlighted.
* **Right panel -** this is where all [input types](https://documentation.alpaco.email/template/input-groups/input-types) are chosen, named, grouped and configured. From here you can insert different inputs like images, text, links and similar values.&#x20;

### Base

The Base is the foundation of the Template. Think of it as the foundation or the wrapper, from which users can insert[ Blocks](https://documentation.alpaco.email/template/blocks) into. The Base consist of **HTML/CSS** and usually contains tags like `<html>`  and `<head>` but also usually things shared across emails (such as a header with logo or a footer with social links).

The Base will always be found in the **Left panel** at the top.

#### Content Placement

<figure><img src="https://4158541773-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUZwvCYi7VuSyayWGoc6M%2Fuploads%2FFXD1EP8G815lVAqiZk4S%2FSk%C3%A6rmbillede%202023-09-26%20154220.png?alt=media&#x26;token=158f5f98-4134-4660-ad89-6e4f45886fea" alt=""><figcaption><p>Insert {{ blocks }} and give the Base a name and a key</p></figcaption></figure>

1. Click the **Base** in the Left panel.
2. Insert your entire template code into the Center panel.
3. Scroll down into the template code in the Center panel and locate where, you in a moment, want to insert [Blocks](https://documentation.alpaco.email/template/blocks). There you **must** insert the following Liquid tag `{{ blocks }}`.
4. In the Right panel, Give the **Base** a compelling name, and a key, like "template", "foundation" or simply "base".

### Global variables

The global tab, found under the Base, is a tab created solely for global rules and styles to be used across **Base** and [Blocks](https://documentation.alpaco.email/template/blocks) governed from a centralized place.

&#x20;\
The tab allows for [JSON](https://www.json.org/json-en.html) formatted objects and does not come with any options for inputs. It's a developer-only list of objects to quickly control multiple values across the template.

Referencing your variables any places is done by the following prefix:

```liquid
{{global.variable-name}}
```

\
The Global tab is excellent at managing any sort of brand defining settings like fonts, font-size, colors, margins, paddings and others that are repeated throughout your template.

<figure><img src="https://4158541773-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUZwvCYi7VuSyayWGoc6M%2Fuploads%2FU2JfO7Ck5lDyO09jspEM%2FSk%C3%A6rmbillede%202025-05-13%20172404.png?alt=media&#x26;token=2b9677f9-d10c-49aa-9756-ac2146f7d8af" alt=""><figcaption></figcaption></figure>

### Block position logic

In Base, you have access to the **entire sequence of Blocks**. This lets you define logic across all positions — for example, detecting if a certain Block comes third, or inserting a design pattern every fourth block. Sometimes, you want a something in the Base appearance or behavior to change depending on the order in which a certain type of Block is listed.

This is where **Block Position Logic** comes in: a feature that allows to detect the position or sequence of Blocks, and create rules based on that.\
\
The core concept here is that you have an array of Blocks. From here we can start creating rules.\
\
Here are the variables:

```liquid
{% for item in base.all_blocks %}
    {{ item }}
{% endfor %}
```

Put into practice we can then start to look for the Block name, and check if there ever comes a Block named "Article" as the last block in the array, make a change to the footer, so it neatly blends in with the rest of the design.

```liquid
{% assign last_block = base.all_blocks | last %}
{% assign is_article_last = last_block == "article" %}

{% if is_article_last %}
    Background-color:#3a3b38;
{% endif %}
```

**Result**

<figure><img src="https://4158541773-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUZwvCYi7VuSyayWGoc6M%2Fuploads%2Fu8R870MGQcsMNJGxnoyH%2FSk%C3%A6rmbillede%202025-05-22%20160802.png?alt=media&#x26;token=cc6d32d9-a959-49bd-beae-fa3bfe6b412b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Want to listen to the sequence of Blocks — for example, to detect if a certain type of Block is before or after a specific type of Block and have design logic based on that?\
Check out how [Block Position Logic works](https://documentation.alpaco.email/blocks#block-position-logic) *inside* individual Blocks too.
{% endhint %}
