The home page
The home page is not one big page you edit in one place. It is a stack of 20 separate sections, each its own entry in Contentful, held together by a list. To change something you find the section it belongs to and edit that entry.
How it fits together
One Page entry called Homepage holds a field called Sections. That field is a list of 20 entries, and the order of the list is the order on the page — drag an item up and it moves up the page. Each of those entries then links the cards, buttons and pictures it needs.
Page "Homepage" ← Kind = homepage. This is the home page.
└─ Sections (a list of 20)
├─ 1 Hero → its slides → each slide's picture or video
├─ 2 Content rail → its cards → each card's picture
├─ 3 CTA Band → its button, its phone number
└─ … and so on, in page orderTwo consequences worth knowing. First, publishing a card is not enough — the section holding it has to be published too, and so does the Page entry if you added or moved a section. Second, several sections point at the same reusable entries (buttons, phone numbers), so editing one of those changes every section using it.
One content type does most of the work
14 of the 20 sections are the same content type — a Content rail. They look completely different from each other because of two dropdowns: Card source (what goes in the row) and Layout (how it is arranged). So learning one content rail teaches you most of the page, and the section pages below mainly tell you which two values to expect.
| Content type | Sections | Which ones |
|---|---|---|
| Content rail (card row) | 14 | Trust bar, Featured trips, Why Kuoni? (icon row), What's your vibe?, Current offers, Popular destinations, Exclusive hotels, Who's travelling?, The Kuoni way (illustrated), Meet our experts, Ways to book, Testimonials, Feefo reviews, Guides and inspiration |
| CTA Band | 4 | Offers banner, Where to go when, Gift list band, Search band (last section) |
| Hero | 1 | Hero |
| Banner | 1 | Introduction |
The page, top to bottom
The same order as the Sections list in Contentful. Open a section to see what a visitor sees, which field changes which part of it, and how to edit it step by step.
| # | Section | What it is | Entry in Contentful |
|---|---|---|---|
| 1 | HeroHero | The full-width banner at the very top of the page: a big headline over a photo or a video, with a button. It can hold more than one slide, and it rotates between them. The four cards that overlap its bottom edge belong to it too. | Homepage — Hero fully documented |
| 2 | Trust barContent rail (card row) | The narrow cream band under the banner carrying the Which? badges and the Feefo rating. | Homepage - Trust Section |
| 3 | Offers bannerCTA Band | The large red panel with a photo cut into a curve on the right, and a white button. | Homepage — Offers banner |
| 4 | IntroductionBanner | Centred text near the top of the page: a small line, a large statement and a paragraph. No picture, no button. | Homepage — Introduction |
| 5 | Featured tripsContent rail (card row) | A sideways-scrolling row of trip cards with a picture, a destination, tags, an offer strip and a price. | Homepage — Popular Featured trips |
| 6 | Why Kuoni? (icon row)Content rail (card row) | Four small icons in a row, each with a short title and a line of text. | Homepage — Why Kuoni? |
| 7 | What's your vibe?Content rail (card row) | A grid of picture tiles, each a link to a holiday type. The last tile can be a darkened 'View all' tile. | Homepage — What's your vibe? |
| 8 | Current offersContent rail (card row) | A scrolling row of offer cards. Some are cream with a photo; some are plain red with copy only. | Homepage — Current offers |
| 9 | Popular destinationsContent rail (card row) | A grid of destination photos with the region above the name, written across the picture. | Homepage — Popular destinations |
| 10 | Exclusive hotelsContent rail (card row) | A scrolling row of hotel cards with a photo, a star rating, board type and a price. | Homepage — Exclusive hotels |
| 11 | Who's travelling?Content rail (card row) | A second grid of picture tiles, this time by traveller type, again ending in a 'View all' tile. | Homepage — Who's Travelling? |
| 12 | The Kuoni way (illustrated)Content rail (card row) | Four large hand-drawn illustrations with a title and a paragraph under each. | Homepage — the Kuoni way |
| 13 | Where to go whenCTA Band | A cream card sitting over a full-width photo, with a heading, a paragraph, a yellow button and a phone number. | Homepage — Where to go when - CTA |
| 14 | Meet our expertsContent rail (card row) | A scrolling row of expert cards: a portrait, a name, a role, a short bio and an 'About …' link. | Homepage — Meet our experts |
| 15 | Ways to bookContent rail (card row) | Three yellow panels — book online, expert hub, visit a store — each with an icon, copy and a button. | Homepage — Ways to book |
| 16 | Gift list bandCTA Band | A cream card over an underwater photo, inviting visitors to start a gift list. | Homepage — Gift CTA |
| 17 | TestimonialsContent rail (card row) | One customer story at a time: two overlapping holiday photos on the left, the quote on the right. | Homepage — Testimonials |
| 18 | Feefo reviewsContent rail (card row) | The average rating, an award badge, and a scrolling row of short customer reviews. | Homepage — Feefo reviews |
| 19 | Guides and inspirationContent rail (card row) | One large article tile beside a grid of four smaller ones, each with a title and topic tags. | Homepage — Guides & inspiration |
| 20 | Search band (last section)CTA Band | A yellow band at the foot of the page with a round portrait, a line of copy, a black button and a phone number. | Homepage — SEARCH FOR TRIPS & PACKAGES |
Before you start
Open the home page entry
Homepage (Page) in the development-refactoring environment. You will need to be signed in to Contentful.