Components· Site parts
Site parts
Header designs, footers, navigation, announcement bar, floating buttons, search and cookie policy.
24 components
The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.
Contacts by topic
Section contactTopics
Contacts by topic: sales, service, invoicing and other topics, each with a person or team, phone, email, service hours and a link to the right form. As a card grid, or as an accordion when there are many topics.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Introduction intro | Long text | – |
Layout layout | Choice | Cards |
Columns columns | Number | 3 |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 1 templates
Breadcrumbs
Section breadcrumbs
Breadcrumbs: home, the parent pages by the menu and this page. A blog post sits under the news page and an event under the events page. Search engines get the same trail. The site setting shows it on every subpage; the section places it where you want.
Settings (1)
| Setting | Edited as | Default |
|---|---|---|
On a phone mobile | Choice | – |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Header
Section header
The top of a page as a section: name or logo, menu and button. The site's own header is chosen under Look (designs below).
Settings (14)
| Setting | Edited as | Default |
|---|---|---|
Logo logo | Image | – |
Alternative text logoAlt | Text | – |
Logo width (px) logoWidth | Number | – |
field_logoWidthMobile logoWidthMobile | Number | – |
Logo height (px) logoHeight | Number | – |
Menu menu | Choice | Main menu |
Show language switcher showLocaleSwitcher | On / off | true |
Mobile navigation mobileNav | Choice | Off-canvas drawer |
field_headerToggleSize headerToggleSize | Number | – |
field_mobileNavBackground mobileNavBackground | Theme colour | – |
field_mobileNavColor mobileNavColor | Theme colour | – |
field_mobileNavFontSize mobileNavFontSize | Number | – |
field_mobileNavFontWeight mobileNavFontWeight | Number | – |
field_mobileNavItemHeight mobileNavItemHeight | Number | – |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Announcement bar
Section announcement
An announcement bar at the top of the page: exceptional hours, an offer or important news, optionally dismissible.
Styles (3)
Pick a style and the example above switches to it. The content stays the same; only the look changes.
Settings (8)
| Setting | Edited as | Default |
|---|---|---|
Text text | Text | Tiedote |
Link text linkLabel | Text | – |
Link linkUrl | Link | – |
Icon icon | Icon | – |
Style variant | Choice | Accent colour |
Visitor can close it dismissible | On / off | false |
More announcements more | Long text | – |
Change the announcement by itself rotate | Choice | – |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 15 templates
Floating action button
Section floatingCta
A floating action button that stays visible while scrolling: Book, Call or Order.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Label label | Text | Varaa |
URL url | Link | /varaa |
Phone phone | Text | – |
Hide on phone hideOnPhone | On / off | false |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 2 templates
Back-to-top button
Section scrollTop
A back-to-top button that appears on a long page.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Name of the button for screen readers label | Text | Takaisin sivun alkuun |
Corner side | Choice | Bottom right |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Floating contact button (WhatsApp)
Section Try it contactButton
A floating contact button: WhatsApp, a call or an email in one press.
Settings (7)
| Setting | Edited as | Default |
|---|---|---|
Button text label | Text | Ota yhteyttä |
WhatsApp number with country code (e.g. +358 40…) whatsapp | Text | – |
Message written in advance message | Text | Hei! Minulla olisi kysymys. |
Phone phone | Text | – |
Use the site phone number useSitePhone | On / off | – |
Email email | Text | info@esimerkkiyritys.example |
Corner side | Choice | Bottom left |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Cookie policy (table)
Section cookiePolicy
A cookie policy: a table that fills itself from the services and cookies the site uses.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Body intro | Formatted text | – |
Accessibility
Tables have header cells and a caption, lists are real lists and dates are in a readable form. A chart's numbers are available as text too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Site search
Section Try it siteSearch
Site search: a search field and results from the site's pages, news and events.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Hint text in the field placeholder | Text | – |
Button label buttonLabel | Text | – |
Show the results on this page showResults | On / off | true |
Accessibility
Every field has a visible label, a required field says so in text, errors are announced and lead to the field, and autocomplete fills in familiar details. Touch targets are at least 44 px.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Notifications
Section Try it pushNotices
Notifications: the visitor can subscribe to browser or phone notifications of new events and news.
Nothing is subscribed in the preview: the button tells what it does on a real site.
Settings (7)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Explanation above the button body | Long text | – |
Button label buttonLabel | Text | – |
Privacy note under the button note | Long text | – |
Newsletter sign-up page (alternative) newsletterUrl | Link | – |
Newsletter link text newsletterLabel | Text | – |
Layout layout | Choice | Card |
Accessibility
Every field has a visible label, a required field says so in text, errors are announced and lead to the field, and autocomplete fills in familiar details. Touch targets are at least 44 px.
Used in 3 templates
Sign in or join
Section Try it accessGate
Sign in or join: members-only content shows after signing in; others are offered to join.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Vain jäsenille |
Introduction intro | Formatted text | – |
Prompt text lead | Text | – |
Who the content is for audience | Choice | Members only |
Accessibility
Every field has a visible label, a required field says so in text, errors are announced and lead to the field, and autocomplete fills in familiar details. Touch targets are at least 44 px.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Header: Classic
Header classic
Name on the left, menu in the middle, button on the right
The most common design: name or logo on the left, menu in the middle and an action button on the right. On a phone the menu opens as a panel.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 48 templates
All 48 templates
- Padel hall
- Tennis hall
- Beach volleyball hall
- Small hotel
- Experiences and tours
- Equipment rental
- Online shop
- Gym
- Personal trainer
- Election candidate
- Party venue
- Driving school
- Car wash
- Used car dealer
- Car rental
- Athlete
- Author
- Literary society and classic
- Course centre and training company
- Piano school and music lessons
- Music and dance school
- Musician and band
- Interior architect
- Influencer and content creator
- Electrician
- Building and renovation
- Earthworks and infrastructure
- Cleaning service
- Consultant and coach
- Expert firm
- Design office
- Advertising and communications agency
- Software house and consulting
- Staffing and recruitment
- Estate agent
- Accounting firm
- Interior and gift shop
- Specialist shop
- Manufacturer and wholesaler
- Painter, roofer, flooring and carpentry
- Flea market
- Chimney sweep
- Card and payment app
- Climbing gym (B)
- Venue chain
- Design, graphic design and video
- Translator and translation agency
- Insurance agent
Header: Centred
Header centered
Name in the middle, menu on its own row
The name in the middle and the menu on its own row below; suits a café, a celebration or an author.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Header: Over the photo
Header overlay
Transparent over a large photo, solid when scrolling
A transparent bar over a large picture that turns solid when scrolling.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Header: Compact
Header compact
A low bar with the menu as a rounded strip
A low bar with the menu as a rounded strip: lots of room for content.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Header: Two rows
Header topbar
Opening hours, phone and social links on top
Two rows: opening hours, phone and social media on top, name and menu below.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 22 templates
All 22 templates
- Car repair shop
- Tyre shop and tyre hotel
- Vehicle inspection
- Body shop
- Towing service
- Taxi
- Farm and direct sales
- Photographer’s index
- Physiotherapy: booking first
- Haulage and logistics
- Plumbing and heating
- Property maintenance
- Law firm
- IT support for small businesses
- Dentist
- Physiotherapy and therapy
- Veterinary clinic
- Bicycle shop
- Local grocery
- Hardware store
- Care home and day care
- Pharmacy
Header: Menu button
Header drawer
Every page in a panel that opens
A menu button: all pages open in a panel; suits a site with many pages.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 5 templates
Footer: columns
Footer columns
Columns: contact details, menu, opening hours and social media each in a column.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 94 templates
- Padel hall
- Tennis hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
All 94 templates
- Padel hall
- Tennis hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
- Small hotel
- Guesthouse and B&B
- Cottage and villa
- Experiences and tours
- Equipment rental
- Online shop
- Gym
- Personal trainer
- Sports club
- League team
- Team sports club
- Individual sports club
- Association
- Election candidate
- Party venue
- Wedding
- Restaurant
- Car repair shop
- Tyre shop and tyre hotel
- Driving school
- Vehicle inspection
- Car wash
- Used car dealer
- Body shop
- Car rental
- Towing service
- Taxi
- Farm and direct sales
- Athlete
- Author
- Outdoor club
- Literary society and classic
- Course centre and training company
- Piano school and music lessons
- Music and dance school
- Musician and band
- Photographer’s index
- Interior architect
- Physiotherapy: booking first
- Influencer and content creator
- League or series
- Photographer
- Haulage and logistics
- Electrician
- Plumbing and heating
- Building and renovation
- Earthworks and infrastructure
- Cleaning service
- Property maintenance
- Consultant and coach
- Expert firm
- Design office
- Advertising and communications agency
- Law firm
- Software house and consulting
- IT support for small businesses
- Staffing and recruitment
- Estate agent
- Accounting firm
- Café and bakery
- Lunch restaurant
- Pizzeria
- Dentist
- Physiotherapy and therapy
- Veterinary clinic
- Beauty or nail salon
- Florist
- Bicycle shop
- Local grocery
- Clothing and shoe shop
- Interior and gift shop
- Hardware store
- Specialist shop
- Housing company
- Foundation
- Manufacturer and wholesaler
- Painter, roofer, flooring and carpentry
- Care home and day care
- Flea market
- Chimney sweep
- Card and payment app
- Climbing gym (A)
- Climbing gym (B)
- Venue chain
- Pharmacy
- Design, graphic design and video
- Translator and translation agency
- Insurance agent
Footer: minimal
Footer minimal
Minimal: one row of name, links and copyright.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Footer: centred
Footer centered
Centred: name, links and social media centred one under another.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Footer: stacked
Footer stacked
Stacked: large contact details first, the menu and legal links below them.
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.