Teams are very important for the success of any organization. They bring together individuals with diverse skills, expertise and perspectives, creating a dynamic environment where goals can be achieved.
Using Pixpa’s Teams section, you can display the profiles and photos of your team members , along with their respective roles and responsibilities
In this article:
Adding Teams Section to the page
- To add a section, you need to add a page to your website first.
- On your page, click on the blue + icon to add a New Section.
- You will now see the section categories on the left side.
- Scroll through the Teams (1) and click on it. Now a screen will pop-up allowing you to choose from different layouts of the Teams Section (2).
- Choose any section layout and click on it to add it to your page.
Add and Edit List Items
Add a List Item
- Click on Edit Teams (1) button to open the List Item Panel.
- Click on the Add Item (2) button to add a new list item.
- You can choose to Duplicate or Delete (3) the list items.
Edit List Item
Click on the list item that you want to edit. It will open that particular List item’s editing options. From here, you can:
- Upload or Delete (1) the image. You can also edit the Accent Color which will be visible while hovering the cursor over the image.
- Add a Title (2), Subtitle (3), and Description (4) of the list item.
Before adding the description, check this article.
- Link a List Item’s Title by clicking on the toggle (5). Click here to know more.
- Set the Link to open in a New Tab or in the Same Tab (6).
- Add other Links (7) to the list item. You can add a Button/Text Link/Image link/Social Icon. Learn more.
- Save (8) your changes.
Sequencing List Items
You can easily change the sequence of the List Items by Dragging and Dropping them. See sequencing the Teams Items List in action:
Section Layout
-
- Click on the Edit Teams button to open the section editing panel.
-
- Choose the Layout tab.
- From here, you can easily change the layout of the section even after adding it to the page.
While changing the layout, you will see the section-related layouts on the top.
Apart from these, you also have the option to choose a layout from other sections under the More Layouts heading.
Styling Teams Section
You can customize different aspects of the Teams section using various styling options. To navigate to the Styling options, click on the Edit Teams (1) button.
- Choose the Style (2) tab.
- After making customizations, Save (3) the changes.
You will have multiple style options for the section:
- Items Style Options
- Mobile Display
- Text Size
- Spacing
- Section Headline
- Images
- Image Border
- Cards
- Shadow
- Buttons & Links
Items Style Options
From here, you can:
- Display the items in Rows and Columns or in Carousel mode (1).
- Set the Number of Columns (2). You can select up to a maximum of 10 columns.
- Specify the Space Between Columns (3) of the list items. This value is defined in Pixels.
- Specify the Space Between Rows (4) of the list items. This option will not be visible if the Carousel mode is active. This value is defined in Pixels.
- Choose the Content Order (5) i.e., the images of the list items to be displayed first or the associated text.
- Manage the Content Alignment within the section Horizontally (6).
- Manage the Content Alignment within the section Vertically (7).
Mobile Display
- Set the number of Grid Columns for mobile devices. You can set it to a maximum of 3 columns.
- Define the Spacing between grids (in pixels).
Image Styling Options
- Choose the Image Crop (12) for the list items. You can set the images as Square, Circle, Landscape, Portrait, and Original.
- Using Corner Radius (13) the corners of the images can be managed for their sharpness. You can also choose to manage the corners Individually.
- Choose the Image Hover Color (14) to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
- Choose the Base Color (15) and Opacity that you want while hovering over the images. This option will only be visible when Specify Color is selected.
- Set the Elements Color (16) for the list items of the section.
- Choose to Animate Images (17) while hovering. If enabled, you can also change the Animation Style (18) .
Size & Space and Text Style options. From here you can:
- Specify the Image Width (19) for items’ images.
- Specify the Content Width (20) for the List Items.
- Specify the Space Below Section Headline (21) in Pixels.
- Specify the Space Below Image (22) in Percent.
- Specify the Space Below Title (23) of the List Items in Percent.
- Specify the Space Below Subtitle (24) of the List Items in Percent.
- Specify the Title (25) Font Style of the List Items.
- Specify the Subtitle (26) Font Style of the List Items.
- Specify the Description (27) Font Style of the List Items.
Cards
- See how to manage Cards (28).
Shadow
- Specify how to Display (29) the shadow.
- Style (30) the shadow. There are several Presets and also you can Customize the shadow with Box Shadow Generator tool.
- If the Presets option is selected, then Choose Shadow Styles (31) from the dropdown.
Buttons & Links
- See how to manage the styling of Buttons & Links (32).
