# Every building block and its settings

> The complete reference for the sections a website is built from — what each building block shows, the layouts it can take, and every switch on it, what it changes and what happens when it is left alone. The same blocks are in every website template.

_Last verified: 2026-10-17. Source: https://bookodile.com/docs/reference-website-blocks_

A website is a list of pages, and each page is a list of **building blocks**: the
top of the page, your services, the gallery, the team and so on. **Every template
has every block.** A template decides how blocks look — their layout and the colours,
fonts and corners — never which ones you may use, so switching template never leaves a
block behind. Blocks are added, moved, hidden and removed in the website editor under
**Pages** (or by asking Bookodile in AI Chat); how the website is built and published is
in [Your website](/docs/your-website).

Every block except the top of the page and the Call to action can have a **subheading**: a
line under its heading, in every language the site has. Left empty, nothing is drawn.

The long texts you write can have bold, italic and links, and the Text block's
sub-headings too — see [Formatting your texts](#formatting-your-texts).

A switch that is left alone follows the template: most are on in every template, and
where a template starts with one off, that is said below. Once you change a switch, it
stays as you set it when you switch template.

## One page or several

The switch at the top of **Pages**, in every template, and yours: a design switch
never changes it.

- **Several pages** — each page has its own address (`/sluzby`, `/en/services`) and
  the menu links to it.
- **One page** — every page is drawn on the home page, in the pages' order, and the
  menu jumps to each. Left out there, because they would repeat: the Calls to action
  between pages (the last one stays), the home page's starred services when the full
  list follows, and the home page's few photos when the whole gallery follows. The
  other pages have no address of their own while it is on: once published, their
  old addresses lead to the one page.

Nothing moves either way: switching back gives each page its address again.

## Heading weight

Under **Style → Fonts → Headings**, in every template: how thick every heading on
the website is drawn. Pick the heading font and it unfolds into the weights that
font comes in, each drawn in it — **Light, Regular, Medium, Semi-bold, Bold, Extra
bold and Black**, as far as the font has them — with **Template default** first.

- **Every heading follows it, at one weight**: the top headline, each section's
  heading, service and team names, the headings in cards and in your own building
  blocks, and your business's name where no logo stands in for it. Body text,
  buttons and small labels keep their own weights.
- **Template default** is what you get until you pick: Bold in most templates; in
  Luxe Two, Regular for the big headings and heavier for the names and headings in
  cards. Picking a weight puts every heading at that one weight.
- **A font comes in the weights it has.** Many come in all seven; some display fonts
  (Anton, Bebas Neue, Abril Fatface, DM Serif Display, Instrument Serif, Pacifico) come
  in one, which Style says, and they are always drawn in it. Switch to a font without
  the weight you picked and the nearest one it has is used; switch back and yours
  returns.
- **It goes with the fonts**: picking another look or another template brings its
  own fonts and the template's weight back. The look you had stays one click away
  in Style → Look.
- **Text has no weight setting** — paragraphs read best at a font's Regular, and
  buttons and labels are weighted against it.
- Picking a weight takes off any custom touch that set the weight of a heading, a
  service card or a review card, and says so: the setting does that job now.

Worked examples: a barbershop on a black look may want **Semi-bold** headings for a
sturdier feel, while a beauty salon using a serif heading font may pick **Regular**
for a lighter one. A personal trainer who wants loud headings can go to **Black**
with a font that has it (Inter, Montserrat, Archivo). Ask Bookodile "make the
headings a bit less bold" and it changes this same setting.

## Details of the design

Under **Style → Details**, in every template. Each starts as the template's own
value — Luxe Two's are given here, the others start with the first value —
and switching to a new design brings its values back. A template may keep a
detail its design depends on: Details then shows its value with a lock.

- **Labels over headings** — Off, On. Small capitals over each section's heading
  ("TEAM"); a page without a top section opens on its name that way. Luxe Two: On.
- **Cards** — Filled, Outlined, Hairline. The service cards and review cards: filled
  with the surface colour, outlined with a line, or a hairline edge that fades down
  the card and brightens under the pointer. Luxe Two: Hairline.
- **Lines** — One line, None, Double. The line under the menu, between sections and
  over the footer; Double draws two hairlines along the menu and over each footer row,
  and none between sections. Luxe Two: Double.
- **Footer** — One line, Columns. Columns: the logo, the pages and where to find the
  business. Luxe Two: Columns.
- **Photos under the pointer** — Still, Zoom. Gallery and team photos zoom slowly
  under the pointer, never for a visitor who has asked their device for less motion.
  Luxe Two: Zoom.
- **Page width** — Normal, Wide. How wide the content runs on a large screen:
  1,120 or 1,280 pixels. Luxe Two: Wide.
- **Headings** — Normal, Tight: lighter, with the letters closer. Luxe Two: Tight.

## Top of the page

The first block on a page: a headline (your business's name until you write one), a
line under it, **Book** and **See services**, and your rating.

- **Layouts**: Photo beside, Centred (a wide photo under the words), Words only.
- **Show your rating** (`showRating`) — your overall rating under the buttons. On.

## Services

Your services with their prices and durations from your booking setup — all of them by
category, or only the starred ones (on the home page).

- **Layouts**: Price list — one row per service, as wide as the page: its photo, then
  its name, duration and description, then its price and **Book** side by side on the
  right of every row (on a phone, price and **Book** sit on their own line under the
  words) — and Cards.
- **Show each service's photo** (`photos`) — the service's cover: across the top of its
  card in Cards, at the start of its row in the Price list. The cover is the website's
  first photo of the service, or the service's own photo from **Services** when the
  website has none (or you chose it, from the cover in the editor's preview). A
  service with neither has no photo on the website: a card simply has none, and a row
  in a price list where other services have photos shows the service's first letter
  on a plain square, so the names stay lined up. The editor shows an empty place to
  add one. On; the Luxe Two template starts with it off, like the barbershop site it
  was made from. Off, the price list is words and prices only.
- **The order of categories** — the arrows beside each category's name move the whole
  category earlier or later on the website: a massage studio that also cuts hair can
  list its massages first, and a gym can put its classes before its personal training.
  Unset, the categories follow your booking page. It changes the website only, and
  every services section on it at once. AI Chat does it too ("put massages first").
- **The order of services** — the arrows beside each service move it within its
  category; the website only.

## Gallery

Your photos, with a tab for each category; a photo opens large with **Book** for its
service.

- **Layouts**: Mosaic, Grid.
- **Show a tab for each category** (`tabs`) — on, once the gallery has two or more
  categories; off by default on a preview of a few photos, such as the home page's.
- **Start on an "All" tab** (`all`) — on.
- **Photo descriptions shown on the site** (`descriptions`) — off.
- **The service's price and duration** (`prices`) — beside Book when a photo in a linked
  category is opened. On.

## Team

Your team from the booking setup: photos, names, roles, bios and social links. Each
person is one row in the editor: open it to change what the website says about them.

- **The order of people** — the arrows on each person's row; the website only.
- **Shown or hidden** — the eye on each person's row. A hidden person stays bookable.
- **Role** — the line under each name. Unset, it is the person's
  [category](/docs/team-members-and-categories#categories-group-people) from **Employees** ("Senior Barber",
  "Head coach") while your booking page shows categories, and it follows any change
  there — in each of the website's languages, the category's name in that language,
  your main language's until it is translated. Written here, it is the website's own
  (at most 60 characters, in each of the website's languages) until you empty it. With
  neither, nothing shows under the name.
- **Bio** — unset, the bio from **Employees**, the same one your booking page shows,
  and it follows any change there. Written here, it is the website's own until you
  empty it.

- **Layouts**: Grid (at most three people a row — two on a tablet, one on a phone — and
  a row that isn't full starts on the left, under the rows above, so a team of any size
  never scrolls sideways), List (one person a row, the photo beside the words).
- **A Book button under each person** (`book`) — opens your booking page with that
  person already chosen; the customer still picks the service. On in every template.
- **Instagram and TikTok under their names** (`socials`) — on.
- **Extra cards** — up to six cards after the people, drawn like theirs, that you write:
  a photo (chosen from your website's photos, or uploaded), a heading, a subheading, a
  paragraph and [a button](#the-button), each optional. For a hiring call ("This chair is waiting" with *Get in touch*), a guest
  artist or an apprentice spot.

## Reviews

Published reviews, newest first, with the overall rating. Never hand-picked.

- **Layouts**: Cards, One big quote, Wall — review cards in as many columns as fit
  the screen; a phone shows the first six and *All reviews*.
- **How many on this page** (`count`) — the newest 1 to 50. Three on the home page.

## Visit us

Address, phone, opening hours, parking, directions and your business's Google map.
Address, phone, hours and which business the map shows come from your booking setup.

- **Show your business on Google Maps** (`showMap`) — your business's Google map
  under the address and hours. **On** unless you turn it off. It shows **your business itself** — its name,
  rating and *Open in Maps* — from the **Google Maps link** in
  [Business profile](/docs/your-website#your-business-on-google-maps), or, while that
  is empty, from the **Google reviews** add-on's link while it is on and has one; the
  line under the switch says which, with a way to Business profile. With neither link
  there is **no map**, switched on or not — an address alone pins a street, not your
  business. **Off**: no map here; **Directions** still route to your business. A
  physio in a medical centre with twelve practices at one address, or a barber inside
  a shopping arcade: the address finds the building, the link finds the door — and a
  business that shows a big [Map](#map) on the same page can turn this one off.
- **Directions** — routes to your business by name when Business profile (or the
  Google reviews add-on) has its link, and to your address when not. Always there
  while you have an address.
- **The map** (`map`) — behind **Show the map**, where Google's map loads only when a
  visitor opens it, or **open on the page**, where it loads with the page and Google
  sees the visit, as with any Google map on a website; whether that needs a notice to
  visitors where you trade is yours to check. Behind Show the map; the Luxe Two
  template starts open. A clinic that wants the page light picks the first; a gym whose
  visitors come for directions, the second.

## Map

Your business on Google Maps, large: alone across the page, or beside a photo or your
own words. It shows **your business itself** — the place your Google Maps link in
[Business profile](/docs/your-website#your-business-on-google-maps) points at, with its
name — and **nothing at all without a link**: no heading, no words, never a map of
just your address.

- **Layouts**: Map across the page · Map left, photo right · Photo left, map right ·
  Map left, text right · Text left, map right. A phone shows them one under another,
  in the order they read.
- **Show your business on Google Maps** (`showMap`) — on unless you turn it off. The business is the same
  one as every other map on the site: Business profile's Google Maps link, or while
  that is empty the **Google reviews** add-on's, while it is on and has one. The line
  under the switch says which, with a way to Business profile when there is none.
  **Off**: the block's words or photo show alone, across the page; across the page
  with no map, it shows nothing. The editor shows where the map goes and *Check it on
  Google Maps*; Google's map itself only runs on the published website.
- **The photo** — in the layouts with a photo: one of the website's photos, picked in
  the block or uploaded there. Until you pick one, an empty place.
- **Heading and text** — beside the map in the layouts with text, where the text takes
  [formatting](#formatting-your-texts); above the map in the others, and optional. With
  nothing written in a layout with text, the website draws the map alone, across the
  page.
- **How the map loads** — with the page, as a visitor scrolls to it: Google's map
  itself, never a box to press first. Google sees the visit, as with any Google map on
  a website; whether that needs a notice to visitors where you trade is yours to check.

A physiotherapy clinic inside a medical centre, with twelve practices at one address,
puts *Map left, text right* on its contact page — "Second floor, the lift is on the
left" beside the map. A barbershop in a shopping arcade picks *Photo left, map right*
with a photo of its shopfront, so a new customer knows it when they get there.

## Call to action

A closing call to book: a heading, a line and the **Book** button. It was called the Book
band until November 2026.

- **Align** (`align`) — centred, or on the left. Centred, in every template.

## Text

A heading and your own text — in one column, or in two or three side by side, each
with its own heading and text ("Walk in / Sit down / Walk out"). One column on a phone.

- **Columns** (`columns`) — 1, 2 or 3. 1. From two, the text you write above them stays
  as an introduction.
- **Align** (`align`) — on the left, or centred: the heading, the line under it, the text
  and each column, as a word processor centres. Left. A short welcome or three promises
  side by side read well centred; several paragraphs read better on the left. A studio
  centres its three house rules, a clinic keeps its preparation notes on the left.
- **Sub-headings** — inside the text, one size under the block's heading (inside a
  column, one size under the column's heading). Only this block has them; see
  [Formatting your texts](#formatting-your-texts).

## Questions and answers

Questions and answers that open on a tap.

- **The questions** — up to 30, each a question and its answer. They show in the order
  you put them in: the arrows beside each question in Edit by hand, or click a question
  on the preview and move it with its own toolbar. Put the one customers ask most first
  — a typical section has five or six; 30 only stops misuse.

## Photo columns

Photos side by side, each with a heading, a line and an optional [button](#the-button):
the services worth showing off, the space, the people. Each column's photo, heading,
subheading, text and button are optional; up to eight columns in the block, wrapping
into rows.

- **Side by side** (`columns`) — 2, 3 or 4 on a large screen. 3. A tablet shows two, a
  phone one under another.

## Building block

Your own heading, text and photo in one of seven arrangements: Photo left, text right ·
Text left, photo right · Heading and text · Heading and photo · Text only · Photo only ·
Three columns. Heading, text and photo are each optional: leave one empty and it isn't
drawn. *Text only* and *Three columns* are no longer offered for a new block — the Text
block does both — and a page that has one keeps it as it is.

- **A button under it** — off until you add one. See [The button](#the-button).
- **A Book button under it** (`book`) — the button from before the shared one; a
  building block that has it keeps it until you give it a button.
- **How the photo and the words share the width** (`split`) — with the photo beside
  the words: half and half, the photo wider, or the words wider. Half and half. A phone
  always stacks them.
- **Align** (`align`) — on the left, or centred, in *Heading and text* and *Heading and
  photo*; with the photo beside the words they stay on the left, and the choice is kept
  for when the layout changes back. Left.
- **The photo's shape** (`shape`) — wide (4:3), square or tall (4:5), each filled by the
  photo and trimmed to fit; or original, the whole photo in the proportions it was taken
  in, as wide as its place. Wide. A section with no photo yet keeps a wide place for one.
- **A photo the template has in mind** — a template can start a building block, the top
  of a page or a Map section with a kind of photo in mind: Luxe Two opens Location &
  Parking with a photo of your place from outside, whole. Until you choose one, the empty
  place says what belongs there, and it never borrows another of your photos — a
  barbershop's shopfront, a clinic's entrance or a studio's door goes there, not a haircut
  or a treatment. Choose any photo you like; the hint is only a suggestion. Until there is
  one, your website shows the template's placeholder there, like any empty photo place.

## Background

Every block but the top of the page can stand out from the ones around it
(`background`): drawn the way your template draws it, from your colours.

- **Plain** — the page itself. Every block starts plain, except the Call to action, which
  starts on its tinted band.
- **Tinted** — a band a shade off the page, across its whole width.
- **Card** — the block on a card of its own, with rounded corners. Luxe Two draws its card
  as it draws its service cards: a fading hairline edge and a warm glow in the top corner,
  with the light that runs round it when the pointer is over it.
- **Inverted** — your colours swapped for that block: a white band on a dark website, a
  dark one on a light website, with its text and button swapped too, so they read as well
  as they do everywhere else.

Card isn't offered where the block's items are cards already — Services shown as cards,
Reviews, Team, Promotions and Events — because it would be a card inside a card. Services
on a Card that you switch to its cards layout keep the choice, and show it again when you
switch back. A background stays as you set it when you switch template; the new template
draws it its own way. Choose it in the block's **Layout** menu on the preview or at the
end of its fields in Edit by hand (for Text, a building block and the Call to action, next
to Align).

A barbershop puts this month's half-price offer on a Card right under the top of the page;
a yoga studio puts its reviews on an Inverted band between its classes and its team.

## Formatting your texts

The long texts you write take **bold**, *italic* and links: a Text block's text and
its columns' texts, a building block's text, an answer in Questions and answers, a
card's text (Photo columns, Team's extra cards), the parking and directions note in
Visit us, and a Map block's text. The Text block's texts also take sub-headings. Headings, the lines under
them, questions, roles, bios and a button's words stay plain words.

- **Bold and italic** — select the words and press **B** or **I** in the small bar
  above the text (⌘B, ⌘I), on the preview with the Text tool or in Edit by hand.
- **A link** — select the words, press the link button (⌘K) and type a web address,
  an email or a phone number: `easypark.com` becomes `https://easypark.com`, an email
  opens the visitor's mail app, a number their phone. With nothing selected, the
  address itself is added as the link. A web address opens in a new tab. Only those
  three can be links: the booking page is the **Book** button's, and a page of your
  own website is [a button's](#the-button). Anything else is refused, and the box says
  so.
- **A sub-heading** — in the Text block only: put the caret in a line and press **H**.
- **Paragraphs** — Enter starts a new paragraph, Shift+Enter a new line inside one.
- **Pasting** brings the words only, never another site's styling; a web address
  pasted over selected words links them.
- **Languages** — a translation keeps the formatting and the links: the words are
  translated, an address never changes.
- **AI Chat** writes them too — "a bold first line, the parking app's name linked" —
  and links only an address you gave it.
- **When you publish**, a link that hides where it goes — a short link such as
  bit.ly, an address made of numbers, a disguised name — holds the website out of
  search engines until Bookodile has looked at it. The website is still published.

Worked examples: a barbershop's parking note opens with a bold *Park right outside*,
links the city's parking app by its name and ends with an italic note that old
markings no longer apply; a physiotherapy clinic's Text block *Before your first
visit* has the sub-headings *What to bring* and *What to wear*, each with a short
paragraph under it.

## The button

The same button wherever a block has one:

- **Where it goes** — your booking page; a call to your business's phone; an email to
  its address; one of your website's pages; an Instagram account (its handle, without
  the @); or a web address starting with `https://`. A call or an email shows only
  while the business has a phone or an email in its booking setup.
- **Its words** — yours, in every language the site has; left empty, the destination's
  own: *Book a visit*, *Call us*, *Email us*, *Instagram*, the page's name, *Find out
  more*.
- **Filled or outlined.**
- **A second link** beside it, plainer — "Book now" and "See prices", say. Its own
  destination and words.

## Offers, events and announcements

What the Promotions, Events and Announcements add-ons put on the website. The two
blocks are listed under **From your add-ons** when you add a section, and only while
their add-on is on; switched off, the block stays on the page and draws nothing, and
comes back when the add-on does. What they show is written on the add-on's own page,
never in the block — each promotion, event and announcement has a **Your website**
switch, on unless you turn it off.

- **Promotions** — every running promotion with the switch on, as a card: its badge
  (or *Deal*), name, your description, the discount, each service with its price
  struck through and the new one, the last day, and **Book**. A promotion on one
  service opens the booking page with it chosen. A discount on an add-on names what
  has to be booked for it, on its own line. The prices are the booking page's own,
  by the same rule. Its heading starts as *Current offers*. With no promotion
  running, the block draws nothing at all — no heading, no empty box.
- **Events** — upcoming, published events with the switch on, soonest first: date,
  time, place, price (or *Free*) and **Register**, which opens the event's own page on
  the booking page; *Full* instead once every place is taken. **Show** chooses
  **The next three** (with a link to the rest) or **Every upcoming event**. Its
  heading starts as *Upcoming events*. Search engines are told each event's date,
  place and price.
- **An Events page** — under **Add a page**, while the Events add-on is on: one per
  website, with every upcoming event and a Call to action. Remove it like any page.
- **Announcements need no block.** Up to two run along the top of every page, above
  the menu, the first two with the switch on in the Announcements list's order. One
  kept for customers who have booked before never shows on the website, because a
  website cannot tell who has.

The website updates by itself — without Publish — when a promotion, an event or an
announcement starts, ends, changes or fills up. Adding or moving the block itself is
an edit, and shows once you publish. If something is set to show on the website but
no page has its block, its form and its list say so, and **Add it to Home** puts the
block on your home page in the draft.

## Social links in the footer

Icons in the footer of every page — in every template and both footer styles: under
your name or logo in **Columns**, under your name and address in **One line**. Each
opens the profile in a new tab. Set them at the bottom of the **Pages** tab, under the
list of pages, or ask Bookodile ("add our Instagram, @yourname").

- **Instagram** — your username (`@yourname`) or your profile's address.
- **Facebook** — your page's address from Facebook, or its username.
- **TikTok** — your username (`@yourname`) or your profile's address.
- **YouTube** — your channel's `@name` or its address, never a video's.

A box takes whatever you paste, the link from the app's **Share** button included,
and keeps the profile's own address; a post, a reel, a video or another website is
refused, and the box says why in red. Left empty, that network has no icon; with all
four empty, the footer has no icons at all. Search engines are told these profiles
are your business's.

The links are your location's own, like its phone number, not part of the website's
design: they save as you leave a box, reach the published website within a few
minutes **without Publish**, and are not in the website's History or its Undo. Each
location has its own.

## Changing a block into another

**Change to** keeps a section's place, heading and words. Text, building blocks and the Call to action
change into each other at once, as do Text in columns, Photo columns and Questions (a column, a card
and a question are the same part). Between those groups, Bookodile splits or joins the words to fit.
Booking-data sections only change Layout; Text's columns and a block's arrangement are Layout too.

## Worked examples

**A barbershop whose customers ask for their own barber.** The Team block's Book button
stays on, so a customer reading a barber's bio books with that barber in one tap. A
physiotherapy clinic whose patients keep seeing the same therapist keeps it on for the
same reason.

**A barbershop where the owner still cuts.** Under the owner's name the Team block reads
"Owner & Master Barber", under the others "Senior Barber" and "Barber", so a new
customer knows whom to ask for. A physiotherapy clinic writes "Senior physiotherapist"
and "Sports massage therapist" for the same reason; the booking page shows neither.

**A gym whose classes are taught by whoever is on the rota.** Members book a class, not a
trainer, so the owner turns the Team block's Book button off: the team page introduces
the trainers, and **Book** in the menu leads to the classes.

**A physiotherapy clinic that wants calm, not flash.** It uses Luxe Two's layout
but turns Photos under the pointer to Still and Cards to Filled under Details; a
tattoo studio on the same template keeps the zoom and the hairline edges.

**A nail salon with photos of only some services.** In the Cards layout, a card without
a photo simply has none, so the row looks uneven; in the Price list, a service without
one shows its first letter on a plain square. The owner adds a photo to each
remaining service in **Services** — the booking page shows them too — or turns off
*Show each service's photo* until every service has one, and the photos
stay in the gallery. Switching to Luxe Two later keeps the switch off, because the
owner set it. A barbershop whose cuts look alike in a small square turns the photos off
too, and keeps a price list of words and prices: the gallery shows the work.

A nail salon that posts every set fills **Instagram** and **TikTok**; a personal
trainer with workout videos fills **YouTube** alone. Each footer shows only the icons
filled in, so neither points customers at a network it isn't on.

## Limits

- **A template cannot add or remove a block.** Every template has the same blocks and
  the same switches; it changes layouts and looks only.
- **Switching template keeps what you set**, and changes a switch you never touched to
  the new template's starting value. After the first publish a switch changes the
  design only; a template's own pages are taken only with **Use … with its pages**.
- **No block of your own design.** The Building block's seven arrangements are the
  free-form one; there is no HTML, script or custom CSS.
- **One weight for every heading.** A heading's weight is set for all of them at
  once, never one heading at a time, and text has no weight setting.
- **Services, team, reviews, opening hours and address come from your booking setup.**
  Change them there; the website follows without Publish.
- **Reviews are always the newest**, never chosen one by one.
- **Promotions and events are all-or-nothing per block.** A block shows every one
  with **Your website** on; to keep one off the website, turn its switch off on the
  add-on's page. Two Promotions blocks show the same promotions.
- **Four social networks: Instagram, Facebook, TikTok and YouTube**, one profile each.
  No WhatsApp, X, LinkedIn or Pinterest, and icons only — the footer links your
  profiles; it never shows your posts.
- **25 blocks on a page and 12 pages** — limits that only stop misuse; a typical page
  has four to eight blocks.