.avif)
Everything you need to make Steeple your own, from editing content to changing colors and fonts.
This guide covers the everyday tasks: updating events and staff, changing colors and fonts, swapping images and editing shared parts of the site. Most changes take only a few clicks.
Events live in the CMS. Open the CMS panel, choose Events, then click New Event to add one, or click an existing event to edit it. Save as Draft to keep it hidden, or Publish to make it live. Delete removes it from the site.
Required fields: Name, Start date, Location, Featured image and Summary.
Optional fields: Category (Worship, Community, Youth or Outreach), Event details and Registration link. The Register button only appears when a link is added.
Keep the Summary to 150–160 characters. It shows on event cards and becomes the event page's search description.
The Upcoming Events section on Home, the Events page and each event's own page all update automatically.
Staff profiles live in the CMS under Staff Members. Each person gets their own profile page, built from the Staff Members Template.
Required fields: Name, Role and Photo. Use a portrait at least 800px wide, compressed under 150KB.
Optional fields: Ministry area, Short bio, Full bio and Email address. The contact button only appears when an email is added.
Keep the Short bio to 150–160 characters. It becomes the profile page's search description.
The Our Pastoral Staff page updates automatically when you add, edit or remove a staff member.
Every color in Steeple is a variable, so you can restyle the whole site in one place. Open the Variables panel, change a color's value, and every element that uses it updates.
Brand colors: Brand Blue, Accent Pink and Accent Green.
Neutrals: Near Black, Dark Gray, White, Black, Gray 100 and Gray 200.
Change the variable instead of a single class's color, so the site stays consistent.
After changing a color, check that text is still easy to read against its background.
Typography and spacing are variables too. Update them in the Variables panel to change headings, body text and spacing on every page at once.
Fonts: Font Body and Font Heading (both Open Sans) and Font Accent (Ubuntu).
To use a new font, add it in Site settings under Fonts, then choose it in the matching font variable.
Sizes: Size Body and Size H1–H6. Line heights: Line Height Body and Line Height H1–H6.
Spacing: Space XS, Space S, Space M and Space L, plus Container Gutter and Container Width.
Replace the sample photos with your own. Compress each image first; WebP or AVIF files under 150KB keep pages fast.
Page images: select the image, open its Settings, and choose Replace image.
Write alt text that describes the image, or mark it as decorative if it adds no information.
Event and staff images are changed in each CMS item, not on the canvas.
Logo: replace the logo image inside the Navbar and Footer components.
Shared parts of the site are components. Edit a component once and the change appears on every page that uses it.
Navbar and Footer: menu links, logo and footer details.
Button Primary and Button Secondary: reusable call-to-action buttons.
To edit one, double-click it on the canvas or open it from the Components panel.
Every font, image and icon in Steeple is licensed for personal and commercial use. The photos are AI-generated; the Licenses page lists each source.
.avif){kind=icon}
