Most church websites are built for people who already go to the church. The menu is full of ministry acronyms, the homepage announces an internal meeting, and the service time is hidden three clicks deep. Meanwhile, the person the site should serve most, the stranger deciding whether to walk through your doors on Sunday, leaves in under thirty seconds.
Good church website design flips that priority. It treats the site as a digital front door: warm, clear, and quick to answer the handful of questions a visitor actually has. This guide walks through the page structure a church site needs, and gives you concrete layout patterns for the three sections that matter most: the homepage hero, the service times block, and the online giving flow.
Start Here: Design for the Visitor, Not the Member
Members already know when you meet, where to park, and who the pastor is. They visit your site for a sermon replay, a signup form, or the giving page. Visitors know nothing. They are nervous, curious, and skimming on a phone, often late on a Saturday night.
So before you choose a template or a color palette, decide this: the first screen of your homepage belongs to the first-time visitor. Everything a regular attender needs can live one tap away in the navigation.
The five questions every first-time visitor asks
- When do you meet? Day and exact time, not “multiple services available”.
- Where are you? Full street address, a map, and parking details.
- What is a service actually like? Length, music style, dress code, and whether anyone will single them out.
- What happens to my kids? Check-in process, age groups, safety policy.
- What do you believe? In plain language, not a 4,000 word doctrinal statement.
If your homepage answers all five without a single click, your design is already ahead of most churches in your city. Church Design Co tackles the same question from another angle.
The Core Page Structure a Church Website Needs
Resist the urge to build twenty pages. A focused site with eight to ten well written pages outperforms a sprawling one every time. Here is the structure we recommend as a starting point.
| Page | Primary audience | Job of the page |
|---|---|---|
| Homepage | First-time visitor | Answer when, where, and what to expect in 10 seconds |
| Plan Your Visit | First-time visitor | Remove every reason to feel awkward on arrival |
| About / Our Story | Curious visitor | Show who you are and who leads |
| What We Believe | Researching visitor | State beliefs clearly and without jargon |
| Kids & Youth | Parents | Prove the environment is safe and fun |
| Sermons / Messages | Visitors and members | Let people sample your teaching before visiting |
| Events | Both | Show current life, with low-pressure entry points |
| Give | Members and supporters | Complete a donation in under 60 seconds |
| Contact | Everyone | Offer a human reply, fast |
Everything else (small groups, missions, volunteering, prayer requests, ministry pages) is optional and should earn its place. If a page would get fewer than twenty visits a month, make it a section of an existing page instead.
Layout Pattern 1: The Homepage Hero
The hero is the band of content above the fold. It carries more weight than the rest of your site combined, so give it a strict job description.
What belongs in the hero
- One warm photograph of real people in your actual building. No stock images of hands raised against a purple sky, no empty sanctuary.
- A headline that names your town. “A church family in Saint-Laurent” beats “Encounter the Divine” because it confirms the visitor is in the right place.
- Service time and address in text, directly under the headline. Not baked into an image, so it stays readable and searchable.
- One primary button: Plan Your Visit. High contrast, large tap target.
- One secondary link: Watch a recent message or Get directions.
What to remove from the hero
- Auto-rotating sliders. They dilute the message and hurt load speed.
- Full screen background video with text that becomes unreadable on a phone.
- Four competing buttons of equal weight.
- A welcome letter from the pastor. Valuable, but it belongs on the About page.
Rule of thumb: if someone screenshots the top of your homepage, that screenshot alone should tell them when and where to show up.
The order of homepage sections below the hero
- Service times and location block (see the next section)
- “What to expect on your first visit” in three short cards: arrival, the service, your kids
- A 60 to 90 second welcome video, or three honest photos of your congregation
- Latest sermon, with a play button
- Next two or three events, with dates
- A short beliefs teaser linking to the full page
- Footer with address, map, phone, email, service times repeated, and social links
Layout Pattern 2: The Service Times and Location Block
This is the single most visited piece of information on any church website, and it is routinely designed badly. Treat it as a component, not a paragraph.
A reliable pattern is a two column block: times on the left, an embedded map on the right. On mobile, the times stack above the map.
| Element | How to write it |
|---|---|
| Day and time | “Sundays at 9:30 and 11:15” in large type, with service length noted: “about 70 minutes” |
| Address | Full postal address as selectable text, plus a tappable “Open in Maps” link |
| Parking | Where to park, whether it is free, and which door to use |
| Accessibility | Ramp, elevator, reserved seating, hearing assistance, restroom access |
| Kids timing | Which services include children’s programming and the check-in cutoff |
Two technical details that pay off:
- Mark up your address, phone and service times with schema.org structured data (Church or PlaceOfWorship, with openingHoursSpecification). This helps search engines display your times directly.
- Keep your Google Business Profile identical to the site. Mismatched hours are the most common reason visitors arrive at the wrong time.
The “Plan Your Visit” Page: Your Highest Value Page
Link to it from the hero, the navigation and the footer. Its only goal is to lower anxiety. Structure it as a timeline of the visit:
- Before you come: what to wear (show a photo instead of describing it), how early to arrive.
- When you arrive: which entrance, who will greet you, where the coffee is.
- Your kids: check-in process, security tags, age groups, what they will do.
- The service: how long, how many songs, what the teaching is like, whether you will be asked to stand up or introduce yourself. Answering “will I be singled out?” with a clear no removes a real barrier.
- After the service: who to talk to, and an easy next step.
Add an optional, very short form: first name, email, how many are coming, any kids and their ages. Four fields maximum. A form that asks for a mailing address and marital status will be abandoned.
Beliefs and About Pages: Clarity Over Theology Dumps
People check your beliefs page for one reason: to see whether they would be welcome and whether you are a healthy community. Serve that need.
- Open with five to seven short statements, one sentence each, in plain language.
- Offer the full doctrinal statement as an expandable section or a PDF for those who want depth.
- Name your denomination or affiliation openly. Hiding it creates suspicion.
- On the About page, show real faces with real names: lead pastor, staff, and a line about who they are outside of ministry. Avoid formal portraits that look like a law firm.
Translate your insider language
| Insider wording | Visitor friendly wording |
|---|---|
| Life Groups / Connect Groups | Small groups that meet in homes during the week |
| Fellowship Hall | The large room next to the entrance |
| Tithes and offerings | Give to support the church |
| Discipleship pathway | How to grow and get involved here |
Layout Pattern 3: The Online Giving Flow
Giving pages fail for predictable reasons: too many clicks, a redirect to an unbranded third party page, forced account creation, or no clarity about where the money goes. Design the flow, not just the page.
The six step flow that converts
- Entry point: a visible “Give” item in the main navigation and a short URL such as yourchurch.org/give that can be read aloud from stage.
- Reassurance first: one short paragraph on what gifts fund, with a link to your financial accountability or annual report.
- Amount selection: preset buttons plus a custom field. Default to a sensible amount, never to zero.
- Frequency: one time or recurring, shown as two clear options. Recurring giving is the single biggest lever for stability, so make it visually equal, not hidden.
- Payment: card, bank transfer, and digital wallets such as Apple Pay or Google Pay. Wallets dramatically reduce drop-off on mobile because no typing is required.
- Confirmation: an instant thank you with a receipt, and one gentle next step such as “Set this up monthly” or “See what your gift supports”.
Keep the whole thing on your own domain with your own branding where your provider allows embedding. A sudden jump to a generic payment screen is where trust leaks away. Also list offline options (in person, mail, bank transfer) for those who prefer them, and mention tax receipt handling, since that varies by country.
Events and Sermons: Current or Not at All
Nothing damages credibility faster than a homepage promoting an event that happened last spring. If you cannot maintain a full calendar, do not build one.
- Show the next three events as cards with date, time, location, a one line description, and whether registration is required.
- Each event needs its own page with structured data so it can appear in search and be shared cleanly.
- Label events that are genuinely open to newcomers. A visitor cannot tell whether “Elders Prayer” is for them.
- For sermons, lead with the most recent message, include audio, video and a short summary, and keep the archive searchable by topic, speaker and Bible passage.
- Set a recurring reminder to archive expired events. A simple monthly content check is enough.
Navigation, Mobile and Speed
Navigation rules
- Five to seven top level items. Suggested: Plan Your Visit, About, Beliefs, Kids, Sermons, Events, Give.
- Give the “Give” link button styling so it stands apart.
- Avoid deep dropdown menus. If a submenu needs a scrollbar, your structure is too complex.
- Repeat service times, address and phone in the footer of every page.
Mobile and performance
The majority of first visits to a church site happen on a phone, frequently between Saturday evening and Sunday morning. Design the mobile layout first and verify the following:
- Body text at 16px or larger, with generous line height.
- Tap targets of at least 44 by 44 pixels.
- Phone numbers and addresses that are tappable.
- Compressed images in modern formats, lazy loaded below the fold.
- A homepage that loads in under three seconds on a mobile connection.
- Contrast ratios that meet WCAG AA, captions on sermon videos, and descriptive alt text. Accessibility is both a legal and a hospitality issue.
Photography, Type and Tone
Clutter is the enemy of warmth. A church site should feel calm, spacious and human.
- Photography: invest in one real photo session covering arrival, worship, kids’ space, coffee, and candid conversation. Authentic photos of an imperfect room beat polished stock every time.
- Type: two typefaces maximum. One for headings, one for body. Keep line length around 65 to 75 characters.
- Color: one primary brand color, one accent reserved for buttons, and plenty of neutral space.
- Tone: write like a person inviting a neighbor over, not like an institution issuing a notice. Short sentences. Second person. No exclamation marks stacked three deep.
What to Measure After Launch
Design is never finished. Track a small set of numbers and review them quarterly:
- Visits to the Plan Your Visit page, and form submissions from it
- Clicks on “Get directions” and on the phone number
- Giving page conversion rate, and the share of recurring gifts
- Mobile share of traffic and mobile bounce rate
- Top search queries bringing people to the site, usually your church name plus “service times” or “near me”
Pre-Launch Checklist
- Service times visible without scrolling on mobile
- Address, map link and parking instructions present
- Plan Your Visit page live and linked from the hero
- Beliefs stated in plain language
- Kids safety and check-in explained
- Giving flow tested end to end with a real small donation
- Contact form delivering to a monitored inbox, with a stated response time
- SSL certificate active and all pages served over HTTPS
- Structured data for the organization, service times and events
- Google Business Profile matching the site exactly
- Privacy policy and cookie notice in place
- Someone named as responsible for monthly content updates
FAQ: Church Website Design
How much does it cost to build a church website?
A do-it-yourself build on a website builder typically runs a few hundred dollars per year once you include hosting, domain and a premium template. A professionally designed custom site generally falls between roughly 3,000 and 15,000 dollars depending on page count, photography, integrations and content writing, with ongoing hosting and maintenance on top. Budget separately for your giving platform, which usually charges per transaction.
How do I design a website for a church, step by step?
Define your primary audience (first-time visitors), list the pages you actually need, write the content before designing, choose a platform, build the homepage hero and service times block first, add the Plan Your Visit page, connect your giving provider, test everything on a phone, then launch and review quarterly.
What is the 80/20 rule in churches?
It is the common observation that roughly 20 percent of the congregation contributes around 80 percent of the volunteering and giving. It also has a facilities version: a room feels full at about 80 percent capacity, which is when growth tends to stall. Applied to your website, the principle means a small number of pages, chiefly the homepage, service times and giving page, will generate the vast majority of value, so that is where your design effort should go.
What is the best website builder for churches?
The honest answer is that the best platform is the one your team will keep updated. General builders are quick and inexpensive but require manual setup for giving and sermons. Church-specific platforms bundle giving, events, media and member tools together. WordPress offers the most flexibility and long-term control, which is why many churches with a growing media library and custom needs choose it. Pick based on who will maintain the site weekly, not on the feature list.
How many pages should a church website have?
Eight to ten core pages is plenty for most congregations. Add pages only when there is a clear audience and someone committed to keeping them current. reachrightstudios.com has covered this at length.
How often should a church website be updated?
Check events and sermon content weekly, review photos and staff details every six months, and reassess the overall structure once a year. A visibly outdated site signals an inactive church, even when the opposite is true.
Bringing It Together
Strong church website design is not about trends, animations or a bigger hero video. It is about hospitality expressed through structure: a homepage that answers the obvious questions instantly, a service times block that leaves nothing ambiguous, a Plan Your Visit page that calms nerves, and a giving flow that respects people’s time. Clarity and warmth, consistently applied, will outperform a beautiful but confusing site every single Sunday.
If you are planning a rebuild and want a site structured around real visitor behavior rather than internal org charts, the team at The Hangline can help you map the pages, write the content and build it properly.