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

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

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.

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.

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.

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.

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.

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.

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 home page is completely flexible with many different custom blocks using preview: fields.

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.

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

The "Indexing forbidden" view button comes from the SEO plugin.

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.

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.

Setting the icon option in page blueprints, helps special pages stand out. Did you know you can use CSS variables like item-color-back and color-text-dimmed for dynamic light/dark colours?

"Free content" is composed with the Modules plugin. Each module has a content and a settings tab.

Using the Token Field, users can select a background colour for each module.

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

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.

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

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

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.

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.

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.

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.

Showing OG images in pages sections not only makes it easier to navigate the backend, you can also make sure these sharing images exist and are up to date.

This site uses the Modules plugin for modular content.

Each module has its own settings tab with different settings like spacing (here, using the toggles field), colours, font sizes and more depending on the module.

Drafts and published posts are listed here, amongst misc pages and the blogroll. Images of drafts have a cute texture to signal their status, implemented via custom styles using the panel.css option.

A post consists of blocks for headings, text, quotes, videos, and images.

Using the Komments plugin, people can leave messages on all posts.

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.

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

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.

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.

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.

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.

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.

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

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 frontend has numerous different colour schemes in light and dark modes. Try it out!

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.

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.

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.

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.

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.

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

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

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 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 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 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.

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.

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.

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.

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

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.