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, 

• Vai a Pagine > Aggiungi nuova pagina oppure inizia a modificare una pagina esistente con l'editor a blocchi.
• Cerca il “+” icon at the top of the editor screen. Click it.
• Apparirà un menu a blocchi, cerca "GutenKit Team”.
• Quando lo vedi, fai clic su di esso o trascinalo e rilascialo nella schermata dell'editor dei blocchi.

Step 2: Add Team Member Info #

Team Member Content: #

• Seleziona Stile: 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.
  • Dimensione dell'immagine: 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.
• Mostra descrizione: 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 “:+ Aggiungi articolo” button or hit the “X” icon to delete one. Also, you can also copy an already customized item with the “Clona elementopulsante ". 

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

• Etichetta: Enter the name of the social media channel.
• Collegamento: 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.
• Colore: Choose a color for the social media icon.
• Colore di sfondo: Pick a background color for the social media icon.
• Passa il mouse su Colore & 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.

Apparire: #

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

Step 5: Style Text Content #

Contenuto: #

• Allineamento: Place the team profile to the left, center, or right.
• Tipo di sfondo: Select between a solid color or gradient background type 
• Scatola Ombra: Adore the team member section by applying shadow effects.
• Confine & Raggio del confine: These settings give you control over the border color, width, style, roundness, etc.
• Imbottitura dei contenuti: Add spaces around the content area.
• Imbottitura: Add spaces around the team profile.

Immagine: #

• Misurare: Use the slider or give a custom value to adjust the size of your image.
• Margine: Control the spaces around the image of your team member.
• Scatola Ombra: Add shadow effects around the image.
• Box Shadow (Popup): Give a box shadow animation effects to the team member popup.
• Confine: Use this setting area to define the border width, color, and style.
• Raggio del confine: regola la rotondità del bordo.

You will see the same setting options for the Nome, Designazione, E Descrizione.

• Tipografia: Get all the typography-related controls like font family, size, weight, transform, style, decoration, letter spacing, word spacing, and many more.
• Colore: Add your preferred text color.
• Passa il mouse su Colore: Choose a hover color for the text.
• Margine inferiore: 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.
• Raggio del confine: Set the border radius of social icons.
• Margine: Define the gap between social media icons.
• Utilizza Altezza Larghezza: 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.

Disposizione, #

• Margine: Definisce lo spazio attorno al layout del blocco. Aiuta a impostare lo spazio tra un altro blocco.
• Imbottitura: inserisci un valore per impostare lo spazio attorno al blocco all'interno del suo layout.
• Larghezza: Oltre a mantenere la larghezza del layout predefinita.
  • Intera larghezza: Selezionando questa opzione, il layout si estenderà per l'intera larghezza dello schermo.
  • In linea (automatico): Applicandolo avrà la stessa larghezza dell'elemento blocco.
  • Costume: Scegliendo questa opzione verrà visualizzato un cursore per definire lo spazio orizzontale del layout del blocco.
• Indice Z: utilizzare il cursore per specificare l'ordine di sovrapposizione del blocco con altri blocchi.

Posizione: #

Sotto il menu a discesa, vedrai tre opzioni: Predefinito, Assoluto, E Fisso. 

• Assoluto: Selezionando questa opzione ti verrà fornita una posizione assoluta del blocco, il che significa che gli elementi si adatteranno al loro contenitore.
• Fisso: l'opzione Posizione fissa consentirà all'elemento di adattarsi all'intera finestra o schermo.

Entrambe le opzioni Assoluto e Fisso hanno impostazioni simili come le seguenti:

• Orientamento orizzontale: scegliere la direzione di posizionamento tra sinistra e destra.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento orizzontale del blocco.
• Orientamento verticale: Selezionare la direzione di posizionamento tra su o giù.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento verticale del blocco. 

Sfondo: #

• Sfondo: scegli un'opzione di sfondo tra tinta unita, sfumatura o immagine.

Sotto l'opzione Al passaggio del mouse:

• Immagine: Se scegli l'opzione immagine si apriranno le seguenti opzioni:
  • Immagine: scegli un'immagine dal catalogo multimediale o carica la tua.
  • Dimensioni immaginee: selezionare la dimensione dell'immagine tra Miniatura, Media, Grande o Intera.

• Posizione: Seleziona la posizione delle 10 diverse opzioni.
• Allegato: Specifica la relazione fissa o scorrevole dell'immagine di sfondo con il resto della schermata del browser.
• Ripetere: selezionare un'opzione per impostare la modalità di ripetizione delle immagini di sfondo.
• Dimensioni dello schermo: consente di selezionare una dimensione di visualizzazione tra quattro diverse opzioni.

• Durata della transizione: utilizza il cursore per regolare la transizione dello sfondo dallo stato normale allo stato al passaggio del mouse.

Confine: #

• Confine: sotto questa opzione di impostazione, otterrai opzioni di impostazione del bordo come larghezza, stile e colore.
• Raggio del confine: imposta la rotondità del bordo inserendo un valore.
• Scatola Ombra: Ottieni tutte le impostazioni come colore, orizzontale/verticale, sfocatura, diffusione e altro per dare effetti di ombra al bordo. 

Sotto l'opzione al passaggio del mouse:

• Durata della transizione: puoi aggiungere un valore manualmente o utilizzare il dispositivo di scorrimento per impostare l'ora in cui modificare il design del bordo allo stato al passaggio del mouse.

Visibilità: #

Il modulo visibilità consente di controllare la visualizzazione dei disegni a blocchi in base al tipo di dispositivo. Ci saranno tre opzioni del dispositivo (desktop, tablet, cellulare) con un pulsante di attivazione/disattivazione. Attiva il pulsante di attivazione/disattivazione per nascondere il design a blocchi di quel dispositivo.

Tuttavia, puoi ancora vederlo nella vista dell'editor.

Avanzate: #

• Nome del blocco: assegna un nome per identificare questo blocco in modo univoco durante il collegamento o lo scripting per definire lo stile del blocco.
• Ancoraggio HTML: aggiungi un URL per collegare una pagina del sito web.

• Classi CSS aggiuntive: assegna classi CSS aggiuntive al blocco che ti consentiranno di modellare il blocco come desideri con CSS personalizzato. 

NB: puoi aggiungere più classi separatamente con spazi.

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.