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 #

Zaloguj się do pulpitu WordPress, 

• Iść do Strony > Dodaj nową stronę lub rozpocznij edycję istniejącej strony za pomocą edytora bloków.
• Spójrz na "+” ikonę na górze ekranu edytora. Kliknij ją.
• Pojawi się menu bloku, wyszukaj „GutenKit Team”.
• Kiedy go zobaczysz, kliknij go lub przeciągnij i upuść na ekranie edytora bloków.

Step 2: Add Team Member Info #

Team Member Content: #

• Wybierz Styl: 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.
  • Rozmiar obrazu: 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.
• Pokaż opis: 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 “:+ Dodaj element” button or hit the “X” icon to delete one. Also, you can also copy an already customized item with the “Przedmiot klonowania" przycisk. 

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

• Etykieta: Enter the name of the social media channel.
• Połączyć: 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.
• Kolor: Choose a color for the social media icon.
• Kolor tła: Pick a background color for the social media icon.
• Kolor najechania & 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.

Wyskakujące okienko: #

• 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.
• Telefon: Add team member phone number.
• E-mail: Insert the email of the team member.
• Zamknij ikonę: Add an icon from the library or upload your own one to close the popup.

Step 5: Style Text Content #

Treść: #

• Wyrównanie: Place the team profile to the left, center, or right.
• Typ tła: Select between a solid color or gradient background type 
• Pudełko Cień: Adore the team member section by applying shadow effects.
• Granica & Promień granicy: These settings give you control over the border color, width, style, roundness, etc.
• Dopełnienie treści: Add spaces around the content area.
• Wyściółka: Add spaces around the team profile.

Obraz: #

• Rozmiar: Use the slider or give a custom value to adjust the size of your image.
• Margines: Control the spaces around the image of your team member.
• Pudełko Cień: Add shadow effects around the image.
• Box Shadow (Popup): Give a box shadow animation effects to the team member popup.
• Granica: Use this setting area to define the border width, color, and style.
• Promień granicy: Dostosuj zaokrąglenie obramowania.

You will see the same setting options for the Nazwa, Przeznaczenie, I Opis.

• Typografia: Get all the typography-related controls like font family, size, weight, transform, style, decoration, letter spacing, word spacing, and many more.
• Kolor: Add your preferred text color.
• Kolor najechania: Choose a hover color for the text.
• Margines dolny: 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.
• Promień granicy: Set the border radius of social icons.
• Margines: Define the gap between social media icons.
• Użyj opcji Wysokość Szerokość: 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.

Układ, #

• Margines: Określ przestrzeń wokół układu blokowego. Pomaga ustawić odstęp między innym blokiem.
• Wyściółka: Wprowadź wartość, aby ustawić przestrzeń wokół bloku w jego układzie.
• Szerokość: Oprócz zachowania domyślnej szerokości układu.
  • Pełna szerokość: wybranie tej opcji spowoduje, że układ będzie obejmował całą szerokość ekranu.
  • W linii (automatycznie): Po zastosowaniu będzie miał taką samą szerokość jak element blokowy.
  • Zwyczaj: Wybranie tej opcji spowoduje wyświetlenie suwaka umożliwiającego zdefiniowanie poziomej przestrzeni układu bloku.
• Indeks Z: Użyj suwaka, aby określić kolejność stosu bloku z innymi blokami.

Pozycja: #

W menu rozwijanym zobaczysz trzy opcje: Domyślny, Absolutny, I Naprawił. 

• Absolutny: Wybranie tej opcji zapewni Ci absolutną pozycję bloku, co oznacza, że elementy będą pasować do ich pojemnika.
• Naprawił: Opcja Stała pozycja pozwoli elementowi zmieścić się w całej rzutni lub ekranie.

Obie opcje, Absolutna i Stała, mają podobne ustawienia, jak poniżej:

• Orientacja pozioma: Wybierz kierunek pozycjonowania pomiędzy lewą i prawą stroną.
• Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować poziome położenie bloku.
• Orientacja pionowa: Wybierz kierunek pozycjonowania w górę lub w dół.
• Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować pionowe położenie bloku. 

Tło: #

• Tło: wybierz opcję tła pomiędzy jednolitym kolorem, gradientem lub obrazem.

W opcji Najedź:

• Obraz: Jeśli wybierzesz opcję obrazu, pojawią się następujące opcje:
  • Obraz: wybierz obraz z biblioteki multimediów lub prześlij własny.
  • Rozmiar obrazue: Wybierz rozmiar obrazu pomiędzy Miniaturą, Średnim, Dużym lub Pełnym.

• Pozycja: Wybierz położenie 10 różnych opcji.
• Załącznik: Określ relację stałego lub przewijanego obrazu tła z resztą ekranu przeglądarki.
• Powtarzać: wybierz opcję, aby ustawić sposób powtarzania obrazów tła.
• Rozmiar wyświetlacza: Wybierz rozmiar wyświetlacza spośród czterech różnych opcji.

• Czas trwania przejścia: Użyj suwaka, aby dostosować przejście tła ze stanu normalnego do stanu najechania.

Granica: #

• Granica: w ramach tej opcji ustawień dostępne są opcje ustawień obramowania, takie jak szerokość, styl i kolor.
• Promień granicy: Ustaw okrągłość obramowania, wprowadzając wartość.
• Pudełko Cień: Uzyskaj wszystkie ustawienia, takie jak kolor, poziomo/pionowo, rozmycie, rozproszenie i inne, aby nadać obramowaniu efekty cienia. 

W opcji najechania:

• Czas trwania przejścia: Możesz dodać wartość ręcznie lub użyć suwaka, aby ustawić czas zmiany projektu obramowania w stanie najechania.

Widoczność: #

Moduł widoczności pozwala kontrolować wyświetlanie projektów bloków w zależności od typu urządzenia. Dostępne będą trzy opcje urządzeń (komputer stacjonarny, tablet, telefon komórkowy) z przyciskiem przełączania. Włącz przycisk przełączania, aby ukryć projekt blokowy tego urządzenia.

Jednak nadal możesz to zobaczyć w widoku edytora.

Zaawansowany: #

• Nazwa bloku: Nadaj nazwę, która będzie jednoznacznie identyfikowała ten blok podczas łączenia lub tworzenia skryptów stylizujących blok.
• Kotwica HTML: Dodaj adres URL, aby połączyć stronę internetową.

• Dodatkowe klasy CSS: Przypisz dodatkowe klasy CSS do bloku, co pozwoli Ci stylizować blok według własnego uznania za pomocą niestandardowego CSS. 

Uwaga: Możesz dodać wiele klas oddzielnie ze spacjami.

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.