Church Website Design Examples

33 real sites · 762 sections

There are 33 church website designs here — live sites that are churches and ministries, including 60, Hillsong, Elevation Church, Saddleback Church and North Point — cut into 762 sections. 91% use a light theme and 9% a dark one; the most common headline fonts are Proxima nova (3), Sofia pro (1) and DM Sans (1). 24 of 33 open with a hero, 0 show pricing on the homepage and 2 carry testimonials.

At a glance

Sites: 33
Sections captured: 762
Light / dark: 91% light · 9% dark
Top heading fonts: Proxima nova (3), Sofia pro (1) and DM Sans (1)
Accent colours: blue 14neutral 9red 5
Most common sections: features (29), hero (24), statement (18) and call to action (17)
Top industries: Lifestyle (32)
Award winners: 1 of 33

What makes a good church website design

Church sites welcome people who have never visited: service times and location, what to expect, ministries for kids and groups, recent sermons and ways to give.

What these 33 church websites have in common

Measured from the captures, not opinion — use it to plan a church website against what already works.

Sections they use

29 include features, 24 include hero, 18 include statement and 17 include call to action. 4 answer objections with an FAQ and 17 (52%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → call to action → statement. Compare them side by side: features section examples, hero section examples, statement section examples.

Type and colour

Light layouts lead (91% vs 9% dark). Headlines are most often set in Proxima nova (3), Sofia pro (1) and DM Sans (1). The most common accent hues are blue (14), neutral (9) and red (5). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 6,096px tall at desktop width — roughly 7 screens of scrolling, with Mosaic Church the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.

33 church website designs worth studying

Hillsong — “Check our Church Locations, Listen to Hillsong Music and Exclusive Content from the Hillsong Team” 33 sections, headlines in Proxima nova, light theme, palette #ffffff and #000000; the homepage runs hero → statement → footer.
Saddleback Church — “We exist to urgently lead people to say “yes” to Jesus and his purposes for their lives.” 10 sections, headlines in Archivo Expanded, light theme, palette #ffffff and #1980cc; the homepage runs call to action → features → footer.
Lakewood Church — “Watch messages, worship, and encouragement from Lakewood Church. Find service times, ways to connect, and resources to strengthen your faith and hope.” 37 sections, headlines in Museo sans, light theme, palette #ffffff and #0081ca; the homepage runs hero → features → call to action.
Redeemer Presbyterian — “As a church of Jesus Christ, Redeemer exists to help build a great city for all people through a movement of the gospel that brings personal conversion, communi” 15 sections, headlines in Gotham SSm A, light theme, palette #00a9cd and #363636; the homepage runs showcase → logo cloud → about → features.
Passion City Church — “We are a Jesus Church. A tribe of His followers connected by our common faith and a desire to see our city [and the world] come to know…” 1 sections, headlines in Helvetica Now, light theme, palette #00b7e3 and #f0f0f0.
Christ Church Nashville — “Christ Church Nashville - Diverse Interdenominational Church in South Nashville” 21 sections, headlines in Bebas Neue, light theme, palette #032f3c and #f2f2f2.

How to use these references for a church website

Service times, address and a 'plan your visit' section belong in the hero. Keep sermons and events fresh on the homepage, and make giving simple but not pushy. Start with 60, Hillsong and Elevation Church, open each site at full size and compare their features and hero sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.