Let editors change your home page

A designer's mockup hard-codes its services, its hero, its questions and its contact details. This page turns each of them into something admins edit in the admin area, so changing a service or a phone number never needs a developer.

What you build

Every file on this page is in docs/examples/sections/. It assumes your home page is already src/custom/site/home.html (see Build your home page) and that npm run dev is running.

Why a content type without public pages

A content type normally gives every entry a page of its own, a list page and a sitemap entry. A service card or a hero needs none of those. With Generate public pages off, a type's entries are edited, drafted and published like any other, but they show only where you put a card block, <arc-content-partials>, laid out by the type's partials.html. Their cards have no links: {{ url }} and the block's {{ listUrl }} are empty. Publishing one of its entries publishes the home page again, when the home page shows the type.

1. Services

1. Open Content, Content types and choose Add Content Type. Name it Services (singular Service), slug services.

2. Turn Generate public pages off, and set Entry order to Your own order.

3. Add three fields: Icon (icon), Short description (text) and Link (text), for where a card sends people. The cover image is already there for a picture.

4. Copy docs/examples/sections/templates/services/partials.html to src/custom/site/templates/services/partials.html, and restyle it to match your mockup. Save the type: a template folder named after the slug is picked as its Card template for you.

5. Put the block where the services were in home.html:

   <arc-content-partials content-type="services" count="12" section-title="What we do"></arc-content-partials>

6. Add a few services and publish them, then choose Arrange on the Services list and drag them into the order the page should show.

The template reads the fields by their short names: {{ icon }}, {{ short-description }}, {{ link }}.

<section class="services" data-arc-if="hasItems">
    <h2>{{ sectionTitle }}</h2>
    <div class="service-grid" data-arc-loop="items">
        <article class="service">
            <i data-arc-if="icon" class="{{ icon }}" aria-hidden="true"></i>
            <img data-arc-if="coverImage" src="{{ coverImage_m }}" alt="">
            <h3>{{ title }}</h3>
            <p>{{ short-description }}</p>
            <a data-arc-if="link" href="{{ link }}">Learn more</a>
        </article>
    </div>
</section>

To hide a service for a while, unpublish it; it stays in the admin as a draft.

2. The hero

1. Add a content type Hero, slug hero, with Generate public pages off.

2. Add the fields Subtitle, Button text and Button link, all text. The entry's title is the heading and its cover image the picture.

3. Copy docs/examples/sections/templates/hero/partials.html to src/custom/site/templates/hero/partials.html.

4. Replace the mockup's hero in home.html with a block of one card:

   <arc-content-partials content-type="hero" count="1"></arc-content-partials>

5. Write one Hero entry and publish it.

With count="1" the block shows the newest published entry, so an editor can prepare next month's hero as a draft and publish it when the time comes. Keep the hero's heading in the entry's title, so it is still the page's main heading.

3. Questions and answers

The setup wizard already made a Frequently asked questions page at /info/faq (see Write static pages). Its FAQ field holds the questions as rows that editors add, edit and drag into order, and the page publishes them with FAQPage structured data. For most sites, fill in that page and link to it.

To show a few questions on the home page as well, use a small type, because a card cannot loop over a repeating field such as FAQ:

1. Add a content type Questions, slug questions, with Generate public pages off and Your own order. It needs no fields: the title is the question and the body is the answer.

2. Copy docs/examples/sections/templates/questions/partials.html to src/custom/site/templates/questions/partials.html. It binds the answer with data-arc-bind="content", so its formatting and links are kept.

3. Add the block to home.html, with a link to the full page:

   <arc-content-partials content-type="questions" count="6" section-title="Questions"></arc-content-partials>

Only the FAQ page carries FAQPage structured data; the home page block is plain HTML. Since 2023 Google shows FAQ results only for some government and health sites, so the structured data mainly helps AI assistants.

4. Contact details and social links

1. In Settings, About, fill in the contact email, the public phone, the address and the Social and profile links, one URL per line. They also go into your structured data.

2. Copy docs/examples/sections/footer.html to src/custom/site/footer.html, or add its parts to the footer you have.

<div data-arc-site-if="contact">
    <p data-arc-site-if="email"><i class="fa-solid fa-envelope"></i> <a data-arc-site="email"></a></p>
    <p data-arc-site-if="phone"><i class="fa-solid fa-phone"></i> <a data-arc-site="phone"></a></p>
    <ul class="footer-social" data-arc-site-loop="social">
        <li><a href="{{ url }}" aria-label="{{ label }}"><i class="{{ icon }}"></i></a></li>
    </ul>
</div>

data-arc-site="email" on a link prints the address and makes it a mailto: link; phone makes a tel: link. data-arc-site-if keeps an element, with its icon or label, only when the site has that detail, and contact is true when it has any of them. The social loop repeats its first child per link, with the icon of the site the link points at. The same attributes work in the header, on the home page, in templates and in static pages: the whole list is in Site info.

The example footer also keeps the default footer's list of the published standard pages (data-arc-site-loop="pages") and its copyright line.

5. Put it live

1. Check the home page in npm run dev: the blocks fill from the published entries, and the footer from About.

2. Deploy the website with npm run deploy, choosing Website or Everything (see Deploy). Publishing reads the templates from the live site, so the new partials.html files must be there before the home page is built with them.

After that, editors need no deploy:

Limits

• Card blocks work on the home page only, not in templates or static pages.
• A card cannot loop over a repeating field (Info Cards, Gallery, FAQ). Use one entry per item, as the Questions type does.
• The header menu is still plain HTML in src/custom/site/header.html; there is no menu editor yet.
• A block shows at most 50 cards.

Next

Fill in the About, Contact and policy pages: Write static pages.