Pro Tip: Want a Head Start? You can build standard grids with the free version, but WP Team Manager Pro unlocks Smart Image Cropping, Popup Modals, and League Management instantly. Start Your 7-Day Free Trial – No Charge Today ->
Key Features of the List Layout:
- Vertical Arrangement: Profiles are displayed in a vertical list, providing a clean and organized view.
- Flexible Style Options: Multiple style and layout types to choose from, suitable for different design preferences.
- Responsive Design: Automatically adapts to various screen sizes, ensuring a consistent user experience across devices.
- Customizable Appearance: Options to modify colors, spacing, borders, and more for a tailored look.
- Enhanced Readability: Clear separation of profiles with visual cues like icons, colors, and spacing.
How to Implement the Updated List Layout:
The List Layout provides a streamlined, vertical presentation of your team members, ideal for a detailed or compact display. This layout arranges team profiles in a list format, making it easy for visitors to scan through individual profiles with clarity and focus.
The main layout image (provided above) showcases the various style options available within the List Layout, allowing you to customize its appearance to fit your website’s design.
1. Access the Team Generator:
- Navigate to the WP Team Manager plugin settings in your WordPress dashboard.
- Select the ‘Team Generator’ option.
2. Choose List Layout:
- Within the Team Generator, select ‘List Layout’ as your display option.
3. Select Layout Type:
- From the Layout Type options (shown in the provided image), choose the style that best fits your design:
- Options include different arrangements of profile information, icons, and visual styles.
- Click on your preferred style to select it.
- Within the Team Generator, select ‘List Layout’ as your display option.
4. Choose Style Layout Type:
- From the Style Type options (also shown in the image), select a style that defines the visual theme of your list:
- Styles may include color schemes, icon placements, and card designs.
- Pick the style that complements your website’s look.
Layout & Style Types:
| Layout Type | Description |
|---|---|
| Grid (Default) | Standard grid layout |
| List | List layout for vertical display |
| Slider | Circular styled profile images |
| Table | Card style with shadow effects |
| Style Type | Description |
|---|---|
| Style 1 | Basic vertical list with profile image on one side |
| Style 2 | Profile with icons and detailed info in a compact format |
| Style 3 | Profile with emphasis on icons and minimal text |
| Style 4 | Alternative arrangements with various visual styles |
Responsive Columns:
| Device | Columns per row |
|---|---|
| Mobile | 1 or 2 columns |
| Tablet | 2 or 3 columns |
| Desktop | 3 or 4 columns |
Step 5: Customize Manage your Team
Customize the Content & Query
| Option | Description |
| Team Groups | Select one or more team groups to filter which members are displayed. |
| Total Members | Specify the maximum number of team members to display. |
| Sort By | Choose the field used to sort the team members. |
| Sort Direction | Select the order in which the members are sorted (ascending or descending). |
| Include Specific IDs | Enter the IDs of team members that should be explicitly included. |
| Exclude Specific IDs | Enter the IDs of team members that should be excluded from the display. |
Step 6: Customize the Advanced Filters
Filtering & Sorting:
| Option | Description |
|---|---|
| Taxonomy Relation | AND / OR relation among selected terms |
| Include Terms (IDs) | Filter members by terms to include |
| Exclude Terms (IDs) | Exclude members based on terms |
| Keyword Search | Search team members by keyword |
| Date Range | Filter by start and end date |
| Order By & Direction | Order team members (Name, Date, Random) & direction |
Step 7: Select Visible Fields
Display Options:
| Option | Description |
|---|---|
| Hide Job Title | Toggle to hide or show job titles |
| Hide Other Info | Toggle to hide or show additional information |
| Hide Read More | Toggle to show or hide ‘Read More’ links |
| Hide Social / Hide Progress Bar | Enable this option to hide social media links and the progress bar from the display. |
| Hide Short Bio | Enable this option to hide the short biography or summary text of the member. |
Step 8: Pagination & Filters
Pasination & Filters:
| Option | Description |
| Pagination Type | Select the pagination style used to navigate through team members (for example: numbered Pagination, Ajax load more button). |
| Enable Filter | Enable this option to allow users to filter team members based on available criteria. |
Step 9: Select Images
Image Settings:
| Option | Description |
|---|---|
| Image Size | Choose image size (Full, Thumbnail, Custom) |
| Image Style | Boxed, Rounded, Circle styles |
Additional Customization Options:
Styling & Theming:
| Option | Description |
| Theme Preset | Select a predefined theme style to quickly apply a consistent design across all cards. |
| Card Shadow | Enable or choose the shadow style applied to each card for visual depth. |
| Primary Color | Set the main accent color used throughout the layout. |
| Background Color | Choose the background color of the overall section or container. |
| Card Background | Specify the background color for individual member cards. |
| Title Color | Set the color used for member names or titles. |
| Text Color | Define the color used for general text content. |
| Social Icon Color | Choose the color applied to social media icons. |
| Card Border Radius | Select the border radius style for the card corners. |
| Custom Border Radius | Enter a custom border radius value to override the default setting. |
| Grid Gap | Choose the spacing between grid items (cards). |
| Custom Grid Gap | Enter a custom spacing value to override the default grid gap. |
| Dark Mode | Enable this option to apply a dark-themed color scheme. |
| Custom CSS (Scoped) | Add custom CSS styles that apply only to this component or section. |
Final Steps:
Once your styles and layout are configured, save your settings. Embed the shortcode into your webpage, and your team profiles will display in a sleek, organized list format, aligned with your desired style.
Note:
List Layout 3 is a Pro feature and requires the premium version of WP Team Manager to access this layout style.
Need Help?
For advanced styling, custom CSS, or layout tweaks, refer to the plugin’s support documentation or contact support.
Enjoy showcasing your team with the flexible List Layout!