Kreatives Unternehmertum: Website Relaunch with Kirby 3

Thomas Günther
Apr 8, 2019 · 5 min read

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…

Image for post
Image for post
Image for post
Image for post
Similar button interactions across different elements.
Image for post
Image for post
Image for post
Image for post
Subtle but effective scroll animations for the header and footer elements.
Image for post
Image for post
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®.

Image for post
Image for post
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:

Image for post
Image for post
Adding a new section

Introducing Kirby Modules

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

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:

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

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.

Image for post
Image for post
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.

Image for post
Image for post
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!

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post
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/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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