Skip to main content
Green binary audience decorative image for WebBuild

Building the Home Page – Part 2

Finish building your church's WordPress home page with a Google Map, events section, Mailchimp integration, and footer customization.

Module 2 - Lesson 3
WebBuild Links: WebBuild Home Module 1 Module 2 Module 3 Module 4 Module 5 Module 6 - Resources & Extras

Building the Home Page – Part 2

Play

These first Bricks may seem a little overwhelming, but I’m absolutely sure that you will get your head wrapped around what we are doing. In this video, we will finish off the Home Page… and when done… we will celebrate! What an amazing page built in such a short amount of time.

Brick #4: Map

  • Name: Map
  • 1st Content Type: Google Map
  • Centered
  • Brick Size Settings:
    • Max Width: 999999999999
    • Space Above Content: 0
    • Content-Type Margins: Full Width
  • 1st Content:
    • Centered
    • Follow Instructions to get Maps API Key
    • Make Draggable
    • Marker Title: Demo Church
    • Body Text: Sunday 9:30 & 11am
    • Latitude: 36.162664
    • Longitude: -86.781602
    • Marker Address: Buckalucka Cinemas Downtown Nashville TN

Brick #5: Upcoming Events

No Events! Let’s Create a Few

  • Events 1, 2, 3:
    • Name
    • Start Date & Time
    • End Date & Time
    • Repeat?
    • Address
    • Google Maps Link if desired
    • Featured Image
    • IMPORTANT: Create or Select Calendar - Main

Creating the Events Brick

  • Name: Upcoming Events
  • 1st: Text
  • 2nd: EventGrid
  • Centered
  • Background:
    • Upload Image / Fill Area / 20 / #000
  • Brick Size Settings:
    • Max Width: 999999999999
    • Content-Type Margins: Full Width
  • Parallax: on / Speed 30
  • 1st:
    • Color: #FFF / 50 / 50 / Lato / Light
    • Upcoming Events
  • 2nd:
    • Events to Show: All Events
    • Grid Layout: 3 Posts / 3 Total / 20 Spacing
    • Featured Images: 300 Height
    • Featured Images Overlay: 2 Keyframes
    • Title: Over Image, Bottom Left / #fff / 22 / 30 / Lato / Bold
    • Excerpt: Don’t show (uncheck)

Brick #6: Mailchimp Integration

First, Let’s Setup a Mailchimp Account

  1. Go to Mailchimp.com
  2. Sign Up or Log In:
    • Create Username & Password
    • Confirm Account
  3. Create a List (details covered in later modules).

Create The Brick

  • Name: Mailchimp
  • 1st: Text
  • 2nd: MailChimp Sign-Up
  • Centered
  • Background-color: #eaeaea
  • Brick Size: 80 Above Content
  • 1st:
    • Text-Area 1: Don't Forget to Join Our Mailing List
    • Text-Area 2: Keep up with the latest news & updates from Demo Church
      • Text Color: #8d8d8d
      • Text Size: 35
  • 2nd:
    • Get MailChimp API Key and List ID later
    • Add any custom Messages
    • Overall Width: 500
    • Corner Radius: 10
  • Name: Footer
  • 1st: SocialLinks
  • 2nd: Text
  • Centered
  • Background-Color: #222222
  • 1st Content Type: Space Below: 0
  • 2nd Content Type: Space Below: 20
  • 1st:
    • Enter Links
    • 4 Per Row
    • Link Spacing: 35
    • Social Icon Size: 35
    • Default Colors: #cccccc
    • Mouse-Over Color: #3ec483
    • Link Spacing on Mobile: 20
    • Social Size on Mobile: 26
    • Grow on Mouseover
  • 2nd:
    • Color: #cccccc
    • Text Size: 16 / Line-Height: 24
    • Mobile Text Size: 14 / Line-Height: 22 / Paragraph Spacing: 0
    • Text: 
      [c][y] Demo Church. All Rights Reserved.
Buckaluka Cinemas, Downtown Nashville, TN
(123) 456-7890 | [encrypted_email text="info@demochurch.site"]info@demochurch.site[/encrypted_email]
      • [c][y] is from the Current Year and Date plugin, adding the current year and copyright symbol dynamically.
      • The [encrypted_mail] block ensures email security using the encrypted mail plugin.