Building a landing page with components | Doghouse SaaS Knowledge Base [Skip to content](#main) [ ![Doghouse SaaS Knowledge Base](/storage/branding/01M3N8PQ7PSDNQBBKKJM6XGW03.svg) ](https://nginx.deploy-lagoon-production.districtcms-docs.dh1.amazee.io) [Product documentation](/articles) [Roadmap](/roadmap) Toggle navigation [Product documentation](/articles) [Roadmap](/roadmap) 1. [Home](/) › 2. [Product documentation](/articles) › 3. [Page building & display](/articles?category=6) › 4. Building a landing page with components Building a landing page with components ======================================= Updated 6 days ago · 2 min read Search Search Overview -------- A landing page is built from a short, deliberate sequence of components. This article is about choosing that sequence: what to put first, what goes in the middle, and how to keep the page focused. For the landing page form itself, see [**Landing pages**](/articles/landing-pages). What makes a page work is not the number of components, it is the intent: - It exists for one purpose, such as a grant round, a service or a section of the site. - It asks the reader to take one action, or helps them find the page they want next. - It carries only the information needed for that. --- A real example: the homepage ---------------------------- The demo site's homepage is a landing page built from eight components, in this order: Position Component What it does 1 Card grid, Service style The main areas of work, as four icon tiles. 2 Value chips The vision and values, in one line each. 3 Highlights Four headline figures. 4 Listing, Latest news The newest articles, updated by themselves. 5 and 6 Card grid Programs, then regions, as image cards. 7 CTA, Spotlight style The one thing the department wants people to do now: make a submission. 8 Listing, Upcoming events What is on next. ![The Components list on the homepage form, showing its components as one-line summaries in page order.](/storage/dBIWG2cblFSMxOAILTdT9RNyOPBaMvXsGR1Tr54N.png) The large banner at the very top of the homepage is not a component. It is the homepage hero block, edited separately. See [**The homepage hero, site alert and footer acknowledgement**](/articles/the-homepage-hero-site-alert-and-footer-acknowledgement). --- A typical sequence ------------------ Position Good choices Why Top Alert, if something is time-critical. Text or Card grid otherwise. The reader learns straight away what the page is for. Middle Text, Process steps, Accordion, Highlights The detail, set out so it can be scanned. Bottom CTA, or a Listing of related news or events The next step, once the reader has what they need. Building it ----------- 1. Create the landing page and give it a title. See [**Landing pages**](/articles/landing-pages). 2. Add each component in order, top to bottom, and fill in the items inside it where it has them. 3. Press **Preview** to check the sequence, then **Save**. [**Add, remove, and delete site components**](/articles/add-remove-and-delete-site-components) covers adding each one, and [**Site components overview**](/articles/site-components-overview) shows what each looks like. --- Keeping it focused ------------------ A landing page works because it asks for one thing. Every component you add that does not serve that makes it less likely to happen. If you are reaching for a third or fourth explanatory component, that content probably belongs on a separate page this one links to. Related articles ------------------ - [ Site components overview → ](/articles/site-components-overview) - [ Adding and removing site components → ](/articles/add-remove-and-delete-site-components) - [ Reordering and nesting site components → ](/articles/reorder-page-components-with-drag-and-drop) - [ Creating content and choosing the right content type → ](/articles/creating-content-and-choosing-the-right-content-type) Was this article helpful? ------------------------- Your feedback helps us prioritise what to rewrite. Yes No [ Back to Page building & display ](/articles?category=6) On this page **Need additional help?** Submit a support request through the [**support portal** ](https://doghouse.atlassian.net/servicedesk/customer/portals)or email © 2026 [Doghouse SaaS](https://doghouse.agency) [Glossary](/articles/glossary)