# 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](/template/input-groups.md)

When [creating an email](/fundamentals/creating-an-email.md), 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="/files/aBFayGMMegwYwmrk5Oyl" 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](/template/blocks.md). By Clicking the + button here you create a new [Block](/template/blocks.md).&#x20;
* **Center panel -** this is where HTML, CSS and Liquid rules are inserted and highlighted.
* **Right panel -** this is where all [input types](/template/input-groups/input-types.md) 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](/template/blocks.md) 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="/files/djVOU9K1Zil7aBvM64ZP" 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](/template/blocks.md). 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](/template/blocks.md) 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="/files/Fqn1rhKlCh6SK79BK1zU" 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="/files/Fzzv4Hnx1bpwJHM0Wy4U" 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](/template/blocks.md#block-position-logic) *inside* individual Blocks too.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.alpaco.email/template/base.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
