Online Store

Team block

The Team block introduces your team members and adds an invaluable personal touch to your website. It has everything you need to show your team members’ unique skills, expertise, and personalities.

Adding a Team block

Find a suitable location for your Team block and click on the [+] Add a block button.

In the Block library, navigate to the Team tab (scroll down or use the search field) and click a layout that meets your needs.

team-block-screen-1.png

The chosen block layout then appears on your page.

Customizing block settings

You can make the Team block truly yours using the control panel. To activate it, hover over the block and then click the Block Settings icon.

In the Layout tab, you can switch the block layout or hide some block elements. To switch the block layout, click the respective button and select a different Team block layout.

To hide a specific block element (for example, if you want to remove a button), remove the blue tick next to its name.

 

In the Appearance tab, you can make the following changes:

  • Block style: Change the color scheme of the block.
  • Block spacing: Change the whitespaces on the top and bottom of the block.
  • Media content location: Choose where your image will be located (left or right).
  • Vertical alignment: Choose the vertical content alignment in this block.
  • Horizontal alignment: Align the text in the column to the left or to the center.
  • Content layout: Choose the number of items in a row.
  • Content style: Add a border or a shadow to make the elements stand out on the page.
  • Media content settings: Add a Black&White filter to the images within this block.

Note: Some of the above features are inherent in every block layout. For example, Vertical alignment is featured only in layouts with one image. And Horizontal alignment feature appears only in layouts with multiple images. 

Once you are done customizing block settings, click Save.

 

Editing images

To replace demo images with your own team photos or other images:

  1. Click the demo team member’s photo to activate the controls.
  2. Click Upload image and choose whether you want to upload an image from your computer or browse for relevant free stock photos:

    team-block-screen-2.png
  3. After you change your image, you can adjust its size by clicking the Crop icon and moving the slider.

Another way to replace a demo image is via the Media settings icon. By clicking this icon, you open a Media settings window where you can change and crop the image and also add an image title and a click action. 

team-block-screen-3.png

When you’re done, click Save to apply changes.

Editing job titles and descriptions

You can add a short bio and job descriptions for each member in the Team block. To edit the demo content, click the text element and type in your own text.

Alternatively, you can copy and paste your existing descriptions from the text editor you are using.

You can also change a heading size, add an ordered and unordered list, and change the text alignment. 

Duplicating and moving the Team block 

The Control panel has a few more icons that can be useful for you. 

If you want to check out a different layout without losing your current one, click a Duplicate icon, and the identical block will appear below. This works great when you want more team members in the block – duplicate your existing block and remove the header of the duplicated one.

You can also move blocks up and down using the arrow icons on the Control panel. 

 

Deleting the Team block or its elements

You can delete any block element if you have fewer team members to display. To do this, hover over the unwanted element to bring up the dialog box and click the Delete icon.

team-block-screen-4.png

Deleting a full block is easy, too – click the Delete icon on the Control panel. 

You can reverse these actions by clicking Undo on the Main panel or pressing Command+Z (Ctrl+Z for Windows) on your keyboard.

We hope this guide helped you. If you’ve any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

 

Was this article helpful?
0 out of 0 found this helpful