An overview of ZOON 2 features. ZOON 2 is a complete rebuilt and makes use of the native Kirby Blocks and Layout fields. jQuery components have been replaced by vanilla javascript versions.

  • Brand: Set the use of a logo or name. Repeat logo/name in the site footer. Adjust the size of the logo in header and footer independently. Instructions are given for the use of a logo, favicon, icons and manifest file. When using a name three simple styles are suplied.

  • Fonts: Source Sans Pro (normal, italic and bold) is the default. Set to serve this font from Google Fonts or from your domain. Or switch to a system sans-serif font stack.

  • General: Settings for language, date formatting, use of breadcrumbs, dark mode and Google analytics.

  • Text: General site and contact information.
  • Social media: Twelve predefined icons (inline svg) for popular media and a possibility to add more. Predefined: Behance, Discord, Facebook, Github, Instagram, Linkedin, Pinterest, Snapchat, Tiktok, Twitter, Vimeo, Youtube and ‘other’ to add your own.
  • Navigation: Add up to three lists of pages and separate headings. These can also contain unlisted pages which don’t display in the main site menu.
  • Copyrights: The small text.

Default text: Used for example for the heading above a Table of Contents which reads ‘On this page’. Change according your preference or translate when using multiple languages site.

Note: Some of these texts are not visible and are for screen readers only.

There are dedicated templates for home, error and search. For all other pages there are three templates you can use:

Collection page

First page in a section displays all child pages. When status is listed displays in the main menu. Comes in two versions:

Collection Cards: Listing with a cards layout see demo Blog and Articles.

Collection List: List layout of child pages, see demo Projects.

Item page

Used for children of Collection pages, but can also can be used as the first page in a section (like this current page).

Settings: Table of Contents from all headings 2 on the page, optionally display cover image or combine with ToC. Crop cover image. When used as first page in a section, use a submenu and previous / next page navigation.

  • A sitemap at: yourdomain/sitemap.xml
  • Multi-language ready, after enabling languages, at the top of the page a language switcher is displayed. The panel text is in English.
  • Open Graph meta tags for sharing.
  • Per Item page optional sharing buttons: Email, Facebook, LinkedIn, Twitter, WhatsApp.

For all the pages of this demo site, Google Chrome Lighthouse results for:

  • Performance

  • Accessibility

  • Best Practices

  • SEO (Search Engine Optimization)

Are in the range of: 🎉 97–100 on mobile and desktop.

I’ve noticed minor changes in test results (1 point up or down for Performance) but it should give a good impression. In combination with Kirby caching capabilities, which is enabled for this demo site, should result in a smooth and snappy running site.

Customize per page: add css and/or javascript files to the page content folder and they will be linked automatically. Or customize per template: place a file called item-page.css in assets/css/templates to adjust the item-page template.

The theme includes demo pages with dummy text and grey placeholders for images. The theme doesn’t include the demo content as displayed on this site. You can buy ZOON 2 on Payhip. If you bought a previous version of ZOON contact me for a discount.

I offer help with any errors caused by the theme template code, css and javascript, if the theme is used without any adjustments.