Una sezione dedicata ai membri del team è uno spazio in un sito web in cui si possono presentare le persone di talento che compongono il team e l'organizzazione. È un luogo in cui è possibile mettere in evidenza le loro competenze, i loro risultati e le loro storie di successo.
Lo scopo principale di un sito web non è solo quello di catturare l'attenzione, ma anche di mettere in contatto le persone. Onestamente, la connessione umana può lasciare un'impressione duratura. Ecco perché la maggior parte delle organizzazioni affermate mantiene una sezione dedicata al team sul proprio sito web.
Se il vostro sito web è su WordPress, è meraviglioso. In questo blog post, vi mostreremo un facile tutorial su come creare una sezione per i membri del team in WordPress senza utilizzare alcun plugin. Seguiteci fino alla fine.
Creare bellissimi tavoli
Con l'editor di blocchi
Come creare una sezione per i membri del team in WordPress
Esistono numerosi page builder e plugin di blocchi personalizzati che consentono di creare una sezione per i membri del team sul proprio sito. Ma ricordate che l'editor di blocchi di Gutenberg offre oltre 95 blocchi predefiniti, che potete utilizzare anche per creare una sezione dedicata ai membri del team.
Una volta che si conosce il loro utilizzo, in molti casi non sarà necessario usare plugin aggiuntivi. Questo tutorial sarà spiegato utilizzando questi blocchi predefiniti. Seguite i passi con me.
Passo 01: Scrivere un nome per la sezione del team utilizzando il blocco paragrafo
Ogni sezione web deve avere un nome/intestazione che permetta di distinguere una sezione dall'altra. Allo stesso modo, la sezione del vostro team deve avere un nome, come ad esempio
- Il nostro team
- Incontrare il team
- Membri del team
- Il team dietro
- Incontra i nostri esperti
Scrivere un titolo all'inizio utilizzando il blocco di paragrafo. Allineare il titolo al centro e metterlo in grassetto, e aumentare le sue dimensioni.
Passo 02: raggruppare il blocco
Raggruppando il blocco, è possibile aggiungere più blocchi uno alla volta all'interno della sezione di gruppo specificata. Il vantaggio più grande è che si possono effettuare ampie personalizzazioni tra di essi, cosa che non è possibile con i normali blocchi non raggruppati.
Fare clic sull'icona a tre punti sulla barra degli strumenti. Trova e premere l'opzione Gruppo nell'elenco.
Dopo che il blocco è stato raggruppato, si vedrà l'icona più (+) di Gutenberg all'interno della sezione del gruppo. Ora è possibile aggiungere nuovi blocchi al suo interno.
Passo 03: Aggiungere una breve descrizione della sezione del team
L'aggiunta di una breve descrizione della sezione del team apporterà benefici SEO e aiuterà gli utenti a comprendere il contesto della sezione.
Aggiungere il blocco Paragrafo all'interno della sezione del gruppo.
È sufficiente scrivere ciò che si vuole descrivere della sezione. È possibile ridurre la larghezza del contenuto del blocco utilizzando l'opzione padding.
È possibile personalizzare ogni blocco subito dopo averlo aggiunto. Ma lo faremo dopo che il layout completo sarà pronto.
Passo 04: Aggiungere i membri del team
Ora è necessario creare un layout separato all'interno di questa sezione per visualizzare i membri del team. È possibile visualizzarli in modi diversi. Finora abbiamo visto che la maggior parte dei siti web presenta le sezioni dei team nei formati riga, colonna e riquadro.
Quindi presenteremo anche la nostra sezione di squadra nel formato a colonne. Selezionare l'intero gruppo da facendo clic sull'icona del Gruppo sulla barra degli strumenti. Premete l'icona più (+).
Trova e aggiungere il blocco Colonna.
Selezionare il numero di colonne in base al numero di membri del team che si desidera mostrare. Poiché mostreremo tre membri, selezioneremo tre colonne.
Anche se abbiamo parlato di tre colonne, potreste essere sorpresi dal fatto che ci sia solo una colonna dopo l'aggiunta del blocco. Non preoccupatevi! Le colonne appariranno quando si passa alternativamente il mouse e si fa clic sullo spazio bianco a destra.
Vedere il video qui sotto.
È possibile aggiungere nuovi blocchi all'interno del blocco padre. Veniamo alla prima colonna. Aggiungere il blocco immagine all'interno di esso. Successivamente, è possibile caricare un'immagine dalla libreria multimediale o dall'unità locale.
Si può notare che abbiamo già aggiunto un'immagine. Abbiamo allineato centralmente. È possibile ridimensionare l'immagine utilizzando i cerchi del bordo.
Una volta terminata l'immagine, premere il tasto Invio sulla tastiera per ottenere la nuova opzione di aggiunta di blocchi. Per impostazione predefinita, apparirà il blocco paragrafo.
Aggiungete il nome del membro del team, la sua designazione e una breve introduzione su di lui. Li abbiamo aggiunti utilizzando il blocco paragrafo.
Ora collegare i profili sociali personali dei membri del team nella stessa colonna attraverso i blocchi sociali.
Qui collegheremo quattro profili popolari. Quindi, creare altre quattro colonne all'interno della colonna madre, utilizzando i blocchi di colonne.
Aggiungere il blocco Icone sociali nella colonna dei genitori sotto il nome e la presentazione del membro del team.
Il blocco Icona sociale integra tutte le piattaforme di social media più diffuse. Una volta aggiunto il blocco Icona sociale, avrete la possibilità di scegliere i blocchi che preferite facendo clic sul tasto icona più (+). Il video allegato di seguito spiega il processo.
Fare clic sulle icone sociali uno per uno. Si aprirà un riquadro in cui è possibile copiare-incollare i link dei rispettivi profili sociali. Completate la sezione social in questo modo.
Selezionare l'intera colonna madre. Vieni al Scheda Stili. Rimuovere gli spazi non necessari tra i blocchi aggiunti orizzontalmente utilizzando il tasto Opzione Spaziatura blocchi.
Aggiungere un colore di sfondo alla colonna del membro del team. Per un aspetto migliore, aggiungere un padding orizzontale per aggiungere un po' di spazio intorno alla colonna.
Allo stesso modo, completate le altre due colonne sul lato destro aggiungendo nuovi membri del team.
Si può notare che abbiamo riempito tutte e tre le colonne con tre membri del team e le loro informazioni.
Passo 05: stilizzare l'intera sezione dei membri del team
Selezionare l'intera sezione dei membri del team facendo clic sul pulsante Icona del gruppo sulla barra degli strumenti.
Aggiungere un colore di sfondo alla sezione della squadra che vi sembra più adatta. Dopodiché, potete cambiare il colore del testo individualmente, selezionando i rispettivi blocchi di paragrafo uno per uno.
Il prossimo, aggiungere un'imbottitura sia in verticale che in orizzontale per creare uno spazio bianco intorno all'intera sezione.
Infine, aggiungete un raggio alla sezione della squadra in modo che l'angolo del bordo abbia una forma semicircolare. Questo darà un aspetto diverso e bello alla sezione.
Passo 06: Anteprima della sezione Team nel frontend
Infine, si può accedere al frontend della pagina e vedere come appare la sezione del team.
Conclusione
È possibile creare e personalizzare la sezione dei membri del team in vari modi. Abbiamo presentato qui un processo di base da cui potete prendere ispirazione per creare e realizzare altri meravigliosi design.
Se doveste incontrare qualche problema in qualche punto dell'intero tutorial, non esitate a farcelo sapere attraverso il box dei commenti. Infine, prima di lasciare il nostro sito, dedicate qualche minuto a esplorare questo post su come creare un riquadro di contenuto in WordPress.
