Example: holiday rentals

A holiday park rents out fifteen types of accommodation: chalets, lodges, glamping tents. Each needs an attractive page with a photo, a description, the facilities and a booking button, and the site needs an overview where guests compare them. Bookings run through an external booking system; the pages are the shop window. The same setup suits hotels (a page per room type), campsites, boat rental or a car dealer’s stock.

• /stay-forest-lodge-6/, /stay-dune-chalet-4/, … — one page per accommodation
• /accommodation/ — a normal page with every accommodation as a card

Properties

Property	Type	Code	Example value
Title	Title	title	Forest Lodge for 6
URL	URL / Slug	href	forest-lodge-6
Name	Text field	name	Forest Lodge
Sleeps	Number	sleeps	6
Bedrooms	Number	bedrooms	3
Price from	Text field	price	€129 per night
Pets	Text field	pets	Dogs welcome (max. 2)
Tagline	Text field	tagline	Wake up between the pine trees
Description	Rich text (Pro)	description	Several paragraphs in HTML, with <p>, <strong> and links.
Facilities	Item list (Pro)	facilities	Sauna, Wood stove, Dishwasher, … one per line
Photo	Thumbnail (Pro)	photo	the main photo
Brochure	File (Pro)	brochure	the address of a PDF with the floor plan, from the Media Library
Booking link	URL	booking	this accommodation in the booking system

Rich text keeps formatting (paragraphs, bold, links), where a Textarea only keeps line breaks. You enter it as HTML; write it in a normal page or post first and copy it from the Code editor if HTML is not your thing.

The Photo becomes the page’s featured image, so the overview cards, your theme and social media previews all use it.

Title and address

• Template title: @code_title_540@
• Href: /stay-@code_href_540@

The page, section by section

1. Hero: the photo across the full width, the name and tagline, and a Book now button.
2. Key facts: a row of three facts with icons: 6 guests, 3 bedrooms, Dogs welcome (max. 2).
3. Description: the formatted text.
4. Facilities: the list, in two or three columns.
5. Prices and booking: From €129 per night, the Book now button again, and a Download the brochure link.
6. Other accommodation: cards of the other accommodation types.

Block editor

• Hero: a full-width Image block bound to Photo, with its alt text bound to Tagline; then a Heading bound to Name, a Paragraph bound to Tagline, and a Button with its link bound to Booking link.
• Key facts: Columns with a Paragraph each: @code_sleeps_540@ guests, @code_bedrooms_540@ bedrooms, and one bound to Pets. A bound Paragraph keeps its own text when the row leaves the property empty, so type Sorry, no pets in it as the fallback.
• Description: a Custom HTML block containing only the token @code_description_540@. Rich text is put in as HTML, with its formatting intact.
• Facilities: the Item List block (Pro).
• Prices and booking: a Paragraph From @code_price_540@, a Button bound to Booking link and a Button with its link bound to Brochure, which links to the file.
• Other accommodation: the Grid block with Layout Cards and Show thumbnail.

Elementor

• Hero: the Thumbnail widget (Pro) at full width, with a fixed Height and Object Fit set to cover on the Style tab, so every photo gets the same shape. Below it: the Heading widget with Name, a Text Editor with @code_tagline_540@, and the RowSprout Button widget with Link property Booking link.
• Key facts: three Icon Boxes with the titles @code_sleeps_540@ guests, @code_bedrooms_540@ bedrooms and @code_pets_540@. Or fill the titles with the Page Field tag (Pro).
• Description: a Text Editor containing only the token @code_description_540@. Rich text is put in as HTML, with its formatting intact.
• Facilities: the Item List widget (Pro). It shows the first six items; for a longer list, use a Rich text property in a Text Editor instead.
• Prices and booking: a Heading From @code_price_540@ and a Button widget for the booking link. For the brochure, use a URL property with the file’s address from the Media Library, and a Button widget with that Link property.
• Other accommodation: the Grid widget with Layout Type Cart Layout and Show thumbnail.

WPBakery

• Hero: the page’s featured image, shown by your theme. A Custom Heading @code_name_540@, a Text Block @code_tagline_540@ and a Button with the link @code_booking_540@.
• Key facts: three columns with text such as @code_sleeps_540@ guests.
• Description: a Text Block containing only the token @code_description_540@.
• Facilities: the Item List element (Pro), in 2 or 3 columns.
• Prices and booking: a Text Block From @code_price_540@, a Button for the booking link, and for the brochure a URL property with the file’s address and a Button with that link.
• Other accommodation: the Grid element with Layout Cards and Show thumbnail.

Caution

Give a Rich text token an element of its own. Its value contains paragraphs, and a paragraph in the middle of a sentence or a heading breaks the page’s HTML.

The overview page

On the normal page Accommodation, add a Grid with this template, shown as cards (Layout Cards; in Elementor, Layout Type Cart Layout), Show thumbnail on, Thumbnail size Medium and three Columns (in Elementor, with Sort direction By row (horizontal)). Every accommodation appears as a card with its photo and title; cards in a row get the same height. In Elementor, under Style → Thumbnail, give the images a fixed Height so the cards line up even when the photos have different proportions.

The cards show the page title, so make the titles informative: Forest Lodge for 6 tells a guest more than Forest Lodge.

Variations

• Seasonal offers: add a Text field Offer (Book 7 nights, pay 6) and show it with a widget or bound block that has no fallback, so accommodation without an offer shows nothing.
• Several parks: make a template per park with the same design, or one template with a Park property and the park in the URL value (lakeside-forest-lodge-6).
• Without Pro: use a Textarea for the description and the facilities (one per line, shown with the Textarea widget or a bound Paragraph), and the template’s featured image for every page. The booking link and the overview work the same.