Gutenberg Team Members Block Tutorial

Introduction


Welcome to our tutorial on Gutenberg Team Members Block, a key component of our Premium Blocks plugin, designed to effortlessly showcase your team within WordPress Gutenberg editor. This guide is your pathway to understanding how to utilize this innovative block, ensuring your team’s talents and professionalism are front and center on your website. Dive into the world of easy customization with our pre-made variations, nested blocks for intricate designs, and responsive layouts for universal device compatibility.

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Team Members Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Team Members Block to your Gutenberg editor. From there, you can easily input your team member’s information and upload their photo or select it from the media library.

General Settings

General Settings offer fundamental customization options for your Gutenberg Team Members Block, allowing you to add multiple types of nested blocks from images, icon groups, Lottie animations, or containers. Also adjust spacing, alignment, and group orientation for optimal layout and visual harmony.

  • Hover Content Effect On Image: Enable or disable an effect that appears when hovering over the team member images.
  • Alignment: Options to align the content within the block to align the team members’ images and associated information.
Team Members Block for Gutenberg editor Settings
Gutenberg Team Members Block Settings
Gutenberg Team Members Block Support Nested Blocks

Improve team member presentations by using nested blocks that combine images, names, positions, descriptions, and social media links in a unified design. You can easily add extra fields to the team member information. Just click on the “+” icon and pick the type of field you want to include. For example, you could add a field to preview his social media links, title, description, etc.

  • Image Block: Select the team member’s image.
  • Heading Block: Add the title of the team member.
  • Text Block: Set the team member description.
  • Icon Group Block: Select the social media links of the team members.
Gutenberg Team Members Block Person Settings

Gutenberg Team Members Blocks’ Style provides advanced styling options to enhance the visual appeal of your Team Member Block person, Fine-tune the alignment, background color, and spacing of each team member’s block for a customized and consistent appearance.

Style Settings for Gutenberg Team Members Block

Gutenberg Team Members Blocks’ Style, Dive into the extensive style options for customizing the appearance of names, titles, descriptions, images, and social icons, with responsive design options for optimal viewing on any device.


Conclusion

You’ve reached the end of our streamlined tutorial on Team Members Block for Gutenberg editor. The tutorial on the Team Members Gutenberg Block has equipped you with the tools to showcase your team effectively on your website. The nested blocks and customization options are straightforward yet flexible, helping you create detailed team profiles with ease. The Advanced tab from Premium Blocks adds another layer of customization, allowing you to adjust responsiveness, insert custom styles, and even add interactive elements. As you delve deeper into the Gutenberg editor’s features, use these advanced options to refine your website and improve the experience for your visitors. Keep experimenting to find the perfect balance for your site.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks