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.
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:
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.
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.
5. Configure Settings & Styling:
- Customize additional options such as:
- Colors: Background, text, and accent colors.
- Spacing: Padding and margins between list items.
- Borders & Shadows: Add borders or shadows for depth.
- Custom CSS: For advanced styling beyond default options.
6. Add Team Members:
- Input or update team member profiles, including names, roles, bios, photos, and social links.
7. Finalize & Embed:
- Save your configuration.
- Embed the generated shortcode into your page or post to display the list layout on your site.
Style & Layout Options (as shown in the main image):
| Layout 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 |
| Style Type | Description |
|---|---|
| Style A | Colorful, vibrant themes |
| Style B | Minimal, clean designs |
| Style C | Dark mode or contrasting themes |
Additional Customization Options:
Color & Style Settings:
| Option | Description |
|---|---|
| Theme Preset | Quick style presets for card appearance |
| Card Shadow | Drop shadow effect for cards |
| Background Color | Background color of team cards |
| Primary Color | Links, buttons, and accents |
| Card Background | Card face background color |
| Title & Body Text Color | Text colors for titles and descriptions |
| Card Border Radius | Rounded corners for cards |
| Grid Gap | Space between team cards |
| Social Icon Color | Color for social media icons |
| Custom CSS (Scoped) | Add custom CSS rules scoped to the team block |
Image Settings:
| Option | Description |
|---|---|
| Image Size | Choose image size (Full, Thumbnail, Custom) |
| Image Style | Boxed, Rounded, Circle styles |
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 Icons | Toggle social icons visibility |
| Show Pagination | Enable or disable pagination |
| Pagination Type | Choose pagination style (Ajax, Classic) |
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 |
Layout & Style Types:
| Layout Type | Description |
|---|---|
| Grid (Default) | Standard grid layout |
| List | List layout for vertical display |
| Circular | Circular styled profile images |
| Card with Shadow | Card style with shadow effects |
| Style Type | Description |
|---|---|
| Colorful | Bright and vibrant themes |
| Minimal | Clean, simple design |
| Dark Mode | Dark backgrounds and light text |
Responsive Columns:
| Device | Columns per row |
|---|---|
| Mobile | 1 or 2 columns |
| Tablet | 2 or 3 columns |
| Desktop | 3 or 4 columns |
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!