Kreatives Unternehmertum: Website Relaunch with 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…
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®.
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:
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:
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
- Similar appearance to the frontend: all sections (editable) on one page
- Duplicating sections
- One single file pool for all sections
- Adding a section type is easy
- Slightly worse performance
- Not possible to link to sections via textarea buttons
- More difficult implementation of search results leading to anchor links
- Some issues with the textarea field, the markdown plugin, checkboxes, max settings, the revert button, field groups, …
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:
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:
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.
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.
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!
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.
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.
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.
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/