Header and footer
The two blocks shared by every page: how to open them, the header settings (logo, layout, behaviour on scroll, buttons), those of the footer (layout, link columns, contact details, bottom bar), and the announcement banner.
The header (logo, menu, call-to-action button) and the footer (link columns, legal notices) are shared by every page of the site: you edit them once, and every page follows. They are unique: one header and one footer per site.
Opening them for editing
On an ordinary page, the header and footer are read-only: when you hover over them, a “Shared header” or “Shared footer” banner offers Edit. You can also open them from the page selector on the toolbar, in the Shared blocks group, entries Header and Footer. They are then edited like a page: click on the component to open its form.
The header
- Logo / brand: the site name (used if there is no logo), the logo, a version for dark backgrounds, a badge, and the logo’s link (the home page, usually).
- Layout: classic (logo on the left, menu in the centre), centred (logo above the menu) or menu on the left, next to the logo.
- Bar styling: solid, frosted glass, adaptive (takes the background of the section following the header) or transparent at the top of the page then solid on scroll. The colour of the bar itself is set in Section background when you hover over the header, except in adaptive and transparent modes, where the styling decides in its place.
- On scroll: the bar stays visible, reappears when you scroll back up, or doesn’t follow. Height: standard, slim or tall for a large logo. Bottom edge: hairline, light shadow or none.
- Menu labels: standard or spaced capitals. Hover and current page: a line that unfurls beneath the label, a tinted block, a solid pill or a dot. In all four cases, the page the visitor is on remains recognisable when the mouse hovers over another entry.
- Site name: standard, heading font or in a coloured box.
- Buttons: a secondary link and a main button (“Book now”, “Call us”), present on every page.
The footer
- Layout: columns (classic), centred, minimal on a single line, split (brand on the left, links lined up on the right), two tiers (brand and contact details on top, links below) or site name in large type. In minimal, the column titles, the tagline and the contact details are no longer shown, but nothing is lost: go back to columns and everything reappears.
- Brand: the site name, a tagline, the logo (with a version for light backgrounds).
- Columns: as many columns as you like, each with a title and a list of links (to your pages, your social networks, your legal notices, etc.).
- Contact details: address, phone, email and opening hours. Each line appears only if you have filled it in. The phone number and email address are clickable: on a mobile, the visitor can call straight from the footer.
- Bottom bar: two texts, on the left and on the right, for the copyright and a notice.
Starting from a preset card
The palette offers five ready-made headers (classic, elegant with centred logo, transparent over the photo, dark and slim, editorial) and six footers (in columns, centred, in light columns, light minimal, split, with the name in large type). Each card places the component with its settings and its section background. If your site already has a header, delete it first to place another one, or simply change its settings.
The announcement banner
The Announcement banner component is placed in the header area, above the bar: a pill, a short text and a link, for a promotion, an exceptional closure or a news item. The banner is transparent: its background is that of its section.
To give it a background different from that of the bar, separate them: place the banner, then the Separator button on the toolbar between the two. You get two sections in the header, each with its own background. See Sections, separators and seams.