Building the Home Page – Part 2

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

• 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
  • Follow Instructions to get Latitude & Longitude
    • Latitude: 36.162664
    • Longitude: -86.781602
  • Marker Address: Buckalucka Cinemas Downtown Nashville TN

Brick #5

No Events! Let’s Create a Few

• Events 1, 2, 3
  • Name
  • Start Date & Time
  • End Date & Time
  • Repeat?
  • Address
  • Google Maps Link if You’d like
  • 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

First, Let’s Setup a Mailchimp Account

• Mailchimp.com
• Sign Up or Log In
  • Create Username & Password
  • Confirm Account
  • Log In
• Create a List
• We’ll talk more about how to use Mailchimp in a later module

Create The Brick

• Name: Mailchimp
• 1st: Text
• 2nd: MailChimp Sign-Up
• Centered
• Background-color: #eaeaea
• Brick Size: 80 Above Content
• 1st:
  • Text-Area 1: 35
    • Don't Forget to Join Our Mailing List
  • Text-Area 2: #8d8d8d
    • Keep up with the latest news & updates from Demo Church
• 2nd:
  • Get Your MailChimp API Key (Later)
  • Get Your MailChimp List ID (Later)
  • Add any custom Messages
  • Overall Width: 500
  • Corner Radius: 10

Footer

• 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 in all
  • Link Spacing: 35
  • Social Icon Size: 35
  • Default Colors: #cccccc
  • Mouse-Over: #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
  • [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 that we installed at the beginning. It adds the current year and the copyright symbol in.
    • (In the video you will see "Privacy Policy". We will get into that later on)
    • the [encrypted_mail] block is from the encrypted mail plugin. Put your email address in the text field and between the blocks.