Team Block

The Team Block is a comprehensive and flexible component designed to showcase your team members in professional, visually appealing layouts. This block offers multiple display options, extensive customization controls, and social media integration to help you create engaging team sections that build trust and connection with your audience.

Key Features

The Team Block includes a robust set of features to meet all your team presentation needs:

Multiple Layout Types: Choose between Grid and List layouts for different presentation styles

Flexible Team Management: Add, remove, duplicate, and reorder team members with intuitive controls

Rich Content Support: Include member photos, names, positions, biographical information, and social media links

Image Customization: Multiple image styles including circular, square, rounded, and custom border radius options

Social Media Integration: Support for 13 popular social networks with custom URL configuration

Typography Controls: Independent styling for names, positions, and biographical content

Responsive Design: Fully responsive with device-specific controls for columns, spacing, and sizing

Color Management: Comprehensive color options for text, backgrounds, icons, and hover states

Border and Shadow Options: Professional styling with customizable borders and box shadows

Animation Effects: Choose from various entrance animations to enhance visual appeal

Visibility Controls: Hide the block on specific devices when needed

Adding the Team Block

To add a Team Block to your page:

Click the “+” icon to open the block inserter
Search for “Team” or navigate to the “DigiBlocks” category
Click on the “Team” block to add it to your page
The block will appear with a default team member that you can customize

Managing Team Members

Adding New Members

Click the “Add Team Member” button at the bottom of the block to create new team member entries. Each new member includes:

Editable name field with rich text formatting
Position/role field for job titles
Biographical content area supporting full rich text editing
Image upload area with media library integration
Social media links section with icon-based interface

Team Member Controls

Each team member includes hover controls for easy management:

Move Up/Down: Reorder team members by moving them up or down in the sequence

Duplicate: Create a copy of an existing member to save time when adding similar team members

Remove: Delete unwanted members with a single click (minimum of one member required)

Content Editing

Name Content:

Click on the name text to edit inline
Use the rich text toolbar for basic formatting (bold, italic)
Names serve as the primary identifier for each team member

Position Content:

Click on the position area to edit job titles or roles
Supports basic formatting for emphasis
Ideal for department names, job titles, or specializations

Biographical Content:

Click on the bio area to access full rich text editing
Add formatting, links, lists, and detailed descriptions
Content automatically adapts to your chosen layout style

Image Management

Image Upload and Replacement

Adding Images:

Click the “Choose Image” placeholder to open the media library
Select from existing images or upload new photos
Images automatically resize to fit your configured dimensions

Changing Images:

Hover over existing images to reveal the “Change Image” button
Click to open the media library and select a different photo
Alt text from the media library is automatically applied for accessibility

Image Style Options

The block offers four distinct image styles:

Default: Custom border radius control for flexible styling

Circle: Perfect circular images ideal for professional headshots

Square: Sharp, modern rectangular images with no border radius

Rounded: Subtle rounded corners for a friendly, approachable look

Image Sizing and Borders

Responsive Sizing: Set different image sizes for desktop, tablet, and mobile devices

Border Controls: When not using preset styles, configure:

Border style (solid, dotted, dashed, double, groove, ridge, inset, outset)
Border width with responsive controls
Border color with alpha transparency support
Custom border radius for precise control

Layout Configuration

Layout Types

Grid Layout:

Team members display in a responsive grid format
Configurable number of columns (1-6) per device
Ideal for showcasing multiple team members with equal prominence
Supports center, left, and right alignment options

List Layout:

Team members display in a vertical list format
Each member appears in a horizontal row
Images appear alongside content rather than above
Perfect for detailed team descriptions and longer biographical content

Responsive Controls

Columns (Grid Layout Only):

Desktop: 1-6 columns
Tablet: 1-6 columns
Mobile: 1-6 columns
Automatically adjusts column width based on selection

Spacing Control:

Configure gaps between team members
Responsive settings for different devices
Range from 0-100px for precise control

Alignment Options (Grid Layout):

Left: Team members align to the left side
Center: Team members center within the container
Right: Team members align to the right side

Content Visibility Controls

Toggle the display of different content elements to customize what information appears:

Show Name: Control whether team member names are displayed

Show Position: Toggle job titles and role information

Show Bio: Enable or disable biographical content

Show Social Icons: Control social media icon visibility

These toggles affect all team members simultaneously and help you create focused presentations based on your content strategy.

Social Media Integration

Available Social Networks

The Team Block supports 13 popular social media platforms:

Facebook
Twitter
LinkedIn
Instagram
Pinterest
YouTube
Dribbble
GitHub
Behance
Vimeo
TikTok
Email (mailto links)
Website (custom URLs)

Adding Social Links

Adding New Social Icons:

Click the “+” icon in the social media section of any team member
Select the desired social network from the popup menu
The icon will appear and automatically open the URL configuration

Configuring URLs:

Click on any social media icon to open the URL editor
Select the social network type if needed
Enter the complete URL for the social profile
Click “Done” to save the configuration

URL Format Examples:

