Unity Team Pages Documentation

Introduction

This Package includes a collection of five different team member templates. It includes a Datastore to enter information about the Team Members, and you can select any of the five page templates to display the Team Members in that format. The Package also contains entire page templates can be used that can be browsed from the Navigation / Menu Bar above. The page templates make use of a Column Content Section, the Zen Banner Section, and the CTA Banner Section to create an attractive layout. All templates utlize the site's header and footer, and defined color variables. This should result in a seamless integration with any Bootstrap enabled site. Have a look at the demo. The details are shown below.

Data Store

There is a Datastore named "Team Members" available by going to Content -> Datastores -> Team Members. Click on the New Button in the menu bar to create a new Team Member. There are following fields that need to be filled.

Picture - Select the picture to be displayed. Ideally the picture should be in potrait orientation and of the aspect ratio of 1280 x 1920.

Full Name - The full name of the Team Member.

Designation - The designation / appointment of the Team Member.

Summary - A brief description / intro of the Team Member. This is only visible in Template # 1, 2, 3 and 5.

Email Address - The Email Address of the Team Member. This is only visible in Template # 3, 4 and 5.

Link to Individual Page - The link to the individual page of the Team Member. This is only visible in Template # 1, 2, 3 and 4.

Type # 1 (Colorize on Hover)

Page: Unity Team Page (Colorize on Hover)

The page template (team_page_1.liquid) makes use of the corresponding partial template and outputs a complete page. The page includes the default Header / Footer (_header.liquid and _footer.liquid) and utilizes bootstrap classes, which mean that all set variables are automatically set (allowing seamless integration). The Page Template also uses the Zen Banner, and CTA Banner to make up the entire page. If you require the page to be in a consistent format with other pages in your site, you might need to use the partial template in order to better integrate the template.

In order to use the template, you must select it as the page template in Article Settings. When creating a page, use the following steps:

Click on the Plus Icon in the top left of the CMS. Then select Unity Team Page (Colorize on Hover). Then you can make any neccessary settings / customizations.

Partial: Teams Section - Colorize on Hover (Partial)

The partial template (_team_members_1.liquid) outputs the actual team member section of type # 1 (the section that lists the Team Members fetched from the Data Store). It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.

Usage (Liquid Markup)

{%- include "/marketpath/unity-team-pages/partials/_team_members_1.liquid" -%}

Type # 2 (Colorize on Hover - Alt)

Page: Unity Team Page (Colorize on Hover - Alt)

The page template (team_page_2.liquid) makes use of the corresponding partial template and outputs a complete page. The page has similar functionaility as the above Template.

In order to use the template, you must select it as the page template in Article Settings. When creating a page, use the following steps:

Click on the Plus Icon in the top left of the CMS. Then select Unity Team Page (Colorize on Hover - Alt). Then you can make any neccessary settings / customizations.

Partial: Teams Section - Colorize on Hover Alt (Partial)

The partial template (_team_members_2.liquid) outputs the actual team member section of type # 2 (the section that lists the Team Members fetched from the Data Store). It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.

Usage (Liquid Markup)

{%- include "/marketpath/unity-team-pages/partials/_team_members_2.liquid" -%}

Type # 3 (Horizontal Striped Cards)

Page: Unity Team Page (Horizontal Striped Cards)

The page template (team_page_3.liquid) makes use of the corresponding partial template and outputs a complete page. The page has similar functionaility as the above Template.

In order to use the template, you must select it as the page template in Article Settings. When creating a page, use the following steps:

Click on the Plus Icon in the top left of the CMS. Then select Unity Team Page (Horizontal Striped Cards). Then you can make any neccessary settings / customizations.

Partial: Teams Section - Horizontal Striped Cards (Partial)

The partial template (_team_members_3.liquid) outputs the actual team member section of type # 3 (the section that lists the Team Members fetched from the Data Store). It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.

Usage (Liquid Markup)

{%- include "/marketpath/unity-team-pages/partials/_team_members_3.liquid" -%}

Type # 4 (3D Hover Cards)

Page: Unity Team Page (3D Hover Cards)

The page template (team_page_4.liquid) makes use of the corresponding partial template and outputs a complete page. The page has similar functionaility as the above Template.

In order to use the template, you must select it as the page template in Article Settings. When creating a page, use the following steps:

Click on the Plus Icon in the top left of the CMS. Then select Unity Team Page (3D Hover Cards). Then you can make any neccessary settings / customizations.

Partial: Teams Section - 3D Hover Cards (Partial)

The partial template (_team_members_4.liquid) outputs the actual team member section of type # 4 (the section that lists the Team Members fetched from the Data Store). It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.

Usage (Liquid Markup)

{%- include "/marketpath/unity-team-pages/partials/_team_members_4.liquid" -%}

Type # 5 (Interactive Hover Cards)

Page: Unity Team Page (Interactive Hover Cards)

The page template (team_page_5.liquid) makes use of the corresponding partial template and outputs a complete page. The page has similar functionaility as the above Template.

In order to use the template, you must select it as the page template in Article Settings. When creating a page, use the following steps:

Click on the Plus Icon in the top left of the CMS. Then select Unity Team Page (Interactive Hover Cards). Then you can make any neccessary settings / customizations.

Partial: Teams Section - Interactive Hover Cards (Partial)

The partial template (_team_members_5.liquid) outputs the actual team member section of type # 5 (the section that lists the Team Members fetched from the Data Store). It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.

Usage (Liquid Markup)

{%- include "/marketpath/unity-team-pages/partials/_team_members_5.liquid" -%}