How To Use

How To Use Team Section Block

Quickly create and manage beautiful team showcases with an intuitive interface—add member photos, names, positions, social links, and descriptions in just a few clicks. Easily customize layouts, spacing, colors, and styles to perfectly match your website design and highlight your team professionally. 

You can follow the steps below to use the Team Section Block.

Add to the Page:

Find and select the Team Section block from the block library, then click it into your desired section on the page.

Then you can see the default theme on the display. You can see the features and controls here. 

Customization:

Fully customize every part of your team section—member images, names, designations, social icons, colors, spacing, typography, borders, and layouts—to perfectly match your brand identity and website style without writing any code.

Easily control the look and feel of your team showcase with flexible styling options and responsive settings for all devices. 

Social Links & Image Support:

Add social media icons with custom profile links for each team member, allowing visitors to quickly connect through platforms like Facebook, Twitter, LinkedIn, Instagram, and more.

You can also upload custom profile images or change image URLs easily to match your team section design perfectly.

Add New Members:

Quickly add new team members with profile images, names, designations, social links, and descriptions in just one click, making it easy to grow and manage your team section as your organization expands.

Remove & Duplicate:

Easily remove unwanted team members or duplicate existing profiles to create similar entries faster, helping you save time while managing your team showcase.

Choose Themes:

Select from 11  beautifully designed team section themes to instantly transform the look of your team showcase. Easily match different layouts, styles, and branding needs with modern and professional designs for your website.

Element Visibility Controls:

Easily show or hide team section elements such as member images, names, designations, descriptions, social icons, buttons, and more to create the exact layout you need.

Open Links in New Tab:

Enable links to open in a new browser tab for social profiles, buttons, and member URLs, providing a smoother browsing experience for your visitors.

Responsive Layout Controls:

Customize the number of team member columns separately for desktop, tablet, and mobile devices to create perfectly responsive team section layouts across all screen sizes.

Column & Row Gap:

Easily adjust column and row spacing between team members to maintain clean, balanced, and visually appealing layouts with full control over your design spacing.

Text Alignment:

Set text alignment (left, center, or right) for team member content to match your design style and improve readability.

Padding Control:

Adjust padding for the team section and individual items separately to create proper spacing and a clean, balanced layout.

Member Photo Control:

Easily adjust the width and margin of each team member’s photo to create perfectly balanced layouts. Control image sizing and spacing together to ensure consistent design, proper alignment, and a clean visual presentation across your team section.

Social Icon Control:

Adjust social icon size and margin to match your design and keep a clean, balanced layout.

Typography & Text Styling:

Customize the typography of member Name, Title, Separator, and Bio with full control over font style, size, weight, line height, and spacing. Easily change text colors to match your brand identity and create a consistent, professional-looking team section design.

Shortcode Usage:

Easily display your team section anywhere on your website using a shortcode. Simply copy and paste the shortcode into pages, posts, or widgets to embed your team showcase without rebuilding it. This gives you full flexibility to place your team section wherever you need.

Add New ShortCode:

First, you go to the dashboard menu. Click the Add New menu.

After inserting the block, you will be redirected to the block editor page. From there, you can fully customize your team section according to your needs. Once you are satisfied with the design, click the Save button and then copy the shortcode from the page to easily reuse it anywhere on your site.

Insert Shortcode & Preview:

Copy the shortcode and paste it into any page, post, or widget area to display your team section instantly. Use the live preview option to see how your team layout looks on the frontend before publishing, ensuring everything appears perfectly styled and responsive.

After that, you can publish or save the setting and visit your website to see the current preview.

That’s it.