25 website layout examples from the We.Inc template library, each with a box wireframe of the page structure, a preview of the design, why the layout works and which businesses it suits. Includes a guide to choosing a layout.
<p class="lead text-xl text-[#3a3a3a] mb-8"> A website layout is the order and arrangement of sections on a page: what comes first, what sits side by side, and where the main button goes. Below are 25 layouts, each shown as a simple box wireframe and a preview of the full design. All 25 are <strong>We.Inc template designs</strong>, not customer sites, grouped by the kind of business they suit. The blue box in each wireframe is the main call to action. </p>
<h2>How to read the wireframes</h2> <p>Each row of boxes is one band of the page, from top to bottom as you scroll. Boxes side by side sit next to each other on a desktop screen; on a phone they stack in the same order, so the left box shows first. This page is about the whole-page arrangement. For the top of the page specifically, see <a href="/guides/website-hero-section-examples">hero section examples</a>; for menus, see <a href="/guides/website-navigation-examples">navigation examples</a>.</p>
<h2>Five layout patterns in one table</h2> <table> <thead><tr><th>Pattern</th><th>Order of sections</th><th>Best when</th><th>Examples below</th></tr></thead> <tbody> <tr><td>Service funnel</td><td>Hero, services, proof, form</td><td>Visitors need a quote or booking</td><td>1-8</td></tr> <tr><td>Visit</td><td>Hero, menu, story, hours and map</td><td>People come to you in person</td><td>9-14</td></tr> <tr><td>Book or join</td><td>Hero, prices or schedule, booking</td><td>Appointments, classes, memberships</td><td>15-19</td></tr> <tr><td>Grid</td><td>Hero, grid of items, detail, enquiry</td><td>Listings, products, portfolio</td><td>20-24</td></tr> <tr><td>Reader</td><td>Hero, work, about, signup</td><td>The goal is a returning audience</td><td>25</td></tr> </tbody> </table>
<h2>Service business layouts</h2>
<h3>1. Emergency trade: urgent band under the hero</h3> <p><em>Template: Ironpeak Roofing (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Emergency trade: urgent band under the hero layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Phone</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline + 2 buttons</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Storm claim band</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Materials</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Step 1</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Step 2</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Step 3</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Free inspection form</div></div></div> <figure> <img src="/images/template-previews/ms-peak-roofing.webp" alt="We.Inc Ironpeak Roofing template design for a roofing company" loading="lazy" width="1930" height="1206" /> <figcaption>Ironpeak Roofing, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> A full-width coloured band right under the hero catches people with an urgent problem (storm damage) before they scroll past. <strong>Use it for:</strong> Roofers, restoration, locksmiths, towing.</p> <h3>2. Multi-trade with a service-area block</h3> <p><em>Template: Summit Trades (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Multi-trade with a service-area block layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Phone</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline + quote button</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Trust strip</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Plumbing</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">HVAC</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Electrical</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service area map + towns</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Quote form</div></div></div> <figure> <img src="/images/template-previews/ms-summit-trades.webp" alt="We.Inc Summit Trades template design for a plumbing, HVAC and electrical company" loading="lazy" width="1930" height="1206" /> <figcaption>Summit Trades, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Three equal service cards, then a named list of areas served, answers "do you do this, here?" in two scrolls. <strong>Use it for:</strong> Any business with a defined travel area.</p> <h3>3. Service list with a featured specialty</h3> <p><em>Template: Voltline Electric (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Service list with a featured specialty layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Phone</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Trust strip</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service list (each links to booking)</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Featured: panel & EV charging</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book form</div></div></div> <figure> <img src="/images/template-previews/ms-voltline-electric.webp" alt="We.Inc Voltline Electric template design for a electrician" loading="lazy" width="1930" height="1206" /> <figcaption>Voltline Electric, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> One high-value service gets its own section, so the page sells the job you most want without hiding the rest. <strong>Use it for:</strong> Trades with one profitable specialty.</p> <h3>4. Checklist and instant quote</h3> <p><em>Template: Brightwell Cleaning (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Checklist and instant quote layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Get a quote</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Recurring</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Deep clean</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Office</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">What's included checklist</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Service area</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Quote form</div></div></div> <figure> <img src="/images/template-previews/ms-brightco-cleaning.webp" alt="We.Inc Brightwell Cleaning template design for a cleaning company" loading="lazy" width="1930" height="1206" /> <figcaption>Brightwell Cleaning, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> A visible checklist of what every visit includes answers the main worry (what exactly do I get?) before the price form. <strong>Use it for:</strong> Cleaning, lawn care, pool service.</p> <h3>5. Local craftsman story</h3> <p><em>Template: Halden Woodworks (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Local craftsman story layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book a walkthrough</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline naming the town</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Trust strip</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">How a job goes: steps</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Neighbour reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Visit / contact</div></div></div> <figure> <img src="/images/template-previews/ms-halden-local.webp" alt="We.Inc Halden Woodworks template design for a carpentry workshop" loading="lazy" width="1930" height="1206" /> <figcaption>Halden Woodworks, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Naming the town in the headline and showing "how a job goes" builds trust for big, one-off jobs. <strong>Use it for:</strong> Carpenters, builders, remodelers.</p> <h3>6. Professional firm: practice areas and people</h3> <p><em>Template: Sterling & Vance LLP (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Professional firm: practice areas and people layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Consultation</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Practice</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Practice</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Practice</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Practice</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Partner</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Partner</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Partner</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Results</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Consultation form</div></div></div> <figure> <img src="/images/template-previews/ms-sterling-law.webp" alt="We.Inc Sterling & Vance LLP template design for a law firm" loading="lazy" width="1930" height="1206" /> <figcaption>Sterling & Vance LLP, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> People choose a firm by area of law and then by the person; the layout follows that order. <strong>Use it for:</strong> Law, accounting, financial advice.</p> <h3>7. Consultancy: proof first</h3> <p><em>Template: Linden Consult (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Consultancy: proof first layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Intro call</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Client quote strip</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Problem 1</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Problem 2</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Problem 3</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Approach</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">About the team</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Testimonials</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Contact</div></div></div> <figure> <img src="/images/template-previews/ms-linden-consult.webp" alt="We.Inc Linden Consult template design for a business consultancy" loading="lazy" width="1930" height="1206" /> <figcaption>Linden Consult, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Proof sits straight after the hero, then the page frames services as problems the buyer recognises. <strong>Use it for:</strong> Consultants, coaches, B2B services.</p> <h3>8. Short accountant page</h3> <p><em>Template: Ledgerline CPA (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Short accountant page layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Trust strip</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Services grid</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Contact form</div></div></div> <figure> <img src="/images/template-previews/ms-ledgerline-accounting.webp" alt="We.Inc Ledgerline CPA template design for a accounting firm" loading="lazy" width="1930" height="1206" /> <figcaption>Ledgerline CPA, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Four sections. For a buyer who already knows they need an accountant, less is faster. <strong>Use it for:</strong> Any service where the buyer arrives decided.</p>
<h2>Food and hospitality layouts</h2>
<h3>9. Café: menu, story, visit</h3> <p><em>Template: Ember & Roast (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Café: menu, story, visit layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Visit</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Our story</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Gallery</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Hours + directions</div></div></div> <figure> <img src="/images/template-previews/ms-ember-roast.webp" alt="We.Inc Ember & Roast template design for a coffee shop" loading="lazy" width="1930" height="1206" /> <figcaption>Ember & Roast, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Menu first, visit last: people check what you serve, then where and when. <strong>Use it for:</strong> Cafés, bakeries, bars.</p> <h3>10. Bakery with order-ahead</h3> <p><em>Template: Flour & Fern (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Bakery with order-ahead layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Order ahead</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline + 2 buttons</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Today's bake</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">The bakers</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Order for pickup</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Visit</div></div></div> <figure> <img src="/images/template-previews/ms-flour-and-fern.webp" alt="We.Inc Flour & Fern template design for a bakery" loading="lazy" width="1930" height="1206" /> <figcaption>Flour & Fern, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> A dedicated order section turns browsing into pre-orders. <strong>Use it for:</strong> Bakeries, butchers, meal prep.</p> <h3>11. Restaurant long scroll</h3> <p><em>Template: Azafran (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Restaurant long scroll layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Reserve</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Full-width photo + headline</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">The room</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Tonight's menu</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Gallery</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">The chef</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Press quotes</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Reservations</div></div></div> <figure> <img src="/images/template-previews/ms-saffron-dining.webp" alt="We.Inc Azafran template design for a restaurant" loading="lazy" width="1930" height="1206" /> <figcaption>Azafran, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> For a destination restaurant, atmosphere sells the booking, so the page tells a story before asking. <strong>Use it for:</strong> Fine dining, tasting menus, venues.</p> <h3>12. Three-section restaurant</h3> <p><em>Template: Crust (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Three-section restaurant layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Reserve</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Hours, location, reserve</div></div></div> <figure> <img src="/images/template-previews/ms-crust-pizzeria.webp" alt="We.Inc Crust template design for a pizzeria" loading="lazy" width="1930" height="1206" /> <figcaption>Crust, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Hero, menu, visit. The fewest sections a restaurant can have and still answer every question. <strong>Use it for:</strong> Casual restaurants, takeaways.</p> <h3>13. Schedule first</h3> <p><em>Template: ROAM (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Schedule first layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Find us today</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">This week's stops</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Story</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book the truck</div></div></div> <figure> <img src="/images/template-previews/ms-roam-foodtruck.webp" alt="We.Inc ROAM template design for a food truck" loading="lazy" width="1930" height="1206" /> <figcaption>ROAM, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> When location changes daily, "where are you today" is the main question, so it goes right under the hero. <strong>Use it for:</strong> Food trucks, markets, pop-ups.</p> <h3>14. Event service with enquiry form</h3> <p><em>Template: Harvest & Vine (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Event service with enquiry form layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book a tasting</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Event type</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Event type</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Event type</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">The chef</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Sample menu</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Gallery</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Enquiry form</div></div></div> <figure> <img src="/images/template-previews/ms-harvest-catering.webp" alt="We.Inc Harvest & Vine template design for a catering company" loading="lazy" width="1930" height="1206" /> <figcaption>Harvest & Vine, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Event types up front let the visitor self-sort; a sample menu makes the price feel concrete. <strong>Use it for:</strong> Caterers, planners, venues.</p>
<h2>Booking and membership layouts</h2>
<h3>15. Booking-led salon</h3> <p><em>Template: Lumé Salon & Beauty Spa (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Booking-led salon layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book now</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline + 2 buttons</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Services & prices list</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Booking</div></div></div> <figure> <img src="/images/template-previews/ms-lume-salon.webp" alt="We.Inc Lumé Salon & Beauty Spa template design for a hair salon and spa" loading="lazy" width="1930" height="1206" /> <figcaption>Lumé Salon & Beauty Spa, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> A price list and a booking block are all most salon visitors need. <strong>Use it for:</strong> Salons, barbers, nail and lash studios.</p> <h3>16. Class schedule and pricing</h3> <p><em>Template: Tidewater Yoga (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Class schedule and pricing layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book a class</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Weekly schedule table</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Plan</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Plan</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Plan</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">First-week offer</div></div></div> <figure> <img src="/images/template-previews/ms-tidewater-yoga.webp" alt="We.Inc Tidewater Yoga template design for a yoga studio" loading="lazy" width="1930" height="1206" /> <figcaption>Tidewater Yoga, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Schedule then prices then a first-visit offer follows the decision a new student makes. <strong>Use it for:</strong> Yoga, pilates, dance, martial arts.</p> <h3>17. Gym with programmes and tiers</h3> <p><em>Template: Iron (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Gym with programmes and tiers layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Join</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Programme</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Programme</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Programme</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Programme</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Schedule</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Coach</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Coach</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Coach</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Tier</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Tier</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Tier</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">First session</div></div></div> <figure> <img src="/images/template-previews/ms-iron-strength.webp" alt="We.Inc Iron template design for a strength gym" loading="lazy" width="1930" height="1206" /> <figcaption>Iron, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Membership tiers side by side make comparison easy; a free first session lowers the step. <strong>Use it for:</strong> Gyms, clubs, memberships.</p> <h3>18. Clinic: care, team, location</h3> <p><em>Template: Verdant Family Health (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Clinic: care, team, location layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Services</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Doctor</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Doctor</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Nurse</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Location + parking</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">New patient booking</div></div></div> <figure> <img src="/images/template-previews/ms-verdant-clinic.webp" alt="We.Inc Verdant Family Health template design for a family medical clinic" loading="lazy" width="1930" height="1206" /> <figcaption>Verdant Family Health, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Patients want to know what you treat, who they will see and how to get there. <strong>Use it for:</strong> Clinics, dentists, physios.</p> <h3>19. Vet with urgent note</h3> <p><em>Template: Meadowpaw Veterinary (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Vet with urgent note layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Book</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Services</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">The clinic</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Visit + "call first if urgent"</div></div></div> <figure> <img src="/images/template-previews/ms-paws-vet.webp" alt="We.Inc Meadowpaw Veterinary template design for a veterinary clinic" loading="lazy" width="1930" height="1206" /> <figcaption>Meadowpaw Veterinary, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> The visit section tells urgent cases to phone, so the booking form is not used for emergencies. <strong>Use it for:</strong> Vets, urgent care, any service with emergencies.</p>
<h2>Grid layouts: listings, shops and portfolios</h2>
<h3>20. Listings grid</h3> <p><em>Template: Keystone Realty (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Listings grid layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Sell with us</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Listing</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">How we sell</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Valuation request</div></div></div> <figure> <img src="/images/template-previews/ms-keystone-realty.webp" alt="We.Inc Keystone Realty template design for a real estate agency" loading="lazy" width="1930" height="1206" /> <figcaption>Keystone Realty, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Buyers get the grid; sellers get their own section and a separate call to action. <strong>Use it for:</strong> Real estate, rentals, car dealers.</p> <h3>21. Single product page</h3> <p><em>Template: Verre Halo (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Single product page layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Specs</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Price + Buy</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product photo + headline + price</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Spec</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Spec</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Spec</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Gallery</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Buy block</div></div></div> <figure> <img src="/images/template-previews/ms-verre-single.webp" alt="We.Inc Verre Halo template design for a single product store selling a desk lamp" loading="lazy" width="1930" height="1206" /> <figcaption>Verre Halo, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> The price sits in the menu bar and at the end; everything between answers "is it worth it?" <strong>Use it for:</strong> One-product brands, launches, crowdfunded products.</p> <h3>22. Small-batch shop</h3> <p><em>Template: Cellar & Rowan (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Small-batch shop layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Shop</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Cart</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline + 2 buttons</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Photo</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">How it is made</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Materials</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Maker story</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Batch list signup</div></div></div> <figure> <img src="/images/template-previews/ms-cellar-goods.webp" alt="We.Inc Cellar & Rowan template design for a home goods shop" loading="lazy" width="1930" height="1206" /> <figcaption>Cellar & Rowan, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Products first, then the story that justifies the price, then a list signup for the next batch. <strong>Use it for:</strong> Makers, candles, ceramics, food.</p> <h3>23. Product drop</h3> <p><em>Template: Loop (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Product drop layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Shop</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Reserve</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Drop headline + date</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Featured product</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Product</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Story</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Reviews</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Drop reminder</div></div></div> <figure> <img src="/images/template-previews/ms-loop-sneakers.webp" alt="We.Inc Loop template design for a sneaker store" loading="lazy" width="1930" height="1206" /> <figcaption>Loop, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> The next release leads; the shop grid serves people who want something now. <strong>Use it for:</strong> Limited runs, apparel, collectibles.</p> <h3>24. Portfolio grid first</h3> <p><em>Template: Drafthouse (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Portfolio grid first layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Logo</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Enquire</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Project</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Approach</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">What we take on</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Project enquiry form</div></div></div> <figure> <img src="/images/template-previews/ms-drafthouse-architecture.webp" alt="We.Inc Drafthouse template design for a architecture studio" loading="lazy" width="1930" height="1206" /> <figcaption>Drafthouse, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Six projects straight after the headline; the work does the selling. <strong>Use it for:</strong> Architects, designers, photographers.</p>
<h2>Personal and creator layouts</h2>
<h3>25. Writer with newsletter</h3> <p><em>Template: Plume (a We.Inc template design, not a customer site).</em></p> <div role="img" aria-label="Wireframe of the Writer with newsletter layout" style="max-width:420px;border:1px solid #d0d0d0;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;margin:12px 0"><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Name</div><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Menu</div><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Newsletter</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Headline</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Selected features</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Featured piece</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Essays</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">About</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:2px solid #4F98FB;background:rgba(79,152,251,.12);border-radius:6px;padding:6px 8px;font-size:12px;text-align:center;font-weight:600">Newsletter signup</div></div><div style="display:flex;gap:6px"><div style="flex:1;border:1px dashed #9a9a9a;border-radius:6px;padding:6px 8px;font-size:12px;text-align:center">Contact for commissions</div></div></div> <figure> <img src="/images/template-previews/ms-plume-writer.webp" alt="We.Inc Plume template design for a writer and journalist" loading="lazy" width="1930" height="1206" /> <figcaption>Plume, a We.Inc template design.</figcaption> </figure> <p><strong>Why it works:</strong> Work, then a newsletter signup: the goal is readers who come back, not a single enquiry. <strong>Use it for:</strong> Writers, creators, speakers.</p>
<h2>How to choose a layout</h2> <ol> <li><strong>Name the one action</strong> you want most visitors to take (call, book, buy, enquire, subscribe). That becomes the blue box.</li> <li><strong>List the three questions</strong> a visitor asks before taking it (for example: do you cover my area, what does it cost, can I trust you). Each gets a section, in that order.</li> <li><strong>Pick the pattern</strong> from the table above that matches.</li> <li><strong>Cut sections</strong> you cannot fill with real content. An empty "Results" section or placeholder reviews do more harm than a shorter page.</li> <li><strong>Check on a phone.</strong> Side-by-side boxes stack; make sure the main button still appears early (see <a href="/guides/mobile-first-web-design">mobile-first design</a>).</li> </ol> <p>Once a single page gets long, split it into several pages. <a href="/guides/website-structure">Website structure</a> shows how the sections above turn into a site map.</p>
<h2>Common layout mistakes</h2> <ul> <li>Putting the contact form only at the bottom of a long page, with no button in the header.</li> <li>Three columns of text on a phone-first audience; use cards that stack cleanly.</li> <li>Keeping template numbers, reviews or badges you cannot back up.</li> <li>A gallery before the visitor knows what you do.</li> </ul>
<h2>Use one of these layouts</h2> <p>Every layout here is a template in the <a href="/templates">We.Inc template library</a>. On the free plan you can use up to 3 template sites on a we.inc address (no AI credits, no custom domain). Starter at $20/month adds AI building, so you can ask for changes such as "move reviews above services", and custom domains; see <a href="/pricing">pricing</a>. Mock up your version first with the <a href="/tools/website-mockup-generator">website mockup generator</a>, then check the result with the <a href="/tools/website-grader">website grader</a>.</p>
The order and arrangement of sections on a page: what appears first, what sits side by side, and where the main call to action goes.
For most service businesses: a hero with one clear button, services, proof such as reviews, and a contact or quote form, with the button repeated in the header.
As many as it takes to answer the visitor's main questions, and no more. The examples here range from four sections to eight.
No. All 25 are We.Inc template designs, used to show layout patterns.
Side-by-side boxes stack vertically in the same order, so put the most important item on the left and keep the main button near the top.
Layout is the arrangement of one page. Structure is how pages connect across the site: the hierarchy, URLs and internal links.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.