Resources

TeamWork

Overview

A fully featured team page template section. Add team members with usernames.

Installation & Activation

TeamWork can easily be downloaded from inside WordPress using Extend.

  1. Download the plugin from Extend. It will now appear in your Plugins tab.
  2. Click Plugins, and find your TeamWork plugin (titled PageLines Section TeamWork).
  3. Click Activate to be able to use the plugin inside your editor.
  4. Go to your PageLines Builder where you will now find TeamWork in the Layout / Containers section.

Settings

As with all section, the TeamWork section includes the Standard Section Options such as padding/margin, background options and etc.

The TeamWork options are separated into four categories, these are TeamWork Splash, Team 1, Team 2 and Contact

TeamWork Splash

The TeamWork Splash options allow you to style the Splash region of the TeamWork section

Teamwork Splash
Is a large text field where you can insert text to tell your visitors all about your company, team or website. The text area includes a WYSIWYG providing options for formatting the TeamWork splash text.

Splash text options

  • Bold, Italic, Underline
  • Select text alignment left, center or right
  • Control the tag that wraps the text, select between header tags <h1> to <h4> or <p> tag.

Toggle Raw Text
The Toggle Raw Text option disables the text editor tools (bold, italic etc...) and allows you to write or insert (copy/paste) HTML code into the Splash region.

This can be useful if you wish to insert already formatted text from an external source such as a word processor, text editor, web page or email.

Text Alignment
Allows you to align the splash text left, center or right. This option also effects the social buttons alignment.

Background Options
The Background Options allows you to choose a color scheme (default, white or black) and add an optional background color or image to the Splash region.

Facebook / Twitter
To configure the Facebook/Twitter buttons in the TeamWork Splash region, navigate to the PageLines Settings in the WordPress Admin Dashboard → PageLines → Settings → Social / Local.

Team 1

Allows you to add your Company Leadership/Management to the Team 1 region.

Team 1 Title
Add a title to your Team 1 region, this could be "Who We Are" or "Management Team", the choice is entirely up you.

Team 1 Members
Enter team member usernames seperated by a comma or newline.

Team 1 Format
Select the layout format for the Team 1 region, you can choose between Hero or Column.

  • Hero will display each team member in a full width column with their title, bio and social networks on the left and to the right, their avatar.
  • Column will display each member in a column with three columns per row.

Team 2

Team 2 features the same options as Team 1 and will appear beneath the Team 1 region. Where Team 1 is for your company leadership or management, Team 2 is for your additional team members or associates.

Contact

The Contact options, allow you to configure the Contact region, where you can add a title, sub title and contact button.

Contact Title
Enter a title that will be displayed at the top of the Contact region of TeamWork. This could be "Join the team", but the choice is entirely up to you.

Contact Sub Title
Enter a sub title, this will appear beneath the title and can be used to add a brief description to your Contact region.

Button / Link
Add a button to the Contact region of TeamWork, the button options include:

  • Button URL: Enter the URL for the address you wish to the button to navigate to.
  • Button Text: Input text to label the button.
  • Button Color: Select from several color schemes.
  • Button Size: Select from four sizes such as Standard, Large, Small and Mini.
  • Open New Tab? Choose to have the button open a new tab upon click.

Adding User Info

Once you have added your users to the Team 1/2 Member options, edit each users profile from the WordPress Admin Dashboard → Users → All Users.

The member profiles displayed on TeamWork use two options from the standard WordPress user information, these are Display Name / Biographical Info. All other information comes from the PageLines Info options panel.

PageLines Info

On the user profile page, scroll to the bottom and a new options panel is available called PageLines Info which has a several options that are used in TeamWork.

Your Position / Role
Enter the users position or role.

Personal Website URL
Enter the users personal website URL e.g. http://www.pagelines.com/

Facebook, GitHub, Instagram and Twitter Username
Enter your Facebook, GitHub, Instagram and Twitter usernames into each of the option fields. This will automatically generate the correct URL for each social network and add a button to the users profile that appears beneath their bio.

Your Instagram Token
Add your Instagram API access token. You can Look it up here.

Shortcode

The TeamWork section can be inserted into a page, post or widget using the shortcode below. This is used as a quick reference and we recommend including a unique ID.


[pl_section section="teamwork" id="Enter_Unique_Id_Here"]

Classes

We recommend using your own custom classes via the Additional Styling Classes option to customize sections. However, you can use the classes below as a quick reference or in your own styles, if you prefer to use the default class(es) instead of your own.


/* pl-sn-teamwork class is assigned to the <section> element */
.pl-sn-teamwork { ... }

/* Wraps the TeamWork Splash region */
.pl-tw-splash { ... }

/* Allows you to style the splash title */
.pl-tw-splash .big-text { ... }

/* Wraps the TeamWork buttons */
.pl-tw-splash-icons { ... }

/* Wraps Team 1 & 2 regions */
.pl-tw-team { ... }

/* Allows for styling the Team 1 region */
.pl-tw-team:nth-child(2) { ... }

/* Allows for styling the Team 2 region */
.pl-tw-team:nth-child(3) { ... }

/* Styles the Team 1 & 2 title */
.tag-text { ... }

/* Styles the Team 1 title only */
.pl-tw-team:nth-child(2) .tag-text { ... }

/* Styles the Team 2 title only */
.pl-tw-team:nth-child(3) .tag-text { ... }

/* Wraps the member content i.e. title, role,
 * bio and buttons
 */
.member-content { ... }

/* Wraps the member avatar */
.member-media { ... }

/* Wraps the Contact region of TeamWork */
.pl-tw-contact { ... }

/* Styles the Contact region title */
.pl-tw-contact h3 { ... }

/* Styles the Contact region sub title */
.pl-tw-contact .subhead { ... }

/* Wraps the Contact region button */
.contact { ... }

On This Page