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 the Manage Teams (1) button to open the List Item Panel. Clicking on the Add Item (2) button will add a new 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:
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 Manage Teams (1) button, and choose the Style (2) tab.
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).
- Specify the Number of Columns on Mobile devices (8). You can select up to a maximum of 3 columns.
- Manage the spacing between the items Vertically and Horizontally (9).
If you have selected Carousel in the first step, you can:
- Choose to Loop the Carousel (10) or not.
- Choose from different Carousel Controls (11).
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).
