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 Slider Layout:
- Carousel Format: Profiles or items slide horizontally, allowing visitors to browse through content seamlessly.
- Multiple Style Options: Choose from a variety of layout styles to suit your aesthetic preferences.
- Responsive Design: Adjusts to different screen sizes, ensuring a consistent experience on desktops, tablets, and mobiles.
- Autoplay & Navigation Controls: Set automatic sliding, navigation arrows, and indicators for user interaction.
- Customizable Appearance: Modify colors, navigation options, arrow placement, and more for a personalized look.
- Multiple Columns: Configure the number of items displayed per row on different devices for optimal layout.
How to Implement the Slider Layout:
The Slider Layout allows you to showcase your team members or content in a dynamic, sliding carousel format. This layout is ideal for creating engaging, interactive displays that can highlight multiple profiles or items within a compact space.
The main layout image (provided above) illustrates the various style options and customization settings available for the Slider Layout, enabling you to tailor the appearance and functionality 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 Slider Layout:
- Within the Team Generator, select ‘Slider Layout’ as your display option.
3. Select Layout Style:
- From the Layout Type options (shown in the provided image), choose the style that best fits your design:
- Options include different visual arrangements for the slider, such as number of items per slide, navigation styles, etc.
- Click on your preferred style to select it.
4. Choose Style Layout Type:
- From the Style Type options, select the visual theme that matches your website’s aesthetic:
- Styles may include color schemes, element placements, and visual effects.
- Pick the style that complements your site.
5. Configure Responsive Columns:
- Set the number of columns per row on different devices:
- Mobile: 1 Column (or as preferred)
- Tablet: 2 Columns (or as preferred)
- Desktop: 3 Columns (or as preferred)
- Adjust these settings for optimal viewing on all devices.
6. Enable Autoplay & Navigation:
- Enable Autoplay: Turn on to automatically slide through items.
- Show Arrow: Enable navigation arrows for manual browsing.
- Arrow Position: Choose the placement of arrows (e.g., Top Right, Bottom Left).
- Show Dot Navigation: Enable small indicator dots to show slide position.
Step 7: 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 8: 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 9: 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 10: 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 11: 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 style and settings are configured, save your configuration. Embed the shortcode into your webpage, and your slider will showcase your team or content in an engaging, interactive carousel.
Note:
Slider Layout 3,4,5,6 is a Pro feature and requires the premium version of WP Team Manager to access this layout style.
Need Additional Help?
For further customization, advanced styling, or troubleshooting, refer to the plugin’s support resources or contact support.
Create a stunning, interactive team showcase with your Slider Layout!