Kreatives Unternehmertum: Website Relaunch with Kirby 3

Together with my favorite (web) designer Daniel Zenker I relaunched Kreatives Unternehmertum using my favorite CMS Kirby 3.

Coming from Webflow, the guys at Kreatives Unternehmertum were definitely used to a lot of flexibility. But of course the custom-tailored approach of a Kirby website will always show.

Some of the fun interactions on the website:

I hope you like GIFs…

Similar button interactions across different elements.
Subtle but effective scroll animations for the header and footer elements.
Filter and form interactions.

Frontend: Easy on the eyes. Backend: Easy to use.

With over 10 section types to choose from, every single page on the website is modular. Every page has an intro section (which will look differently, depending on wether there’s an image or not) and everything else is like playing LEGO®.

Three different pages using the same template/blueprint.

That means the editors can add as many different sections to a project page or any other page. Image gallery? Page carousel? Contact persons? You choose:

Adding a new section

Behind the scenes: A look at the Kirby Panel

While Kirby 3 comes with a lot of awesome new features, I still appreciate the “just the fields you need” aspect of Kirby the most. And being able to add help texts underneath those fields makes every editor feel at home:

Kirby 3 panel with helpful information for editors underneath the fields.
That’s how the filter categories look like in the panel.

Modular websites with Kirby 3

There are different approaches when it comes to developing modular websites with Kirby 3.

I started with the Kirby Builder plugin first. Here are some of the things I noticed and in the end made me decide to rewrite everything with regular subpages:

The builder approach

The subpages approach

  • More clicks necessary, confusing previous/next arrows
  • No previews
  • No duplicate button (Probably coming to Kirby 3.2, though)
  • Separate file pools for all sections. A big advantage for pages and sections with a lot of images
  • Adding a section type is a bit more work because of the changeTemplate option changes
  • Better performance, since nesting is better
  • Possible to link to sections (anchor links) via textarea buttons
  • Easier implementation of search results leading to anchor links

As you can see, both approaches have their advantages and raison d’être. For websites with a lot of content I’d always choose the subpages approach.

Using sections alongside subpages

Maybe you’re wondering: if I use subpages for sections, what do I use for subpages? Good question!

Putting the section pages in a separate /sections container and adding custom page models rewriting the page links to anchor links makes sure you can still add regular subpages:

Thanks a lot to Sonja from the Kirby forums for helping me with this.

Even clicking on “Open” in the panel will then lead you to the anchor link. For example: kreatives-unternehmertum.com/#aus-unserer-praxis

How do the section templates look like?

The sections don’t have separate templates, just different blueprints and a snippet inside of site/snippets/sections:

That’s how the section builder looks like in the template

Custom fields and plugins

You actually don’t need a lot of plugins to get started with complex Kirby 3 websites. Nevertheless, here are some plugins I used for this project.

A better markdown editor—must have for every client project

While the core textarea is great, I have yet to meet a client that already knows how to write markdown. That’s when a visual markdown editor comes into play. Luckily there’s already a great plugin with lots of features alongside a more visual approach to markdown.

https://github.com/sylvainjule/kirby-markdown-field

Custom link field for url/email/page/file buttons

You’ll find a lot of (big) buttons on the website. Leading to all kinds of content. External links, internal links, email links, pdf files, …
To make adding them as easy as possible, I developed a custom link field.

https://github.com/medienbaecker/kirby-link-field

Instagram integration

I wanted to integrate the latest 6 instagram posts on this page. That’s easily possible with the great “Kirby 3 Instagram” plugin by Bruno Meilick. So easy to set up!

https://github.com/bnomei/kirby3-instagram

Page sections for huge amounts of pages

Most of the time it’s enough to use pages sections, but once you reach >200 persons and organizations, you’ll need something like the pagetable plugin by Kirby plugin mastermind Sylvain Jule. This plugin makes it possible to sort and search those pages for more efficient content management.

https://github.com/sylvainjule/kirby-pagetable

Custom soft hyphens

Daniel designed those beautifully big headlines. But I don’t like how current browsers are dealing with word-breaks. I also didn’t want to add ­ to every headline, making it hard to read. Luckily it’s just a matter of a few lines to add a KirbyTag hook:

With this hook you can simply add a more readable (-) to any long word (looking at you, Unternehmertum) and control where it breaks.

Managing broken links after a relaunch

Nico Hoffmann developed a very handy plugin, especially for a website relaunch with a well established Google ranking. You can easily add and edit redirects in a custom panel view.

https://github.com/distantnative/retour-for-kirby

My thoughts on Kirby 3

Quite some things have changed since Kirby 2. With new tools like custom pages or files sections it’s now even easier to build complex websites. There’s still a great community behind this tool and I’m baffled by the number of quality plugins already available.

While building this website, Kirby 3 already got 5 new releases and added features that were greatly appreciated not only for this project. The conditional fields (introduced in 3.1.0) came just in time to make editing pages and sections even easier.

It’s a bit of work to convert your developer head from Kirby 2 to Kirby 3, but it’s definitely worth it.

Questions?

Do you have any questions about Kirby 3 or this website relaunch?
Do you want to see other Kirby projects?
Head over to my website: https://medienbaecker.com/