CMS page 2: how to use

Delete this row once you have copied the page.

This page is the starting point for a new page of this type (Figma CRS v1.3 › CMS Page 2). It holds fifteen sections from the component library, in the order the design uses them. The text is the design copy, left in so you can see how each section reads at full length; replace all of it.

To make a new page

1. In Content › Pages, tick this page, then Select › Duplicate. Give the copy its own title and URL key, and set its Store View. Use a title without a country (for example Heating & Cooling, not Heating & Cooling UK): the title shows in the breadcrumb and the browser tab. If you need an admin label for the country, put it in the title of the category block instead.
2. Give the page its own images. Open any image on the page, choose Select from Gallery, go into the wysiwyg folder and use Create Folder to make one named after your page (for example wysiwyg/boiler-hire). Open the new folder and use Browse Files to upload your images. The admin cannot copy or move images between folders, so every image has to be uploaded, even ones you are reusing. Then open each image element in turn (hero, image & text, blurb icons, team photos, tabs, logos and articles, including the separate mobile image where there is one) and select its replacement from your folder. Never leave a new page using another page’s folder, or replacing a photo on one page changes the other.
3. Replace the text: the hero title, every section heading and body, the blurbs, team members, tabs, testimonials, FAQs and article cards, and every link.
4. Change the related products. In the Related products section, hover over the product cards and click the gear icon of the Products element. Configure which products to show and how many (3 fill one row, 6 fill two), then Save. Only products that are enabled on the page’s store appear. Each card shows the product image, its name and the first three items of the product’s Features field; a product with no Features shows no bullets.
5. Delete any section you do not need, and add others by copying a row from the matching component page.
6. Delete this guide row.

The fifteen sections, in order

1. Hero banner — banner-dark-blue-left
2. Content & side info — content-side-info-white
3. Image & text — image-text-light-slate-left
4. Image & text, mirrored — image-text-light-slate-right
5. Blurbs — blurbs-white-left
6. Team — team-light-slate-left
7. Tabbed content — tabbed-white-center
8. Logo scroller — logo-scroller-light-slate
9. Testimonials — testimonials-blue-center
10. FAQs — faq-light-slate-center
11. CTA banner — cta-custom-dark-center
12. Recent articles: related case studies — recent-articles-light-slate-left
13. Recent articles: related articles — recent-articles-white-left
14. Content & CTA — content-cta-white-center
15. Related products — related-products-light-slate. This is Page Builder’s own Products element in a styled row; there is no separate component page for it, so copy this row to reuse it (related-products-white and related-products-light-blue also work).

Each row carries one variant class in Advanced › CSS Classes, which sets its background and alignment. The other variants of every section except Related products are on the matching … Components pages, which also say what image sizes to ask a designer for.