The GutenKit Team section block showcases your entire team/group/organization concisely and decoratively anywhere on your website (used mostly on the about/team page as well as the homepage). You can even add a popup to give more information about a particular member. This Gutenberg block is equipped with versatile styling options.

Let’s learn how to create a team section on your Gutenberg website.

How to Create a Team Section on Gutenberg Website. #

Step 1: Add GutenKit Team Block #

Log in to your WordPress dashboard, 

• 이동 페이지 > 새 페이지 추가 또는 블록 편집기로 기존 페이지 편집을 시작하세요.
• “를 찾으세요.+” icon at the top of the editor screen. Click it.
• 블록 메뉴가 나타나면 '를 검색하세요.GutenKit Team".
• 보이면 클릭하거나 블록 에디터 화면에 드래그 앤 드롭하세요.

Step 2: Add Team Member Info #

Team Member Content: #

• 스타일 선택: 11+ team member layout styles available to choose from.

• Choose Member Image: Click the “+” icon to upload the team member image from the media library or device.
  • 이미지 크기: Select an image size from the dropdown of this field.
• Member Name: Type your team member name.
• Member Designation:  Insert the designation of your team member.
• 설명 표시: Enable this toggle button to show a description of your team member.
  • About Member: Write a short description of your team member.

Step 3: Insert Social Media Profiles #

The following settings allow you to embed your team member’s social media profiles into the Gutenberg website.

Social Profiles: #

• Display Social Profiles: Insert the team member’s social profile. Disable the toggle button to don’t show any social profiles. This block automatically loads with three social profile items. 

You can add additional items by clicking the “:+ 항목 추가” button or hit the “엑스” icon to delete one. Also, you can also copy an already customized item with the “항목 복제"버튼. 

Next, click on any item to open up the settings:

• 상표: Enter the name of the social media channel.
• 링크: Embed the link of your social profile.
• Open in a new tab: Check this box to open your social media site in a new browser tab.
• 색상: Choose a color for the social media icon.
• 배경색: Pick a background color for the social media icon.
• 호버 색상 & Hover Background Color: Use these two settings to add color for the social media icon and background.

Step 4: Add a Popup #

From here, you can enable a popup that will appear with more details about the team member.

팝업: #

• Show Popup: Enable this button to show additional information about your team member in a popup when users click on the team member’s image.
• About Member: Write a short bio about the team member.
• 핸드폰: Add team member phone number.
• 이메일: Insert the email of the team member.
• 닫기 아이콘: Add an icon from the library or upload your own one to close the popup.

Step 5: Style Text Content #

콘텐츠: #

• 조정: Place the team profile to the left, center, or right.
• 배경 유형: Select between a solid color or gradient background type 
• 박스 섀도우: Adore the team member section by applying shadow effects.
• 국경 & 테두리 반경: These settings give you control over the border color, width, style, roundness, etc.
• 콘텐츠 패딩: Add spaces around the content area.
• 심: Add spaces around the team profile.

영상: #

• 크기: Use the slider or give a custom value to adjust the size of your image.
• 여유: Control the spaces around the image of your team member.
• 박스 섀도우: Add shadow effects around the image.
• Box Shadow (Popup): Give a box shadow animation effects to the team member popup.
• 국경: Use this setting area to define the border width, color, and style.
• 테두리 반경: 테두리의 둥근 정도를 조정합니다.

You will see the same setting options for the 이름, 지정, 그리고 설명.

• 타이포그래피: Get all the typography-related controls like font family, size, weight, transform, style, decoration, letter spacing, word spacing, and many more.
• 색상: Add your preferred text color.
• 호버 색상: Choose a hover color for the text.
• 여백 하단: Adjust the gap between the content types below. For example, define the gap between designation & description.

Social Profiles: #

• Icon SIze: Use this slider to adjust the social media icon size.
• 테두리 반경: Set the border radius of social icons.
• 여유: Define the gap between social media icons.
• 높이 너비 사용: Enable this button to get height and width control of the social media icon.

Popup Modal: #

Within this setting area, you will get all the features to style the popup. Here, you will choose a background type. And, you will customize the Name, Designation, Description, Phone & Email.

Popup Close Icon: #

Use this setting area to adjust the close icon size and its color, background color, padding, and all the border settings.

Step 6: Advanced Settings #

From the Advanced Settings tab, you can configure the Team Section block layout, background, border styles, and control its visibility.

공들여 나열한 것, #