Facebook: https://facebook.com/username
Twitter: https://twitter.com/username
LinkedIn: https://linkedin.com/in/username
Email: mailto:[email protected]
Website: https://example.com

Social Icon Management

Removing Social Icons: Hover over any social icon and click the small “×” button that appears

Network Selection: Each icon can be reconfigured to use a different social network through the URL popup

Icon Styling: All social icons inherit styling from the global icon controls in the Style tab

Styling Options

Color Controls

Text Colors:

Name Color: Primary color for team member names
Position Color: Color for job titles and roles
Bio Color: Color for biographical content

Social Icon Colors:

Icon Color: Default state color for social media icons
Icon Hover Color: Color when users hover over icons
Icon Background: Background color behind icons
Icon Background Hover: Background color on hover

Box Colors:

Background Color: Background color for team member containers
Border Color: Color for container borders when enabled

Typography Controls

Independent typography settings allow complete design control:

Name Typography:

Font family selection from available fonts
Responsive font sizes for all devices
Font weight control (light, normal, bold, etc.)
Font style (italic, normal)
Text transform (uppercase, lowercase, capitalize)
Text decoration options
Line height control
Letter spacing adjustment

Position Typography: Similar controls for job titles and roles

Bio Typography: Comprehensive typography options for biographical content

Border and Shadow Options

Border Controls:

Border style selection (solid, dotted, dashed, double, groove, ridge, inset, outset, or none)
Border colors with hover state options
Responsive border width controls for all sides
Border radius with responsive settings

Box Shadow:

Normal state shadow configuration
Hover state shadow for interactive feedback
Position control (inset/outset)
Horizontal and vertical offset adjustment
Blur radius and spread radius controls
Shadow color with alpha transparency

Social Icon Styling

Icon Size: Responsive controls for icon dimensions (10-50px)

Icon Spacing: Control gaps between social media icons (0-30px)

Icon Padding: Add space around icons with responsive dimension controls

Border Radius: Create rounded or circular icon backgrounds

Background Colors: Normal and hover states for icon backgrounds

Box Styling and Spacing

Container Styling:

Background colors for team member boxes
Border configuration with multiple style options
Responsive border width controls
Border radius for rounded corners

Spacing Controls:

Padding: Internal spacing within team member containers
Margin: External spacing around team member containers
Both padding and margin support responsive dimension controls

Advanced Features

Animation Effects

Add entrance animations to make your team block more engaging:

Available Animation Types:

Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight
Zoom Effects: zoomIn, zoomInUp, zoomInDown
Bounce Effects: bounceIn, bounceInUp, bounceInDown
Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight

Animation Preview: Use the preview button in the editor to test animations before publishing

Visibility Controls

Control when the Team Block is visible:

Hide on Desktop: Hide the block on desktop screens (992px and up)
Hide on Tablet: Hide the block on tablet screens (768px to 991px)
Hide on Mobile: Hide the block on mobile screens (767px and below)

Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.

HTML and CSS Options

HTML Anchor: Create a unique anchor link for the Team Block to enable direct linking to this section of your page

Additional CSS Classes: Add custom CSS classes for advanced styling or integration with custom themes

Responsive Design

All styling options include responsive controls for optimal display across devices:

Device-Specific Settings:

Spacing adjustments per device
Typography scaling for readability
Image sizing for different screen sizes
Column configuration for layout optimization

Responsive Features:

Grid columns automatically adjust based on device settings
Image sizes scale appropriately for each screen size
Typography maintains readability across all devices
Spacing adapts to provide optimal viewing experience

Best Practices

Content Organization

Professional Photos: Use high-quality, professional headshots with consistent lighting and backgrounds

Consistent Information: Maintain similar detail levels across all team members for visual balance

Clear Hierarchy: Use typography and sizing to create clear information hierarchy

Relevant Details: Include information that helps visitors understand team member roles and expertise

Design Considerations

Image Consistency: Use the same image style and sizing across all team members

Color Harmony: Choose colors that complement your overall site design and brand

Readable Typography: Ensure sufficient contrast between text and background colors

Responsive Testing: Preview your team section on different screen sizes to ensure optimal display

Layout Strategy

Grid vs List: Choose grid layout for visual impact, list layout for detailed information

Column Count: Consider content length when setting column numbers – fewer columns for longer content

Spacing Balance: Use appropriate spacing to avoid cramped or overly spread layouts

Social Media: Only include social networks that are actively maintained and relevant to your audience

Performance Optimization

Image Optimization: Compress team member photos to reduce page load times

Content Length: Keep biographical content concise while informative

Social Links: Verify all social media URLs are current and functional

Animation Usage: Use animations sparingly to avoid overwhelming users

Accessibility Considerations

Alt Text: Ensure all team member images have descriptive alt text

Color Contrast: Maintain sufficient contrast ratios for text readability

Link Clarity: Use descriptive link text for social media profiles

Keyboard Navigation: Test that all interactive elements are accessible via keyboard

The Team Block provides a comprehensive solution for creating professional, engaging team presentations that build trust and connection with your audience while maintaining design flexibility and optimal performance across all devices.