Grid Layout

How to Display a Team Manager Grid Layout Using Elementor

Using WP Team Manager with Elementor, you can easily showcase your team members in a stylish grid format. This guide will walk you through setting up the Team Manager Elementor Grid Layout, as shown in the image below:

Step 1: Open the Elementor Page Builder

To begin, navigate to the page where you want to display your team members:

1. Go to Pages > Add New or edit an existing page.
2. Click Edit with Elementor to launch the Elementor page builder.

Step 2: Add the WP Team Manager Widget

Once you are in the Elementor editor:

1. Click on the Widgets panel in Elementor.
2. Search for WP Team Manager in the widget search bar.
3. Drag and drop the Team Grid Layout widget onto your page.

Step 3: Configure the Grid Layout

Now, customize the display settings for your team grid:

1. Layout Selection: Choose the Grid Layout option.
2. Columns: Select how many team members should appear per row (e.g., 3 or 4 columns).
3. Team Category: If you have multiple teams, choose the category you want to display.

Step 4: Customize the Design

Make your team section visually appealing by adjusting the style settings:

1. Spacing & Alignment: Adjust margins and padding for the best fit.
2. Typography: Customize fonts for names and designations.
3. Colors: Match the section’s colors with your website theme.
4. Hover Effects: Add animations or hover styles for a dynamic feel.
5. Profile Image Settings: Adjust the size and shape of team member photos.

Step 5: Publish and Display the Team Section

Once satisfied with the setup:

• Click Publish or Update to save your changes.
• Preview the page to see how your team section appears.
• Adjust settings if needed to refine the design.

With WP Team Manager and Elementor, creating a professional, responsive team grid is simple and effective. This layout provides a clean and structured display, enhancing your website’s appearance and usability.

Grid Layout Demo Link