Skip to content
CafeJS Docs

Pages and sections

Every page is a list of sections you can add, remove and drag into a new order. Each section has its own width, spacing and colour scheme.

The sections

Banner, Image with text, Rich text, Columns, Rows of image and text, Photo collage, Photo gallery, Testimonials, Questions and answers, Call to action, Price list, Team, Contact and opening hours, Form (contact / booking), Booking (calendar request) and Blog posts. With the shop on: Product categories, Products, Product details and Cart.

A new section comes with sample text and images, so it shows in the preview at once; replace them with real content.

Four fields every section shares

  • Layout: the width (Narrow, Normal, Wide, Full bleed) and the space above and below in px. Empty follows the Theme.
  • Colour scheme: the section’s colours; empty uses base.
  • Anchor (for #links): a name to link straight to the section, e.g. book makes the link #book.
  • Hide this section: hides it without deleting it.

Note

Two sections on one page shouldn’t share an anchor: an #anchor link only reaches the first.

Add a page

  1. In Pages, open the vi folder, press Tạo mới (New) and type the title. The file name (also the address) is made from it without accents, e.g. “Giới thiệu” becomes gioi-thieu.
  2. Create the English copy in the en folder, with the same file name as the vi one.
  3. Add links to each language’s Menus.

A page created outside a language folder goes into vi/. Under pnpm dev a new page shows in the preview at once; on a live site, after the next build.

Nested pages

A page inside a subfolder (for example dich-vu/nieng-rang) shows a breadcrumb at the top, with the pages above it.

These three are edited under Header & footer, one copy per language. They have Anchor and Hide this section too. The footer adds two options, both off by default: a back-to-top button and Giant name, the brand name written very large across the full width just above the copyright line.

Tip

To see every section and its variants before you choose, open /design.