Each content block has a separate settings tab with a field for the anchor link, token fields for both the background colour and pixel art icons, and a toggle field for adjusting the button display.

A shared recipe template is globally defined in object fields, and auto-applied to all recipe pages as explained by the sidebar info field.

A structure field manages the book catalogue, with different columns, one of them a toggle field that can be toggled directly.

The site dashboard manages an extensive taxonomy using structure fields for categories, techniques, series and styles. Fuzzy search settings in an object field allow tuning the frontend search behaviour.

The about page uses the layout field to arrange text and image blocks in a flexible editorial layout.

Using pages sections with layout: table and multiple tabs, editors can browse the collection in different views with taxonomy columns for quick orientation.

The Locator plugin provides a map-based location picker to geographically position each specimen, with auto-filled fields for coordinates, city, region and country.

The Color Extractor plugin automatically extracts the dominant colour from uploaded images, storing it in a color field.

Panel users get welcomed with an info field that provides contact information. With a custom user method the user’s first name is extracted and a time-based greeting is displayed.

Overwriting the em style using a custom Panel CSS file to match the frontend where the “emphasis” element is displayed in the brand colour.

Pages use the blocks field with many different custom blocks using preview: fields, so users can create flexible layouts. Most blocks have different variants like background colours or image positions to choose from in a separate “settings” tab.

By setting the navigation option in the blueprint, it’s possible to navigate between different blueprints/templates (like this special articles page) using the arrow buttons in the top right corner.

Using pages for things like categories is always a good choice as you get UUIDs, slugs, status and multilingual support among other things. By setting image: false in the blueprint, you can visually differentiate them from regular pages.

Using the Help View plugin, editors can get quick access to helpful articles right within the Panel.

Pages are using the blocks field with the preview: fields setting and Tiptap fields. Each block has a “settings” tab with a colour combination select field.

The Punctuation Section plugin provides users with copy-pastable characters in the dashboard. Because the menu is divided into two columns, users create pages and then separately choose where to place them.

Editors create and manage colour combinations for pages and blocks in a global structure field. Each colour combination can have an optional illustration image.

The help text in pages sections is used to display additional fields like the subtitle and category.

The back option of the files field is set to “white” to differentiate them from pages.

The panel.menu option allows adding shortcuts to specific pages in the sidebar.

Using placeholders for frequently used texts like prices or the address makes it easy to update them in one place.

The pages section in the dashboard directly shows the OG images of the pages. Each user gets greeted with a personalized message using a custom user method.

The global tab allows editors to manage site-wide content like the available colours for blocks, the footer menu, contact options and social media links.

On the home page, editors can edit the hero, the intro, and a flexible blocks field. The sections are divided by headline fields for better clarity.

Similar to the home page, all the other pages have a hero and a flexible blocks field. Each block has a “content” and “settings” tab. In the settings tab, editors can enter a custom anchor link, choose from different background colours and padding sizes. Field-specific settings, like the image position or heading level, are available in the content tab as toggles fields.

Defining an icon in the blueprint of pages can help users navigate pages sections.

The table layout of the pages section is a great way to display detailed information about many pages at once.

Using the OG images of pages in the pages section makes it easy to visually identify pages (and check for missing OG images).

Every page uses the modules plugin for the main content, allowing for flexible layouts.

The markdown field is used for text areas throughout the site. Because German has tons of long words, (-) get converted to soft hyphens using a custom field method.

Across the site, help texts are used to give editors additional context, like an ideal character count for headlines or frontend usage of certain fields.

Using the alter plugin, editors can write and review alt texts for all images in one convenient view.

Using help texts in files fields, the developer communicates the automatic cropping in the frontend.

Object fields can be used to structurally group related fields, like the “Details” of this offer.

Using the width option for fields, you can match the backend layout to the frontend design like in this example with three text columns.

The headline fields in separate columns make for a very clean Panel UI.

A custom plugin generates poster images from video files.

Using (massively) nested layout and blocks fields, the case studies are highly dynamic.

The colors tab in the dashboard allows editors to manage the site’s color palette using color fields inside of a structure field.

The home page’s blueprint is using text, pages, files and object fields for structured content management.

On the events page we can see the dynamic colors being used in a pages section using the cards layout.

The events feature date fields, a select field for the categories, a files field for the cover image and a blocks field for the main content.

Every user gets a personalized welcome message in the dashboard, including some useful characters to copy using the punctuation section plugin.

Most pages have a free blocks field with custom blocks using preview: fields. Using help texts, editors get an idea how many characters should be used in each field.

The pricing accordions use the table field plugin for flexible pricing tables. You can also see a warning about the alt text in the files field’s info text.

Flexible forms using the DreamForm plugin, extended to use preview: fields to match the rest of the site.

The screens in the building are also powered by Kirby. They show advertisements, pricing, news and a calendar by using different blocks with a duration field.

The “Pages” tab offers shortcuts to all the main pages and articles you may want to edit, making use of the cardlets layout of the pages section.

The “Footer” tab controls all the settings for the site-wide footer. Object and Structure fields are used to give editors full control over granular settings, like whether to open a link in a new tab.

This screen is dominated by the layout field where flexible content can be added and arranged. Custom blocks were created to handle a logo carousel and adding Rive animations.

A combination of fixed settings for things like highlight color and data for the hero as well as a flexible layout field where any type of content can be added.

Filters are controlled here as well as articles.

