# Overview

Zero One Kirby CMS theme documentation, help files, and tutorials for beginners and professionals.

Hello, thank you for buying or considering buying the [**Zero One Kirby CMS theme**](https://www.thezero.club/demo/one/).&#x20;

This regularly updated collection of documents will guide you through all the important first steps you need to follow to install and understand how the Zero One Kirby CMS theme works.

{% hint style="info" %}
**Please read the documentation, there are some options that are not so obvious, and there are also some tricks that can save you time. If you can't find something in the docs use search in the top right corner.**
{% endhint %}

<figure><img src="/files/o2Zkv0BkeQV8P2V3Kwpk" alt=""><figcaption><p>Zero One Kirby CMS theme</p></figcaption></figure>


# Terms & Guidelines

By purchasing Zero One theme you agree with the following terms.

Below are our Terms of Service, which outline a lot of legal goodies, but the bottom line is it’s our aim to always take care of you, as a customer. We’ve included many of these terms to protect ourselves legally, but if you have an issue, always feel free to email us at <support@thezero.club> and we’ll do our best to resolve it in a fair and timely fashion.

{% hint style="info" %}

#### **The Zero License**

**Applies to: Zero One Kirby CMS Theme**\
*Last updated: 09.09.2025.*
{% endhint %}

### License Summary

Here’s an overview of what the Zero One theme license allows, depending on your package tier. Upon purchase, you are granted a **non-exclusive, non-transferable, worldwide license** to use the Zero One theme in accordance with the tier you selected:

|                                                            | Standard subscription or Standard Lifetime | Extended subscription or Extended Lifetime | Developer subscription or Developer Lifetime |
| ---------------------------------------------------------- | ------------------------------------------ | ------------------------------------------ | -------------------------------------------- |
| Number of end products                                     | 3                                          | 10                                         | Unlimited                                    |
| Use for personal or a client                               | ✅                                          | ✅                                          | ✅                                            |
| Modify or manipulate the Item                              | ✅                                          | ✅                                          | ✅                                            |
| Re-distribute the Item’s source files                      | ❌                                          | ❌                                          | ❌                                            |
| Sell it as a theme/product on any marketplaces as your own | ❌                                          | ❌                                          | ❌                                            |

Each end product must be created by you or your team for yourself or a client. You may not resell or redistribute the theme files.

### Licensing Agreement

Here's what The Zero License allows for:

* The Zero License grants the user an ongoing, non-exclusive, worldwide license to utilize the digital work (“Item”).
* You are licensed to use the Item to create Three to Unlimited End Products, depending on your package tier, for yourself or for your clients.

#### You can:

* Create Three to Unlimited End Products, depending on your package tier, for clients or personal projects.
* You may modify or manipulate the Item. You may combine the Item with other works and make a derivative work from it. The resulting works are subject to the terms of this license.
* This is a 'multi-use' license, which means you may use the Item in Three to Unlimited End Products, depending on your package tier, in Three to Unlimited End projects, depending on your package tier.

#### You cannot:

* Re-distribute the Item as a stock image or its source files, regardless of any modifications, under any circumstances. In other words, you cannot replicate or make modifications to the item and sell it as a theme/product on any marketplace as your own.

#### Other license terms:

* Some components of the Item can be sourced from elsewhere and different license terms may apply to the component, such as someone else’s license or an open source or creative commons license. If so, the component will be identified in the Item’s description page or in the Item’s downloaded files. The other license will apply to that component instead of this license. This license will apply to the rest of the Item. You can see all of these components on the [Credits](https://www.one.thezero.club/credits) page.

### Security & Payments

All payments are processed securely through [Gumroad](https://gumroad.com/) (PayPal or Stripe). We do not directly process payments through our website.

### **Returns and Refunds Policy**

Because of the nature of the product, and because it is impossible to return it, **we do not issue refunds for digital products.** We recommend contacting us for assistance if you experience any issues receiving or downloading our products.

### Support Policy

We oblige to provide Zero One theme support. [Learn more](https://www.one.thezero.club/support) about what our support covers.

### Liability

You indemnify us against all losses, costs (including legal costs), expenses, demands, or liability that we incur arising out of, or in connection with, any claims against us relating to your use of the Zero One theme.

### Requesting, Modifying, or Deleting Your Data (GDPR)

We are a small operation, but we work hard to make sure your data remains safe and we only collect what is needed to provide our services. If you want to request an export of your data, a modification to any data we have related to your account, or delete all data permanently, please send an email to <support@thezero.club> and we’ll complete your request in a timely manner.

### Changes to Terms

We reserve the right to make modifications to these terms. If we change our terms of use we will post those changes on this page.


# Installation & Setup

Welcome to Zero One.

This guide will help you get your website running as quickly as possible. Before starting, make sure your hosting environment meets the installation requirements and familiarize yourself with the recommended configuration options.

***

### What Is Included In The Download?

Your download package contains everything required to run Zero One.

```
zero-one/
├── zero-one
├── Demos/
│   ├── architecture/
│   ├── consulting/
│   └── ...
├── License
├── How to Install
└── Documentation Link
```

Each demo contains its own `content` folder which can be used to quickly create a fully populated example website.

***

### Install Requirements <a href="#requirements" id="requirements"></a>

Learn in detail on the Kirby website -- <https://getkirby.com/docs/guide/quickstart#requirements>

#### Web server (any of the following)

* Apache 2
* Nginx
* LiteSpeed
* Caddy
* PHP server

&#x20;**Server Features:**

* The server must support URL rewriting
* The server OS must be POSIX compatible.

#### PHP version

* 8.2, 8.3, 8.4, 8.5

#### PHP extensions

* Check them out at Kirby documentation <https://getkirby.com/docs/reference/system/requirements#php-extensions>

{% hint style="info" %}
**Most modern hosting providers already meet these requirements**. The most common issue is URL rewriting being disabled, so make sure mod\_rewrite (Apache) or the equivalent feature on your web server is enabled.
{% endhint %}

***

### 🚀 Install Zero One

Choose the guide that matches your environment:

#### Local Development

If you want to build and test your website on your own computer before publishing it online, start here:

👉 [**Local Installation**](/guide/installation/local-environment)

This guide covers setting up Zero One on a local development environment.

#### Production Server

If you're installing Zero One directly on a web hosting account or production server, follow this guide:

👉 [**Server Installation**](/guide/installation/server)

This guide covers uploading, configuring, and running Zero One on a live server.

{% hint style="warning" %}
We strongly recommend reading the rest of this page after installation.&#x20;
{% endhint %}

***

### How To Install a Demo

{% hint style="success" %}
**Important:** Complete either the Local Environment or Server Installation guide before trying to import a demo.
{% endhint %}

Switching between demos only takes a few minutes.

* **Step 1:** Delete the existing `content` folder from your installation.
* **Step 2:** Open the `demos` directory included in your download package.
* **Step 3:** Copy the `content` folder from your chosen demo into the root of your Zero One installation.
* **Step 4:** Log in to the Panel and open the [Site Styling tab](/guide/theme-styling).
* **Step 5:** Enable [Style Compiler](/guide/theme-styling#turn-the-styling-on-off) and save.
* **Step 6:** Visit any frontend page and refresh it to regenerate demo styles.
* **Step 7:** Disable Style Compiler again.

#### Included Demos

Zero One includes the following starting points:

* Main Demo (default installation)
* Architecture
* Consulting
* Personal
* Furniture Shop
* Event
* Zero One Blank (without demo content)

The default installation already contains the Main Demo. Installing another demo simply replaces the content folder with content from the selected demo.

{% hint style="info" %}
If you prefer starting from scratch, use **Zero One Blank**. It includes the complete Zero One framework and functionality, but without any demo content.
{% endhint %}

***

### ❗Next Steps (Don't Skip)

We strongly recommend reading the following guides before launching your website:

* [Default language](/guide/installation/default-language)
* [Multilanguage website](/guide/installation/multi-language-website)
* [Config options](/guide/installation/config-options)
* [SMTP email options](/guide/installation/smtp-email-options)
* [Folder structure](/guide/installation/folder-structure)
* [htaccess](/guide/installation/htaccess)
* [Updating](/guide/installation/updating)

These guides will save you a lot of time later and help you follow the recommended Zero One workflow.

***

### ⚠️ Most Common Beginner Mistakes

#### Not Choosing WWW or Non-WWW Early

Before launching your website, decide whether your canonical URL will use `www.your-domain.com` or `your-domain.com`.&#x20;

Both approaches are perfectly valid, but you should choose one and redirect the other to it.

Failing to do this can lead to duplicate URLs, inconsistent links, SEO issues, and problems with cookies or session handling.

We recommend configuring your preferred domain structure as early as possible.

#### Not Setting the Default Language Early

This is one of the most common mistakes in new Kirby projects.

Many users continue building their website and adding content before deciding what the [default language](/guide/installation/default-language) should be.

The problem is that Kirby does **not** allow a secondary language to be promoted to the default language later.

To change the default language, you must:

1. Remove all secondary languages.
2. Delete the existing default language.
3. Create the new default language.
4. Recreate the secondary languages.

This process becomes significantly more complicated once content has already been created.

{% hint style="info" %}
**Important:** Decide on your default language before creating content and before enabling additional languages.&#x20;
{% endhint %}

#### Not Using Multi-environment Configuration

Many users place all custom settings directly inside `config.php`.

For better maintainability and easier future updates, we strongly recommend using [environment-specific configuration](/guide/installation/config-options#multi-environment-setup-recommended) files whenever possible.

#### Leaving Style Compiler Enabled

[Style Compiler](/guide/theme-styling) is a development tool.

Enable it only when generating or rebuilding styles and disable it afterward.

#### Editing Zero One Plugin Files Directly

Avoid modifying files located inside `site/plugins/zero-one/`

Instead, use the built-in [Theme Extending system](/guide/theme-extending) to override files safely.

This preserves your customizations when updating Zero One.

#### Skipping Security Configuration

A freshly installed website should always be reviewed from a security perspective.

We recommend reading the [**Securing Your Website**](/guide/securing-your-website) guide before launching any project.

#### Skipping Performance Optimization

Many users focus entirely on design and content, but forget to [optimize their website](/guide/optimizing-your-website) before launch.

Simple improvements such as enabling Kirby cache, configuring thumbnail quality, and setting up browser caching can significantly improve loading times and reduce server load.

{% hint style="info" %}
Zero One already includes several built-in performance optimizations, including automatic image resizing, WebP image generation, and lazy-loaded images. However, [additional optimization](/guide/optimizing-your-website) is still recommended for production websites.
{% endhint %}


# Local install

Running Zero One locally is the easiest way to explore the theme, test customizations, and build your website before publishing it online.

### Recommended Local Development Tools

Zero One works with any environment capable of running [Kirby's requirements](/guide/installation#requirements).

**Popular options include:**

* [Laravel Herd](https://herd.laravel.com/) (**recommended**)
* MAMP
* XAMPP
* WAMP
* Local PHP server (`php -S`)
* Any other PHP development environment

{% hint style="success" %}
**Recommended:** Laravel Herd provides one of the simplest local development experiences and works extremely well with Kirby.
{% endhint %}

{% hint style="danger" %}
Warning: MAMP is having issues on MAC in the latest macOS versions because of permission changes.&#x20;
{% endhint %}

***

### Install Zero One Locally

#### Step 1

Start your local development server.

Run `php -S localhost:8000 kirby/router.php` or launch your preferred application such as Laravel Herd, MAMP, XAMPP, or WAMP.

#### Step 2

Copy the contents of the `zero-one/` folder from the downloaded files into your web root.

If you want to start with a different demo, you can import its content later as explained in the [Installation & Setup guide](/guide/installation#how-to-install-a-demo).

#### Step 3

Open your website in the browser.

Examples:

or

```
http://localhost:8000
```

or

```
http://localhost/your-folder-name
```

Or, if you are using Laravel Herd

```
https://my-website.test
```

#### Step 4

Open the Kirby Panel:

```
http://localhost/your-folder-name/panel
```

or

```
https://my-website.test/panel
```

#### Step 5

Create your administrator account and log in.

{% hint style="success" %}
If you can access the Panel and create an administrator account, your Zero One installation is working correctly.
{% endhint %}

#### Step 6

Explore the demo, settings, pages, and theme features.

{% hint style="warning" %}
Email sending is often disabled or limited in local development environments. If contact forms are not sending emails locally, this is usually expected behavior and not a Zero One issue.
{% endhint %}

***

### First Load May Be Slower

The first few page loads may feel slower than expected.

This is completely normal.

When Zero One runs for the first time, Kirby needs to generate:

* Image thumbnails
* WebP image versions
* Cached assets
* Other generated files

Once these files exist, the website will become noticeably faster.

***

### If Styles Look Broken

If styles are missing or the layout doesn't look correct:

1. Open the Panel.
2. Navigate to **Site → Styling**.
3. Enable **Style Compiler**.
4. Save.
5. Refresh any frontend page.
6. Wait a few seconds.
7. Disable **Style Compiler** again.

This forces Zero One to regenerate its compiled styles.

***

### URL Rewriting & Cachebusting

For the best experience, your local environment should support URL rewriting.

Without URL rewriting, some Zero One features may not behave as expected, and asset caching may not work correctly.

Most modern local development environments enable URL rewriting automatically.

If your environment doesn't support URL rewriting:

1. Open the Panel.
2. Navigate to Site Settings.
3. Disable Cachebusting.

You can safely re-enable it later when deploying to a properly configured server.

{% hint style="info" %}
A local environment is intended for development and testing only. Before launching a public website, make sure you also read the Server Installation guide.
{% endhint %}

{% hint style="warning" %}
If you are having any problems with installation, don't hesitate to [get in touch with us](/support).
{% endhint %}


# Server install

Once your website is ready, you can deploy Zero One to a live server and make it publicly accessible.

Before continuing, make sure your server meets the [requirements](/guide/installation#requirements) described in the [Installation & Setup](/guide/installation) guide and that you have access to your hosting control panel, FTP/SFTP account, or deployment workflow.

***

### Recommended Workflow

There is no single correct way to build a website.

Some users develop locally on their own computer, while others work directly on a staging or development server.

A typical Zero One workflow looks like this:

```
Local Environment
        or
Staging / Development Server
        ↓
Testing & Content Creation
        ↓
Production Website
```

Regardless of the workflow you choose, we strongly recommend avoiding direct development on a public production website whenever possible.

This allows you to test changes safely before they become visible to visitors.

{% hint style="info" %}
Building locally or on a staging server allows you to experiment, test changes, and troubleshoot issues without affecting a live website.
{% endhint %}

***

### Before Going Live

Before publishing your website, make sure you:

* Configure your [default language](/guide/installation/default-language).
* Choose your preferred WWW or non-WWW domain structure.
* Review your [config options](/guide/installation/config-options).
* Configure [SMTP email](/guide/installation/smtp-email-options) delivery.
* Disable debug mode.
* Complete the [security recommendations](/guide/securing-your-website).
* Complete the [performance optimization](/guide/optimizing-your-website) recommendations.

These topics are covered elsewhere in the installation documentation.

***

#### Enable Panel Registration

Unlike local development environments, a fresh public installation requires panel registration to be enabled.

Add the following option to your configuration:

{% code title="config.your-domain.com.php or config.[www.your-domain.com.php](http://www.your-domain.com.php)" %}

```php
return [

    'panel' => [
        'install' => true
    ],

];
```

{% endcode %}

Once your administrator account has been created, the option is no longer needed and can be removed.

{% hint style="info" %}
Once your administrator account has been created, remove the `'install' => true` option. Leaving it enabled serves no purpose and should not be part of a production configuration.
{% endhint %}

***

### Upload Zero One to Your Server

#### **Option 1: Direct Upload (Recommended for Most Users)**

The simplest deployment method is to upload the contents of the `zero-one` folder to your website root directory.

Examples:

```
public_html/

or

httpdocs/

or

www/
```

depending on your hosting provider.

Once uploaded, visit your domain in the browser and complete the Panel installation process.

For most users, this is the easiest and fastest deployment method.

{% hint style="info" %}
Upload the contents of the `zero-one` folder, not the folder itself. &#x20;

A common mistake is ending up with a structure like:  &#x20;

public\_html/zero-one/site&#x20;

public\_html/zero-one/kirby  &#x20;

instead of:  &#x20;

public\_html/site&#x20;

public\_html/kirby
{% endhint %}

***

#### **Option 2: Git Deployment**

Zero One is fully compatible with Git-based workflows.

This approach is recommended for developers or advanced users who want version control and simplified deployments.

**A typical workflow might be:**

1. Push changes to a Git repository.
2. Connect the repository to your server.
3. Pull updates to the server when required.

{% hint style="warning" %}
Git deployment is optional. If you're not already familiar with Git, direct upload is usually the simpler option.
{% endhint %}

#### Working With Content and Git

Many developers prefer tracking code changes with Git while allowing website content to be managed directly through the Kirby Panel.

To prevent content changes from being tracked, add the following entry to your `.gitignore` file:

```ssh-config
# Ignore content
/content
```

Then stop tracking the existing content directory:

```bash
git rm -r --cached path_to_your_content_folder/
```

After committing and pushing the changes, content updates made through the Panel will remain on the server and will no longer be managed through Git.

{% hint style="info" %}
This workflow is useful when clients update content on the live website while developers continue deploying code updates through Git.
{% endhint %}

***

### Debug Mode and Search Engines

During development, it is common to keep Kirby's debug mode enabled:

{% code title="config.your-domain.com.php" %}

```php
return [

    'debug' => true,

];
```

{% endcode %}

When debug mode is enabled, Zero One automatically instructs search engines not to index the website through its generated `robots.txt` file.

This is extremely useful for:

* Local development environments
* Staging servers
* Development domains
* Testing websites

because it helps prevent unfinished websites from appearing in search results.

{% hint style="info" %}
If you are developing directly on a staging or development server, keeping debug mode enabled is usually recommended until the website is ready for launch.
{% endhint %}

#### Before Launching

Before making your website publicly available, make sure debug mode is disabled:

{% code title="config.your-domain.com.php" %}

```php
return [

    'debug' => false,

];
```

{% endcode %}

{% hint style="warning" %}
Before launching your production website, verify that debug mode is disabled. Otherwise, search engines may continue receiving instructions not to index your website.
{% endhint %}

Using a [Multi-environment Setup](/guide/installation/config-options#multi-environment-setup-recommended) makes this much easier because different environments can have different debug settings.

***

### 🎉 Your Website Is Live

If your website is accessible, the Panel is working, and your administrator account has been created successfully, your Zero One installation is now live.

You can now start creating content.&#x20;

We recommend checking out these documentation pages if you haven't already:

* [Securing Your Website](/guide/securing-your-website)
* [Optimizing Your Website](/guide/optimizing-your-website)
* [Theme Extending](/guide/theme-extending)

{% hint style="info" %}
If you are having any problems with installation, please [get in touch with us](/support) for help.&#x20;
{% endhint %}


# Default language!

The first thing you need to do when you create an installation of Zero One is to go to the system Languages options and add your language as the default language.

<figure><img src="/files/XCmBAESLWHSQmBbA5rFo" alt=""><figcaption><p>Languages in system menu</p></figcaption></figure>

If English is not the default language of your website, delete it and add your language.

<figure><img src="/files/Kxzf4XsZK0ypfCirjRxS" alt=""><figcaption><p>Languages options</p></figcaption></figure>

Make sure to add all correct pieces of information for your language, including code and PHP locale string. If you are not sure what are they for your language search online.

<figure><img src="/files/jSip2NDPmaJUfmyclfS2" alt=""><figcaption><p>Language settings</p></figcaption></figure>

There is just one thing. If you want your default language to be at the domain root, you will have to go to `zero-one/site/languages/[yourlanguageextension].php`, open it with a text editor and

```
# Change this
'url' => NULL

# Into this
'url' => '/'
```

If you intend to create a multilanguage website, make sure to read the next documentation page.


# Multi-language website

With Zero One is very easy to create a multi-language website.&#x20;

### Adding secondary languages

After the [default language](/guide/installation/default-language), you can start adding secondary languages in the system Languages settings.

<figure><img src="/files/djL3PcyH5iX3omagw9Sq" alt=""><figcaption><p>Adding secondary language</p></figcaption></figure>

When you add secondary language and go back to the content area in the panel you will see an additional option to change content language.

<figure><img src="/files/YmNJoU0KyXcwBzTj3Vqr" alt=""><figcaption><p>Content language switch</p></figcaption></figure>

And when you switch the content language to a secondary language you can start translating your website content to that language.&#x20;

### How does translating work?

{% hint style="info" %}
It is recommended that you first create content in the default language, and after that start translating to other languages because you will have less work to do later.&#x20;
{% endhint %}

When you create content in the default language and just add a secondary language and don't translate anything, when you go to the secondary language you will see a copy of the default language content in secondary language pages and options.&#x20;

Right after you create the slightest change in the secondary language page and save, a new separate file is created, and now your content for that specific page is separated from that page's default language.&#x20;

You can also translate the URLs, page titles, images ALT text, and various other things.

{% hint style="warning" %}
Keep in mind that various Site options are also translatable, and that is possible to have even different headers, footers, and other things different per language.
{% endhint %}

{% hint style="danger" %}
If you are using multi-domain ([separate domain for language](https://getkirby.com/docs/guide/languages#a-separate-domain-for-each-language)), language detect can't work, so please turn it off. You can remove whole language detect code from config file.
{% endhint %}


# Config options

A reminder that Kirby config options docs can be found at <https://getkirby.com/docs/guide/configuration>, but here we will explain what is in the Zero One theme config.&#x20;

### Multi-environment Setup (Recommended)

Kirby allows you to split your configuration into multiple files based on the current environment. While this setup is optional, we strongly recommend using it for all Zero One projects.

Instead of placing all custom configuration options inside `site/config/config.php`, you can organize them into separate files:

```
# Example setup

site/config/
├── config.php
├── config.localhost.php
├── config.staging.your-domain.com.php
├── config.your-domain.com.php 
└── config.www.your-domain.com.php
```

{% hint style="info" %}
Learn more in the [Kirby official guide](https://getkirby.com/docs/guide/configuration#multi-environment-setup).&#x20;
{% endhint %}

This approach provides several advantages:

* Keeps your configuration cleaner and easier to maintain.
* Separates local, staging, and production settings.
* Makes troubleshooting easier.
* Prevents your main configuration file from becoming cluttered with customizations.
* Makes future Zero One updates easier to apply.

{% hint style="warning" %}
**Important:** Some Zero One updates may occasionally require changes to the default `config.php` file. If all your custom settings are stored there as well, updating becomes more difficult and increases the risk of merge conflicts or accidentally overwriting your changes.
{% endhint %}

For this reason, we recommend keeping `config.php` as minimal as possible and storing most customizations inside environment-specific configuration files whenever possible.

### How Multi-environment Configuration Works

When using a multi-environment setup, Kirby first loads the main:

```
site/config/config.php
```

and then loads the matching environment configuration file, for example:

```
site/config/config.localhost.php
```

or

```
config.www.your-domain.com.php
```

The environment-specific configuration extends the main configuration and can override any option defined in `config.php`.

#### Example

Main configuration:

{% code title="site/config/config.php" %}

```php
return [

    'debug' => false,

    'cache' => [
        'pages' => true
    ],

];
```

{% endcode %}

Local development configuration:

{% code title="site/config/config.localhost.php" %}

```php
return [

    'debug' => true,

];
```

{% endcode %}

In this case, Kirby will use:

```php
'debug' => true
```

because the environment-specific configuration overrides the value from `config.php`.

However, the cache configuration is still inherited from `config.php`:

```php
'cache' => [
    'pages' => true
]
```

{% hint style="info" %}
Think of `config.php` as your project's base configuration, while environment-specific files contain only the settings that differ between environments.
{% endhint %}

### Where Should I Put New Config Options?

Most code examples throughout this documentation show only the configuration snippet that needs to be added. Before copying any option, it's important to understand **where it belongs**.

While Kirby allows you to place all options directly in `site/config/config.php`, we strongly recommend using a **multi-environment setup** instead (explained above). This keeps your configuration organized, makes maintenance easier, and helps prevent your custom settings from being overwritten when following future Zero One updates.

For example, when the documentation shows:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [
    'panel' => [
        'slug' => 'your-secret-login'
    ],
    
    // The rest of your config options
    
];
```

{% endcode %}

you should usually add that option to your environment-specific configuration file rather than the main `config.php`.

#### Recommended Setup

Instead of storing all configuration in:

```
site/config/config.php
```

use environment-specific files such as:

```
site/config/
├── config.localhost.php
├── config.staging.your-domain.com.php
├── config.your-domain.com.php 
└── config.www.your-domain.com.php
```

This approach keeps your project cleaner, easier to manage, and safer to update.

#### Always Place Options Inside the Return Array

Configuration options must be added inside the `return` array:

✅ Correct

{% code title="config.[www.your-domain.com.php](http://www.your-domain.com.php)" %}

```php
return [

    'panel' => [
        'slug' => 'your-secret-login'
    ],

    // Your existing config options

];
```

{% endcode %}

❌ Incorrect

{% code title="config.[www.your-domain.com.php](http://www.your-domain.com.php)" %}

```php
return [

    // Your existing config options

];

'panel' => [
    'slug' => 'your-secret-login'
];
```

{% endcode %}

#### Always Remember the Comma

Each option in the configuration array must be separated by a comma.

✅ Correct:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [
    'debug' => false,

    'languages' => true,

    'panel' => [
        'slug' => 'your-secret-login'
    ],

];
```

{% endcode %}

❌ Incorrect:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'debug' => false

    'languages' => true,

];
```

{% endcode %}

Missing commas will result in a PHP syntax error, and your website may stop working.

***

### Debug

Debug is set to true on localhost and, of course, to false on the server.

{% hint style="danger" %}
**Important note:** When debugging is turned on, robots.txt will tell the crawlers not to index your website. So, make sure to turn off debugging mode when your website is live.
{% endhint %}

### Custom panel CSS&#x20;

There is an import for the custom panel CSS file. Zero One uses it to customize Editor user role permissions. That file is **`assets/css/panel.css`** and you can customize it further.

### Smartypants

Smartypants are on by default in Zero One. Learn more about it at <https://getkirby.com/docs/reference/system/options/smartypants>

### ~~Autoresize~~

From Zero One version 5.0.2, the Kirby Autoresize plugin is removed, and its config options. Now you can change image upload optimization settings in these files:

* `site\plugins\zero-one\blueprints\files\image.yml`
* `site\plugins\zero-one\blueprints\files\default.yml`

### Robots

There is also some settings code for [Kirby 3 Robots.txt](https://github.com/bnomei/kirby3-robots-txt) plugin from Bruno Meilick. You can add your custom rules, so check the plugin documentation.

### Hooks

There is also a little `site.update:after` hook which is needed to write CSS code from the Site Styling Custom CSS input to `assets/css/site.css`.

### Plugins

We also disallowed version info for some plugins that shouldn't have that information.

And that's it; the rest is up to you. 🙂


# SMTP email options

**Email sending will work out of the box on any server that allows PHP emails.** This was a default setting on most servers for many years. But because enhanced security is a very important, and hackers find new ways to intercept PHP emails, many hosting providers disallow PHP emails. Although we suggest adding the SMTP config options even if your server allows sending PHP emails.&#x20;

You can see all Kirby email options on the link below

{% embed url="<https://getkirby.com/docs/reference/system/options/email>" %}

### Where to add SMPT config options?

You add SMPT to your config file (**`site/config/`** folder).&#x20;

We suggest you use [Multi-environment config setup](https://www.one.thezero.club/guide/installation/config-options#multi-environment-setup), to have a cleaner file structure.

### Basic SMTP options

If your website is on the same server as your email server the [basic SMPT config options](https://getkirby.com/docs/reference/system/options/email#email-transport) should be enough.&#x20;

```
'email' => [
    'transport' => [
      'type' => 'smtp',
      'host' => 'smtp.company.com',
      'port' => 465,
      'security' => true
    ]
  ],
```

### SMTP options with authentication

If your website is not on the same server as your email server, or your server has enhanced security you will need to add [SMTP config options with authentication](https://getkirby.com/docs/reference/system/options/email#email-transport__email-transport-with-authentication).

```
'email' => [
    'transport' => [
      'type' => 'smtp',
      'host' => 'smtp.server.com',
      'port' => 465,
      'security' => true,
      'auth' => true,
      'username' => '...',
      'password' => '...',
    ]
  ],
```


# Folder structure

Zero One uses a slightly different folder structure than a standard Kirby installation.

The goal is to keep the theme itself separate from your project-specific customizations, making updates easier and helping you maintain a cleaner project structure.

Don't worry, this approach is fully supported by Kirby and works exactly like any other Kirby website.

***

### How Zero One Is Organized

Unlike a standard Kirby installation, Zero One is delivered as a plugin.

The complete theme, including its blueprints, templates, snippets, controllers, models, collections, and functionality, is located in:

```
site/plugins/zero-one/
```

This directory contains the actual theme and should be considered the Zero One core.

In addition, Zero One provides a dedicated customization layer located in:

```
site/theme/
```

This directory is intended for your own project customizations and extensions.

***

### What Is The `site/theme` Folder For?

The `site/theme` directory allows you to:

* Override existing Zero One files.
* Add your own templates.
* Add your own snippets.
* Add custom blueprints.
* Add custom controllers and models.
* Extend the functionality of your project without modifying the theme itself.

Think of `site/theme` as your project's workspace, while `site/plugins/zero-one` contains the original theme files.

***

### Why Is This Better?

This approach offers several advantages:

* Cleaner separation between theme files and project files.
* Easier Zero One updates.
* Safer customizations.
* Reduced risk of accidental file overwrites.
* Better long-term maintainability.

Instead of directly modifying the Zero One theme, your project can build on top of it.

***

### Theme Overrides

One of the most powerful features of Zero One is the ability to override theme files.

For example:

```
site/theme/snippets/footer.php
```

can override:

```
site/plugins/zero-one/snippets/footer.php
```

When an override exists, Zero One automatically uses your version instead of the original file.

This allows you to customize the theme safely without modifying the plugin itself.

{% hint style="info" %}
To learn more about overriding files and extending the theme, see the [Theme Extending Guide](/guide/theme-extending).
{% endhint %}

***

### Adding Your Own Files

The `site/theme` directory isn't limited to overrides.

You can also use it for completely custom files that don't exist in Zero One at all.&#x20;

{% hint style="info" %}
To learn more about adding new files on top of the Zero One theme, see the [Adding new templates guide](/guide/theme-extending/adding-new-templates) and [Adding new Content block guide](/guide/theme-extending/adding-new-content-block-layout-builder).&#x20;
{% endhint %}

These files will work alongside the Zero One theme and can be used to build project-specific functionality.

These files will work alongside the Zero One theme and can be used to build project-specific functionality.

***

### Which Files Should I Modify?

As a general rule:

✅ Safe to customize:

```
site/theme/
site/config/
content/
assets/
```

❌ Avoid modifying directly:

```
site/plugins/zero-one/
```

Direct changes inside the plugin may be lost during future Zero One updates.

Instead, use the [Theme Extending system](/guide/theme-extending) whenever possible.

***

### Recommended Workflow

A typical Zero One project follows this approach:

```
site/plugins/zero-one/   ← Zero One core
site/theme/              ← Your customizations
site/config/             ← Your configuration
content/                 ← Your content
assets/                  ← Your custom assets
```

Keeping these responsibilities separated makes projects easier to maintain, easier to update, and easier to troubleshoot.

{% hint style="info" %}
If you're unsure whether a customization belongs inside `site/plugins/zero-one` or `site/theme`, the answer is almost always `site/theme`.
{% endhint %}


# htaccess

On top of Kirby CMS default content in .htaccess file there are few things we added.

### Security option for Apache server

```
Options -Indexes
```

### Kirby 3 Fingerprint plugin

And code needed for [Kirby 3 Fingerprint](https://github.com/bnomei/kirby3-fingerprint) plugin to work

```
# Fingerprint plugin
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.([0-9a-z]{32})\.(js|css)$ $1.$3 [L]
```

### Browser caching

**We didn't add and code for Browser caching**, but for your production .htaccess it would probably be wise to add.&#x20;

Resources you can look into for this:

* Short explanation <https://gtmetrix.com/leverage-browser-caching.html>
* Longer explanation <https://varvy.com/pagespeed/cache-control.html>
* A large set of possible options <https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess>

{% hint style="warning" %}
But be careful, you should know what you are doing.
{% endhint %}


# Updating

We take great care to make Zero One updates as safe and straightforward as possible. In most cases, updating is simply a matter of replacing a few folders and files.

{% hint style="info" %}
Before updating, always check the [changelog](/changelog) for release-specific instructions.
{% endhint %}

{% hint style="warning" %}
If you are updating from a version older than the oldest version documented in the changelog, please [get in touch with us](/support) before updating.
{% endhint %}

{% hint style="danger" %}

## Before You Update

### Create a Backup

Before any update, create a backup of your website files.

If you are unsure about any update step, having a backup allows you to quickly revert to a working version.

### Never Overwrite Your Content

**Never overwrite the `content/` folder.**

This folder contains your website content, pages, files, and uploaded media.

### Review Custom Changes

Be careful when updating:

* `site/config/` website configuration files
* `site/languages/` website language(s)
* `site/theme/` [custom overrides](/guide/theme-extending) (if you have any)

If you made custom modifications to these files, compare them with the new version before overwriting anything.
{% endhint %}

### Understanding Updates

Not all updates are the same.

Each release in the [changelog](/changelog) is marked with an update type.

#### 🟢 Standard Update

A routine update that usually only requires replacing the files and folders listed in the changelog.

No additional manual steps are required unless stated otherwise.

#### 🟡 Configuration Update

Requires one or more manual configuration changes in addition to updating files.

Examples include:

* new configuration options
* updated configuration settings
* new panel options
* asset-related settings

Configuration Updates should not be skipped.

#### 🔴 Migration Update

Requires manual changes beyond normal file and configuration updates.

Examples include:

* structural theme changes
* template or blueprint changes
* plugin migrations
* asset restructures
* compatibility-related changes

{% hint style="danger" %}
Migration Updates must never be skipped.
{% endhint %}

```
Quick rule:
 
🟢 Standard Update = update files
 
🟡 Configuration Update = update files + configuration
 
🔴 Migration Update = update files + structural changes
```

***

### Which Instructions Should I Follow?

When updating from an older version:

1. Complete all 🔴 **Migration Updates** released after your current version.
2. Follow the instructions from all 🟡 **Configuration Updates** released after your current version.
3. Finally, update to your target version.

**Example**

**Current version:** `5.1.0`\
**Latest version:** `5.4.1`

**Required Updates**

1. 🔴 Update to **5.2.0** (Migration Update)
2. 🟢 Update to **5.4.1** (Standard Update)

**Additional Instructions Required**

Before updating to **5.4.1**, also follow:

* 🟡 Configuration Update instructions from **5.3.0**
* 🟡 Configuration Update instructions from **5.4.0**

**Important**

* 🔴 Migration Updates must be completed in order.
* 🟡 Configuration Updates do not require installing that version, but their instructions must be followed.
* 🟢 Standard Updates can be safely skipped unless they are your target version.

***

### Standard Update Procedure

Most Zero One updates require updating some or all of these:

* **`assets/`**
* **`kirby/`**
* **`site/plugins/`**
* **`composer.json`**

The exact files and folders are always listed in the [changelog](/changelog) entry.

Simply follow the update instructions for the specific version you are installing.

***

### After Updating Assets

If the update includes changes to the `assets/` folder:

1. Open the Site Styling section in the Panel.
2. Enable Style Compiler.
3. Save.
4. Open or refresh any frontend page.
5. Wait for the stylesheet to be regenerated.
6. Disable Style Compiler.
7. Save again.

***

### Alternative Update Method

Some users prefer updating by starting with the new Zero One version and moving their existing content into it.

The process is:

1. Download the latest Zero One version.
2. Create a backup.
3. Copy your existing `content/` folder into the new installation.
4. Review any custom configuration changes before going live.

This is entirely optional but can be useful when performing larger upgrades.

***

### Need Version-Specific Instructions?

All release-specific instructions, migration steps, fixes, and new features are documented in the Changelog.

👉 [**Read the changelog**](/changelog) **before every update.**&#x20;

**👉** [**Get in touch with us**](/support) **for specific instructions.**&#x20;


# PHP Composer

This is optional, and primarily for advanced users.

For those who are already friends with Composer, everything will be clear just by looking at **`composer.json`** file in install root.&#x20;

Also, by overwriting this file on every Zero One update you will always know what version of the Zero One theme you have, and what is the version of some plugins. Unfortunately, not all plugins have Composer support so it is not a complete list.&#x20;

{% hint style="danger" %}
**We don't recommend updating Zero One using PHP Composer, for reasons listed below.**&#x20;
{% endhint %}

### Partial PHP Composer support

Zero One has partial PHP support:

1. Because we don't recommend updating Kirby and plugins to new versions before we test new versions first and create compatibility changes if needed. That way the risk of unintended consequences are minimal
2. Some Zero One plugins are modified versions of original plugins, and shouldn't be ever updated through PHP Composer, for example:
   * Kirby Form Block Suite

Plugins we left in the composer.json file didn't cause issues so far.

### PHP Composer for beginners

**Why use Composer at all?** Well, primarily to update Kirby and plugins easier, and to track their versions. And later when you are comfortable with it, you can use it to add more project dependencies/plugins, just by updating **`composer.json`** file.&#x20;

#### Install Composer on your system

Choose an option depending on what your system is <https://getcomposer.org/download/> and install it.

#### Project install

Go to your local install root, run your terminal there, and run the next command

```
composer install
```

It will add a new **`vendor`** folder to your install root, and add some dependencies in it. It will also update Kirby and some plugins to the required versions. Learn more at <https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies>

After that run command

```
composer update
```

It will update everything to match the versions in **`composer.json`** file. Learn more at <https://getcomposer.org/doc/01-basic-usage.md#updating-dependencies-to-their-latest-versions>

And that's about it.&#x20;


# Administration panel

The place where you will spend most of your time is organized so you get to anything fast.

<figure><img src="/files/MaraW2JYnvMWLqtL5pmK" alt=""><figcaption><p>Main administration panel screen</p></figcaption></figure>

### Managing pages

A new page is created by adding a new Draft page and choosing the desired template

<figure><img src="/files/UqSH7pzVG9O7j7NGSrqt" alt=""><figcaption><p>New page draft</p></figcaption></figure>

#### Page status

For every page important option is a page status.

<figure><img src="/files/XXKN6vEZS6HtMw1dMSfN" alt=""><figcaption><p>Page status</p></figcaption></figure>


# Translating panel

Yes, you can translate Zero One panel!

From Zero One version 5, the panel can be translated to any language Kirby have.&#x20;

{% hint style="warning" %}
Note that you can use only panel languages that Kirby supports.&#x20;
{% endhint %}

At the moment Zero One have English, German, French and Netherlands language.&#x20;

### How to translate panel?

Go to **`site/plugins/zero-one/languages/`** folder and you will see Zero One language files.&#x20;

#### Improving Zero One translations&#x20;

You can just edit the content of those files, it is easy to understand.&#x20;

#### **Adding a new language**&#x20;

You should duplicate one of those files and rename it to your language code. After that you can change language strings in that file. Your new language file will be automatically loaded.&#x20;

{% hint style="info" %}
If you translate to new language you can send it to us, and we will integrate it by default in the new Zero One version. There is an appreciation prize!
{% endhint %}


# Site options

### Site options contain

* Site Brand Settings
* Navbar options
* Header options
* Shop options
* Social links options
* Footer and copyright options
* Page transitions
* Cookie consent options
* Caching options
* SEO global options
* Translatable site labels
* And more

Everything is straightforward and well commented on and you shouldn't have any problems there.

Maybe just a few notes:

### Site Name

The first thing you must do is change the Site name. The site name is displayed in the SEO Meta titles, and footer copyright.&#x20;

<figure><img src="/files/AbC5qrBSC0jEtqWLUbc5" alt="Website name"><figcaption><p>Website name</p></figcaption></figure>

Just click on it and change it to your website name.&#x20;

### Site Author

Beware that the Site Author serves as a backup if the article doesn't have the Author selected. So, if you have the Site Author field empty you can have an error when trying to view the Article page.

Also, make sure to add your email to the Email field. The contact form will send messages to that email.

<div align="left"><figure><img src="/files/vG7G4PufsyI0cTf7xzgE" alt="Brand settings"><figcaption><p>Brand settings</p></figcaption></figure></div>

### Navbar

There are many options for the navbar, make sure to check them all out.

<figure><img src="/files/AzWAvluMVuMxA0WgpNj7" alt="Navbar settings"><figcaption><p>Navbar settings</p></figcaption></figure>

#### Mobile navigation settings

![Mobile navigation settings](/files/oy1JdBLyQosVqb7gkDKj)

#### Top bar options

<figure><img src="/files/skdvZ2AnwTmUOblLp8MM" alt="Top bar and transparent navbar settings"><figcaption><p>Top bar and transparent navbar settings</p></figcaption></figure>

### Header

The header also has many options, note that if you add a header background image it will show up on every page. But you have header options on individual pages that can override these.

<figure><img src="/files/CLgBop68D6EoTm7N568w" alt="Header options"><figcaption><p>Header options</p></figcaption></figure>

### Projects cover image

Set the size for the project cover image

<figure><img src="/files/XIhOWVr5boA0aH7HWDpe" alt=""><figcaption><p>Projects cover size</p></figcaption></figure>

### Shop options

Set various shop options.

<figure><img src="/files/a4hVE09K5nLVXfZkHUxF" alt="Shop options"><figcaption><p>Shop options</p></figcaption></figure>

### Social links

**If you choose links** -- your "social menu" can also become ordinary navigation.&#x20;

**If you choose icons** -- You MUST enter Platform names right as they are, to be converted to icons.&#x20;

<div align="left"><img src="/files/upwdPhqTuuHv3CTiXky7" alt=""></div>

### Footer

Make sure to test all options the footer has. It is possible to create almost any footer layout.

There are two approaches to footer creation, choose what suits you best.

![Footer Builder](/files/gUztMZv9OSWrdAhZYgpV)

### Performance settings

Turn on/off scripts cachebusting.

### Misc Settings

Enable typed text script for the Typed text block, and enable Syntax highlighting for Code block.

### Page transitions

This option adds smooth page transitions without a browser refresh.

### Media settings

This option influences what files you can select in the file select fields. Search through only page files or site-wide.&#x20;


# SEO options

### Site options

First, check out and set up Site SEO options.

<figure><img src="/files/pGHRA6FLoRNazyYbDgdz" alt=""><figcaption><p>Site SEO options</p></figcaption></figure>

### Page options

Every page has its own set of SEO options

<div align="left"><img src="/files/1ZAJwOw0YrpmktXDsGUw" alt="Page SEO options"></div>

### Sitemap

Zero One generates its own sitemap file, and you can see the sitemap at `yourwebsite.com/sitemap.xml`. Each page has its own option under the SEO tab to include or exclude it from the sitemap. Sitemap supports multilingual websites, images, and videos.

### Robots.txt

Also,[ Kirby 3 Robots.txt](https://github.com/bnomei/kirby3-robots-txt) plugin is integrated, as you can see at `yourwebsite.com/robots.txt`.&#x20;

**The further behavior of the robots.txt file is controlled in the Kirby config.php file.**

### Meta information

We took great care to include all possible metadata on every page, and most of them are automatically generated. You can check it out by looking at the source code of every page.


# Multi-language

Zero One is multi-language ready, and actually, in config.php it is set to `'languages' => true`. With English as the main language. And serving it as site root as a base. So, every `.txt` file in `content` folder has `.en.txt` at the end.&#x20;

{% hint style="warning" %}
Have in mind that Site Settings are also translatable, which means that you can have different settings per language.&#x20;
{% endhint %}

### If English is your website default language

And you want to add more languages, just go to Kirby Settings -> Languages, add a new language and start translating your content. Everything will work as expected.&#x20;

See also:

* <https://getkirby.com/docs/guide/languages/introduction#adding-languages__via-the-panel>
* <https://getkirby.com/docs/guide/languages/translating-content#panel-users>

### If English is NOT your website default language

Go to Kirby Settings -> Languages, and delete English as a default language. Add your language as the default language. That's it, you can start working.&#x20;

There is just one thing. If you want your default language to be at domain root, you will have to go to `zero-one/site/languages/[yourlanguageextension].php`, open it with a text editor and

```markup
# Change this
'url' => NULL

# Into this
'url' => '/'
```

When saved, your language will be at domain/folder root.

### Languages detect support

From version 2.1.0 support for automatic language detection exist in Zero One.&#x20;

You just have to add to **`config.php`** next option:

```
'languages.detect' => true,
```

{% hint style="warning" %}
If you are using multi-domain ([separate domain for language](https://getkirby.com/docs/guide/languages#a-separate-domain-for-each-language)), language detect can't work, so please turn it off. You can remove whole language detect code from config file.
{% endhint %}

### RTL support

{% hint style="info" %}
Theme Styler by default doesn't support RTL language, small code changes are needed for that to work. **Contact us for help with that.**&#x20;
{% endhint %}

Zero One supports RTL (right-to-left) languages.&#x20;

**But website styling must be done only by** [**LESS/CSS styling**](https://www.one.thezero.club/guide/theme-styling/less-css-setup)**.**&#x20;

But to enable support on the front-end you'll have to [override](https://www.one.thezero.club/guide/theme-extending) `site/plugins/zero-one/snippets/header.php` and instead of

```markup
<?= css(['assets/app/dist/css/uikit.app.min.css']) ?>
```

Add

```markup
<?= css(['assets/app/dist/css/uikit.app-rtl.min.css']) ?>
```

And when you compile CSS files <https://www.one.thezero.club/guide/theme-styling/less-css-setup#compile> instead of `pnpm compile` you'll have to use `pnpm compile-rtl`.

Learn more at <https://getuikit.com/docs/rtl>.

Also, check out RTL enabling in Kirby docs <https://getkirby.com/docs/guide/languages/supporting-RTL-languages>


# Theme styling

The front-end of Zero One is based on UIkit, in our opinion the best CSS/JS framework that exists.

The Zero One theme has an in-built Theme styler. And it is not just a simple styler, it is actually a stylesheet compiler, which means, it compiles all LESS/CSS into one minified CSS file. Which adds greatly to website speed.&#x20;

### Turn the styling ON/OFF

It is important to understand this option.&#x20;

When you save your style options and refresh any front-end website page in that moment styles compiling happened. And it will take up to 5-10 seconds. If something is wrong with your input, an error will arise, so then just check have you added in input something strange.

{% hint style="warning" %}
**But remember one thing, when you finish styling and you are happy with how it looks, and styles are compiled, turn it off.** Why turn it off? Because it will compile every time you refresh any page, and slow your website.
{% endhint %}

<div align="left"><figure><img src="/files/4njLrvx8oKxPp5FxA6AT" alt=""><figcaption></figcaption></figure></div>

### Styles

You can change the feel of the whole website just by changing these options. Add shadows or rounded borders to website elements.

<figure><img src="/files/5dDXMf0KnHOh29YjE5zS" alt=""><figcaption></figcaption></figure>

### Main site colors

It can't get easier than this. :sunglasses: Choose your colors and completely change the look.

* **Text Color** is used for the main content text
* **Emphasis Color** is used for headlines and emphasis elements
* **Text Muted Color** is used for muted text and text meta elements
* **Muted Background** color is used for a muted background and some muted elements. For text on a muted background, the main Text Color is used.
* **Primary Background** color is used for a primary background and some primary elements. For text on a primary background, the main Inverse Color is used.
* **Secondary Background** color is used for a secondary background and some secondary elements. For text on a secondary background, the main Inverse Color is used.
* **Inverse Color** is used for content on the primary/secondary background, for content on dark backgrounds, and you can call it in many custom elements.

Only HEX colors are allowed at the moment.

<figure><img src="/files/VmscIpYPRGIjof2gclU2" alt=""><figcaption></figcaption></figure>

### Navbar & Offcanvas

Change the navbar and offcanvas height, style, and colors.

<figure><img src="/files/n5up18ODvkyX2DlfWemP" alt=""><figcaption></figcaption></figure>

### Buttons

Fine-grain offcanvas appearance.

Button style and button border have two options each, and by combining those options, you can create 9 different sets of buttons. **From version 4.5.0, it's possible to customize the colors of every button type.**

<figure><img src="/files/Zwvd50AxIxRUadiyWQF7" alt=""><figcaption></figcaption></figure>

### Typography

We don't want to narrow your options. Use any font provider you like. Use Google, Adobe, FontSpace, or any other fonts. You can use that URL option for even your self-hosted fonts.&#x20;

Just make sure when adding **Font Family names,** you follow the rules, just as we noted.

Check out the small video preview on how to add new Google Fonts <https://www.one.thezero.club/guide/tricks/adding-google-fonts>

<figure><img src="/files/uc6VZIcS9eDOWOWrTpyG" alt=""><figcaption></figcaption></figure>

### Breakpoints

You can customize the breakpoints to suit your requirements.

<figure><img src="/files/gxhtFtcuDJAU7JLYYvqD" alt=""><figcaption></figcaption></figure>

### Custom code

On the bottom, there are also input fields for adding custom CSS code, or other custom code, such as Analytics, Tag manager code, custom JS code, and even URLs, or whatever.&#x20;

<figure><img src="/files/JGQWsoby7CSV27Dxi5yN" alt=""><figcaption></figcaption></figure>

### Advanced

If you intend to extend Zero One further from the built-in functions, you should also check out the advanced Less/CSS setup. Even if you are not going to do it, it is worth checking to understand how everything works. Especially because you can customize Zero One further.


# Less/CSS setup

Advanced setup for complete control over styling.

If you want complete control over styling then follow this through.

{% hint style="danger" %}
**NOTICE:** If you compiled a CSS stylesheet using an in-built Theme Styler, when you compile with this approach you will overwrite that stylesheet. You can keep Theme Styler turned off if this approach suits you better.
{% endhint %}

Front-end is based on [LESS/CSS](http://lesscss.org/). For easy customization, use included build process, change desired variables, compile, and you have brand new CSS stylesheets that follow your design preferences.

By changing variables only you can completely transform the look and feel. You can completely control fonts, colors, global margins, and choose from various sets of theme button styles. Also, you can easily change the look of every other element, and don't worry you don't need to know LESS/CSS, if you know CSS it will be enough. The code examples will help you understand what to do.

{% hint style="info" %}
Even if you are a beginner and you are doing this for the first time, don't worry it's easy, just follow the instructions.&#x20;
{% endhint %}

### Prepare the environment

1. Install [Node.js](https://nodejs.org/en/) on your system. Go with the version recommended for most users if unsure.
2. Install pnpm on your system with following command in your terminal `npm install -g pnpm`
3. If you are on Windows we suggest installing also Git <https://git-scm.com/> and use Git Bash terminal. Install it as Git suggests by default.

### Compile

Go to folder `assets/app/` folder and **run your terminal**. Or run your terminal and go to that folder, if you prefer. If you installed Git Bash and didn't change the default installation right-click in the folder will give you the option for Git Bash in the folder.

1. In your terminal run `pnpm install` command. It will install all the required scripts. It will add a new folder `node_modules` with scripts.&#x20;
2. When it's finished run `pnpm compile` command. It will compile again everything.
3. After it is finished you can run `pnpm watch` command, leave the terminal open, and go to change Less variables. It will automatically compile every time you save any Less file belonging to the Zero One theme.&#x20;

To compile UIkit files yourself, use the included build scripts, and remember the following commands:

```bash
# Run once to install all dependencies
pnpm install

# Compile all source files including your theme
pnpm compile

# Watch files and compile automatically every time a file changes
pnpm watch
```

To understand the file structure and process further you can go to <https://getuikit.com/docs/installation>.

Now, with your terminal open, and `pnpm watch` is running, let's change some variables.


# Changing Less variables

Now, while your terminal is open and `pnpm watch` the command is running let's go to `assets/app/custom/` folder. That folder contains all Zero One theme style files.&#x20;

**To understand how it works:**

All files in `assets/app/custom/` folder override and extend core Uikit files in `assets/app/src/less/` folder and are compiled as CSS files into `assets/app/dist/css/` folder.&#x20;

You can learn more in-depth if you like at <https://getuikit.com/docs/less>.&#x20;

### Global variables (variables.less) file

Locate the `assets/app/custom/elements/variables.less` and open it with your favorite code editor or text editor.&#x20;

Every variable you see there is a global variable, and change many things.&#x20;

### Change fonts

Font variables are very straightforward, just change them as you wish.&#x20;

If you want to add custom self-hosted fonts and want a clean setup you can do it like this <https://www.one.thezero.club/guide/theme-extending/self-hosted-fonts>

### Colors, backgrounds, margins, etc.

Everything is very straightforward and it will be easy for you to completely change the theme looks.

Remember, every time you save `variables.css` file new CSS theme file will be generated. It takes 5 - 10 seconds. And you can check changes by refreshing the localhost website in the browser.&#x20;

### Buttons

Well, the buttons are a bit different. But also easy. You will see this:

```css
//
// Buttons
//

@global-button-style:                           creative; // default, creative
@global-button-border-style:                    default; // default, round
```

Both of those variables have only two options, and those are obvious. Test it and see.&#x20;

Try this, it is a smooth rounded button

```css
//
// Buttons
//

@global-button-style:                           default; // default, creative
@global-button-border-style:                    round; // default, round
```


# app.less file

The file that contains custom classes.

This is the main theme file and it lies in the root of `assets/app/custom` folder. This file contains all the custom classes we made for Zero One, and all of those classes begin with `tm-` prefix.

Everything you write to this file will overwrite the individual elements' code.&#x20;


# Customizing elements

Of course, you can keep on customizing elements further if you want.&#x20;

But, before that, familiarize yourself better with [UIkit](https://getuikit.com/).&#x20;

Folder `assets/app/custom/elements/` contains files with all UI elements. Almost every file contains some code examples that will help you get a grasp of what is happening in there, and how to customize per your needs.&#x20;

To do it properly, you should also open UIkit source files in parallel `assets/app/src/less/components/` to see exactly what are you overwriting.


# Helpful classes

Helpful classes you can use inside Kirby textarea or Kirby Editor.

### Button

You can convert any link in `Kirby markdown` to the button with these classes

| Classes to add                                   | Button style.                              |
| ------------------------------------------------ | ------------------------------------------ |
| `.uk-button .uk-button-default`                  | Default color                              |
| `.uk-button .uk-button-primary`                  | Primary color                              |
| `.uk-button .uk-button-secondary`                | Secondary color                            |
| `.uk.button .uk-button-danger`                   | Indicates a dangerous or negative action.  |
| `.uk-button .uk-button-text`                     | Applies an alternative, typographic style. |
| `.uk-button .uk-button-default .uk-button-large` | Make button larger                         |
| `.uk-button .uk-button-default .uk-button-small` | Make button smaller                        |

### Margin

Many useful classes, check <https://getuikit.com/docs/margin>

### Padding

Check <https://getuikit.com/docs/padding>

### Align

Useful for images.

| Class              | Description                                                             |
| ------------------ | ----------------------------------------------------------------------- |
| `.uk-align-left`   | Floats the element to the left and creates right and bottom margin.     |
| `.uk-align-right`  | Floats the element to the right and creates the left and bottom margin. |
| `.uk-align-center` | Centers the element and creates the bottom margin.                      |

### Width

| Class                              | Description                                           |
| ---------------------------------- | ----------------------------------------------------- |
| `.uk-width-1-1`                    | Fills 100% of the available width.                    |
| `.uk-width-1-2`                    | The element takes up halves of its parent container.  |
| `.uk-width-1-3` to `.uk-width-2-3` | The element takes up thirds of its parent container.  |
| `.uk-width-1-4` to `.uk-width-3-4` | The element takes up fourths of its parent container. |
| `.uk-width-1-5` to `.uk-width-4-5` | The element takes up fifths of its parent container.  |
| `.uk-width-1-6` to `.uk-width-5-6` | The element takes up sixths of its parent container.  |

### Height

| Class                                                                           | Description                                                                                  |
| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| `.uk-height-1-1`                                                                | This class applies a height of 100%. This only works if the parent element has a set height. |
| <p><code>.uk-height-small</code> </p><p><code>.uk-height-max-small</code></p>   | These classes apply a height or max-height of *150px*.                                       |
| <p><code>.uk-height-medium</code> </p><p><code>.uk-height-max-medium</code></p> | These classes apply a height or max-height of *300px*.                                       |
| <p><code>.uk-height-large</code> </p><p><code>.uk-height-max-large</code></p>   | These classes apply a height or max-height of *450px*.                                       |

### Utility

Also, many useful classes can be found at <https://getuikit.com/docs/utility>

### Tricks

You can see some examples of how to use these classes at

* <https://www.one.thezero.club/guide/tricks/kirbytext-link-tag-to-button>
* <https://www.one.thezero.club/guide/tricks/tricks-with-image-classes>


# Page types

Short preview of Zero One theme page types (templates).&#x20;

### Home

The homepage has Page Builder and no header options. So there is just a header and footer, and you create content in-between with Zero One Page Builder.

{% embed url="<https://www.thezero.club/demo/one/>" %}

### Blog

The blog lists its subpages/articles in the date hierarchy. It has header options, and many classic blog-related options like categories, tags, sidebar, etc.&#x20;

{% embed url="<https://www.thezero.club/demo/one/journal>" %}

### Article

Articles are Blog template subpages. Content is ruled by [Kirby Editor](https://github.com/getkirby/editor) and there are fine-grain options.

{% embed url="<https://www.thezero.club/demo/one/journal/tips-for-camera-protection-while-travelling>" %}

### Work

The Work (Portfolio) template is listing its subpages/projects. It has header options and many classic portfolio-related options. There are two types of layouts to choose from.

{% embed url="<https://www.thezero.club/demo/one/work>" %}

### Project

Project templates have header options, specific project infoboxes, and Page Builder.&#x20;

{% embed url="<https://www.thezero.club/demo/one/work/boxed-water-is-better>" %}

### Shop

Shop template page, to list your products. Many options avaliable.

{% embed url="<https://www.thezero.club/demo/one/shop>" %}

### Product

Products are shop template subpages.

{% embed url="<https://www.thezero.club/demo/one/shop/modern-leisure-chair>" %}

### Layout Builder

Layout Builder is a magical layout system with inner blocks powering infinite creative possibilities.

{% embed url="<https://www.thezero.club/demo/one/builders/layout-builder>" %}

### ~~Page Builder~~

{% hint style="danger" %}
From Zero One version 5 [Page Builder is deprecated](https://www.one.thezero.club/guide/old-page-builder-deprecation).
{% endhint %}

### Default page

The default page template has header options, an optional sidebar, and Kirby Blocks for main content.&#x20;

{% embed url="<https://zero-one.test/privacy-policy>" %}

### Contact

The contact page has header options, an optional contact form, and several content options.&#x20;

{% embed url="<https://www.thezero.club/demo/one/contact>" %}

### Redirect

The redirect template is just that - redirect. Although it has additional options the main purpose is redirect function. It can be very useful when you want to list some external page to the menu, or anywhere else.&#x20;

<figure><img src="/files/LLK8IhwgSmpAsNdayAFg" alt=""><figcaption><p>Redirect template options</p></figcaption></figure>

### Search

The search template name says everything.&#x20;

{% embed url="<https://www.thezero.club/demo/one/search>" %}

### Error

There is also a custom error page.&#x20;

{% embed url="<https://www.thezero.club/demo/one/error>" %}


# Page options

Every page has its set of options.

You can choose whether the page will have a submenu visible, whether its navbar should be transparent, customize its navbar subpages dropdown, and fine-grain its header appearance.

<figure><img src="/files/DFtLZYNm9oGunmN8lxcb" alt=""><figcaption><p>Page options</p></figcaption></figure>


# Blog

You can change the name and URL of the blog page without any issue whatsoever.

### Blog and article options contain:

* Optional article and blog sidebar
* Various article archives options (categories, tags..)
* Article authors
* Feature an article
* Related articles
* And more

{% hint style="info" %}
**RSS feed (from version 5.1.0):** just add .rss on your blog URL and that's your RSS URL.
{% endhint %}

### Articles

You must create categories in blog options, and then select them in individual articles.

<figure><img src="/files/5GbnzcJYsKEzAKYwFus9" alt="Blog posts list"><figcaption><p>Blog posts list</p></figcaption></figure>

### Blog options

You must create categories in blog options, and then select them in individual articles.&#x20;

<figure><img src="/files/KOacD1qhOKvonhFDz93V" alt=""><figcaption><p>Blog options</p></figcaption></figure>

### Date format

You can format the date in any way you like.&#x20;

Learn more about date formatting <https://code.tutsplus.com/tutorials/working-with-date-and-time-in-php--cms-31768>

### Related articles

In individual articles, there is an option to choose related posts yourself. It is optional. If you don't choose the integrated [Kirby 3 Similar](https://github.com/texnixe/kirby3-similar) plugin will do its job and select them for you.

### Comments option

Learn more in the next section.


# Comments

### Comments options

Comments are controlled on your blog page in the Comments Tab. You can choose from two options: **Embed** third-party comments, and you can choose **None** if you don't want comments on your website.&#x20;

### Embed third-party comments

This option is pretty straightforward, just add the embed comments code you get from Disqus or your preferred provider, and add them to the code area. In the Site Settings Labels Tab, you can customize the comments header text.

<div align="left"><img src="/files/1nBFQZBV3pTtg6f5Rzr5" alt=""></div>


# Article

This is how the article page looks in the panel.&#x20;

<figure><img src="/files/0AWWQNiHDjdCNOLMTvpf" alt=""><figcaption></figcaption></figure>

### Related articles

In individual articles, there is an option to choose related posts yourself. It is optional. If you don't choose the integrated [Kirby 3 Similar](https://github.com/texnixe/kirby3-similar) plugin will do its job and select them for you.


# Work (Portfolio)

You can change the name and URL of the Work page without any issue whatsoever.

### Work/Projects page options

You can change the number of projects per page, choose from several display styles, and change page width.

<figure><img src="/files/2Bv2dHTGzXvknYKOlFSt" alt=""><figcaption><p>Work page settings</p></figcaption></figure>

**You can also fine-grain custom cover image size.** You can do that in the **Site Settings** tab. Note that those options will influence the crop options in an individual projects. Selecting a fixed ratio can help you have neat image sizes.

### Project cover crop

To crop the project cover click on the cover image (or go to SEO & Files tab) to get to the image settings, and set the the focal point somewhere on the image.&#x20;

<div align="left"><img src="/files/YKBfQYr9bXqZsZpdEz6A" alt=""></div>


# Project page

This how the project page looks like. Add project info, tags, cover, and create project content using Layout Builder.&#x20;

<figure><img src="/files/wl3sglCYrcpMkB6Q90yu" alt=""><figcaption><p>Project page</p></figcaption></figure>


# Shop

From [version 4.3.0](https://www.one.thezero.club/changelog#4.3.0-24.02.2022) Zero One have a shop integrated.&#x20;

{% hint style="warning" %}
Many shop and product options are in the Site Settings.&#x20;
{% endhint %}

{% hint style="info" %}
You can have an infinite number of Shop pages. This is very useful if you have more brands, or if you want to use Shop pages as categories.&#x20;
{% endhint %}

### A Zero One shop can be:

* Simple product catalog with custom button links
* Snipcart full feature e-commerce

<figure><img src="/files/qs8mMFi4vamQsmzSuOWi" alt=""><figcaption><p>Products display</p></figcaption></figure>

![Shop page settings](/files/EIW3dca9ZLn0VecNVil6)

![Product page](/files/TUPK8pbAR7tLPAm09FQ8)

Now, let's explain how to use Snipcart.


# Snipcart

### Introduction

After testing all available options for Kirby CMS e-commerce integration, we chose [Snipcart](https://snipcart.com/) as the best among them, by far.&#x20;

**The main reasons are:**

1. Many payment gateways + custom payment gateway integration if needed
2. Advanced tax support
3. Advanced shipping support with the most popular providers of automation support
4. Advanced invoicing support
5. Advanced regional and currency settings
6. Multilanguage and multicurrency support
7. Advanced email support with abandoned carts recovery campaigns
8. Digital products support
9. Subscriptions support, although for now in beta, and only available for Stripe payment gateway
10. It is free to start, with no expensive subscription

Also, a very important thing is that [Snipcart](https://snipcart.com/) developing team is very active, not just in the development part, but also in the support. In many ways, they share a similar philosophy as Kirby.&#x20;

### Create Snipcart account

Of course, the first thing is to create a Snipcart account <https://app.snipcart.com/register>

When you are in, check out how to navigate <https://docs.snipcart.com/v3/dashboard/navigation>

### Configure Snipcart account

The second thing is to configure your account profile.

Learn more here <https://docs.snipcart.com/v3/dashboard/account-configuration>

#### Test vs Live

When developing your shop you should keep it as a test environment.

Learn more about the **Testing** environment at <https://docs.snipcart.com/v3/testing/environment>

And about going **Live** <https://docs.snipcart.com/v3/testing/going-live>

#### Your Snipcart account API

This is the most important thing. To be able to connect your Snipcart account with your Zero One shop you must create your [unique API key](https://app.snipcart.com/dashboard/account/credentials) inside your account.&#x20;

Learn more here <https://docs.snipcart.com/v3/dashboard/account-configuration#3-api-keys>

### Snipcart Store configurations

Now, head to [Store configurations](https://app.snipcart.com/dashboard/account/gateway), where you can setup:

* Payment gateway
* Taxes
* Shipping
* Domains & URLs
* Invoices
* Regional and currency settings&#x20;
* Email templates

Learn more at <https://docs.snipcart.com/v3/dashboard/store-configuration>

### Snipcart Store management

When sales start pouring in Snipcart dashboard will be your command center.

Learn more at <https://docs.snipcart.com/v3/dashboard/store-management>

### Zero One Snipcart Shop setup

The main thing is to go to **Shop Settings** in the **Site Settings tab**, turn on Snipcart, and add your Snipcart API. You can also choose how you like the cart to be displayed and whether the tax is included in the price, or it is added to the price at the checkout. If you have tax at all.

![Shop Snipcart options](/files/xfrVmeU9Dxr0GOXfHQwc)

### Zero One Product Snipcart settings

All that is left is to add a product and choose Snipcart in the Product Type option.&#x20;

![Snipcart product options](/files/TUPK8pbAR7tLPAm09FQ8)

And voila, you are ready to go 🚀


# Layout Builder

Super powerful & flexible

Layout Builder is a magical layout system with inner blocks powering infinite creative possibilities. Based on the new Kirby Layout field, but extended with powerful options and [**our own Column block**](/guide/layout-builder/column-options-block), and with 30+ content blocks, it is the website building tool with really infinite possibilities. Easy for beginners, but super-useful for experienced website designers/developers who will have a great ride exploring all that is possible with this builder.

#### Check out the video preview&#x20;

{% embed url="<https://www.youtube-nocookie.com/embed/rYx6s_MpBxk?si=mDsAgpcue80YxJVu>" %}
Layout Builder preview
{% endembed %}

### Layout Sections

First things first! You can choose among many premade layout sections, with various number and positions of columns ([let us know](/support) if you see we are missing some)

<figure><img src="/files/rQchgIeMtGAnsFWFZsrD" alt=""><figcaption><p>Layout Sections</p></figcaption></figure>

#### Layout Sections options

When you create a Layout Section, the fun begins! Every Layout Section has many options, and you can open them by clicking the Settings icon in the top right corner of the Layout Section

<figure><img src="/files/ci79WC5dtwdYwXP7JHgg" alt=""><figcaption><p>Layout Section Settings Icon</p></figcaption></figure>

#### Layout Section Grid Options

First thing you will see when you option Layout Section settings are Grid Options. These options allow you to fine-grain grid and column behavior.&#x20;

<figure><img src="/files/IO2CU4uZBdTXIUqoIdGs" alt=""><figcaption><p>Layout Section Grid Options</p></figcaption></figure>

#### Layout Section Options

When you click on the Section tab in the Layout Section Settings, you will see Section options. These options rule the background of the grid and columns. You will find out that there are many possibilities: you can change section size, remove padding when needed, customize the background in almost any way you like, and add a cool SVG divider to the top/bottom of the section.&#x20;

<figure><img src="/files/KP6lWnnCXBq8C1SoFrFi" alt=""><figcaption><p>Layout Section Options</p></figcaption></figure>

#### Layout Section Advanced Options

There are also Advanced options where you can add a custom class or ID to a section, change visibility per device size, and add animation to a section.

<figure><img src="/files/26x9sYAngBhCSw9NMGRD" alt=""><figcaption><p>Layout Section Advanced Options</p></figcaption></figure>

Now, when you know the basis of Layout Sections, you are ready to add blocks to columns. Check out the next guide pages.&#x20;


# Column Options block

Give the power to column!

This block gives so much power 🚀&#x20;

You will find it extremely useful for the creation of complex layouts.

<figure><img src="/files/axYyApJTv4uNGKewCGhB" alt=""><figcaption><p>Column Options block</p></figcaption></figure>

Let's see what this block can do. Add this block to some column and double-click it.

### Column Size Options

With this block, you can change the specific column size, width, and height if needed.

<figure><img src="/files/ujbhgfEFTGcHNqBKfqL0" alt=""><figcaption><p>Column Size options</p></figcaption></figure>

### Column Text Options

You can influence the text alignment, size, and other on the column level.

<figure><img src="/files/aIjztuhPF7ic5LYvNbKx" alt=""><figcaption><p>Column Text Options</p></figcaption></figure>

### Column Style Options

You can change the column style to Card, Tile, or create a custom background just for that column

<figure><img src="/files/zPRiFoAS0MewTV0qUj5l" alt=""><figcaption><p>Column Style Options</p></figcaption></figure>

### Column Utility Options

You can also use some useful utilities, change column padding, and column order on the specific device, change the border, and add shadow.

<figure><img src="/files/2A8fdjPRUT1JOwn5kiSH" alt=""><figcaption><p>Column Utility Options</p></figcaption></figure>

### Column Advanced Options

There are also some useful Advanced options. You can add a custom class and ID to the column, change visibility per device size, or add animation to the column.

<figure><img src="/files/shc3DffKt3uAfqPZkEqs" alt=""><figcaption><p>Column Advanced Options</p></figcaption></figure>

{% hint style="danger" %}
**Note that every column can have only one Column Options block.** If you add more than one, only options from the first one will be counted, and the other will be ignored.&#x20;
{% endhint %}

Ok, let's head to the next page and another block.&#x20;


# Subgrid block

Another layout-related block is the Subgrid block. Also, very useful block, when you want to add subcolumns to a column.

<figure><img src="/files/MTCJl6gIecSRs76OaYeD" alt=""><figcaption><p>Subgrid Block</p></figcaption></figure>

### Subgrid Settings

Every Subgrid Section also has its own set of settings.

<figure><img src="/files/Htwy39BLzY8M8t5FgHgb" alt=""><figcaption><p>Subgrid Settings</p></figcaption></figure>

#### Subgrid Section Grid Options

There are additional Grid options for the Subgrid section.

<figure><img src="/files/mjwcCWtGGmencMqBQAFO" alt=""><figcaption><p>Subgrid Section Grid Options</p></figcaption></figure>

#### Subgrid Section Advanced Options

And there are some Advanced options, like custom class and ID, visibility per device size, and animation options.

<figure><img src="/files/DG5rs4kzVAe9xIwlzEKT" alt=""><figcaption><p>Subgrid Section Advanced Options</p></figcaption></figure>

Ok, let's check out the next layout block.


# Card block

Another very useful block - is the Card block.&#x20;

{% hint style="info" %}
In older Zero One versions, the Card block is listed in the Dynamic blocks group.
{% endhint %}

<figure><img src="/files/Gzlw8jW7ljcrnHL6siQm" alt=""><figcaption><p>Card block selection</p></figcaption></figure>

### Card block Content

In the Card block, you just simply add blocks, just as you would in the Layout column, simple.

<figure><img src="/files/SUIHnJr0T4oRcIAYLwOT" alt=""><figcaption><p>Card block content</p></figcaption></figure>

### Card Options

In Card Options you finetune your card style, change size, customize the background, and add the badge if needed.

<figure><img src="/files/oLTHmq2pS1FQULm1D0mA" alt=""><figcaption><p>Card block options</p></figcaption></figure>

### Card Media options

In card media options you can add image that will fit nicely either top or bottom.

<figure><img src="/files/t6IuhyixK1xGM6Bw3jgu" alt=""><figcaption><p>Card block media options</p></figcaption></figure>

You can see some examples of Card block in action on this demo page

{% embed url="<https://www.thezero.club/demo/one/layout-builder/columns-magic>" %}

Ok, we hope it is clear so far, and you learned about layout options. Now we can proceed with the presentation of content blocks.&#x20;


# Text (Writer) block

The most used block, the block for simple text, and more.

<figure><img src="/files/aarHwFN6jO9WNZFjXFS2" alt=""><figcaption></figcaption></figure>

You can copy-paste content to this block, and it will take formatting from the source (if has proper HTML formatting), and it supports paragraph text, headings, links, and more.

### Text options

When you select text you will see many text options you can use

<figure><img src="/files/SuLSiC2RwJpKK75CLhJN" alt=""><figcaption></figcaption></figure>

### Text (Writer) block Settings

This block has additional settings, which you can open by clicking on the Pencil icon in the block options. You can change text alignment, size, and more.

<figure><img src="/files/xmnfxpHCybCtBEVPboYI" alt=""><figcaption></figcaption></figure>

Check out some of the text possibilities on this demo page

{% embed url="<https://www.thezero.club/demo/one/layout-builder/typography>" %}

And that's it, you are ready to create content! Now let's head to the next block.


# Custom Heading block

Although you can create headings with the previous Text block, you will find Custom Heading block useful for some things.&#x20;

<figure><img src="/files/Cc7RQI7Oi9slpWJPXAx8" alt=""><figcaption></figcaption></figure>

### Custom Heading text options

When you select Custom Heading text you will see many options you can use

<figure><img src="/files/UVacMe0Adeb4wiuR19Us" alt=""><figcaption></figcaption></figure>

### Custom Heading Settings

You will find out what is special about the Custom Heading block when you test its settings (click on the pencil icon in block options)

<figure><img src="/files/GOZH3xL4DTAud9chsgCp" alt=""><figcaption></figcaption></figure>

Ok, this was easy. Now we can head to the next block.


# Custom List block

Although the Text block has a list possibility, you will find the Custom List block very useful.&#x20;

<figure><img src="/files/NAUCetvaeiI6E2JKZIbz" alt=""><figcaption><p>Custom List Block</p></figcaption></figure>

### Custom List Settings

With Custom List Settings you can fine-grain your list style, by changing style, color, size...

<figure><img src="/files/05Syq2KnfxD2RSXuNUqK" alt=""><figcaption><p>Custom List Block options</p></figcaption></figure>


# Typed Text block

{% hint style="info" %}
If you want to use this block make sure to turn on the “Type Text” script in the Site Settings (Misc section) options.&#x20;
{% endhint %}

With this block, you can create smooth, typed text animations. A nice way to amaze your website, visitors.&#x20;

<figure><img src="/files/TI7st9t6wd3KjdjkXy6p" alt=""><figcaption><p>Typed Text block</p></figcaption></figure>

To create typed text double-click the block and open its settings.

<figure><img src="/files/HRiIkokWdXOrngnyJz27" alt=""><figcaption></figcaption></figure>

You can see how the effect looks in the Zero One Personal demo&#x20;

{% embed url="<https://www.thezero.club/demo/one-personal/>" %}

Let's go to the next block.


# Quote block

Simple, but always useful block - the Quote block

<figure><img src="/files/r4w67OpcrFQhyCaLY0rW" alt=""><figcaption></figcaption></figure>

There is not much to say about it, just write your stuff.

<figure><img src="/files/5zpt5iwDbdHghkcrktsJ" alt=""><figcaption></figcaption></figure>

And, on to the next one.


# Button block

Always needed, buttons are something every website needs. And Zero One got them in all sizes and various styles.

<figure><img src="/files/OfHT0bykAi6lfuRy0O5Q" alt=""><figcaption><p>Button block</p></figcaption></figure>

### Button block Settings

Set up your button how you need it.

<figure><img src="/files/WfiTwxmxVGZwaZ3uvRMb" alt=""><figcaption><p>Button block settings</p></figcaption></figure>

Easy peasy!&#x20;


# › 30+ more blocks

We are still working on documenting the other 30+ blocks. It just takes time to document them all.

You can see them all in the screenshot below!

<figure><img src="/files/8rGkUj2748u1ADKDJvyg" alt=""><figcaption></figcaption></figure>


# OLD Page Builder deprecation

Unfortunately, OLD Page Builder needed to be deprecated (removed). It has been set for deprecation from August 2022, and we tried to maintain it as long as possible.&#x20;

So, if you have Zero One version older than v4.5.2, and you want to update to Zero One version 5 you must first migrate all your OLD Page Builder pages to Layout Builder.&#x20;

{% hint style="warning" %}
Keep in mind that you can stay on Zero One 4.5.2 version (Kirby 3) as long as you want, and use OLD Page Builder forever if you like. You don't need to update to Zero One version 5 ever, if you don't want to. As long as your server support PHP 8.2 (which can be even 10 years, and more) your Zero One website will be okay.&#x20;
{% endhint %}

### Why did we remove it?

We can't maintain two page builders any more, it is too much additional work. And [Layout Builder](/guide/layout-builder) is much better, much flexible, and has much better performance.&#x20;

**We know it will be a pain for older Zero One users, but we had a choice:**

1. Discontinue Zero One development, and create a new theme
2. Discontinue only OLD Page Builder, but continue Zero One development

We chose the second, in our opinion, better option. It meant more work for us, but it seemed a best thing to do.&#x20;

### How to migrate OLD Page Builder pages?

Unfortunately, there is no automatic solution for that, OLD Page Builder and NEW Layout Builder are too different.&#x20;

#### You must recreate pages manually.&#x20;

What that means? It means, you just create new page using Layout Builder and recreate the same page as the OLD Page Builder page you are recreating. After you create new Layout Builder page you can delete the old page.

{% hint style="warning" %}
Make sure you new Layout Builder page have the same slug (page URL) as your OLD Page Builder page, so your SEO rank stays intact.&#x20;
{% endhint %}

### OLD Page Builder history

When we first started development of Zero One (2019/2020) the Kirby Layout field was not invented yet, and for Page Builder we used [Kirby Builder plugin](https://github.com/TimOetting/kirby-builder). In the months that followed Kirby team decided to integrate Kirby Builder plugin into core, and then [Kirby Blocks field](https://getkirby.com/docs/reference/panel/fields/blocks) is born.&#x20;

So, in [Zero One version 3](https://www.one.thezero.club/changelog#id-3.0.0-20.02.2021) (February 2021) we migrated Kirby Builder plugin to new Kirby Blocks.&#x20;

But soon after that Kirby introduced its [Layout field](https://getkirby.com/docs/reference/panel/fields/layout), so we started working on a new Layout Builder and released it in [Zero One version 4](https://www.one.thezero.club/changelog#id-4.4.0-11.08.2022) (August, 2022). From that moment OLD Page Builder was set for deprecation.

Although OLD Page Builder had some good points, it was doomed from the moment Kirby Layout field is invented. It was not logical to develop it further, Layout field was the new path.&#x20;


# Form Builder

Create powerful forms directly from the Kirby Panel without writing code.

Zero One includes a customized integration of the excellent Form Block Suite plugin created by [Plain Solutions](https://github.com/plain-solutions-gmbh), allowing editors to build forms visually using Kirby blocks.&#x20;

{% hint style="info" %}
**Good news!** Starting with Zero One version 5.5.0, Form Builder is included free of charge. No additional license purchase or activation is required.&#x20;

Users upgrading from older Zero One versions may still find references to the former premium licensing model in older documentation and videos.
{% endhint %}

***

### Main Features

The Form Builder comes packed with a wide range of features:

* Build forms directly from the Kirby Panel.
* Organize form fields visually.
* Use multiple forms on the same page.
* Display and manage submitted requests within the Panel.
* Receive email notifications for new submissions.
* Send confirmation emails to visitors.
* Customize form messages and email templates.
* Export submissions as CSV.
* Protect forms with an integrated honeypot anti-spam system.
* CAPTCHA field: math puzzle, reCAPTCHA (since v6) or hCaptcha (since v6).
* Perform client-side validation without reloading the page.
* Full multilingual support.
* Extend the plugin with custom field types.

{% hint style="info" %}
Most websites can build contact forms, quote request forms, booking inquiries, support forms, newsletter signups, and application forms without any custom development.
{% endhint %}

***

### Creating Your First Form

Form Builder is available as a Kirby block and can be added anywhere blocks are supported.

Simply:

1. Open a page in the Panel.
2. Add a new block.
3. Select **Form Builder**.
4. Add the fields you need.
5. Configure notifications and messages.
6. Save the page.

Your form is immediately ready to receive submissions.

***

### Email Sending

When a visitor submits a form, Form Builder can send email notifications.

By default, outgoing mail uses:

```
no-reply@your-domain.com
```

If you want to specify a custom sender address, add the following to your config:

{% code title="config.your-domain.com.php " %}

```php
return [

    'plain.formblock' => [
        'from_email' => [
            'info@example.com' => 'Your Website'
        ]
    ],

];
```

{% endcode %}

***

### SMTP Configuration

Many hosting providers no longer allow reliable sending through PHP mail.

If emails are not arriving, configure SMTP in Kirby.

We strongly recommend reading:

👉 [SMTP Email Options](/guide/installation/smtp-email-options)

Once SMTP is configured correctly, Form Builder will automatically use Kirby's email system.

***

### Form Builder Configuration

Form Block Suite includes many additional configuration options, including:

* Custom email templates.
* Translation overrides.
* Validation settings.
* Spam protection.
* Dynamic validation.
* Success hooks.
* Custom messages.

For a complete list of available options, see the [plugin documentation on GitHub](https://github.com/plain-solutions-gmbh/kirby-form-block-suite).

***

### Translating Messages

Zero One allows many texts to be configured directly inside the block settings.

For advanced multilingual projects, additional translations can be configured through Kirby's configuration files.

This is particularly useful when creating websites with multiple languages and customized user-facing messages.&#x20;

***

### CAPTCHA Protection

Form Builder includes built-in CAPTCHA protection that can help reduce spam submissions.

All CAPTCHA settings are configured through your Kirby configuration file:

{% code title="config.your-domain.com.php " %}

```php
return [

    'plain.formblock' => [
        'captcha' => [

            // choose one of these:
            // math | hcaptcha | recaptcha_v2 | recaptcha_v3

            'mode' => 'math',

        ]
    ],

];
```

{% endcode %}

#### Available CAPTCHA Modes

**Math CAPTCHA (Default)**

The default option is a simple mathematical challenge that visitors must solve before submitting the form.

{% code title="config.your-domain.com.php " %}

```php
'plain.formblock' => [
    'captcha' => [
        'mode' => 'math',

        'math' => [
            'min' => 1,
            'max' => 90,
        ],
    ],
],
```

{% endcode %}

This option requires no external services and is usually sufficient for smaller websites.

**hCaptcha**

To use hCaptcha, configure your site key and secret key:

{% code title="config.your-domain.com.php " %}

```php
'plain.formblock' => [
    'captcha' => [
        'mode' => 'hcaptcha',

        'hcaptcha' => [
            'sitekey' => 'YOUR_SITE_KEY',
            'secret'  => 'YOUR_SECRET_KEY',
        ],
    ],
],
```

{% endcode %}

**Google reCAPTCHA v2**

{% code title="config.your-domain.com.php " %}

```php
'plain.formblock' => [
    'captcha' => [
        'mode' => 'recaptcha_v2',

        'recaptcha' => [
            'sitekey' => 'YOUR_SITE_KEY',
            'secret'  => 'YOUR_SECRET_KEY',
        ],
    ],
],
```

{% endcode %}

**Google reCAPTCHA v3**

{% code title="config.your-domain.com.php " %}

```php
'plain.formblock' => [
    'captcha' => [
        'mode' => 'recaptcha_v3',

        'recaptcha' => [
            'sitekey' => 'YOUR_SITE_KEY',
            'secret'  => 'YOUR_SECRET_KEY',

            'v3' => [
                'threshold' => 0.5,
                'action' => 'form_submit',
            ],
        ],
    ],
],
```

{% endcode %}

#### Which CAPTCHA Should I Choose?

**Math CAPTCHA**

* No third-party dependencies.
* Simple to configure.
* Default plugin option.

**hCaptcha**

* Privacy-friendly alternative.
* Good spam protection.
* Recommended if you want to avoid Google services.

**reCAPTCHA v2**

* Familiar "I'm not a robot" experience.
* Reliable bot protection.

**reCAPTCHA v3**

* Invisible to users.
* No interaction required.
* Best user experience, but requires Google services.

{% hint style="info" %}
For most Zero One websites, the default Math CAPTCHA is sufficient. If your website receives a large amount of spam, consider switching to hCaptcha or reCAPTCHA.
{% endhint %}

***

### Known Issue: Form Disappears After Submission

On some hosting environments, forms may disappear after submission.

This is typically caused by hosting providers that do not allow symbolic links, which are used by the plugin's dynamic validation system.&#x20;

To disable dynamic validation:

{% code title="config.your-domain.com.php " %}

```php
return [

    'plain.formblock' => [
        'dynamic_validation' => false,
    ],

];
```

{% endcode %}

We recommend adding this option using your [Multi-environment Configuration setup](/guide/installation/config-options#multi-environment-setup-recommended).&#x20;

***

### Recommended Configuration

For most websites, we recommend:

* Configuring SMTP before launching.
* Customizing the sender email address.
* Testing all forms after deployment.
* Keeping dynamic validation enabled unless your hosting environment causes issues.
* Exporting submissions periodically if they are business-critical.

***

### Need More Customization?

Form Builder can be extended with custom field types, templates, validation rules, translations, and hooks.

Advanced users should refer to the [official Form Block Suite documentation](https://github.com/plain-solutions-gmbh/kirby-form-block-suite) for detailed customization examples.


# Built-in SEO Audit

Powerful SEO Audit, and Ready to Boost Your Rankings.

{% hint style="info" %}
In cooperation with [Kirby Tools](https://kirby.tools/) - Premium plugins for Kirby CMS
{% endhint %}

Zero One comes with a fully integrated **SEO Audit** powered by the official [**Kirby SEO Audit**](https://kirby.tools/seo-audit/) plugin — a state‑of‑the‑art analysis engine based on the trusted Yoast SEO v3 framework.

This gives you **professional‑grade SEO insights directly inside your Kirby Panel**, without installing additional plugins, configuring external tools, or relying on third‑party services. Everything works out of the box, beautifully styled and optimized for the Zero One experience.

<figure><img src="/files/lc7DPQSFmlO7UXjFGB3R" alt=""><figcaption></figcaption></figure>

With Zero One, you’re not just getting a theme — you’re getting a built‑in SEO system that helps your website perform better, rank higher, and deliver a better experience to your visitors.


# GDPR support

Privacy‑first features built directly into Zero One.

### Advanced Cookie Consent Management <a href="#advanced-cookie-consent-management" id="advanced-cookie-consent-management"></a>

Zero One includes a powerful, flexible cookie consent system that lets users choose exactly what they want to allow — and blocks everything else until permission is granted.

Supported categories include:

* **Google Analytics**
* **Google Tag Manager**
* **Custom Analytics scripts**
* **Facebook Pixel**
* **Custom Marketing scripts**

Each category can be toggled independently, giving visitors full transparency and control while keeping your site compliant with GDPR requirements.

<figure><img src="/files/DU1VEqHK0MU0DB484Wg3" alt=""><figcaption><p>GDPR settings</p></figcaption></figure>

### Consent Protection for Embedded Media

Third‑party embeds often load cookies and tracking scripts automatically — which is a GDPR risk.

Zero One solves this with **built‑in consent protection** for:

* **Google Maps**
  * You need to add the map code in the HTML block&#x20;
* **YouTube**
  * You need to add video code in the Video block
* **Vimeo**
  * You need to add video code in the Video block
* **Dailymotion**
  * You need to add video code in the Video block

Instead of loading the embed immediately, Zero One displays a clean, branded placeholder explaining that the content requires consent.

Once the user accepts, the embed loads instantly. This ensures your site stays compliant while still offering a smooth user experience.

### Fonts

You can self-host any font with Zero One (by default, Zero One has self-hosted Google fonts), check out the documentation page for that

{% embed url="<https://www.one.thezero.club/guide/theme-extending/self-hosted-fonts>" %}

### Videos

For embedding YouTube videos, use [www.youtube-nocookie.com](http://www.youtube-nocookie.com) in the URL instead of [www.youtube.com](http://www.youtube.com)

<https://www.one.thezero.club/guide/page-builder/page-sections/video-block#youtube-and-vimeo-must-be-embed-url>

Also, you can use self-hosted videos in Zero One without problems.


# AI Support

Zero One includes a built‑in LLMs text file that makes your content AI‑ready out of the box. Additional AI features — such as AI‑assisted writing or automated translation — are available through optional integrations like Kirby Copilot and Kirby Content Translator.

### LLMs.txt Support. <a href="#llms-txt-support" id="llms-txt-support"></a>

**A file that helps AI understand your site.**

Zero One automatically generates a **single** `llms.txt` **file** at the root of your website (`/llms.txt`). This file follows the [**LLMs.txt standard**](https://llmstxt.org/) and acts like a sitemap for AI systems, giving them a clear, structured overview of your site’s public content.

Instead of creating a separate file for every page, Zero One compiles all relevant URLs into one centralized document. This makes it easier for AI tools, crawlers, and automated systems to:

* Discover your content
* Understand your site structure
* Access the right pages for indexing or analysis
* Integrate with AI‑powered workflows

It’s a lightweight, future‑ready feature that prepares your website for the growing ecosystem of AI tools — with zero configuration required.

### Optional Integration: Kirby Copilot. <a href="#optional-integration-kirby-copilot" id="optional-integration-kirby-copilot"></a>

AI‑assisted content generation inside the Panel.

Zero One is fully compatible with the [**Kirby Copilot plugin**](https://kirby.tools/copilot), allowing you to bring AI‑powered writing directly into the Kirby Panel.

With Copilot, you can:

* Generate new content from prompts
* Rewrite or improve existing text
* Adjust tone, length, or clarity
* Brainstorm ideas and variations
* Speed up content creation without leaving the Panel

Zero One’s clean UI ensures Copilot feels native and seamless, giving editors a powerful assistant right where they work.

### Optional Integration: Kirby Content Translator. <a href="#optional-integration-kirby-content-translator" id="optional-integration-kirby-content-translator"></a>

AI‑powered multilingual content creation.

For multilingual sites, Zero One supports optional integration with the [**Kirby Content Translator plugin**](https://kirby.tools/content-translator) — a powerful tool that uses AI to translate your content into multiple languages.

With it, you can:

* Translate entire pages or selected fields
* Maintain consistent tone across languages
* Speed up localization workflows
* Reduce manual translation time and cost

Combined with Zero One’s multilingual structure, this creates a smooth, efficient workflow for global websites.

### Build Smarter With Zero One. <a href="#build-smarter-with-zero-one" id="build-smarter-with-zero-one"></a>

Zero One gives you a future‑ready foundation for AI‑enhanced content creation.

Use the built‑in LLMs text file for automation, or extend your workflow with Copilot and Content Translator for a fully AI‑powered editing experience.

{% hint style="info" %}

#### Need AI-powered content creation or automatic translations directly in the Kirby Panel?&#x20;

We offer professional integration services for Kirby Copilot and Kirby Translation.&#x20;

[Contact us if you're interested](/hire-us).
{% endhint %}


# Tricks

The Zero One theme demo gives a preview of many features, but there are many that are not so obvious. It was just not possible to list them all and not make the demo bloated.&#x20;

So we'll add some tricks (read: not obvious features) in this documentation section that can help you do more with less effort.


# Using icons in the content

You can also easily use UIkit icons in your content. In the Text and Textarea (KirbyText) fields. In Editor, you can use it only in the KirbyText field.

```html
# Just icon
<span uk-icon="icon: check"></span>

# As icon link
<a href="" uk-icon="icon: heart"></a>
```

See all available icons <https://getuikit.com/docs/icon#library>

That's it. 😎


# Kirbytext link tag to button

You can easily convert any link in the Kirbytext markdown field to a button.&#x20;

{% hint style="info" %}
If you are a Kirby beginner first check what is possible with the link tag <https://getkirby.com/docs/reference/text/kirbytags/link>.&#x20;
{% endhint %}

All you have to do is add button classes to the link tag. We listed them here <https://www.one.thezero.club/guide/theme-styling/helpful-classes#button>&#x20;

**Examples:**&#x20;

```markup
# Primary button standard size with link to absolute URL
(link: http://wikipedia.org text: Wikipedia class: uk-button uk-button-primary)

# Secondary button standard size with link to internal subpage
(link: some/page text: Link to page class: uk-button uk-button-secondary)

# Default button large size with link to internal page but opens in new tab
(link: mypage text: Learn more target: _blank class: uk-button uk-button-default uk-button-large)
```


# Tricks with image classes

{% hint style="info" %}
If you are just starting out with Kirby, please first check out what is possible with Kirbytext image tag <https://getkirby.com/docs/reference/text/kirbytags/image>.
{% endhint %}

### Image width

You can use inbuilt width classes to contain image width. See available classes <https://www.one.thezero.club/guide/theme-styling/helpful-classes#width>.

**Examples:**

```markup
# The image will take half of parent container
(image: myawesomepicture.jpg class: uk-width-1-2)

# The image will take quoter of parent container
(image: myawesomepicture.jpg class: uk-width-1-4)
```

### Image align

Also, a very useful class is the align class, see available here <https://www.one.thezero.club/guide/theme-styling/helpful-classes#align>.&#x20;

They are best used when combined with image width classes.&#x20;

#### Example when you want to contain image width to half of the parent container width and align it right:

```
# Half of parent container width, and align right
(image: myawesomepicture.jpg class: uk-width-1-2 uk-align-right)
```

#### Example when you want to add an icon or smaller image and align it center:

```
# Quoter of parent container width, and align center
(image: myawesomepicture.jpg class: uk-width-1-4 uk-align-center)
```

### Margin

Your design often needs some control over margin space, and that is when margin classes comes handy <https://www.one.thezero.club/guide/theme-styling/helpful-classes#margin>.&#x20;

```
# Quoter of parent container width, and align center, with bottom margin
(image: myawesomepicture.jpg class: uk-margin-bottom uk-width-1-4 uk-align-center)
```

{% hint style="info" %}
The same classes you can add to the Editor image class option.
{% endhint %}

### Remove the left or right margin

You can make a negative margin (of -40px) to image with the following classes:

```
# Negative margin left
(image: myawesomepicture.jpg class: uk-container-item-padding-remove-left)

# Negative margin right
(image: myawesomepicture.jpg class: uk-container-item-padding-remove-right)
```


# Adding Google Fonts

Here is a small video preview of how to add Google Fonts.&#x20;

{% hint style="info" %}
This is an older video displaying the older Zero One version with Kirby 3, but is still valid tutorial.
{% endhint %}

{% embed url="<https://youtu.be/kqMzthn9Trw>" %}


# Custom icons

{% hint style="warning" %}
This tutorial works only with an advanced theme styling setup. As described here <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;
{% endhint %}

By default UIkit used for the front-end in the Zero One theme comes with a large set of icons, you can see them all in UIkit documentation[ https://getuikit.com/docs/icon](https://getuikit.com/docs/icon).&#x20;

Some of them are used in the Zero One theme for the social icons, slider & slideshow arrows, search, mobile menu icon, etc. But, many of them are custom, not like UIkit default. Now, we'll show you how to do it yourself.&#x20;

You can overwrite any of the default icons from UIkit and create additional ones.

### Let's change the mobile menu icon <a href="#add-and-overwrite-icons" id="add-and-overwrite-icons"></a>

In Zero One theme files find and go to `/assets/app/custom/icons/` folder. There are already some SVG icons, and these are the ones we added.&#x20;

Default UIkit icon we used for mobile menu button is `menu.svg` (all default UIkit icons can be found at `/assets/app/src/images/icons/` folder).&#x20;

**If you create and add an icon with an existing name**, you will overwrite the default icon of the same name. For example, `/custom/icons/close.svg` would overwrite the default close icon.

**If your icon uses a name that has not been used before**, it will be added as a new icon. For example, `/custom/icons/example.svg` will create a new icon that can be used via `<span uk-icon="example"></span>`.

After you add a custom icon to `/assets/app/custom/icons/` folder you must compile Less/JS again like usual <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;

#### So, here are few menu icons we created already for you.&#x20;

![The software used is Affinity Designer if you wonder.](/files/-M7DnJnl1weVw5oZ7UgI)

We exported every one of them as .svg.&#x20;

**But after exporting you will have to do some SVG code fixing to make it right.**&#x20;

Default menu.svg has this code

{% code title="assets/app/src/images/icons/menu.svg" %}

```markup
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <rect x="2" y="4" width="16" height="1" />
    <rect x="2" y="9" width="16" height="1" />
    <rect x="2" y="14" width="16" height="1" />
</svg>
```

{% endcode %}

But after export, our icon had this code. **The main problem in this exported code is width and height.**

```markup
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g id="Menu-2" serif:id="Menu 2" transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>

```

So after code fixing and cleanup, it looks like this. Now it is ready.

```markup
<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="matrix(1,0,0,1,-23.2642,-1.77636e-15)">
        <g transform="matrix(1,0,0,1,23.2642,1.77636e-15)">
            <rect x="0" y="0" width="20" height="20" style="fill:none;"/>
            <g transform="matrix(0.75,0,0,1,2.5,-0.0300184)">
                <rect x="2" y="4" width="16" height="1"/>
            </g>
            <g transform="matrix(1.00218,0,0,1,-0.0393108,0)">
                <rect x="2" y="9" width="16" height="1"/>
            </g>
            <g transform="matrix(0.75,0,0,1,2.5,0.0300184)">
                <rect x="2" y="14" width="16" height="1"/>
            </g>
        </g>
    </g>
</svg>
```

So, the main code fix of the icon is to set width and height to 20.&#x20;

You can download these menu icons we created below, and try it yourself.

{% file src="/files/-M7DnqMvEHmO4DP7koZG" %}
Three custom menus
{% endfile %}

{% hint style="warning" %}
Remember that after you add a custom icon to `/assets/app/custom/icons/` folder you must compile Less/JS again like usual <https://www.one.thezero.club/guide/theme-styling/less-css-setup>.&#x20;
{% endhint %}


# Theme extending

One of the biggest advantages of Zero One is that you can customize virtually any part of the theme without modifying the original plugin files.

This allows you to adapt the theme to your project's requirements while still being able to update Zero One safely in the future.

Think of it as a WordPress child theme, but with much more flexibility and control.

### Why Use Theme Extending?

A common mistake is to edit files directly inside:

```
site/plugins/zero-one/
```

While this may seem convenient at first, any changes made inside the plugin can be lost during future updates.

With Theme Extending, your custom files live separately from the core theme, making updates much safer and easier.

#### Benefits

* Keep customizations separated from the theme core.
* Update Zero One without losing changes.
* Override only the files you need.
* Build project-specific functionality on top of Zero One.
* Keep your project cleaner and easier to maintain.

{% hint style="info" %}
**Zero One recommendation:** Never modify files inside the Zero One plugin directly unless you are contributing to the theme itself.
{% endhint %}

***

### How Theme Extending Works

Zero One checks whether a file exists inside your `site/theme` directory.

If a matching file is found, Zero One will use that file instead of the original plugin version.

For example:

```
site/theme/snippets/footer.php
```

will override:

```
site/plugins/zero-one/snippets/footer.php
```

The folder structure and filename must match exactly.

***

### Examples

#### Blueprint Override

```
site/theme/blueprints/site.yml
```

overrides

```
site/plugins/zero-one/blueprints/site.yml
```

#### Snippet Override

```
site/theme/snippets/header/navbar.php
```

overrides

```
site/plugins/zero-one/snippets/header/navbar.php
```

#### Template Override

```
site/theme/templates/article.php
```

overrides

```
site/plugins/zero-one/templates/article.php
```

#### Controller Override

```
site/theme/controllers/site.php
```

overrides

```
site/plugins/zero-one/controllers/site.php
```

The same principle applies throughout the entire theme.

***

### How to Create an Override

Creating an override is simple:

#### Step 1

Locate the file you want to customize inside:

```
site/plugins/zero-one/
```

#### Step 2

Copy that file to the equivalent location inside:

```
site/theme/
```

#### Step 3

Preserve the exact folder structure.

For example:

```
site/plugins/zero-one/snippets/footer.php
```

becomes:

```
site/theme/snippets/footer.php
```

#### Step 4

Modify your copied version.

Zero One will automatically use your customized file instead of the original.

***

### Real-World Examples

Theme Extending can be used to:

* Add custom fields to existing blueprints.
* Customize header or footer markup.
* Modify page templates.
* Extend controllers with project-specific logic.
* Add custom schema markup.
* Change navigation structures.
* Adjust image handling and blueprint restrictions.

Many of the customizations mentioned throughout this documentation rely on the Theme Extending system.

***

### Safe Updates

Because your customizations live outside the Zero One plugin directory, you can update the theme without worrying about overwriting project-specific work.

This separation between **theme core** and **project customization** is one of the recommended workflows when building websites with Zero One.

{% hint style="info" %}
Think of `site/plugins/zero-one` as the engine and `site/theme` as your customization layer. Keeping them separate makes upgrades far easier and significantly reduces maintenance headaches.
{% endhint %}


# Contact form extending

{% hint style="info" %}
**IMPORTANT NOTE:** Our free support doesn't cover help with these customisations. Especially because PHP form processing is time-consuming to debug.&#x20;

But, if you need help with the integration of complex forms, you can [**hire us**](https://www.one.thezero.club/hire-us) to do that for you.
{% endhint %}

**Four files rule the contact form:**

1. `site/plugins/zero-one/snippets/contact/form.php` The frontend of the form
2. Controllers:
   * `site/plugins/zero-one/controllers/site.php` The controller used the contact form.
3. Email templates:
   * `site/plugins/zero-one/templates/emails/email.php` Plain text email template
   * `site/plugins/zero-one/templates/emails/email.html.php` HTML email template

**Basic knowledge needed**

Before going further, it is advisable that you have basic knowledge of how PHP contact forms work, and to read through these:

* <https://getkirby.com/docs/cookbook/forms/basic-contact-form> Basic Kirby contact form
* <https://www.one.thezero.club/guide/theme-extending> How to properly extend Zero One

## New form field example

Let's say you want to add a new field "Company" to the form.&#x20;

### Form frontend

* Copy `site/plugins/zero-one/snippets/contact/form.php`&#x20;
* to `site/theme/snippets/contact/form.php` and open it with your code editor
* Also, open <https://getuikit.com/docs/form> page to see what frontend options are available

**Every field must have these attributes:**

* Unique
  * name
  * value
* Optional
  * alert

This new field won't be required, but we will create a new rule for it.

```php
// New company field
<label for="company">
Company
</label>
<input class="uk-input" type="text" id="company" name="company" value="<?= $data['company'] ?? '' ?>">
<?= isset($alert['company']) ? '<span class="uk-text-danger">' . html($alert['company']) . '</span>' : '' ?>
```

### Controller

* Copy `site/plugins/zero-one/controllers/site.php`
* To `site/theme/controllers/site.php`

#### Import data

Now you must add new field data to that controller.&#x20;

```php
// Recieve data from form
$data = [
    'name'  => get('name'),
    'email' => get('email'),
    'text'  => get('text'),
    // New company field data
    'company'  => get('company')
];
```

#### Add rule

Add a new rule for that field.

```php
// Field rules
$rules = [
    'name'  => ['required', 'minlength' => 3],
    'email' => ['required', 'email'],
    'text'  => ['required', 'minlength' => 3, 'maxlength' => 3000],
    // New company field rule
    'company'  => ['minlength' => 3, 'maxlength' => 100]
];
```

#### Alert message for that rule

Add an alert message for that new field.

```php
// Alert messages for the rules
$messages = [
    'name'  => esc($site->labelAlertName()->or('Please enter a valid name')),
    'email' => esc($site->labelAlertEmail()->or('Please enter a valid email address')),
    'text'  => esc($site->labelAlertMessage()->or('Please enter a text between 3 and 3000 characters')),
    // New company field alert message
    'company'  => esc'Please enter a text between 3 and 100 characters'
];
```

#### Export data to email

And lastly, export that data to email.

```php
// Export to email
$kirby->email([
    'template' => 'email',
    'from'     => esc($site->email()),
    'replyTo'  => $data['email'],
    'to'       => esc($site->email()),
    'subject'  => esc($data['name']) . ' ' . esc($site->labelEmailSubject()->or('sent you a message from your contact form')),
    'data'     => [
        'text'   => esc($data['text']),
        'sender' => esc($data['name']),
        // New company field data
        'company' => esc($data['company'])
    ]
]);
```

Now, your new field is ready, the only thing left to do is add that data to the email content.

### Email content

* Copy `site/plugins/zero-one/templates/emails/email.php`
* To `site/theme/templates/emails/email.php`

And

* Copy `site/plugins/zero-one/templates/emails/email.html.php`
* To `site/theme/templates/emails/email.html.php`

Now add new "Company" field content to emails.

```php
// Plain text email (email.php)
Hello Company,

Company: <?= $company ?>

<?= $text ?>

Best regards,
<?= $sender ?>
```

```php
// HTML email (email.html.php)
Hello Company,

<p>Company: <?= $company ?></p>

<p><?= $text ?></p>

<p>Best regards,</p>
<p><?= $sender ?></p>
```

And that's it!

Your new field is connected and ready to go. You can add as many fields as you like.&#x20;


# Self-hosted fonts

The Zero One theme by default has self-hosted fonts. All you have to do is add yours instead.

If you are new to this subject, you can learn more about it:

* Here <https://webdesign.tutsplus.com/tutorials/how-to-self-host-google-fonts--cms-34775>
* Or here (video) <https://teamtreehouse.com/library/selfhosted-webfonts>

### Where?

Custom fonts are located in:

* `assets/css/fonts/` folder. This is where you add your font files.
* `assets/css/fonts.css` file. In this file, you import your fonts.

### Add fonts

Add your fonts in the `assets/css/fonts/` folder.&#x20;

If you have only desktop font versions, you can convert them to web fonts, for example here:

* <https://transfonter.org/> or
* <https://www.fontsquirrel.com/tools/webfont-generator>

### Customize `assets/css/fonts.css` file

{% hint style="info" %}
The `assets/css/fonts.css` file is loaded only if [Fonts URL input](https://www.one.thezero.club/guide/theme-styling#typography) in Site Styling tab is empty.
{% endhint %}

Just change the `assets/css/fonts.css` file to comply with your fonts.&#x20;

```css
// Default assets/css/fonts.css content

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('fonts/Outfit-Light.woff2') format('woff2'),
         url('fonts/Outfit-Light.woff') format('woff'),
         url('fonts/Outfit-Light.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Outfit-Regular.woff2') format('woff2'),
         url('fonts/Outfit-Regular.woff') format('woff'),
         url('fonts/Outfit-Regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Outfit-Bold.woff2') format('woff2'),
         url('fonts/Outfit-Bold.woff') format('woff'),
         url('fonts/Outfit-Bold.ttf') format('truetype');
  }

```

### Set new fonts in the Site Styling tab

The only thing left to do is set your new fonts in the [Site Styling tab](https://www.one.thezero.club/guide/theme-styling) -> [Typography section](https://www.one.thezero.club/guide/theme-styling#typography) and compile a new stylesheet, with your new styles.


# Adding new templates

How to add new templates?

Please, if you haven’t first read this section <https://www.one.thezero.club/guide/theme-extending>

Because Zero One is a theme made as a plugin, you can override every plugin file with the same name and file in the site/theme folder. But it must be in the same folder structure as in the plugin.

#### Let’s say you want to add a new template called “books”:

* **Create a template first**
  * Add a new **`site/theme/blueprints/pages/books.yml`** file for the page blueprint
  * Then add a new **`site/theme/templates/books.php`** file for the template code
* **Include the template in the main pages** (main dashboard, highest level pages)
  * Copy **`site/plugins/zero-one/blueprints/tabs/site-content.yml`** file
  * To site/theme/blueprints/tabs/ folder (create blueprints and tabs folders, of course), so you get **`site/theme/blueprints/tabs/site-content.yml`** file
  * Open the file with the code editor and add the “books” template name in the allowed templates for both Draft templates and Published templates
  * And that’s it! Test it and you will see your new template.
* **Include the template to subpages:**
  * Copy **`site/plugins/zero-one/blueprints/sections/page-draft.yml`** file
  * To **`site/theme/blueprints/sections/`** folder (create folders), to get **`site/theme/blueprints/sections/page-draft.yml`** file
  * Open that new file and add the “books” template to the allowed templates list
  * Do the same with **`site/plugins/zero-one/blueprints/sections/page-published.yml`** file (copy it to, and change it like you did with **page-draft.yml** file)

When you follow this approach, even when you update Zero One to the new version, your changes will be untouched.

For the page template, we suggest you check:

* **`site/plugins/zero-one/blueprints/pages/default.yml`**
* And **`site/plugins/zero-one/templates/default.php`**

And maybe use that template as your base for further extension/customization.


# Adding new Content block (Layout Builder)

How to add new Content block (Layout Builder)?

Content blocks are used in many places, primarily in Layout Builder, but also in Page Builder content blocks (inside the Grid block, for example), in articles, Default template page, and other places.

### Creating new Content block

To add a new Content block you must do the next steps:

1. Add new block blueprint: **site/theme/blueprints/blocks/yourblockname.yml**
2. Add new block snippet: **site/theme/snippets/blocks/yourblockname.php**
3. After that just code that files, to do what you want them to do

### Including new Content block

To include your new block to be available inside the panel:

* If you want to add that block to **Layout Builder**
  * Copy **site/plugins/zero-one/blueprints/sections/layout-builder.yml** to **site/theme/blueprints/sections/layout-builder.yml** and add your block name to the fieldsets blocks list
* If you want to add that block to Content blocks fields throughout the website:
  * Copy **site/plugins/zero-one/blueprints/fields/blockEditor.yml** to **site/theme/blueprints/fields/blockEditor.yml** and add your block name to the fieldsets blocks list
* If you want that block to the Article template
  * Copy **site/plugins/zero-one/blueprints/pages/article.yml** to **site/theme/blueprints/pages/article.yml** and add your block name to the fieldsets blocks list

And that's it. Your custom block will be available. Only, it will have the default simple preview in the panel. If you want to create a better block preview you will have to create a simple plugin for that. Check this [Kirby docs Cookbook recipe](https://getkirby.com/docs/cookbook/panel/custom-block-type) and check **site/plugins/zero-one/index.js** on how we built some previews.


# Page Transitions

This page is dedicated primarily to developers who are extending Zero One.

Zero One has a custom page transitions JavaScript library, which can be turned on in **Site Settings -> Page Transitions (sidebar options)**.&#x20;

It generally works pretty straightforward, rarely have conflicts if you add additional scripts to Zero One, but if you are adding an HTML toggle or clickable element that is not a URL, you should exclude those links from the transition process.

#### Excluding links

Links like modals, toggles, lightboxes, etc. Mostly JavaScript links that behave like toggles should be excluded from the transition process.&#x20;

**You do that by adding `[data-no-transition]` attribute to the link.** For example:

```html
// Modal example from Zero One
<div><a href="#modal-full" data-no-transition uk-search-icon uk-toggle></a></div>
```

We did that everywhere in Zero One where it needs to be added, but when you are extending Zero One and adding your additional templates and code, you should add **`[data-no-transition]` attribute to the link** whenever you want that link to be excluded from the transition process.


# Securing Your Website

Although Kirby is widely regarded as one of the most secure CMS solutions available out of the box, there are still additional measures you can take to make your website even more resilient.

Before applying the recommendations below, we highly recommend reading Kirby's official security guide, which covers server configuration, deployment best practices, authentication, and other important security considerations:

* [Kirby Security Guide](https://getkirby.com/docs/guide/security)

In this section, we'll focus on practical security improvements that can help protect your website beyond the default Kirby installation.

{% hint style="info" %}
**Note:** The examples below require changes to your Kirby `config.php` file. If you're unsure where to place these options, please read our [**Config Options Guide**](https://www.one.thezero.club/guide/installation/config-options) first.
{% endhint %}

***

### Hide Your Kirby Panel URL

One of the easiest and most effective security improvements is to hide the default Kirby Panel URL.

By default, the administration panel is accessible via `/panel`. Since this is common knowledge, automated bots and malicious actors frequently scan websites looking for this endpoint.

While changing the Panel URL does not replace proper authentication and security practices, it significantly reduces unwanted login attempts. It helps obscure the fact that your website is powered by Kirby.

Kirby allows you to move the Panel to a custom URL of your choice. For example:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [
    'panel' => [
        'slug' => 'your-secret-login'
    ],
    
    // The rest of your config options
];
```

{% endcode %}

With this configuration, the Panel would be available at:

```
https://your-domain.com/your-secret-login
```

You can learn more about this option in the official Kirby documentation:

* [Move the Panel to a Different URL](https://getkirby.com/docs/reference/system/options/panel#move-the-panel-to-a-different-url)

{% hint style="info" %}
**Security tip:** Choose a unique and non-obvious Panel URL and avoid using common alternatives such as `/admin`, `/dashboard`, `/login`, or `/cms`.
{% endhint %}

By simply changing the Panel URL, you make your website a less obvious target for automated attacks while maintaining the same functionality and user experience for administrators.

***

### Change the Session Cookie Name

Even after moving your Panel to a custom URL, there is one small detail that can still reveal your website is powered by Kirby.

When a user logs in to the Panel, Kirby creates a session cookie. By default, this cookie contains a Kirby-specific name that can be seen in browser developer tools.

This is not a security vulnerability, but changing the cookie name is an additional hardening measure that helps reduce information disclosure and makes it less obvious which CMS powers your website.

#### Recommended Configuration

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'session' => [
        'cookieName' => 'zeroone_session'
    ],

    // The rest of your config options

];
```

{% endcode %}

You can replace `zeroone_session` with any unique name you prefer.

#### Why Change It?

Most automated attacks start by identifying the technologies used on a website. While changing the session cookie name won't stop a determined attacker, it removes another small clue that your website is running Kirby.

{% hint style="info" %}
Learn more about session options in [official Kirby documentation](https://getkirby.com/docs/reference/system/options/session).
{% endhint %}

***

### Set Unique Content Salt and Cookie Key

Kirby recommends setting secure random values for both the `content.salt` and `cookie.key` options. While your website will work without them, configuring these values improves security and ensures that your installation uses unique cryptographic secrets.

#### Why Is This Important?

Every Kirby website should have its own unique security keys.

Using randomly generated values helps Kirby:

* Protect sensitive data.
* Secure cookies and sessions.
* Prevent attackers from predicting or reusing known values.
* Ensure your installation is unique, even when multiple websites are built from the same starter kit or theme.

Think of these values as secret keys that belong only to your website.

#### Add the Keys to Your Configuration

Once you have generated your values, add them to your Kirby configuration:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'content' => [
        'salt' => 'your-random-content-salt'
    ],

    'cookie' => [
        'key' => 'your-random-cookie-key'
    ],

    // The rest of your config options

];
```

{% endcode %}

#### How to Generate Secure Values

The easiest way to create these values is to use a password manager that includes a password generator. Most modern password managers can generate long, random, and highly secure strings that are perfect for this purpose.

Examples include:

* 1Password
* Bitwarden
* LastPass
* KeePass
* Apple Passwords
* Google Password Manager

Generate two different random strings with a length of at least 32 characters and use them as your `content.salt` and `cookie.key` values.

For example:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'content' => [
        'salt' => '4yA!mN8xq#zK2sLp7VdR9fGt3QwB5hJc'
    ],

    'cookie' => [
        'key' => 'X9rF$wLm2Pq8KzN7tGh4VcY1jDs6AbEe'
    ],

    // The rest of your config options

];
```

{% endcode %}

{% hint style="danger" %}
**Important:** These example values are for demonstration purposes only. Never copy them directly. Always generate your own unique values.
{% endhint %}

#### Do I Need to Change These Values Later?

In most cases, you only need to generate these values once when setting up the website.

However, if you believe your configuration has been exposed or compromised, generating new values is a sensible security measure. Keep in mind that changing security keys may invalidate existing user sessions and cookies.

***

### Harden Authentication Settings

Kirby's authentication system includes a number of options that can help protect your website from unauthorized access. While the default settings are already secure, you may want to make them even stricter depending on your security requirements.

A complete overview of available options can be found in the official Kirby documentation:

* [Kirby Authentication Options](https://getkirby.com/docs/reference/system/options/auth)

#### Limit Failed Login Attempts

One of the most effective ways to reduce the risk of brute-force attacks is to limit how many times a user can enter an incorrect password before being temporarily blocked.

For example:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'auth' => [
        'methods' => ['password'],
        'challenge' => [
            'timeout' => 1800 // 30 minutes
        ]
    ],

    // The rest of your config options

];
```

{% endcode %}

This increases the waiting period after too many failed login attempts, making automated attacks significantly less practical.

#### Passwordless Login

Kirby also supports passwordless authentication methods such as login codes and magic links. Depending on your workflow, these methods can offer an additional security benefit by reducing reliance on traditional passwords.

However, every project has different requirements, so we recommend reviewing the available authentication options and enabling only those that fit your needs.

{% hint style="info" %}
**Security tip:** Even with strong authentication settings, the most important protection is still a unique Panel URL, strong passwords, and secure server configuration. Authentication options should be viewed as an additional layer of security rather than a replacement for good security practices.
{% endhint %}

***

### Disable the Vue Template Compiler

Kirby's Panel includes a Vue template compiler that is primarily intended for advanced plugin development. If you are not actively developing custom Panel plugins that rely on Vue templates at runtime, you can safely disable it.

Disabling the compiler reduces the attack surface of your Kirby installation and follows the security principle of only enabling features that are actually needed.

#### Recommended Configuration

Add the following option to your configuration:

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'panel' => [
        'vue' => [
          'compiler' => false
        ]
     ],

    // The rest of your config options

];
```

{% endcode %}

#### Should I Enable This?

For most Zero One users, the answer is **yes**.

If your project uses only the standard Kirby Panel and Zero One features, disabling the Vue compiler is generally a safe and sensible hardening measure.

If you later install a custom Panel plugin that requires runtime Vue template compilation, you can simply change the option back to:

```php
'panel' => [
    'vue' => [
      'compiler' => true
    ]
 ],
```

{% hint style="info" %}
**Security tip:** As a general rule, disable any feature you don't actively use. A smaller attack surface means fewer opportunities for abuse and a more secure website.
{% endhint %}

***

### Disable Debug Mode in Production

This is probably the single most important configuration check.

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'debug' => false,

];
```

{% endcode %}

When enabled, debug mode may expose stack traces, file paths, configuration details, and other information that is useful during development but should never be visible on a live website.

{% hint style="info" %}
**Recommendation:** Enable debug mode only on localhost and keep it disabled on staging and production environments.
{% endhint %}

***

### Use Strong Passwords

Even with all security measures in place, weak passwords remain one of the most common security risks.

Every Panel user should use a unique and complex password that is not reused on other websites or services.

#### Recommended Best Practices

* Use a password manager.
* Generate long, random passwords.
* Never reuse passwords across multiple websites.
* Avoid predictable combinations such as names, birthdays or company names.
* Enable two-factor authentication if your workflow supports it.

***

### Remove Unused User Accounts

Over time, websites often accumulate old user accounts belonging to former employees, freelancers, or clients.

Every account with Panel access increases the potential attack surface of your website.

#### Regularly Review Users

We recommend periodically reviewing all Panel users and removing accounts that are no longer needed.

Consider removing:

* Former team members.
* Temporary contractor accounts.
* Test accounts created during development.
* Accounts that have not been used for a long time.

{% hint style="info" %}
**Security tip:** If multiple people need access to the Panel, give each person their own account instead of sharing credentials.
{% endhint %}

***

### Keep Kirby, Plugins, and Zero One Updated

Security is not a one-time task. New vulnerabilities are discovered and fixed over time, which is why keeping your website updated is so important.

Whenever possible, keep the following up to date:

* Kirby CMS
* Zero One
* Third-party plugins
* Server software managed by your hosting provider

#### Why Updates Matter

Updates often include:

* Security fixes
* Bug fixes
* Performance improvements
* Compatibility updates

Postponing updates for months or years can leave your website exposed to issues that have already been fixed in newer releases.

***

### Security Is About Layers

There is no single setting that makes a website completely secure. Instead, security is built from multiple layers working together.

By following the recommendations in this guide, you can significantly improve the security of your website:

* Move the Panel to a custom URL.
* Change session cookie name.
* Configure unique `content.salt` and `cookie.key` values.
* Review Kirby's authentication options.
* Disable the Vue template compiler if you don't need it.
* Disable debug mode in production.
* Use strong passwords.
* Remove unused accounts.
* Keep Kirby, Zero One, and plugins updated.

Combined with the recommendations from Kirby's official security documentation and a properly configured server, these measures will help keep your website secure and resilient against common threats.

{% hint style="info" %}
**Security tip:** Security is often about removing unnecessary clues. If visitors and bots don't immediately know which CMS powers your website, you're already reducing your exposure to targeted automated attacks.
{% endhint %}


# Optimizing Your Website

Kirby is already a lightweight and fast CMS, but there are several simple optimizations you can implement to improve loading times, reduce server load, and provide a better experience for visitors.

Before making any changes, remember that performance is affected by many factors, including your hosting provider, images, third-party scripts, and website traffic. The recommendations below focus on the optimizations that usually provide the biggest improvements for Kirby websites.

***

### Enable Kirby Cache

One of the easiest ways to improve performance is to enable [Kirby's caching system](https://getkirby.com/docs/reference/system/options/cache).

Caching allows Kirby to store generated content and reuse it for future visitors, reducing the amount of work your server needs to do for every request.

#### Recommended Configuration

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'cache' => [
        'pages' => true
    ],

    // The rest of your config options

];
```

{% endcode %}

For most websites, enabling page caching can significantly reduce page generation times and improve overall responsiveness.

{% hint style="info" %}
**Recommendation:** Enable caching on all production websites unless you have a specific reason not to.
{% endhint %}

***

### Optimize Thumbnail Quality

Images are often responsible for the majority of a page's loading time.

By slightly lowering the thumbnail quality, you can dramatically reduce image file sizes while maintaining excellent visual quality.

#### Recommended Configuration

{% code title="site/config/config.your-domain.com.php" %}

```php
return [

    'thumbs' => [
        'quality' => 80
    ],

    // The rest of your config options

];
```

{% endcode %}

#### Why 80?

For most websites, a quality setting of `80` provides an excellent balance between image quality and file size.

Visitors typically won't notice any visual difference, but image downloads can be considerably smaller.

{% hint style="info" %}
**Recommendation:** Values between 75 and 85 usually provide the best balance between visual quality and performance.
{% endhint %}

#### Built-in Image Size Limits

Zero One already helps optimize uploaded images by limiting their maximum dimensions through its image blueprints.

By default, uploaded images are automatically resized to fit within:

{% code title="site\plugins\zero-one\blueprints\files\image.yml" %}

```yaml
create:
  width: 2560
  height: 1980
  resize: true
```

{% endcode %}

This prevents unnecessarily large images from being stored and served by your website.

For most projects, these limits provide an excellent balance between quality and performance.

#### Customizing the Image Limits

If your project requires different image dimensions, you can override the default Zero One blueprints using the built-in Theme Override system.

The relevant blueprint files are:

```
site/plugins/zero-one/blueprints/files/image.yml
site/plugins/zero-one/blueprints/files/default.yml
```

Instead of modifying the theme files directly, create overrides as described in the [**Theme Extending Guide**](/guide/theme-extending).

{% hint style="warning" %}
**Important:** Avoid editing files inside the Zero One plugin directly. Customizations made there may be lost during future theme updates.
{% endhint %}

#### Should You Lower the Limits?

For image-heavy websites, reducing the maximum upload dimensions can significantly decrease storage usage and improve performance.

For example:

* Photography portfolios may benefit from larger dimensions.
* Business websites can often use smaller dimensions.
* Blogs and content-focused websites rarely need images larger than 1920px wide.

Always choose dimensions that match your actual design requirements rather than uploading the largest possible files.

#### Built-in Zero One Optimization

Zero One already includes several image optimization features out of the box:

* Uploaded images are automatically resized according to the image blueprint limitations.
* Images are served as modern WebP files by default.
* Kirby's thumbnail system generates appropriately sized image versions instead of serving original files.
* Images are lazy-loaded by default, meaning they are only loaded when they become visible to the visitor.

These optimizations help reduce bandwidth usage, improve page loading times, and lower the amount of data visitors need to download.

Combined with an optimized thumbnail quality setting, they provide an excellent performance foundation without requiring additional plugins or services.

***

### Enable Browser Caching

Browser caching allows visitors to store static assets such as images, fonts, CSS, and JavaScript files locally in their browser.

When users return to your website, these assets can often be loaded directly from their device instead of being downloaded again.

#### Example Apache Configuration

Add the following rules to your `.htaccess` file:

```apache
<IfModule mod_expires.c>

    ExpiresActive On

    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"

    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"

</IfModule>
```

Example Nginx Configuration

```nginx
location ~* \.(jpg|jpeg|png|webp|gif|css|js|woff2)$ {
    expires 30d;
    add_header Cache-Control "public";
}
```

{% hint style="info" %}
**Important:** Browser caching is configured on your server, not in Kirby itself. Contact your hosting provider if you're unsure how to modify these settings.
{% endhint %}

***

### Reduce Third-Party Scripts

Many websites become slower because of external services rather than Kirby itself.

Examples include:

* Analytics tools
* Marketing platforms
* Chat widgets
* Social media embeds
* Tracking scripts

Every additional third-party script adds requests, processing time, and potential delays.

Before adding a new script, ask yourself whether its functionality justifies the performance cost.

{% hint style="info" %}
**Performance tip:** A simple website with fewer external dependencies is often faster than a heavily optimized website loaded with third-party integrations.
{% endhint %}

***

### Use Fast Hosting

A well-optimized website can still feel slow if it's running on poor hosting infrastructure.

When choosing a hosting provider, consider:

* PHP version support
* SSD or NVMe storage
* Server location
* Available resources
* Reputation and reliability

For most Kirby websites, hosting quality has a bigger impact than many advanced optimization techniques.

***

### Regularly Test Your Website

Performance should be monitored over time, especially after adding new features, plugins, or content.

Useful tools include:

* Google PageSpeed Insights
* GTmetrix
* WebPageTest

These tools can help identify bottlenecks and reveal opportunities for further optimization.

***

### Performance Is an Ongoing Process

There is rarely a single setting that makes a website fast. Good performance comes from many small improvements working together.

For the majority of Zero One websites, the biggest gains usually come from:

* Enabling Kirby cache
* Reducing image sizes
* Configuring browser caching
* Limiting third-party scripts
* Using reliable hosting

Combined, these optimizations can dramatically improve loading times and create a faster, more enjoyable experience for your visitors.


# Support

We've worked hard to make Zero One simple, reliable, and easy to use. However, as with any website project, unexpected issues can sometimes happen, whether it's an accidental change, a missing file, or a server configuration problem. If you get stuck, don't worry, we're happy to help.

Before getting started, please make sure your server meets the [Zero One requirements](/guide/installation#requirements). In particular, verify that URL rewriting is enabled, as this is one of the most common setup issues.

If you run into any problems while installing or configuring Zero One, don't hesitate to contact us at [**support@thezero.club**](mailto:support@thezero.club). We're happy to help.

{% hint style="warning" %}
**Response times**

We're a small team and do our best to respond as quickly as possible. Most emails are answered within a few hours, and almost all within 24 hours.

If you don't hear back from us within 48 hours, please get in touch through our social media channels. Occasionally, emails get lost or end up in spam folders. You'll find links to all our social profiles in the Zero One demo footer.
{% endhint %}

### What does free theme support cover?

Free theme support covers bug fixes and helps with theme settings. We can also help you with some minor modifications and guide you in the right direction on how to do it yourself. If you’d like to add new features or change how the theme works, that would fall outside the scope of regular theme support.&#x20;

#### Resources you can turn to for larger and more complex modifications:

* Official Kirby Guide: <https://getkirby.com/docs/guide>
* Kirby Cookbook with examples and tutorials: <https://getkirby.com/docs/cookbook>
* Kirby Casts - video tutorials: <https://videos.getkirby.com/>
* Kirby Reference - everything is there: <https://getkirby.com/docs/reference>
* And of course, the fantastic Kirby community: <https://forum.getkirby.com/>

Also check out [Kirby Plugins](https://getkirby.com/plugins), many fantastic plugins can save you development time. But keep in mind that those are mostly free, consider donating to the author if his/her plugin helps you.

***

### Premium Support Services

Need a helping hand? If you'd rather focus on your content than server setup, we can take care of the technical parts for you.

{% hint style="info" %}

#### Zero One Installation Service

**€59**

We'll install and configure Zero One on your hosting environment so you can start working on your website right away.

Included:

* Zero One installation
* Kirby CMS setup
* Basic configuration
* Verification that everything is running correctly

Simply provide temporary access to your hosting account or server, and we'll handle the rest.
{% endhint %}

{% hint style="info" %}

#### Zero One Update Service

**€59**&#x20;

Want to update to the latest version of Zero One but don't want to risk breaking your website?

We'll safely update your installation and verify that everything continues to work as expected.

Included:

* Update to the latest compatible version of Zero One
* Kirby CMS update (if required)
* Basic testing after the update
* Resolution of minor update-related issues

For heavily customized websites, or very old Zero One versions, we will review the project first and let you know if additional work may be required.
{% endhint %}

***

#### Need More Help?

If you're looking for custom features, design changes, integrations, migrations, or a completely custom website built with Zero One or Kirby CMS, take a look at our [**Hire Us**](/hire-us) services.


# Hire us

Customizations and premium services we can deliver.

{% hint style="warning" %}
At the moment, because of the high workload, we don't accept large/full projects, only small customizations. But if you have a large project and a flexible timeline, you can write to us, and we'll see what we can do.&#x20;
{% endhint %}

If you would like us to create something completely custom for you, here are some examples of what we can do for you:

### Zero One customizations

Need functionality that isn't included in Zero One out of the box? As the creators of Zero One, we can extend, customize, and adapt the Zero One Kirby CMS theme to meet your specific requirements.

Whether you need new page layouts, custom blocks, integrations, advanced search, multilingual improvements, or completely new features, we can build them for you while keeping everything consistent with the Zero One ecosystem.

Services include:

* Custom features and functionality
* New blocks and content sections
* Custom page templates and layouts
* Third-party integrations
* Performance and SEO improvements
* Workflow and editorial enhancements

***

### Create your website with Zero One

**Love Zero One but don't have the time or resources to build the website yourself?** We can help.

As the creators of Zero One, we can design, customize, and build your website using the Zero One Kirby CMS theme as a foundation. Whether you need a company website, portfolio, or a completely custom project, we can adapt Zero One to match your brand and business requirements.

Services include:

* Zero One setup and configuration
* Custom design and branding
* New page templates and layouts
* Custom blocks and content sections
* Integrations and third-party services
* Performance and SEO improvements
* Content migration and launch support

Get all the benefits of Zero One with a website tailored specifically to your needs.

***

### Kirby CMS Website Development

Looking for a professional Kirby CMS agency?

We specialize in designing and building custom websites with Kirby CMS. We create marketing websites, company websites, portfolios, magazines, documentation sites, and other content-driven platforms using one of the most flexible and developer-friendly PHP CMS solutions available.

Services include:

* Custom Kirby CMS development
* Website design and redesign
* Migration from WordPress and other CMS platforms
* Performance and accessibility improvements
* Custom plugins and integrations
* Long-term support

From small business websites to large content-driven platforms, we help teams get the most out of Kirby CMS.

***

{% hint style="info" %}

### Get in touch

If you're interested in Zero One customizations, a website built with Zero One, or a custom Kirby CMS project, we'd love to hear about it.

Contact us at [**info@spiritpixels.com**](mailto:info@spiritpixels.com) to discuss your project and requirements.

**About Spirit Pixels**

Zero One is created and maintained by [Spirit Pixels](https://www.spiritpixels.com/), a web design and development agency specializing in custom websites, digital experiences, and Kirby CMS development.

We are currently redesigning the Spirit Pixels website, so some case studies are not yet published. If you'd like to see examples of our latest work, get in touch, and we'll be happy to share relevant projects.
{% endhint %}


# Changelog

Information about the latest updates of the Zero One Kirby CMS theme.

{% hint style="info" %}
You can always download the latest Zero One theme files from your [Gumroad library](https://gumroad.com/library).
{% endhint %}

{% hint style="warning" %}
Before updating, please make sure you have a backup of your website.&#x20;
{% endhint %}

{% hint style="danger" %}
**NEVER OVERWRITE:**&#x20;

* `content/` (your website content)

**BE CAREFUL WITH:**

* **`site/config/`** folder files. If you made some changes to it.
* **`site/languages/`**&#x66;older files.&#x20;
  {% endhint %}

***

### How to use this changelog?

🟢 Standard Update: Files only.

🟡 Configuration Update: Additional configuration changes required.

🔴 Migration Update: Additional structural changes required.

**For detailed explanations,** [**see the Updating Guide**](/guide/installation/updating)**.**

***

### Update Rule

When updating from an older version:

* Complete all 🔴 Migration Updates in order.
* Follow the instructions from all 🟡 Configuration Updates released after your current version.
* Finally, update to your target version.

#### **Example:**

* Current version: **`5.1.0`**
* Latest version: **`5.4.1`**

**Required Updates:**

1. 🔴 Update to **`5.2.0`** (Migration Update)
2. 🟢 Update to **`5.4.1`** (Standard Update)

**Additional Instructions Required**

Before updating to 5.4.1, also follow:

* 🟡 Configuration Update instructions from **`5.3.0`**
* 🟡 Configuration Update instructions from **`5.4.0`**

**Important**

* 🔴 Migration Updates must be completed in order.
* 🟡 Configuration Updates do not require installing that version, but their instructions must be followed.
* 🟢 Standard Updates can be safely skipped unless they are your target version.

***

### 🟢 5.5.0 - 17.08.2026

**Custom attributes everywhere, improved performance, better SEO, enhanced security, and a smoother editing experience**. This release introduces a highly requested custom attributes system for layouts, columns, subgrids, and blocks, improves panel and style compiler performance, adds Serbian panel translations, and includes numerous SEO, sitemap, documentation, and developer experience improvements.

{% hint style="success" %}

#### Update Type: 🟢 Standard Update

#### Requirements:

Before updating to 5.5.0, make sure you have completed all required 🔴 Migration Updates and followed the instructions from all 🟡 Configuration Updates released after your current version.

**Examples:**

5.4.x\
→ Update directly to 5.5.0\
&#x20;\
5.3.x\
→ Follow 5.4.0 🟡\
→ Update to 5.5.0\
&#x20;\
5.1.x-5.2.x\
→ Complete 5.2.0 🔴\
→ Follow 5.3.0 🟡\
→ Follow 5.4.0 🟡\
→ Update to 5.5.0
{% endhint %}

{% hint style="info" %}

#### **How to update to v5.5.0 from v5.4.x  instructions:**

<mark style="color:green;">**Replace the following files and folders with their equivalents from the new Zero One download:**</mark>

1. **`assets/app` folder**
2. **`assets/js` folder**
3. **`kirby` folder**
4. **`site/plugins` folder** ( ⚠️ If you have installed additional third-party plugins inside `site/plugins`, make sure not to overwrite or delete them)
5. **`site/theme` folder** ( ⚠️ If you have custom modifications inside `site/theme`, review your changes before updating and merge them where necessary)
6. **`composer.json` file**

<mark style="color:green;">**After updating files:**</mark>

* Open the Kirby Panel.
* Go to **Site → Styling**.
* Enable **Style Compiler** and save.
* Visit any frontend page and refresh it.
* Wait a few seconds for the styles to be regenerated.
* Disable **Style Compiler** and save again.
  {% endhint %}

#### What this update brings:

**NEW**

* Custom attributes for layout sections
* Custom attributes for columns
* Custom attributes for subgrids
* Custom attributes for all blocks
* Serbian language for the Kirby Panel
* Navbar xlarge width option

What can you do with new custom attributes? For example, you can create advanced [parallax](https://getuikit.com/docs/parallax) or [sticky](https://getuikit.com/docs/sticky) effects 🚀

**IMPROVED**

* Panel performance
* Line Block
* Video Block
* llms.txt generation
* sitemap.xml generation and performance
* Style compiling process and caching
* SEO meta tags
* SEO schema markup
* Website security
* Documentation

**UPDATED**

* Kirby updated to 5.5.3
* kirby-form-block-suite plugin updated ([Form Builder](/guide/form-builder) is now free thanks to Plain Solutions) 🚀

#### Documentation improvements

The documentation has been significantly expanded and improved, including:

* [Installation & Setup](/guide/installation)
* [Form Builder](/guide/form-builder)
* [Theme Extending](/guide/theme-extending)
* [Changelog](/changelog)
* New Pages
  * [Securing Your Website](/guide/securing-your-website)
  * [Optimizing Your Website](/guide/optimizing-your-website)

***

### 🟢 5.4.1 - 01.06.2026

Smaller (but important) fixes and improvements.

{% hint style="info" %}
**How to update to v5.4.1 from v5.4.0  instructions:**

<mark style="color:green;">**Replace the following files and folders with their equivalents from the new Zero One download:**</mark>

1. **`assets/app` folder**
2. **`kirby` folder**
3. **`site/plugins/zero-one` folder**
4. **`composer.json` file**

<mark style="color:green;">**Also, after you update files, make sure to:**</mark>

Turn on Style Compiler in the Site Styling tab -> Save -> and refresh any frontend page to create new updated website styles. After that, turn off Style Compiler and save again.
{% endhint %}

#### What this update brings:

* NEW Similar page link (Page Options)
* NEW All links are now converted to links, no more Kirby UID links
* NEW Video Block aspect ratio option
* GDPR improvements
* Various small fixes and improvements
* Kirby updated to 5.4.3

### 🟡 5.4.0 - 24.03.2026

Full GDPR support, SEO Audit, full-feature Sitemap, new blocks, and more! 🚀

{% hint style="warning" %}

#### Update Type

🟡 Configuration Update

#### Important:

The instructions in this release must be followed before updating to any newer version.
{% endhint %}

{% hint style="info" %}

**How to update to 5.4.0 instructions:**

<mark style="color:green;">**Replace the following files and folders with their equivalents from the new Zero One download:**</mark>

1. **`assets/app` folder**
2. **`assets/js` folder**
3. **`kirby` folder**
4. **`site/config/config.php` file**
5. **`site/plugins` folder** ( ⚠️ If you added some additional plugins, make sure to skip those)
6. **`composer.json` file**

<mark style="color:green;">**Also, after you update files, make sure to:**</mark>

Turn on Style Compiler in the Site Styling tab -> Save -> and refresh any frontend page to create new updated website styles. After that, turn off Style Compiler and save again.
{% endhint %}

#### What this update brings:

* NEW [GDPR Cookie Consent](https://www.thezero.club/demo/one/features/full-gdpr-support) functionality + Google Maps and YouTube, Vimeo, Dailymotion video protection
* NEW [Built-in SEO Audit](https://www.thezero.club/demo/one/features/seo-audit)! In cooperation with [Kirby Tools](https://kirby.tools/seo-audit/)
* NEW Our own full-featured sitemap!
* NEW Leader content block
* NEW [Tabs content block](https://www.thezero.club/demo/one/layout-builder/tabs)
* NEW Breadcrumb block
* NEW Autogenerated /llms.txt file (see [AI support](https://www.thezero.club/demo/one/features/ai-support))
* NEW Columns option for markdown/textarea field
* NEW Article SEO meta options
* NEW panel translation - Spanish language
* NEW favicon.ico autogeneration
* UIkit updated to version 3.25.13
* Kirby updated to version 5.3.2
* assets/js folder restructured
* Removed Swup page transitions and added new custom page transitions
* Improved animations
* Improved text link animation
* Article author page improved!
  * Now it can show the author's description, website, and social networks from the profile information
* General SEO improved
* General accessibility improved
* Added a more complex content option to the Accordion block
* Added Card footer and card anchor link
* Image block link improved
* New video block options for self-hosted videos
* Countdown block improved
* Description block improved
* Additional button for custom products
* NEW Disable header parallax option
* Layout Builder layouts improved and extended
* Code editor plugin fixed
* Config updated (removed custom language detect and smartypants)
* LESS PHP plugin updated
* REMOVED Contact controller
* REMOVED Kirby3 Feed plugin
* ADDED Kirby SEO Audit plugin

***

### 🟢 5.3.2 - 06.11.2025

Small, but needed update because it fixes one issue:

* Form Block Suite plugin updated to version 5.1.6
  * This update fixes this issue <https://github.com/plain-solutions-gmbh/kirby-form-block-suite/issues/79>
* Kirby updated to version 5.1.3
* Some small fixes

{% hint style="info" %}
**How to update instructions if you already have the Zero One 5.3 version:**

<mark style="color:red;">**On your old install, delete these:**</mark>

1. **`kirby` folder**
2. **`site/plugins/zero-one` folder**&#x20;
3. **`site/plugins/kirby-form-block-suite` folder**&#x20;

<mark style="color:green;">**Add the files from new Zero One version:**</mark>

1. **`kirby` folder**
2. **`site/plugins/zero-one` folder**&#x20;
3. **`site/plugins/kirby-form-block-suite` folder**&#x20;
   {% endhint %}

***

### 🟢 5.3.1 - 09.10.2025

This is a small update that fixes:

* Missing language switch in Site options
* Update Kirby to version 5.1.2

{% hint style="info" %}
**How to update to 5.3.1 instructions:**

<mark style="color:red;">**On your old install, delete these:**</mark>

1. **`kirby` folder**
2. **`site/plugins/zero-one` folder**&#x20;

<mark style="color:green;">**Add the files from new Zero One version:**</mark>

1. **`kirby` folder**
2. **`site/plugins/zero-one` folder**&#x20;

<mark style="color:orange;">**Form Builder config options change:**</mark> if you used Form Builder config options, change the options name from **`microman.formblock`** to **`plain.formblock`.**

<mark style="color:red;">\*</mark><mark style="color:red;">**Reminder**</mark> that you actually don't need this files, but they are available only as an example and starting point for your [config files](/guide/installation/config-options) (Kirby configuration files). But if you have already in your install, and don't update them you will get a PHP error telling you to change **`microman.formblock`** to **`plain.formblock`** in your config files.
{% endhint %}

***

### 🟡 5.3.0 - 25.09.2025

Kirby 5 compatibility update has arrived! 🚀&#x20;

{% hint style="warning" %}

#### Update Type

🟡 Configuration Update

#### Important:

The instructions in this release must be followed before updating to any newer version.
{% endhint %}

{% hint style="info" %}
**How to update to 5.3.0 instructions:**

<mark style="color:red;">**On your old install, delete these:**</mark>

1. **`kirby` folder**
2. **`site/config/config.php` file**
3. **`site/config/config.www.thezero.club.php`** **file**[<mark style="color:red;">**\***</mark>](#user-content-fn-1)[^1]
4. **`site/config/config.localhost.php`** **file**[<mark style="color:red;">**\***</mark>](#user-content-fn-1)[^1]
5. **`site/config/config.zero-one.test.php`** **file**[<mark style="color:red;">**\***</mark>](#user-content-fn-1)[^1]
6. **`site/plugins` folder** ( ⚠️ If you added some additional plugins, make sure to skip those)
7. **`site/theme` folder** ( ⚠️ If you have your additional customizations, make sure to skip those)
8. **`composer.json` file**
9. **`.gitignore`** **file**

<mark style="color:green;">**Add the files from new Zero One version:**</mark>

1. **`kirby` folder**
2. **`site/config/config.php` file**
3. **`site/config/config.www.thezero.club.php`** **file**[<mark style="color:red;">\*</mark>](#user-content-fn-1)[^1]
4. **`site/config/config.localhost.php`** **file**[<mark style="color:red;">\*</mark>](#user-content-fn-1)[^1]
5. **`site/config/config.zero-one.test.php`** **file**[<mark style="color:red;">**\***</mark>](#user-content-fn-1)[^1]
6. **`site/plugins` folder**
7. **`site/theme` folder**
8. **`composer.json` file**
9. **`.gitignore`** **file**

<mark style="color:orange;">**Form Builder config options change:**</mark> if you used Form Builder config options, change the options name from **`microman.formblock`** to **`plain.formblock`.**

<mark style="color:red;">\*</mark><mark style="color:red;">**Reminder**</mark> that you actually don't need this files, but they are available only as an example and starting point for your [config files](/guide/installation/config-options) (Kirby configuration files). But if you have already in your install, and don't update them you will get a PHP error telling you to change **`microman.formblock`** to **`plain.formblock`** in your config files.
{% endhint %}

#### What this update brings:

1. Kirby updated to 5.1.1
   * Check out new Kirby 5 features if you haven't already <https://getkirby.com/releases/5>
2. Improved panel performance
   * We migrated panel translations from PHP to JSON
   * If you create a new translation file now, you just drop it in the site/plugins/zero-one/languages folder, and it works
   * We migrated Zero One panel views to Vue components. Besides better performance, you can now also [disable the Vue template compiler](https://getkirby.com/docs/reference/system/options/panel#disable-the-vue-template-compiler)
   * Layout Builder main blueprint and the Subgrid block blueprint are reverted to YAML files, and now they are overridable again
3. The Dutch language is now available in the panel! 🚀
   * Big thanks to Jan for this 🙏
4. Accessibility is additionally improved
5. Almost all blocks now have Advanced tab options
6. Updated plugins:
   * Code editor
   * Bettersearch
   * Kirby Form Block Suite
   * Less PHP

We stripped out some large features on which we are working on, because work on those have been delaying this update. And we need more time to finish those. So you can expect new update soon.&#x20;

***

### 🟢 5.2.1 - 02.06.2025

This is a small update fixing custom code inputs in the Site Styling tab, for multi-language websites.&#x20;

**If you have already updated to the 5.2.0 version,** you can just remove **`site/plugins/zero-one`** folder and add one from the downloaded files.

**If you haven't updated to the 5.2.0 version,** use the instructions provided for the 5.2.0 version below. 👇

### 🔴 5.2.0 — 29.05.2025

Dear Kirby friends, a new Zero One update has arrived! 🚀

{% hint style="warning" %}

#### Update Type

🔴 Migration Update &#x20;

#### Important

This Migration Update must be completed before updating to any newer version.
{% endhint %}

{% hint style="info" %}
**How to update to 5.2.0 instructions:**

<mark style="color:red;">**On your old install delete these:**</mark>

1. **`assets/app/` folder**
2. **`assets/js/` folder**
3. **`kirby` folder**
4. **`site/plugins` folder** ( ⚠️ If you added some additional plugins make sure to skip those)
5. **`site/config/config.php` file**
6. **`composer.json` file**

<mark style="color:green;">**Add the files from new Zero One version:**</mark>

1. **`assets/app/` folder**
2. **`assets/js/` folder**
3. **`kirby` folder**
4. **`site/config/config.php` file**
5. **`site/plugins` folder**
6. **`composer.json` file**

<mark style="color:green;">**Also, after you update files, make sure to:**</mark>

Turn on Style Compiler in Site Styling tab -> Save -> And refresh any frontend page to create new updated website styles. After that Turn off Style Compiler and save again.
{% endhint %}

{% hint style="danger" %}
**This update has one breaking change that could cause panel errors on some installs.** This is related to the migration of the old Kirby Color plugin field to the new Kirby color field. Although many people won't have this issue, people who used Hex colors for background overlay color will. Unfortunately, we must do this migration now, because the old Kirby Color field plugin will not be compatible with Kirby 5.&#x20;

<mark style="color:green;">But don't worry, the errors are easily fixable, check out the video below this section.</mark>

It can happen only in these fields:

* Site Settings
  * Header Options -> Header background image -> Image overlay color field
  * Footer Options (Old) -> Footer Background -> Image -> Overlay color field
  * Footer Builder (New) -> Layout Section, Column Options Styling options, Card background field
* Layout Builder
  * Section settings -> Custom background overlay
  * Column Options Block -> Style tab -> Background -> Custom
  * Card Block -> Card Options tab -> Background options
* Page Options
  * Header Settings -> Custom Background -> Image overlay color field

<mark style="color:red;">**Below is a video with instructions on how to fix those panel errors ⇣**</mark>
{% endhint %}

{% embed url="<https://youtu.be/YUjSl3exgBE>" %}
Color field migration - Zero One 5.2.0
{% endembed %}

#### The most prominent features and improvements this update brings:

* Panel performance improvements 🚀
* Various styling improvements
* Swup script improvements
* **NEW** Navbar button icon
* Topbar improvements and new options
* Additional options for Heading and Text blocks
* Custom List **NEW** Custom icon option
* **Custom marks for Text and Heading block** 🚀🚀🚀
  * Small text
  * Highlight text
  * Label text
  * Badge text
  * Outline text
  * Gradient text
  * Highlight underline text
* **NEW** Site Styling options for Gradient text and Highlight underline text
* **NEW** options for Slideshow, Image slider and Content slider
  * Animation speed
  * Autoplay interval
  * Pause on hover
* **NEW** Projects title options
* **NEW** Blog option to hide authors
* **NEW** shop option to remove social share
* **NEW** options for Advanced tab for pages: Custom Head, Body and Footer code
* **NEW** options and styling for Custom navigation block
* Sitemap improvements
* Meta information improvements
* **Kirby update to 4.7.2 version**
* **Plugins updated to latest versions**
* <mark style="color:red;">Kirby Color plugin removed</mark>
* <mark style="color:orange;">Migrated all color fields to new Kirby color field</mark>

***

### 🟡 5.1.0 — 20.02.2025

Here we go! New big update has arrived! 🚀

{% hint style="warning" %}

#### Update Type

🟡 Configuration Update

#### Important:

The instructions in this release must be followed before updating to any newer version.
{% endhint %}

{% hint style="info" %}
**How to update instructions:**

<mark style="color:red;">**On your old install, delete these:**</mark>

1. **`assets/app/` folder**
2. **`kirby` folder**
3. **`site/plugins` folder** ( ⚠️ If you added some additional plugins, make sure to skip those)
4. **`site/theme` folder** ( ⚠️ If you have your additional customizations, make sure to skip those, remove old Commentions snippets, and add new Form Builder files)
5. **`composer.json` file**

<mark style="color:green;">**Add the files from the new Zero One version:**</mark>

1. **`assets/app/` folder**
2. **`kirby` folder**
3. **`site/config/formblock_default.json` file**
4. **`site/plugins` folder**
5. **`site/theme` folder**
6. **`composer.json` file**

<mark style="color:green;">**Also make sure to:**</mark>

Turn on Style Compiler in the Site Styling tab -> Save -> And refresh any frontend page to create new updated website styles. After that, turn off Style Compiler and save again.
{% endhint %}

#### The most prominent features of this update:

1. Accessibility improved! Fully compatible with new EU laws ✅
2. Improved responsive images! Your website will be faster on smaller devices, and look better on bigger devices&#x20;
3. Layout Builder performance improvements
4. Various Zero One styles improved
5. Kirby updated to 4.6.1 and some new functionalities used
6. UIkit updated to 3.22.2
7. New demo! 🚀 Check out <https://www.thezero.club/demo/one-event/>
8. **Blog improved:** 🚀
   * New design!
     * <https://www.thezero.club/demo/one/journal>
   * Blog container width option
   * Blog grid columns options
   * Blog classic image size
   * Sidebar width option
   * New article author page!
   * Blog pages now have RSS feed! Just add .rss on your blog page URL
9. **Article improved: 🚀**
   * New Table of contents option
     * <https://www.thezero.club/demo/one/journal/tips-for-camera-protection-while-travelling>
   * Multiple categories are possible now
   * List of already available tags for tags creation
   * Featured posts in the sidebar
10. **Work & Projects improvement:** 🚀
    * New brand option!
      * <https://www.thezero.club/demo/one/work>
11. Shop improved:
    * Shop container width option
12. **New blocks:** 🚀
    1. Featured text block
    2. Countdown block
13. **Blocks improved: 🚀**
    * Button block internal link now supports anchors
    * Image block now has tablet width settings
    * Info block is heavily improved, it can be used as alert note
    * Latest Articles block has filters (category, tags, featured) now!
      * <https://www.thezero.club/demo/one/layout-builder/articles>
    * Fancy Gallery block has many new options
      * <https://www.thezero.club/demo/one/layout-builder/gallery>
    * Featured Products block has filters (category, tags, featured, new) now!
    * Products list block has filters (category, tags, featured, new) now!
    * Featured Projects block has filter (tags) now!
    * Slideshow block have new autoplay options
    * Form Builder various fixes
14. **SEO improved: 🚀**
    * Categories and tags are now indexable!
    * Article meta improved
    * Product meta improved
    * Products now have schema data!
    * Sitemap improved! Video support 🚀
15. Plugins:
    1. Removed Sitemapper plugin
    2. Added Getkirby feed plugin (for the sitemap)
16. New icons from UIkit
17. File templates now have "change" option
18. New custom border radius option in Site Styling
19. Contact form spam security improved 💪
20. German panel language heavily improved thanks to Torsten 🙏
21. Snipcart integration updated

**If you already updated to Zero One version 5** follow the instructions below

### 🟡 5.0.2 -- 09.05.2024

{% hint style="warning" %}

#### Update Type

🟡 Configuration Update&#x20;

#### Important:

The instructions in this release must be followed before updating to any newer version.
{% endhint %}

{% hint style="info" %}
**How to update instructions:**

**On your old install, delete these:**

1. **`site/config/config.php` file** ( ⚠️ if you made changes to this file, make sure to save those, but we suggest using [Multi-environment setup](https://www.one.thezero.club/guide/installation/config-options#multi-environment-setup) for config)
2. **`site/plugins` folder** ( ⚠️ If you added some additional plugins, make sure to skip those)
3. **`site/theme` folder** ( ⚠️ If you have your additional customizations, make sure to skip those, and remove old Commentions snippets, and add new Form Builder files)
4. **`composer.json` file**
5. **`composer.lock` file**

**Add the files from new Zero One version:**

1. **`site/config/config.php` file**
2. **`site/plugins` folder**
3. **`site/theme` folder**
4. **`composer.json` file**
   {% endhint %}

This is a minor update which brings several fixes, and few improvements:

1. PHP Composer support fix
2. Blog, Shop and Work templates fix, so they work properly as a sub-page
3. Desktop sub-menu fix when navbar is positioned on the left
4. Block selection scroll overflow fix
5. [Kirby Autoresize](https://github.com/medienbaecker/kirby-autoresize) plugin removed, Zero One now use [Kirby core function](https://getkirby.com/docs/reference/panel/blueprints/file#optimize-uploaded-images) for that&#x20;
6. Plugin folders renamed:
   1. `kirby-code-editor` folder in `site/plugins` renamed to `code-editor`
   2. `kirby-similar` folder in `site/plugins` renamed to `similar`
7. Kirby Form Block Suite plugin updated to latest version, and made compatibility fixes in `site/theme` folder.&#x20;
8. **NEW block added - a Space Block**. It is a simple but very needed block, it adds vertical space between content elements, when needed

**If you already updated to Zero One version 5** follow the instructions below

### 🟡 5.0.1 -- 17.04.2024

This is a small update fixing one issue that influenced multi-language websites causing site.txt for secondary language can't update changes.&#x20;

**If you already updated to Zero One version 5** you don't need to update everything again, you can just remove the following code from **`site/config/config.php`** file, from line 21

```php
// Kirby Form Block Suite plugin https://github.com/youngcut/kirby-form-block-suite
'ready' => function($kirby) {
  $sender_email = $kirby->site()->email();
  $sender_name = $kirby->site()->title();
  return [
     'microman.formblock' => [
       'from_email' => ["$sender_email" => "$sender_name"],
     ]
  ];
},
```

We also updated the documentation for Form Builder, so please check it out

{% embed url="<https://www.one.thezero.club/guide/form-builder-premium>" %}
Form Builder documentation
{% endembed %}

### 🔴 5.0.0 -- 13.04.2024

And finally! We can't believe this update is finished. But the wait is finally over! And it was worth it 🚀

{% hint style="warning" %}

#### Update Type

🔴 Migration update

#### Important

This Migration Update must be completed before updating to any newer version.
{% endhint %}

{% hint style="danger" %} <mark style="color:red;">**IMPORTANT NOTE:**</mark>**&#x20;This update brings several breaking changes:**

1. [Old Page Builder is removed](/guide/layout-builder/old-page-builder-deprecation) ⚠️ Make sure to migrate all your pages created with Old Page Builder to New Layout Builder before updating to Zero One v5
2. Commentions plugin is removed ⚠️ Because the plugin author stopped development of the plugin, and it is not compatible to Kirby 4. So, at the moment, the only option for comments is Embed comments
3. K3 Image Clip plugin is removed ⚠️ We integrated new Kirby focus crop functionality instead

**We suggest you watch the video below on how to update to Zero One 5.**
{% endhint %}

#### The most prominent features of this update:

1. Kirby 4 compatibility 🚀
2. [NEW Form Builder (Premium)](/guide/form-builder) 🚀
3. [Translatable panel](/guide/administration-panel/translating-panel) + French language panel translation 🚀
4. NEW Language Switch dropdown option
5. NEW Option for SEO Meta title - Remove Site name
6. Image width/height improvements
7. NEW Anchor-only link possibility in Menu Builder
8. Heading improvements using new Slot snippet
9. Many blocks improvements
10. Many code optimisations
11. Some styling improvements
12. Some accessibility improvements

{% embed url="<https://www.youtube-nocookie.com/embed/wjtnRgHxjl8?si=Quf966m5l4WV28H9>" %}
How to update to Zero One 5
{% endembed %}

{% hint style="info" %}

#### How to update?

<mark style="color:red;">**On your old install, delete these:**</mark>

1. <mark style="color:purple;">**`assets/app`**</mark>**&#x20;folder**
2. <mark style="color:purple;">**`assets/css/panel.css`**</mark>**&#x20;file**
3. <mark style="color:purple;">**`kirby`**</mark>**&#x20;folder**
4. <mark style="color:purple;">**`site/config/config.php`**</mark>**&#x20;file** ( ⚠️ if you made changes to this file make sure to save those, but we suggest using [Multi-environment setup](https://www.one.thezero.club/guide/installation/config-options#multi-environment-setup) for config)
5. <mark style="color:purple;">**`site/plugins`**</mark>**&#x20;folder** ( ⚠️ If you added some additional plugins make sure to skip those)
6. <mark style="color:purple;">**`site/theme`**</mark>**&#x20;folder** ( ⚠️ If you have your additional customizations make sure to skip those, and remove old Commentions snippets, and add new Form Builder files)
7. <mark style="color:purple;">**`composer.json`**</mark>**&#x20;file**

<mark style="color:green;">**Add the files from new Zero One version:**</mark>

1. <mark style="color:purple;">**`assets/app`**</mark>**&#x20;folder**
2. <mark style="color:purple;">**`assets/css/panel.css`**</mark>**&#x20;file**
3. <mark style="color:purple;">**`kirby`**</mark>**&#x20;folder**
4. <mark style="color:purple;">**`site/config/config.php`**</mark>**&#x20;file**
5. <mark style="color:purple;">**`site/config/formblock_default_de.json`**</mark>**&#x20;file**
6. <mark style="color:purple;">**`site/config/formblock_default_en.json`**</mark>**&#x20;file**
7. <mark style="color:purple;">**`site/config/formblock_default_fr.json`**</mark>**&#x20;file**
8. <mark style="color:purple;">**`site/plugins`**</mark>**&#x20;folder**
9. <mark style="color:purple;">**`site/theme`**</mark>**&#x20;folder**
10. <mark style="color:purple;">**`composer.json`**</mark>**&#x20;file**
11. <mark style="color:green;">**THIS IS IMPORTANT: After you add all files from new Zero One version, do this**</mark>
    1. Turn on Style Compiler in Site Styling tab -> Save -> And refresh any frontend page to create new updated website styles. After that Turn off Style Compiler and save again.&#x20;
    2. Go to your website root URL and add "resave" so you get **`yourwebsite.com/resave`** URL, press Enter, and let the Zero One update your old content to new features. If your website is installed localy, of course go **`localhost/yourwebsitefolder/resave`** URL. <mark style="color:red;">**Be patient, depending on the number of your pages it can take a while.**</mark> For approximately 50 pages it takes about 1-2 minutes. After it is finished, it will say "Your content is updated!". **After that you should delete `site/plugins/resave` plugin from your installation**.&#x20;
    3. <mark style="color:red;">**If your website is multilanguage than repeat resave process for every language**</mark>, by using this URL structure **`yourwebsite.com/{language-code}/resave`** (example: yourwebsite.com/en/resave, yourwebsite.com/de/resave, etc.).
12. Revisit some settings:
    1. Site Settings and its options, and see some options need configuration. Because we removed Kirby Link Field plugin, and now use inbuilt Kirby Link Field you must **configure right navbar button again**.
    2. Projects header image - we made some improvements so you need to reconfigure header settings there

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then you should update the .htaccess file as well.**</mark>
{% endhint %}

#### What's changed? (Useful for developers)

1. **Changes in&#x20;**<mark style="color:purple;">**assets**</mark>**&#x20;folder**
   1. Changes in assets/app/custom files - various styling improvements
   2. Changes in assets/css/panel.css file - removed Kirby 3 panel styling
2. **Changes in&#x20;**<mark style="color:purple;">**kirby**</mark>**&#x20;folder** - Kirby updated to version 4.2.0
3. **Changes to&#x20;**<mark style="color:purple;">**site/config/config.php**</mark>**&#x20;file ⚠️**
   1. Removed Commentions plugin options
   2. Added Form Builder options
   3. Improved custom CSS stylesheet functioning in multilanguage websites
4. **Changes in&#x20;**<mark style="color:purple;">**site/plugins/**</mark>**&#x20;folder**
   1. <mark style="color:green;">Kirby Robots plugin updated to latest version</mark>
   2. <mark style="color:green;">Kirby Better Search updated to latest version</mark>
   3. <mark style="color:green;">Less PHP updated to latest version</mark>
   4. <mark style="color:red;">Old Table Field plugin removed</mark>, <mark style="color:green;">new</mark> [<mark style="color:green;">Kirby Table Field</mark>](https://github.com/bogdancondorachi/kirby-table-field) <mark style="color:green;">added</mark>
   5. <mark style="color:red;">Kirby Sanitizer plugin removed</mark>
   6. <mark style="color:red;">Kirby Link Field plugin removed</mark> - Now using new Kirby inbuilt Link field
   7. <mark style="color:red;">K3 Image Clip plugin removed</mark> - Now using Kirby inbuilt Kirby focus function
   8. <mark style="color:red;">Commentions plugin removed</mark>
   9. <mark style="color:green;">**Zero One plugin updated to Version 5.0.0**</mark>
   10. <mark style="color:green;">**Added Kirby Form Block Suite plugin -**</mark> NOTE that this is modified version of the original [Kirby Form Block Suite](https://github.com/youngcut/kirby-form-block-suite) plugin
   11. <mark style="color:green;">**Added Resave plugin**</mark> - This is the custom plugin created with the help of Bastian Allgeier. This plugin helps to update your old version Zero One content to new Zero One version.
5. **Changes in&#x20;**<mark style="color:purple;">**site/theme/**</mark>**&#x20;folder**
   1. <mark style="color:red;">Removed Commentions snippets</mark>
   2. <mark style="color:green;">Added Form Builder customisations</mark>

### 🟢 4.5.2 -- 04.10.2023

This minor update fixes some recently discovered Safari browser issues, primarily with background images. From now on, we are adding Safari testing to our regular workflow because they had several strange updates in the last year, and now Safari behaves differently than other browsers.&#x20;

{% hint style="info" %}
**How to update?**

<mark style="color:blue;">**If you already have the Zero One 4.5.0 or higher version then delete:**</mark>

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins/zero-one` folder**&#x20;

<mark style="color:blue;">**and add the same ones from Zero One version 4.5.2**</mark>

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins/zero-one` folder**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then update as noted in the 4.5.0 instructions below.**</mark>
{% endhint %}

#### What does this update bring?

* Besides Safari-related fixes, we also improved the performance of all background images (header, layout section, column, card, megamenu...)
* There is also one **new feature**: To-top button
  * You can turn it on in the Site Settings sidebar options

### 🟡 4.5.1.1 -- 08.08.2023

This is a minor update that brings some important security fixes for Kirby, but it also brings several improvements.&#x20;

{% hint style="info" %}
**How to update?**

<mark style="color:blue;">**If you already have the Zero One 4.5.0 or higher version then delete:**</mark>

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins` folder**&#x20;
  * If you added some additional plugins make sure to skip those.
* **`composer.json` file**
* **htaccess file (if you already added something additional to this file, don't delete it, scroll a little bit down, there is a piece of code you need to add to this file)**

<mark style="color:blue;">**and adding the same ones from Zero One version 4.5.1.1**</mark>

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`composer.json`file**
* **htaccess**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then update as noted in the 4.5.0 instructions below.**</mark>
{% endhint %}

#### Security fix

The Kirby 3.9.6 security fix <https://github.com/getkirby/kirby/releases/tag/3.9.6> is fixed by updating Kirby, but to strengthen it further the code below should be added to htaccess file

```apacheconf
# set security headers in all responses
<IfModule mod_headers.c>

# serve files as plain text if the actual content type is not known
# (hardens against attacks from malicious file uploads)
Header set Content-Type "text/plain" "expr=-z %{CONTENT_TYPE}"
Header set X-Content-Type-Options "nosniff"

</IfModule>
```

#### Zero One improvements

* Few styling improvements for buttons and custom decimal list
* Kirby Robots txt plugin updated to the latest version
* **New feature:** Card block now has an image and link option 🚀&#x20;
  * Now you can create beautiful cards with image top/bottom and link it some other content

### 🟢 4.5.1 -- 19.07.2023

Hi there, here we go! The new update is ready 🥳 Actually, this is only the first part of one big update. And this is the smaller part, but it brings some important fixes and improvements. We didn't want you to wait all the way, and to lower the pressure on us, here it is.&#x20;

{% hint style="info" %}
**How to update?**

<mark style="color:blue;">**If you already have the Zero One 4.5.0 or higher version then delete:**</mark>

* **`assets/app` folder**
  * If you added your fonts or something else to the assets folder, make sure to skip those
* **`kirby` folder**
* **`site/plugins` folder**&#x20;
  * If you added some additional plugins make sure to skip those.
* **`composer.json` file**

<mark style="color:blue;">**and adding the same ones from Zero One version 4.5.1**</mark>&#x20;

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then update as noted in the 4.5.0 instructions below.**</mark>
{% endhint %}

#### What this update brings:

* **Complete PHP 8.2 compatibility in all environments**
* **Kirby updated to 3.9.5**
* Plugins updated:
  * [Kirby 3 Similar](https://github.com/texnixe/kirby3-similar) plugin
  * Sitemapper plugin
* New Style Compiler options, and general styling improvements
  * **You can now fine-grain shadows per element, and add your own shadows** 🚀
  * **You can now change responsive breakpoints** 🚀
  * Offcanvas overlay options
  * Changed LESS files in `assets/app/custom/elements/` folder
    * button.less
    * card.less
    * dotnav.less
    * form.less
    * navbar.less
    * offcanvas.less
    * variables.less
* Blocks selection is improved
  * Change in `assets/css/panel.css` file
* **SEO improvements** 🚀
  * Site SEO settings improved
    * Basic Structured Data (Schema) added, you can turn it on in Site SEO & Files tab
  * Page SEO improved
    * Now when you omit a page from the sitemap “noindex, nofollow” will also be added to that page
* New Email option in Site Settings (in the sidebar), to choose or not to see the sender's IP address
* **Page Options to hide Navbar and Footer** 🚀 Great for landing pages
* **Advanced tab added all pages. Now you can add custom CSS to the page** 🚀
* **Blog, Work, and Shop templates now have the option to add additional content using Layout Builder before or after subpages listing** 🚀
* More layouts added to Layout Builder and Subgrid block 🚀
* Changes to allowed template selection on creation
  * Changed order
  * Now is allowed to create Blog, Work, and Shop as subpages 🚀 Let us know if you bump into some issues when running these templates as subpages
* **Button block now has anchor link as one of the options** 🚀
* Fixes
  * One rarely caused issue was fixed for submenu generation
  * Currency issue in Featured products block
  * Layout section Custom class issue
  * Page Builder Hero block issue
  * Added missing LinkedIn icon to icons list

#### What we are working on:

* Zero One Form Builder
* Panel translatability (if you are one of the file code "explorers" you will see that a fair amount of work is already done 🙂)
* Panel translation to French
* Heavy improvement of the Blog template and Article template
* Heavy improvement of the Work template
* New blocks:
  * Lead block
  * Tab block
  * Features block
  * Timeline/steps block
  * And more
* Various improvements on already included blocks
* Styling improvements
* New demos

### 🟢 4.5.0.2 -- 22.03.2023

This is a small update that brings some fixes, compatibilities, and one cool new feature.

{% hint style="info" %}
**How to update?**

If you already updated to the Zero One 4.5.0 version then delete:

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins` folder**&#x20;
* **`composer.json` file**

**and adding the same ones from Zero One version 4.5.0.2**&#x20;

* **`assets/app` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then update as noted in the 4.5.0 instructions below.**</mark>
{% endhint %}

#### What this update brings

* Kirby updated to 3.9.2
* Compatibility with PHP 8.2 🚀
  * NOTE: if you have errors with 8.2 version make sure to update PHP to the latest version
* Kirby Link Field plugin updated to the latest version
* Less PHP plugin updated to the latest version
* Media index settings
  * There is a new toggle in Site Settings where you can choose what files you can select in image select fields throughout the website. For some users this will be a superb feature 🚀

#### There is also a new demo - Personal website 🚀

You can see it at <https://www.thezero.club/demo/one-personal/>

### 🟢 4.5.0.1 -- 14.02.2023

This is a small update that fixes a few bugs. Now Zero One is bug-free! (to our knowledge)&#x20;

{% hint style="info" %}
**How to update?**

If you already updated to the Zero One 4.5.0 version then delete:

* **`assets/app` folder**
* **`site/plugins/zero-one` folder**&#x20;
* **`composer.json` file**

**and adding the same ones from Zero One version 4.5.0.1**&#x20;

* **`assets/app` folder**
* **`site/plugins/zero-one` folder**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**

<mark style="color:red;">**If you are updating from a version earlier than Zero One 4.5.0 then update as noted in the 4.5.0 instructions below.**</mark>
{% endhint %}

#### What this update brings

* Solves 3 bugs/errors
  * small bug with new hreflang links for multi-language websites
  * image select bug in footer layout builder blocks
  * external source image bug in Image blocks
* UIkit updated to 3.15.24 version
* Added new Mastodon icon

After this update today, in most of the files select fields you will be able to select an image (or video, or audio in specific files) from anywhere on the website, from any page or site on any page and site. 🚀 This feature is something many of you requested.&#x20;

### 🔴 4.5.0 -- 10.02.2023

And finally, this update arrived 🙏 We are sorry it took longer than expected, we wanted to make many improvements and make better organise the old codebase.&#x20;

{% hint style="warning" %}

#### Update Type

🔴 Migration update

#### Important

This Migration Update must be completed before updating to any newer version.
{% endhint %}

{% hint style="warning" %}
**Important note:** although Zero One now uses Kirby 3.9.1 version, it is not yet fully compatible with PHP 8.2, and that's primarily because of [Kirby 3 Similar](https://github.com/texnixe/kirby3-similar) plugin. We expect that to be solved very soon. Also, Kirby dropped support for PHP 7.4 from 3.9 version so make sure to update to PHP 8.0 or 8.1.&#x20;
{% endhint %}

{% hint style="danger" %}
**Breaking changes in this update:**

* Snipcart options are moved from the Shop page to Site Settings. Now is possible to have many infinite numbers of Shop pages and use them as categories.&#x20;
* The products cover image ratio option is moved to Site Settings
* Projects cover image size options are moved to Site Settings
* Dropped support for PHP 7.4
  {% endhint %}

{% hint style="info" %}
**How to update?**

If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders/files in your install:

* **`assets` folder**
  * if you added custom fonts, **just skip the fonts folder and fonts.css file**, but make sure to update all other files, there are many changes to all files
* **`site/plugins` folder**&#x20;
  * some plugins are removed, and some new added, make sure to do this properly
* **`kirby` folder**
* **`site/config/config.php` file**
  * yes, there are some important changes to config this time
* **`composer.json` file**

**and adding the same ones from Zero One version 4.5.0**&#x20;

* **`assets` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`site/config/config.php` file**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**
{% endhint %}

#### What this update brings:

1. UIkit updated to version 3.15.23
2. Getkirby updated to version 3.9.1 🚩
3. **New Main Menu Builder** 🚀 Now you can choose whether the main navigation will be generated from pages structure, or you will create custom navigation with the builder. Also, the builder brings solutions for landing pages and link anchors
4. **Mega menu possibilities** 🚀 Now you can turn your subpages dropdowns to mega menus, customize width and background, similar to what you can do with layout backgrounds.
5. **Icons for menu items** 🚀
6. **Additional icon for right-side navigation** 🚀
7. **Navbar button improvements** 🚀
8. **Products search virtual page** 🚀
9. **Products search block** 🚀
10. **Products list block** 🚀
11. **Better search plugin integrated** 🚀 Now Zero One search works much better
12. **New Audio/Podcast block** 🚀
13. **New Typed (Animated) text block** 🚀
14. **New Syntax Highlighting option for Code block** 🚀
15. **New custom navigation block** 🚀
16. New mobile logo options
17. New dedicated file templates for each file type
18. Added proper hreflang support for multi-language websites
19. Improved categories and tags to support multiple words fully
20. Improved general theme styling, especially for buttons and cards
21. **New button styling options** 🚀 Now you can customize buttons in the panel
22. Panel styling improvements
23. Panel organization improvements
24. Related articles are now slider
25. Related products are now slider
26. Almost all blocks have some improvement, either it is some new option or better code quality
27. Almost every blueprint file was optimized and improved
28. Fixed multilanguage issue with Custom CSS input
29. All plugins updated to the latest versions
30. Removed Kirby 3 Janitor plugin. It has some braking changes, we can't deal now with.
31. Zero One got rebranded, it has a new logo now. 😀

**And to say it again, almost every file has some changes, so make sure to update properly.**&#x20;

### 🟡 4.4.0 -- 11.08.2022

And thank God, this update is finally finished 🙏 It was super difficult in terms of strategy and amount of changes, but also in user experience aspects and testing. That's why it took much longer than expected to complete. But you will love the results! 🚀&#x20;

#### New Layout Builder has arrived! 🚀

Many many new things are possible now, but it is just a starter of what's coming in the next couple of updates.&#x20;

You can see Layout Builder in action at <https://www.thezero.club/demo/one/builders/layout-builder>. Make sure to check out the subpages too, there are some interesting examples of new possibilities!

Learn more in the documentation <https://www.one.thezero.club/guide/layout-builder>

#### New demo

Yeeey, there is a new demo <https://www.thezero.club/demo/one-furniture/>

#### New blocks:

* **Layout Builder specific**
  * Column options! 🚀 You can fine-grain the behaviour of every column!
  * Subgrid
  * Card
  * Content slider
  * Image slider
  * Slideshow
  * Gallery
  * Articles
  * Projects
  * Products
* New Table block! 🚀
* Description list block
* HTML block
* Page links list block! 🚀 Useful when you want to add a list of links automatically and dynamically

#### Improved blocks:

* Heading block! Many new options 🚀
* Text block! Also many new options 🚀
* Image block! Many new great options 🚀 Now you can custom resize every image, and use the new Ratio feature! Great improvement for image sizes and performance, and visual display too!
* Markdown block
* Page Builder Hero and Grid block now have SVG divider option!

#### What else this update brings:

* New blog articles layout! 🚀
* Footer can now be fully created with Layout Builder! 🚀 Super useful!
* Home and Project template pages now have option to switch between old Page Builder and new Layout Builder
* Product pages description now can be created with Layout Builder! 🚀
* Shop now has an additional 4 column grid option
* Select images from Site not only from Page! 🚀 This option is added to many places. For example, when you choose page background image in the selection will be shown images from site (root folder) not only from the page folder.
* Site blueprint is now divided into sections, which are separated files. Very useful if you are making custom Site options and changes to site.yml file.
* composer.json changed (versions)
* Kirby updated to 3.7.3 version
* UIkit updated to 3.15.1 version
  * **Changed files in `assets/app/custom/` folder**
    * elements/card.less
    * elements/dotnav.less
    * elements/offcanvas.less
    * elements/slideshow\.less
    * elements/variables.less
* Commentions plugin updated to 1.0.7 version
* K3 image clip plugin updated to 3.1.0 version
* Kirby3 Janitor plugin updated to 2.16.1 version
* Table field plugin added and integrated

{% hint style="info" %}
**How to update?**

If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders/files in your install:

* **`assets` folder**
* **`site/plugins` folder**
* **`kirby` folder**
* **`composer.json` file**

**and adding the same ones from Zero One version 4.4.0**&#x20;

* **`assets` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**&#x20;
{% endhint %}

{% hint style="warning" %}
Make sure to go through new options, specifically to the Home page, to select the prefered page builder, and to Site Settings footer options to set the prefered footer builder. **And of course to test the new Layout Builder!** 🚀
{% endhint %}

### 🟡 4.3.2 -- 11.05.2022

It seems that we just can't create small updates. 😬 Although you have been active with requests and ideas, so we decided to make you happy. 😎

#### This update brings some cool stuff:

* SVG shape divider for header area ([see video](https://twitter.com/YourZeroBase/status/1516364339606925317?cxt=HHwWisC5xabVmosqAAAA)) 🚀
* Custom cover sizes for Projects, and few more options (Masonry possible too)  🚀
* New options for Site Styling (compiler)
  * Global border width
  * Navbar font options
  * Offcanvas colors and size options
  * Many new typography options
* Snipcart updated to 3.4.0 version with new scripts loader, only when called. Speed boost 🚀
* Many new footer options 🚀
* New custom product fields (checkbox, text, textarea, read-only)
* Articles now support multiple authora (co-authors)&#x20;
* Improved image performance&#x20;
* Various fixes
* Added some examples to Zero One blank demo
* Kirby updated to 3.6.6
* Kirby3 Janitor plugin updated to 2.16.0 version (No more issues)

{% hint style="warning" %}
**Make sure to go through new options in:**

* Site Settings (Header Options, Footer)
* Labels
* Site Styling
* **Header background image in pages now have a switch you must turn on**. Adding that option allowed us to improve many things. For example, now is possible to choose only color without image. But, unfortunate thing is that you must turn on that switch on every page you already had background image for the header.
* Work template

Also, don't forget you can copy paste Page Builder blocks, and even the whole Page Builder pages. 🚀 I see many still forget about this.
{% endhint %}

**If you made some changes to LESS/CSS files:**

* Some code is removed from `assets/app/custom/app.less` and added to `assets/app/custom/elements/projects.less` and `assets/app/custom/elements/products.less`
* New `assets/app/custom/elements/shapedivider.less`
* Modified `assets/app/custom/elements/_import.less` to support that

A reminder that you don't ever need to change Zero One plugin files (`site/plugins/zero-one/`) because you can always overwrite Zero One files using this system <https://www.one.thezero.club/guide/theme-extending>

### 🟢 4.3.1.1 -- 11.04.2022

**PHP 7.4 compatibility fix**

The updated plugin [Kirby3 Janitor](https://github.com/bnomei/kirby3-janitor) caused it. Version 2.15.0 only works with PHP 8.0 and higher.

The issue is reported <https://github.com/bnomei/kirby3-janitor/issues/71>

**SOLUTION:** We reduced Kirby3 Janitor version to 2.13.0

### 🟢 4.3.1 -- 09.04.2022

**Improvements, fixes and new features! 🚀**&#x20;

This update brings:

* PHP 8.1 compatibility
* All images now auto-convert to WebP with fallback to the original, even the background images! 🚀 And you don't have to do anything. 😎 Just update to this version and your website will be more than a double lighter.&#x20;
* Variable products! 🚀 Now your products can have custom options 🥳
* Three image sizes for product images! Not just square anymore
* Product quantity now has cool buttons! 🐱‍🏍
* New Cookie consent option! New inbuilt option for cookie consent. You can choose between popup or modal 🥳
* Gallery content block improved! Thanks to Demlak for this 🙏
* Mobile navigation improved!&#x20;
  * The parent page is now clickable! Thanks to Demlak for this too 🙏
  * Sub sub pages are now supported too!
* Articles sorting in navigations fixed ❗
* Blog sorting fix ❗ We made one error in the previous version, which is now fixed.
* Improved custom code experience in the panel with code-highlighting features
* Kirby updated (and tested) to version [3.6.4](https://github.com/getkirby/kirby/releases/tag/3.6.4)
* Third-party plugins updated and tested
* Getuikit updated (and compatibility changes made) to version 3.13.7
* Snipcart updated to 3.3.3 version

#### What files are changed?

Almost every single file, so no point in writing them.

#### Breaking changes?

We are dropping out the main Zero One demo from the download. But more demos are on the way, which will be of more use.&#x20;

### 🟡 4.3.0 -- 24.02.2022

**And finally! Zero One has e-commerce power!** 🚀&#x20;

It took longer than we expected, but it is better than many anticipated 😎 It is a full feature e-commerce shop, with all power you can expect from the best.&#x20;

And that's not all, there are many improvements too, let's list the most important:

* Updated:
  * Kirby to 3.6.2 version
  * UIkit to 3.11.1 version
  * Kirby plugins to the latest versions
* Improved:
  * Added `translate: false` for styling fields and a few more
  * Latest Articles (Page Builder) now support multiple blogs, you can select now
  * Latest Projects (Page Builder) now support multiple work pages, you can select now
  * The Blog page now has an option to create any date format you like
  * Blog archive pages&#x20;
  * Contact form inputs security
  * SEO meta
  * Mobile navigation
  * And many code optimisations
* New:
  * Full feature [shop](https://www.thezero.club/demo/one/shop)! 🚀 Learn more at <https://www.one.thezero.club/guide/shop-page>
  * [Featured products](https://www.thezero.club/demo/one/page-builder/featured-products-section) Page Builder section

{% hint style="info" %}
**How to update?**

If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders/files in your install:

* **`assets` folder**
* **`site/plugins` folder**
* **`kirby` folder**
* **`composer.json` file**

**and adding the same ones from Zero One version 4.3.0**&#x20;

* **`assets` folder**
* **`kirby` folder**
* **`site/plugins` folder**
* **`composer.json`file**

**and removing the next lines from** `site/config/config.php`

```php
// https://getkirby.com/docs/reference/system/options/date
'date'  => [
    'handler' => 'strftime'
],
```

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh any page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**&#x20;

**Also, go to and fill in new options:**

* Site Settings tab (**NEW OPTIONS**)
* Labels tab (**MANY NEW LABELS**)
* Blog page (**ADD DATE FORMAT**)
  {% endhint %}

### 🟡 4.2.0 -- 12.01.2022

This update brings several important fixes and one long-anticipated feature. 🚀

* Fixes
  * Panel language change error caused by Sitemapper plugin
  * Footer background image issue (Thanks Reto Frei for reporting!)
  * Improved page transitions
* Features
  * **NEW** Navbar transparent options, site-wide and page override (Project and Article also)
  * Editor permissions improved
  * **NEW** Main navigation dropdown page option. Select whether a specific page should have subpages visible in the main navigation. Now you can have multiple Blog or Work pages without issues.

{% hint style="warning" %}
After updating you must go to Blog and Work template pages and in the Page Options tab toggle the new Disallow submenu option.
{% endhint %}

### 🟢 4.1.0.1 -- 11.12.2021

Just a small fix, in Site Settings in Page transitions we missed including the link to documentation page <https://www.one.thezero.club/guide/theme-extending/page-transitions-swup>.

### 🟡 4.1.0 -- 10.12.2021

Kirby 3.6 compatibility and bundle of improvements!

#### In short:

* Kirby updated to 3.6.1.1 and compatibility changes made
  * **FEATURE:** Now you can copy-paste blocks and more than that! 🚀
  * **FEATURE:** Writing experience is improved with new Writer/Text field 🚀
* UIkit updated to 3.9.4
* All plugins are updated
* Cachebuster plugin replaced with [Kirby3 Fingerprint](https://github.com/bnomei/kirby3-fingerprint) plugin
* New maintenance options in the panel.&#x20;
  * **FEATURE:** Now you can clear the pages cache from the panel 🚀
  * **FEATURE:** You can create a website backup from the panel 🚀
* **FEATURE:** New topbar option
* **FEATURE:** New fensy-shmensy page transition effects 🚀
* **FEATURE:** New Site Settings options&#x20;
* General panel improvements &#x20;
* **FEATURE:** Improved custom CSS experience 🚀
* Contact form submit anchor added
* SEO meta improvements
* Many code reorganisations, optimisations and improvements

{% hint style="info" %}
**How to update?**

If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders/files in your install:

* **`assets` folder**
* **`kirby` folder**&#x20;
* **`site/plugins` folder**
* **`site/config/config.php` file**
* **`.htaccess` file**
* **`composer.json` file**

**and adding the same ones from Zero One version 4.1.0**&#x20;

* **`assets` folder**
* **`kirby` folder**&#x20;
* **`site/plugins` folder**
* **`site/config/config.php`file**
* **`.htaccess` file**
* **`composer.json`file**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh some page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**&#x20;
{% endhint %}

### 🟢 4.0.2 -- 06.08.2021

New content blocks, improvements, and updates!

**In short:**

* Kirby updated to 3.5.7.1
* Language switch improvements
* Sticky navbar now has a fixed option
* Table block now supports Html elements
* New content blocks
  * Banner
  * Contact form

If you made changes to LESS/CSS files, and want to manually add new code, these are the changes:

**Added code**

{% code title="assets/app/custom/app.less" %}

```css
/* Language */
.tm-language {
    letter-spacing: 1px;
}

/* Banner */
.tm-banner-overlay {
    position: relative;
    background: @global-background;
    top: -40px;
    left: -20px;
    max-width: 90%;
    padding: 20px;
}
```

{% endcode %}

**Changed code**

{% code title="assets/app/custom/elements/navbar.less" %}

```css
FROM THIS
.hook-navbar-nav-item() {
    position: relative;
    letter-spacing: 1px;
    padding-bottom: 3px;
    
INTO THIS
.hook-navbar-nav-item() {
    position: relative;
    letter-spacing: 1px;
```

{% endcode %}

### 🟢 4.0.1 -- 20.06.2021

This is just a small fix. Email templates were not linked correctly, so the contact form didn't work. If you do not want to download the new version only for this, you can fix it yourself.

Just go to `site/plugins/zero-one/index.php` find line 114 and

```yaml
// CHANGE THIS
'email.html' => __DIR__ . '/templates/emails/email.html.php',
'email' => __DIR__ . '/templates/emails/email.php'

// INTO THIS
'emails/email.html' => __DIR__ . '/templates/emails/email.html.php',
'emails/email' => __DIR__ . '/templates/emails/email.php'
```

### 🔴 4.0.0 -- 14.06.2021

**Here we go! Zero One becomes a Kirby plugin!** 🚀

We completely restructured everything, went through every theme file, made many improvements, and added many new options.&#x20;

#### Here goes the list of notable improvements:

* Page Builder visual and performance improvements
* Improvement of every Page Builder section
* Improvement of every Content blocks block
* New Content blocks
  * Accordion
  * Button
  * Table
* Advanced background options all over the place, in blocks, header, and footer
* Parallax background is possible now
* Grid section has many new options, sub-grid is possible now too
* Hero has a video background option
* The navbar now can have a centered logo and subnav can be styled by your liking
* New navbar links effect (you can choose between old and new effect)
* New header options
* Improved animations in many places
* New styling options, now your website can have shadows or rounded corners on some elements
* Improved buttons
* New Work/Projects options and styling improvements
* Article styling improvement
* New slideshow options
* And many more small fixes and improvements

**But, most importantly Zero One becomes a plugin!** Why is this so great? Because you can overwrite any plugin file by copying it to your theme folder. Change it, extend it, and safely update Zero One to new versions without worry. Your changes will stay untouched. Like a WordPress child theme, but more powerful.

{% hint style="info" %}
**HOW TO UPDATE TO THE 4.0.0 VERSION?**&#x20;

**If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders in your install:**

* **`assets` folder**
* **`kirby` folder**&#x20;
* **`site/plugins` folder**
* **`site/theme` folder**
* **`composer.json`**

**and adding the same ones from Zero One version 4.0.0:**&#x20;

* **`assets` folder**
* **`kirby` folder**&#x20;
* **`site/plugins` folder**
* **`site/theme` folder**
* **`composer.json`**

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh some page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**&#x20;
{% endhint %}

{% hint style="warning" %}
**Note that you will have to go through your website content and fix some things because there are new options in:**

* **Site Settings Tab**
* **Site Styling Tab**
* **Pages header background image**
* **In Page Builder blocks (Hero, Grid, Slideshow\...)**
* **Crop the featured image again in Projects (the size has changed)**
  {% endhint %}

**If you made changes to some theme files, I hope you wrote documentation of your changes and know what those files are.** Because Zero One is a plugin now, every file you leave in `site/theme/` folder will overwrite the same file from `zero-one` plugin. **For example:**  `site/theme/snippets/header.php` will overwrite `site/plugins/zero-one/snippets/header.php` and the same is with any other file. So you can actually update to Zero One version 4.0.0 if you do that properly (leave your changed files in the `site/theme/` folder).

You will see that there are few files left in `site/theme/` folder. They are in `site/theme/snippets/` folder to be exact. Those are files that overwrite Commensions plugin form files, and they are needed to stay there.&#x20;

### 🔴 3.0.0 -- 20.02.2021

**And finally!** We know this update release took longer than expected, but Kirby 3.5 brought extensive changes to many functions Zero One is using. Primarily, we are speaking about the new Kirby Blocks field - Kirby Builder and Kirby Editor plugins in one core field. Also, some plugins we use in Zero One needed compatibility fixes.&#x20;

**Kirby builder migration to Blocks field went smoothly, but there are some issues with Editor plugin migration to Blocks field. The Editor is mostly used in articles, but there is also a Page Builder Editor block.**&#x20;

{% hint style="danger" %}
**Some Editor blocks are gone in the transition:**

* Gallery (we created a new block, but it won't update your old content)
* Table (coming soon)
* Intro (we created a new block, but it won't update your old content)
* Info (we created a new block, but it won't update your old content)

So, wherever you used these blocks you will need to recreate them after the update.&#x20;

**Also, after updating to Zero One 3.0.0, you will need to click on every text block in the Editor and save it again.** Because Kirby doesn't add `<p>` tags in transition. I wrote about that and a few more issues to the Kirby team in the forum <https://forum.getkirby.com/t/editor-to-blocks-lost-features/20483>. Recently, Bastian made an announcement about that subject  <https://forum.getkirby.com/t/the-end-of-the-editor-plugin/21167>

**Remember, if you don't want to update, your website is working perfectly fine, you can always stay on your current Zero One version. It will always work correctly as long as the PHP version is available, which is a decade for sure.**
{% endhint %}

{% hint style="success" %}
We must give big thanks and praise to Bastian and Kirby team for the hard work they invested in Kirby 3.5 version. Also, personally to Bastian, because he checked and updated some things in the Zero One theme himself. He is, besides being a great creator, a great human bei
{% endhint %}

{% hint style="info" %}
**If you haven't made changes to the theme files or installed additional plugins, you can update easily by deleting these old folders in your install, and adding new from Zero One version 3.0.0:**

* **assets folder**
* **kirby folder**&#x20;
* **site/plugins folder**
* **site/theme folder**&#x20;

**After that turn on** [**Style Compiler**](https://www.one.thezero.club/guide/theme-styling) **in site options, refresh some page, and your theme styles will be recreated. Of course, turn off Style Compiler after that.**&#x20;
{% endhint %}

#### We deleted older changelog logs to lighten this page a bit. Keep only the last several years of logs.

[^1]: Read \*Reminder below


# Credits

Many thanks to all the wonderful people that created these masterpieces we mention below.

### Kirby CMS

Zero One started from [Plainkit](https://github.com/getkirby/plainkit), and it was built from scratch.&#x20;

### Front-end framework

&#x20;Front-end is based on [UIkit](https://getuikit.com/), in our opinion, the best CSS/JS framework that exists.&#x20;

### Images

All images used in this theme are free to use from the [unsplash.com](https://unsplash.com/), [pexels.com](https://www.pexels.com/), and [freepik.com](https://www.freepik.com/) platforms.

### Plugins

* [Less PHP](https://github.com/wikimedia/less.php) library maintained by Wikimedia.
* [Kirby Bettersearch](https://github.com/bvdputte/kirby-bettersearch) plugin by Bart Vandeputte.
* [Kirby Code Editor](https://github.com/sylvainjule/kirby-code-editor) plugin by Sylvain Julé.
* [Kirby 3 Fingerprint](https://github.com/bnomei/kirby3-fingerprint) plugin by Bruno Meilick.
* [Kirby Form Block Suite](https://github.com/plain-solutions-gmbh/kirby-form-block-suite) by Plain Solution GmbH.
* [Kirby 3 Robots.txt](https://github.com/bnomei/kirby3-robots-txt) plugin by Bruno Meilick.
* [Kirby SEO Audit](https://kirby.tools/seo-audit/) by Johann Schopplich.
* [Kirby 3 Similar](https://github.com/texnixe/kirby3-similar) plugin by Sonja Broda.
* [Kirby Table Field](https://github.com/bogdancondorachi/kirby-table-field) plugin by Bogdan Condorachi


# Affiliate

If you like the Zero One theme, and you would like to feature it on your website or blog, or promote it in any other way, and earn money along the way, now there is a way to do it.&#x20;

**You can apply on the following page** [**https://gumroad.com/mrfreedom/affiliates**](https://gumroad.com/mrfreedom/affiliates)

### How that works?

In brief:

* You will have to create a Gumroad account
* Add your PayPal data for receiving the money
* And you will get an affiliate link that looks something like this: **[www.gumroad.com/a/1234567](http://www.gumroad.com/a/1234567)**

Note the "/a/" in it. That signifies that this is an affiliate link. You share that link with the world.&#x20;

When a customer clicks that link, their browser is "cookied" for 30 days. If they buy the Zero One theme within 30 days, you are is credited with the sale. The affiliate percentage is 10% of the price. If you have some special sales funnel (website, blog, newsletter, etc) that has significant quality, you can [contact us](mailto:support@thezero.club), and we can discuss raising the affiliate percentage.&#x20;

Payouts are weekly, usually on Friday, and the amount must be higher than $10. So if it is lower than $10 it will be transferred to the next week's payout, and so on, until the $10 mark is passed.


