How to Add Team Effect in Bricks Builder Using BricksFly

BricksFly Team Element lets you showcase team members with photos, names, roles, descriptions, profile links, and social media icons. You can choose from different layouts, adjust content alignment, and customize each team member card to match your website design.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Team In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under General, toggle On Team.

Step 1: Insert Team Elements & Configure Basics

First, click the “+” icon, search for Team, and then select it.

After selecting the Team element, you will find four primary sections under the Content tab: Layout, Image, Content, and Social Media. Let’s begin by exploring the Layout section.

Layout 

Style: It controls the card layout, structure, and arrangement of the image and content. Available options include One and Two. Selecting One displays the social media icons below the designation, while selecting Two displays the social media icons on hover.

In this example, Two is selected. You can choose either option based on your preference.

Alignment: This sets the position of the content inside the element, such as left, center, or right. You can choose any option based on your design needs. In this example, Center is selected. 

Image 

This option lets you select the team member’s photo. To display multiple team members, add a separate Team element for each member and select the image in the same way. In this example, three Team elements are added.

Image Size: You can choose any image resolution based on your design needs. In this example, the image resolution is set to Medium. However, you can select any option you prefer.

Afterward, in the Structure panel on the right side of the screen, find the Container and select the Block element that contains your team elements.

Once selected, look at the Content tab on the left side of your screen. Under the Direction option, select the Horizontal icon (indicated by the three vertical lines)

Step 2: Customize Team Info & Social Icons

Add the team member’s details, such as name, role, and description to personalize the card. You can also enable and position social icons to showcase their social profiles.

Content  

Name: This is the team member’s name displayed on the card. You can set the name as you prefer. In this example, it is set to “Adam Smith.”

Name HTML Tag: This sets the HTML tag for the name, such as H1, H2, H3, or a paragraph tag. It helps with structure and SEO. In this example, it is set to H3.

Designation: This displays the person’s job title or role, such as Designer, Developer, or Manager. In this example, the designation is set to Developer.

Description: This adds a short bio or description of the team member. In this example, a short bio is added.

URL: This adds a link to the team member’s profile, portfolio, or any custom page. In many cases, clicking the name or image will open this link. In this example, no link is set. However, you can add any link based on your preference.

Social Media

Show Social Icon: This turns the social media icons section on or off. In this example, the option is On. 

However, if you don’t want to display any social media icons, you can simply disable this option.

Placement: This controls where the social icons appear, such as below the content, over the image, or in another preset position, depending on the element style. You will find options like Bottom, Left, Right, and Center.

In this example, the first image uses Left placement, while the other two images use Bottom placement. You can choose any available option based on your design needs.

Final Result