1. Home
  2. Docs
  3. Plugin Features
  4. Contact Management
  5. Meet the Team Page Design
  6. Design Inspiration CRM

Design Inspiration CRM

Scroll down for setup details…


Meet the Team (1)

  • Create a new page.
  • Add the Display People block to the page.
  • Set the block to 4-column display.
  • Set Display People block to align center.
  • Add a cover block with a header to your page.
  • Set your cover block to full-width display.
  • Publish your page.
  • To reduce the space around the title, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-title {margin: 6px;}
    • NOTE All images used on this page are the same size. See more on working with images.

Board of Directors (1)

  • Create a new page.
  • Add the Display People block to the page twice.
  • Set the first block to 2-column display and the second to 4-column display.
  • Center align both Display People blocks.
  • Publish your page.
  • To enlarge the Connected Business title, add this bit of CSS to your customizer: .connected_businesses a {font-size: x-large;}
  • To reduce the space around the title, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-title {margin: 6px;}
    • NOTE: All images used on this page are the same size. See more on working with images.

Board of Directors (2)

  • Create a new page.
  • Add the Display People block to the page twice.
  • Set the first block to 2-column display and the second to 4-column display.
  • Center align both Display People blocks.
  • Publish your page.
  • To enlarge the Connected Business title, add this bit of CSS to your customizer: .connected_businesses a {font-size: x-large;}
  • To reduce the space around the title, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-title {margin: 6px;}
  • To display images as ovals, add this bit of CSS to your customizer: .cdcrm-person img {border-radius: 50%;}
    • NOTE: All images used on this page are the same size. See more on working with images.

Staff & Board (1)

  • Create a new page.
  • Add the Display People block to the page twice.
  • Set the first block to 3-column display and the second to 4-column display.
  • Center align both Display People blocks.
  • Add header blocks above each People block.
  • Publish your page.
  • To reduce the space around the title, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-title {margin: 6px;}
  • To create rounded corners for your images, add this bit of CSS to your customizer: .cdcrm-person img {border-radius: 50%;}
    • NOTE All images used on this page are the same size. See more on working with images.

Staff & Board (2)

  • Create a new page.
  • Add the Display People block to the page twice.
  • Set the first block to 3-column display and the second to 4-column display.
  • Un-select display image option.
  • Add header blocks above each People block.
  • Publish your page.
  • To reduce the space around the title, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-title {margin: 6px;}
    • NOTE All images used on this page are the same size. See more on working with images.

Meet the Team & About Us (1)

  • Create a new page.
  • Add the Display People block to the page.
  • Set the block alignment to full-width & centered.
  • Set the block to 4-column display.
  • UN-select the display description option.
  • Add header & paragraph block for About Us information.
  • Publish your page.
  • To enlarge the team member’s name, add this bit of CSS to your customizer: .cdcrm-person .cdcrm-name {font-size: x-large;}
  • To nudge the full-width display to the middle, add this bit of CSS to your customizer: .cdcrm-people {margin-left: 60px;}
    • NOTE: All images used on this page are the same size. See more on working with images.

Was this article helpful to you? Yes No