Another example of some fixed settings, like published date and filters/tags, alongside a flexible layout field.

Custom blocks with a layout button that let’s editors choose the image position.

The hero is separated by using an object field, opening its fields in the drawer.

The “opening hours” structure field feeds a dynamic open/closed status in the frontend.

Next to meta fields with descriptive help texts, there’s a “share” preview of the page in search engines and social media.

Custom, horizontally scrollable section for events, organized by location and time.

The “Indexing forbidden” view button comes from the SEO plugin.

The pages section in the dashboard shows the OG image of each page.

Using placeholder texts to communicate the fallback values of empty fields, and help texts to provide additional information for editors.

In the frontend, this list of events is turned into a subscribable Webcal calendar.

The pages section in the dashboard shows the OG image of each page. The ampersand view button is the Typo and Paste plugin, which allows you to easily insert special characters.

After a fixed hero, each page features a flexible modules section. The sections are separated with headline fields.

Inside of module pages, the blocks field is used for dynamic content. The sidebar is used for page settings with toggle, color and select fields.

Jiří uses panel.menu to customize the menu, using it for shortcuts to specific pages.

Next to some pages fields using the cardlets layout, there’s a custom import button.

Each file shows a status icon, indicating whether it is being actively used somewhere. A stats section in the sidebar shows you how many files are in the library and shows the storage status.

Because italic text is used for grey text in the frontend, the italic icon in the textarea has been overwritten with a grey ellipsis icon using an icons extension.

Each project shows the number of images in the info text using a query.

The “Vita” page is completely flexible, using a layout field for the content. The blocks are using preview: fields.

With a custom Panel CSS file, the typography of the backend has been adjusted to match the frontend design.

The panel.menu option allows adding shortcuts to specific pages in the sidebar.

Sylvain Julé’s Annotator plugin is used to add markers to a map.

With a custom Panel CSS file, the tab style has been adjusted.

The panel.menu option allows adding shortcuts to specific pages in the sidebar.

Similar to the tab style, the blocks have received gaps through the custom Panel CSS file.

The toggles field has received a font preview for easier content management.

By adding the logo to the panel.menu option, and adjusting the pages section’s image option to match the frontend design, the panel provides a cohesive visual experience.

The SEO plugin is used to show the title structure of the page. A semantic structure is not only important for search engines but also for accessibility.

This is the first panel screenshot on kirbysites.com using Kirby 5’s dark mode.

This view shows the DreamForm plugin in action, allowing users to create and manage forms directly from the panel.

Using the Content Translator plugin, editors can quickly translate pages using the DeepL API.

Each page has a fixed hero with a flexible modules section underneath.

Articles are using the blocks field with the default blocks.

Because some artists have sound files and others don’t, an emoji is used in the info text to indicate the presence of such a file.

Using the help text for the textarea field to communicate available placeholders.

The blocks on this site all use Kirby’s drawer to display their fields, making it easy to adjust the structure without having to worry about Vue previews.

The “Analytics” tab in the dashboard shows the Matomo plugin in action, providing insights into site traffic and user behavior.

Different background colors in page blueprints with the image back option.

Using the disabled in the blueprint to show user input for each order.

Custom button using the Janitor plugin to generate CSV and PDF files automatically.

After a fixed header, all of the page’s content is created in a blocks field with custom blocks using preview: fields.

Using the table layout of the pages section with custom field previews for status and WCAG level.

Making the editors feel at home by greeting them in an info section.

Using the help text for the textarea field to communicate available placeholders.

The panel.menu option allows adding shortcuts to specific pages in the sidebar.

Using the headline field in a separate column to create a clear and organized layout for the panel.

Someone has been pushing to production by mistake one too many times. By clearly showing the current environment in the panel, you can make sure this does not happen again.

Using an info field to show the modified() date in the panel.

Using OG images in the pages section, editors can immediately see how the page will look like when shared.

The pages have dynamic background colors, followed by a hero with some fixed fields and a dynamic blocks field with preview: fields.

Using the Content Translator plugin, pages can be quickly translated using the DeepL API.

The images can have different classes, like full or border. This is explained in an info field in the sidebar.

Accessibility audits are done completely in Kirby, using the table layout of the pages section.

A range field can be used to control the opacity of the vignette overlay. Fields have suggestions for editors in the help text, be it the length, format or usage.

Each step in the form has its own blueprint, most of the times with some kind of blocks field to allow for flexible content.

Inside the custom blocks, you can see how the Writer’s italic style has been adjusted to mark up the highlights.

Extensive settings for each custom block allow the editor to adjust the layout and style of the content in a separate tab.

Using columns in the Panel, you can recreate the frontend’s layout in the backend, making it easier for editors to find the right fields.

The pages section in the dashboard shows the OG image of each page. Each user gets greeted with a personalized message.

Events can be automatically archived by filling in the “Ende” field. In order to not prioritize anyone, the order of people is randomized in the frontend.

Each page is structured in the same way: an intro, a template-specific section, and a free content area using the blocks field.

The home page is completely flexible with many different custom blocks using preview: fields.

The page content is built with flexible blocks that can be used to create any layout.

Sylvain Julé’s Annotator plugin is used to add markers to a map.

Each marker has a title, description, images/videos and an optional MP3 audio file.

Flexible content structure with the blocks field and blocks using preview: fields.

As mentioned in the help, the checkboxes field dynamically gets its options from the product pages using a query.