Vorresti creare una sezione per i membri del team con Elementor ?
Bene, sei capitato nel posto giusto. Oggi ti mostreremo come creare una meravigliosa sezione per i membri del team con il Pagina del costruttore Elementor.
Per completare questo tutorial, avrai bisogno di un Elementor versione pro, perché noi usa codice CSS personalizzato che è possibile solo con la versione pro diElementor. Se non l'hai ancora fatto, aggiornalo.
E per capire di cosa stiamo parlando in questo tutorial, ti invitiamo a guardare il seguente video:
Per iniziare, crea una pagina e modificala con Elementor.
Successivamente inserisci una struttura con 3 colonne in quest'ultima, poi nel pannello, sotto la linguetta Contenuto, imposta Altezza su Altezza minima e seleziona Altezza minima VH, quindi imposta il cursore su 100.
Selezioniamo la colonna centrale per modificarla e andiamo alla scheda Avanzate. Impostiamo tutti i margini interni a 30.
Inseriamo un widget Sezione Interna in questa colonna, poi eliminiamo una delle colonne contenute nella Sezione Interna, quindi nel pannello sotto la scheda Contenuto, impostiamo anche l'altezza su Altezza minima e il cursore su 450px.
SulAllineamento verticale selezionare Basso e straripamento selezionare Maschera.
Nella scheda Style Cambia lo sfondo in Classico e seleziona un'immagine dalla tua libreria.
Leggi la nostra guida su: Come creare una scheda prodotto con Elementor
Sur Posizione selezionare Centrato superiore, File allegato su scorrimento, Dillo ancora su Non ripetuto et Misura su Coperchio
Nei confini definire il confini su 12.
Aggiungiamo gli effetti ombra. In Shade of box modifichiamo Verticale su 22, Flou su 40 et Diffusore su all'10 ottobre.
Aggiungiamo un Widget del titolo nella sezione Interni e dare un nome al nostro membro e centroni il widget.
Leggi anche: Come cambiare l'intestazione sullo scorrimento della pagina con Elementor
Nella scheda Style, Modifichiamolo colore del testo e tipografia scegliere 22 per la dimensione del carattere e 500 per grasso, Trasformazione su maiuscolo et spaziatura del carattere su 1.2
Allora duplichiamo il widget del titolo e modifica il titolo del secondo widget e in tipografia scegli 15 per la dimensione del carattere e 500 per la larghezza, trasformazione attiva défaut e spaziatura tra lettere su 1.2
Andiamo alla scheda avanzato e definire il Margine superiore su all'15 ottobre. Aggiungiamo il widget Icone social media alla nostra sezione interna.
Andiamo alla scheda Style, cambia il colore in Personalizzato, rendi trasparente il colore primario e imposta i margini interni su 0.30
Nella scheda avanzato, Definisci i margini Alto su -15 e Basso su 20
Quindi seleziona la colonna della Sezione Interna per modificarla e nella scheda Style seleziona il tipo Classico e sul colore afferriamo #Ffffff28.
Leggi anche: Come scorrere un'immagine lunga di un portfolio con Elementor
Quindi seleziona la colonna della Sezione Interna per modificarla e nella scheda avanzato nel campo Classi CSS, prendiamo informazioni-membro
Quindi selezionare Sezione interna quindi nella scheda avanzato nel campo CSS personalizzato, incolla il seguente codice:
/ * Effetto vetro CSS * /
selettore {
–Altezza: 150px;
–In basso: -150px;
overflow: nascosto!importante;
}
selector .member-info {
altezza: var (–altezza);
posizione: assoluta;
sfondo-filtro: sfocatura (15px);
in basso: 0;
transizione: .5s easy-in-out;
}
Dopo il primo codice CSS, incolla quanto segue:
/ * CSS da nascondere o mostrare al passaggio del mouse * /
selector .member-info {
in basso: var (–in basso);
}
selettore: passa il mouse su .member-info {
in basso: 0px;
}
Ora, quando passi con il mouse sull'immagine, vengono visualizzate le informazioni sui membri.
Duplica la colonna 2 volte ed elimina le altre colonne vuote
Quindi seleziona la Sezione interna e cambia l'immagine di sfondo con l'immagine di un altro membro del team, cambia nome e professione, fai lo stesso con l'altra colonna.
Visualizza in anteprima il tuo lavoro su tablet e dispositivi mobili migliorando i margini e altro ancora per una migliore visualizzazione.
Ed è così che puoi creare una meravigliosa sezione Team Members
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo tutorial che ti mostra come creare una sezione per i membri del team. Se hai dubbi su come arrivarci, faccelo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
