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.

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.

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.

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…

I built a plugin that helps with modular websites like this. The plugin takes care of page blueprints, redirecting the page URLs to anchor links and adding modules containers that separate modules from regular pages.

https://github.com/medienbaecker/kirby-modules

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

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

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

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

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.

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/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store