Public site appearance

This page explains how to set the colors of your public site, the header and footer links, the header logo, the page tree, the cover image and the favicon.

Where to find the settings and when they take effect

The settings are in the "Document" tab of the editor's right panel. Open a setting, change it, and click "Save".

Like the content, saved settings take effect when you publish. The same goes for the logo, cover image and favicon. After making changes, publish by following Publish a document.

Theme

Choose the color of buttons, links, chat messages and so on on the public site from the following theme colors.

• Monochrome
• Blue
• Green
• Orange
• Purple

Header and footer

Set the links shown on the right side of the top of the public site (the header) and at the bottom (the footer). Click "Add link" and enter a label and a destination. You can also choose a page in the document as the destination.

Header logo

Choose an image under "Logo" in the header settings to show a logo in the public site header instead of the document name. Click the logo frame to choose an image, and click ✕ to remove it (removing it shows the document name again).

"Logo" in the header settings

Header of a public site with a logo (logo on the left, header links on the right)

• Display size: Shown up to 40px tall and 250px wide (176px on narrow screens such as smartphones). The aspect ratio is kept and the image is not cropped. If there are many header links on the right and not enough room, the whole logo is scaled down.
• Recommended image: A wide PNG with a transparent background (at least 120px tall). Aspect ratios of about 1:1 to 6:1 look best. Choose an image of 10MB or less (JPEG, PNG, WebP, GIF or AVIF; SVG is not supported).
• Image processing: The image is scaled down, keeping its aspect ratio, to at most 120px tall and 750px wide before saving (smaller images are not enlarged).
• Translation: You can set a different logo for each language (for example, a logo containing text). For details, see Publish in multiple languages.
• Document name: Even when the logo is shown, the document name is passed to screen readers and similar tools as the logo's alternative text.

The logo is available on all plans.

Page tree

Set how deep the page tree on the left of the public site goes, and from which depth pages start collapsed. Depth is counted with the root page (the first page) as 1 and its child pages as 2.

Collapsed pages are shown as follows.

• Expanding: Readers click the arrow to the left of a page title to expand or collapse the pages below it.
• The page being viewed: The page the reader is viewing and its parent pages are shown expanded.
• Relation to the depth to show: If "Collapse depth" is deeper than "Depth to show", pages at the collapse depth are not shown in the tree, so no pages are collapsed.

On narrow screens such as smartphones, open and close the page tree with the menu button at the top of the screen.

Cover image

Click the "Cover image" frame and choose an image. The cover image is used on the document's card in the document list and as the image when the public site is shared on social media. The image is cropped to 1200×630. Choose an image of 10MB or less.

• Like other settings, the image used when sharing on social media takes effect when you publish.
• It appears on the card in the document list and on the dashboard as soon as you set it.
• You can set a different cover image for each language (Publish in multiple languages).

Favicon

The favicon is the small icon shown in browser tabs and bookmarks. Click the "Favicon" frame and choose an image. Click ✕ to remove it.

• The image is cropped to a square (192×192). Choosing a square image gives the best result.
• It is also used as the icon when the public site is added to a smartphone's home screen.
• If no favicon is set, none is shown.
• Like other settings, the favicon takes effect when you publish.
• The favicon is shared across all languages.
• Available on all plans.