EOTO Website: Insight into the Implementation with Kirby CMS

We are excited that the new website for EOTO (Each One Teach One) is now live. We have worked on this project for quite some time and would like to give you some insights into our work. From concept to implementation – the design comes from our friends at Starkad, and we realized the website with the powerful Kirby CMS.

Why Kirby?

We consciously chose Kirby as the content management system (CMS). Kirby is known for its flexibility and user-friendliness, making it an excellent choice for projects requiring customized solutions. Compared to other CMS like WordPress, Kirby offers a more streamlined, efficient, and customizable platform. More about our reasons for preferring Kirby can be found in our blog post.

The Frontend

We built a minimal custom theme for EOTO which functions like a canvas for the content and layout blocks. As we are using Kirby, the theme is based on PHP. We decided to use Sass and a little bit of VanillaJs. The theme comes with a limited set of functions because most of the work is done in the visual editor of Kirby.

Utilizing the Visual Editor

We wanted to enable EOTO to build custom and flexible sites. Beside some special sites, like the news, most sites are built out of building blocks provided by us. The goal was to give EOTO the possibility to layout almost every page on their own, without leaving them alone just with only default blocks like headlines and paragraphs.

Layout System of the Visual Editor

The first step was to provide grid layouts using the layout feature of the panel editor. We configured the most common layout options the editors can now choose from with every new row they create in a page layout.

In the frontend, we use a Snippet which translates those layouts into our grid system. This way we can use this Snippet on every page, leveraging the layout system without repeating code.

Every row also has a custom configuration where you can set a color theme, paddings and spacing.

Custom Blocks

As the design came with a lot of different building blocks, we would rather not leave EOTO alone with that. They should not be forced to rebuild those layouts just with headlines, paragraphs, buttons and so on. Instead, we built all of those little design-layouts as custom blocks which are available in the panel editor.

Each layout cell can use one or more of those blocks. Most of the blocks in itself are flexible too. For example, you can but must not upload an image. Most blocks come with some configurations to alignments, sizes and labels for buttons.

Every block is a Kirby plugin we built. So that updating a single block is an easy and isolated task. Block plugins consist of different parts:

• The panel view is configured in a yaml file and written in Vue.js.
• The fronend part uses a PHP snippet, sass and maybe a bit of JavaScript (like for sliders)

Using the mix of the layout system and our custom blocks was the ideal solution, as it enables EOTO to build really cool individual designs without having to think about a design system.

Event Section and Blog

Event Section

A key component of the EOTO website is the event section. We integrated a comprehensive listing for events, providing visitors with a quick overview of upcoming events. Events can be easily managed and updated through the Kirby panel.

The listing itself is a mix of customizable block-layouts and a fixed section containing the listing. Every event has a fixed set of fields which can be used to plan and filter events.

Blog with History View

The blog or news section of the website offers a unique feature: a history view. Switch between the news and history view, filters the content in different ways but also changes the design and layout in the frontend.

As in the event, every news entry comes with a fixed set of fields. But as there is a detail view for each entry, editors can also use the block-layout system on the that detail pages.

Both, the event and news pages in the panel are configured in a way that the users cannot accidentally delete the pages.

Custom Theme and Navigation Menu

Special attention was given to the navigation menu, which is extensive yet easy to use. The menu can be configured directly from the Kirby panel, greatly simplifying management.

Conclusion

The new EOTO website is the result of intensive collaboration and the use of modern technologies. Thanks to Kirby CMS, the visual editor, PHP and Vue.js, and a custom design, a website has been created that is both functional and aesthetically pleasing. We really like the result and are pleased to have supported EOTO in their digital presence.