• 여유: 블록 레이아웃 주변의 공간을 정의합니다. 다른 블록 사이의 간격을 설정하는 데 도움이 됩니다.
• 심: 레이아웃 내의 블록 주변 공간을 설정하는 값을 입력합니다.
• 너비: 기본 레이아웃 너비를 유지하는 것 외에.
  • 전체 넓이: 이 옵션을 선택하면 레이아웃이 화면 전체 너비에 걸쳐 적용됩니다.
  • 인라인(자동): 적용하면 블록 요소와 동일한 너비를 갖게 됩니다.
  • 관습: 이 옵션을 선택하면 블록 레이아웃의 수평 공간을 정의하는 슬라이더가 표시됩니다.
• Z-지수: 슬라이더를 사용하여 다른 블록과 함께 블록의 스택 순서를 지정합니다.

위치: #

드롭다운 아래에 세 가지 옵션이 표시됩니다. 기본, 순수한, 그리고 결정된. 

• 순수한: 이 옵션을 선택하면 블록의 절대 위치가 제공됩니다. 즉, 요소가 컨테이너에 맞습니다.
• 결정된: 고정 위치 옵션을 사용하면 요소가 전체 뷰포트나 화면에 맞춰집니다.

절대 및 고정 옵션 모두 아래와 같이 유사한 설정을 갖습니다.

• 수평 방향: 위치결정 방향을 왼쪽과 오른쪽 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수평 위치를 조정합니다.
• 수직 방향: 위치결정 방향을 위, 아래 중에서 선택합니다.
• 오프셋: 슬라이더를 사용하거나 수동으로 값을 입력하여 블록의 수직 위치를 조정합니다. 

배경: #

• 배경: 단색, 그라데이션, 이미지 중 배경 옵션을 선택합니다.

호버 옵션에서:

• 영상: 이미지 옵션을 선택하면 다음 옵션이 열립니다.
  • 영상: 미디어 라이브러리에서 이미지를 선택하거나 자신의 이미지를 업로드하세요.
  • 이미지 크기e: 썸네일, 중간, 크게 또는 전체 중에서 이미지 크기를 선택합니다.

• 위치: 10가지 옵션의 위치를 선택합니다.
• 부착: 나머지 브라우저 화면과의 고정 또는 스크롤 배경 이미지 관계를 지정합니다.
• 반복하다: 옵션을 선택하여 배경 이미지가 반복되는 방식을 설정합니다.
• 디스플레이 크기: 네 가지 옵션 중에서 디스플레이 크기를 선택합니다.

• 전환 기간: 슬라이더를 사용하여 배경 전환을 일반에서 호버 상태로 조정합니다.

국경: #

• 국경: 이 설정 옵션에는 너비, 스타일, 색상과 같은 테두리 설정 옵션이 제공됩니다.
• 테두리 반경: 값을 입력하여 테두리의 둥근 정도를 설정합니다.
• 박스 섀도우: 색상, 가로/세로, 흐림, 퍼짐 등의 모든 설정을 사용하여 테두리에 그림자 효과를 적용할 수 있습니다. 

호버 옵션에서:

• 전환 기간: 수동으로 값을 추가하거나 슬라이더를 사용하여 마우스 오버 상태에서 테두리 디자인을 변경하는 시간을 설정할 수 있습니다.

시계: #

가시성 모듈을 사용하면 장치 유형에 따라 블록 디자인 표시를 제어할 수 있습니다. 토글 버튼이 있는 세 가지 장치 옵션(데스크톱, 태블릿, 모바일)이 있습니다. 해당 장치의 블록 디자인을 숨기려면 토글 버튼을 켜십시오.

그러나 편집기 보기에서는 계속 볼 수 있습니다.

고급의: #

• 블록 이름: 블록 스타일을 지정하기 위해 링크하거나 스크립팅하는 동안 이 블록을 고유하게 식별할 수 있도록 이름을 지정합니다.
• HTML 앵커: 웹사이트 페이지를 링크하기 위한 URL을 추가합니다.

• 추가 CSS 클래스: 추가 CSS 클래스를 블록에 할당하면 사용자 정의 CSS를 사용하여 원하는 대로 블록 스타일을 지정할 수 있습니다. 

주의: 공백을 사용하여 여러 클래스를 별도로 추가할 수 있습니다.

That’s it! The above settings make it easy to set up an amazing team section on your WordPress website using the Gutenberg block editor.