The Grid Layout in WP Team Manager allows you to display your team members in a clean, organized, and customizable grid format. This layout is perfect for showcasing multiple profiles uniformly, with enhanced visual options and flexibility to match your website’s design.
With the latest update, several new features and customization options have been added to give you greater control over the appearance and functionality of your team grid.
Key Features of the Updated Grid Layout:
- Uniform Presentation: Displays team members in equal-sized blocks for a consistent look.
- Responsive Design: Automatically adapts to various devices like desktops, tablets, and mobiles.
- Enhanced Customization: New styling options, color controls, layout types, and filtering capabilities.
- Advanced Styling & Theming: Customize card themes, shadows, colors, borders, and more.
- Flexible Layouts: Multiple layout and style options, including style layout types and color schemes.
- Filtering & Sorting: New options to filter team members by taxonomy, terms, and keywords.
- Pagination & Ordering: Enhanced options to control the number of members displayed and their order.
How to Implement the Updated Grid 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 Grid Layout:
- Within the Team Generator, select ‘Grid Layout’ as your display option.
3. Configure Layout Settings:
- Use the new styling and design options to tailor the grid’s appearance:
- Theme Preset & Card Shadow: Choose predefined styles for cards and shadows.
- Background & Primary Colors: Customize colors for card backgrounds, borders, and links.
- Card Background & Border Radius: Adjust background color and corner roundness.
- Spacing & Gap: Control space between cards with the ‘Grid Gap’ setting.
- Custom CSS: Add custom CSS for advanced styling.
4. Style & Theming Options:
- Select a Style Layout Type (e.g., cards, list, circles).
- Choose a Style Type (color themes, shapes, and layout styles).
- Adjust Mobile, Tablet, and Desktop Columns for responsive design.
- Apply additional CSS for fine-tuned customization.
7. Embed the Layout:
- Save your settings.
- Embed the generated shortcode into your page or post to display the customized grid layout.
Additional Styling & 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 Step:
Once your styling and layout are fully customized, save your settings and embed the shortcode into your site’s page or post. Your team grid will now display with the new features and styling options, offering a more engaging and visually appealing presentation of your team.
Note:
Grid Layout 5 is a Pro feature and requires the premium version of WP Team Manager to access this layout style.
Need Further Assistance?
For advanced customization, including custom CSS or layout modifications, refer to the plugin’s support documentation or contact support.
Note: The new features provide extensive options for styling, filtering, and layout customization, enabling you to create a professional, tailored team showcase fitting your website’s design language.
Enjoy showcasing your team with the enhanced Grid Layout!