Building The About Page

Wow. Give yourself a pat on the back. We have done a ton so far, but there's more. You'll see that it gets easier and easier, and faster and faster as we move along. In this video, we'll build the About page.

Brick #1

• Name: About Us (Same for ALL Pages)
• 1st Content Type: Text
• Centered
• Brick BG Settings
  • BG Image Upload
  • Fill
  • Opacity: 70
  • BG Color: #000
• Brick Size: 320 Above Content
• Parallax: ON, Speed 30
• Shadow: ON #000
• 1st Content
  • Color: #FFF
  • Text Size: 100 / 100
  • Mobile: 65 / 65
  • Lato - Bold
• <p class="hvr-grow">ABOUT US</p>

Brick #2

BEFORE - Let’s Create Small Groups Posts

• New Event
  • Name: Youth
  • Text: Lorem ipsum dolor sit amet, lobortis porta sodales lacus felis orci, id ultrices nunc diam, ultrices molestie, ante faucibus ridiculus vitae amet eros, cras in aptent cras. Pharetra nascetur labore ornare nec, sed vivamus ac vel. Lectus porttitor sociosqu ultricies vitae consequat. Scelerisque orci odio tellus auctor ipsum laoreet. Neque eleifend arcu interdum id. Malesuada metus urna augue lorem. Sit eget hic in eleifend consectetuer.
  • Add or Select Calendar: Small Groups
  • Time
  • Address
  • Featured Image
• Repeat with Women’s Small Group / Men’s Bible Study

Make The Brick

• Name: Small Groups
• 1st: Text
• 2nd: EventGrid
• Centered
• Brick BG
  • Color: #eaeaea
• Brick Size: 999999999999
• Content Type Margins
  • Full Width Content-Types
• 1st
  • 50 / 50
  • Lato / Light
  • Small Groups
• 2nd
  • Events: Small Groups / BG Color #ffffff
  • Grid Layout: 3 / 3 / Inner Margin below image: 20
  • Featured Image: Crop height 300
  • Featured Image Overlay Keyframes: #000000
  • Title:
    • Below Image, Left
    • Size 22 / Lato / Bold
  • Excerpts: ...[Read More]

Background Color Doesn’t Work Properly (Bug)

• To Fix: CSS
• Download Plugin: Add CSS/JS by Duo Leaf
  • Add new CSS Rule

  • .mp-stacks-content-type-eventgrid .mp-stacks-grid-item-inner { background-color: #ffffff; }

Brick 3

• Name: This Great City
• 1st: Text
• 2nd: Video
• Left/Right
• Brick BG:
  • Upload Image
  • Fill
  • Opacity: 15
  • BG Color: #000000
• Brick Size:
  • Space Above 100
  • Content-Type Widths: 40
• Parallax: ON, 30
• 1st
  • Text Area 1:
    • FFFFFF, 50, 50
    • Lato / Semi-Bold
    • A HEART FOR THIS GREAT CITY
  • Text Area 2:
    • FFFFFF
    • Libero ante, sociis blandit amet, non vestibulum orci sem a a, tristique volutpat, diam nostra. Tempor hendrerit id cum fringilla, non eu eros, dapibus lectus a quis, duis ligula eget ac, enim suscipit phasellus urna fermentum.
• 2nd
  • Video URL: https://www.youtube.com/watch?v=QBnISkavbu4

Brick #4

First Lets Create Some Team Members

• New Post
  • Title: Jenny Doe
  • Text: Anything That you’d Like
  • Excerpt: Creative Director (Enable in Screen Options)
  • Category: Team Member (Create)
  • Featured Image
• Add 3 More: (Don’t forget to Add their Category!)
  • John Doe - Worship Leader
  • Jenny Smith - Small Groups Leader
  • Dan Smith - Pastor

Create Brick

• Name: Meet Our Team
• 1st: Text
• 2nd: PostGrid
• Centered
• Brick Size: 999999999999
  • Space Above: 80
  • Space Below: 0
• Content Margins:
  • 2nd Content-Type Space Above: 10
  • Full Width
• 1st
  • Text Area 1: 50 / 50 / Lato / Ultra-Bold
    • MEET OUR TEAM
  • Text Area 2
    • This is the team that makes it happen every single day!
• 2nd
  • Post Categories: Team Member
  • Grid layout:
    • 4 Per Row
    • 4 Total
    • 0 Spacing
    • 0 inner Margin
    • 0 Margin below
  • Featured Image Overlay
    • 1st keyframe: Opacity .5, Color: #000
    • 2nd keyframe: Opacity 0, Color: #000
  • Titles
    • Over Image, Middle-Centered
    • Color: #FFFFFF
    • 20 / 24
    • Lato / Bold
  • Dates (Don’t show Dates or Backgrounds)
  • Excerpts
    • Over Image, Middle Centered
    • Color: #ffffff
    • 15 / 19
    • Lato / Bold

Brick #5

• Name: Our Leadership
• 1st: Text
• Centered
• Background-Color: #2573A5
• Space Above: 100
• 1st
  • Text Area 1
    • FFFFFF / 50 / Lato / Light
    • OUR LEADERSHIP
  • Text Area 2
    • FFFFFF
    • Blandit cursus, arcu fringilla ut mauris vestibulum nunc velit, ullamcorper nullam eget aliquam ullamcorper consectetuer pede, sit tristique in imperdiet libero sollicitudin. Vestibulum aenean nec et enim vitae tristique, eu posuere libero quam tincidunt, non duis diam. Sapien conubia suscipit arcu condimentum. Porttitor ligula placerat mattis aenean aenean, sed vehicula. Quis litora congue sit, eu dui at volutpat wisi tortor erat, vel vestibulum eget est ante euismod aliquet, pede suscipit justo quisque sed semper et. Blandit consequat. Porta sem massa sit massa imperdiet magna, consectetuer justo ac.
  • Text Area 3
    • Button: [mp_button icon_position="left" text="Contact Us" link="/connect" open_type="_self"]