Come creare un layout a schermo intero diviso con interruttori unici in Divi
Pubblicato: 2020-05-06I layout a schermo diviso sono un ottimo modo per aggiungere un design al tuo sito Web Divi che è meravigliosamente bilanciato e non convenzionale. Con le nuove opzioni di posizione di Divi, possiamo creare un layout a schermo diviso utilizzando due sezioni Divi adiacenti. Questo apre le porte alla creazione di layout a schermo diviso ancora più unici utilizzando Divi Builder. In questo tutorial, esploreremo alcune caratteristiche di design uniche mentre creiamo un layout a schermo diviso completo con interruttori unici in Divi.
Iniziamo.
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial.
Attiva/disattiva apertura
Toggle Chiuso
Mobile
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file JSON nel Divi Builder.
Passiamo al tutorial, vero?
Cosa ti serve per iniziare
Per iniziare, dovrai fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
- Scegli l'opzione "Crea da zero".
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Parte 1: Creazione del layout dello schermo diviso con due sezioni
Per questo design, introdurremo una nuova tecnica che posiziona due sezioni Divi adiacenti l'una all'altra per creare il design a schermo diviso. Per iniziare, aggiungi una riga a una colonna alla sezione predefinita. Questo darà il via al design della nostra prima sezione.
Sezione 1 Impostazioni
Per questa prima delle due sezioni, iniziamo aggiungendo le seguenti impostazioni di progettazione:
Sfondo
- Aggiungi immagine di sfondo
- Colore di sfondo sfumato a sinistra: #ffffff
- Colore di sfondo sfumato a sinistra: rgba (255,255,255,0.45)
Dimensioni e spaziatura
Quindi aggiorna le dimensioni e la spaziatura in modo che la sezione occupi il 50% della larghezza del browser e il 100% dell'altezza del browser.
- Larghezza: 50% (desktop), 100% (tablet e telefono)
- Altezza minima: 900 px (desktop), nessuno (tablet e telefono)
- Altezza: 100vh (desktop), auto (tablet e telefono)
- Imbottitura: 0px in alto, 0px in basso
Divisore superiore
- Stile divisore superiore: vedi screenshot
- Colore divisorio superiore: #333333
- Altezza divisore superiore: 50vh (desktop), 10vh (tablet e telefono)
- Ripetizione orizzontale divisore superiore: 0,5x (desktop), 1x (tablet e telefono)
- Disposizione del divisore superiore: sotto il contenuto della sezione
Divisore inferiore
- Stile divisore inferiore: vedi screenshot
- Colore divisore inferiore: # 02c39a
- Altezza divisore inferiore: 50 vh (desktop), 30 vh (tablet e telefono)
- Ripetizione orizzontale divisore inferiore: 0,5x (desktop), 1x (tablet e telefono)
- Disposizione del divisore inferiore: sotto il contenuto della sezione
Sezione 2
Sezione duplicata 1
Per creare la sezione adiacente che occuperà il lato destro del layout a schermo diviso, duplica la sezione 1.
Quindi aggiorna le impostazioni come segue:
Posizione
- Posizione: assoluta (desktop), relativa (tablet e telefono)
- Posizione: in alto a destra
- Indice Z: 10
Sfondo
- Colore di sfondo: nessuno/bianco
Aggiornamenti sui divisori principali
- Stile divisore superiore: vedi screenshot
- Colore divisore superiore: # 02c39a
- Ripetizione orizzontale divisore superiore: 1x
- Capovolgimento divisore superiore: verticale
Il divisore dovrebbe allinearsi perfettamente con l'intestazione superiore adiacente nella sezione 1.
Divisore inferiore
- Stile divisore inferiore: vedi screenshot
- Colore divisore inferiore: #f0f3bd
- Ripetizione orizzontale divisore inferiore: 1x
- Capovolgimento divisore inferiore: verticale
Parte 2: Titolo e menu della sezione 1
Ora che i layout a due sezioni sono pronti, possiamo iniziare ad aggiungere il contenuto a ciascuna delle sezioni.
Creare il titolo
Per iniziare, creeremo un titolo grande nella sezione sinistra.
Impostazioni riga
Prima di aggiungere un modulo di testo, dobbiamo aggiornare le impostazioni di riga per la riga nella sezione 1 come segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px in alto, 0px in basso, 10% a destra
- Posizione: assoluta (desktop), relativa (tablet e telefono)
- Posizione: Centro Sinistra
Modulo di testo
Una volta che le impostazioni della riga sono a posto, la riga dovrebbe essere allineata verticalmente all'interno della sezione. Quindi, aggiungi un nuovo modulo di testo alla riga.
Contenuto del testo
Apri le impostazioni per il modulo di testo e aggiorna il seguente contenuto:
<h1>Divi <br />Web <br />Design</h1>
Progettazione del testo
Quindi aggiorna le impostazioni di progettazione del testo come segue:
- Carattere dell'intestazione: Poppins
- Peso del carattere dell'intestazione: grassetto
- Allineamento del testo dell'intestazione: a destra
- Dimensione del testo dell'intestazione: 10vw
- Altezza della linea di prua: 1.2em
- Imbottitura: 5% a sinistra
Creazione del menu
Per questo layout, poiché abbiamo due sezioni adiacenti, abbiamo l'opportunità di aggiungere un layout a 6 colonne a una o entrambe le sezioni. Questo è ottimo per creare un bel menu di icone nella parte inferiore della sezione.
Ecco come farlo...
Aggiungi nuova riga
Per creare il menu in basso, aggiungi una nuova riga a una colonna sotto la riga nella sezione 1. Inizialmente stiamo aggiungendo un layout a una colonna perché in seguito duplicheremo la colonna per creare tutte e sei le colonne.
Impostazioni riga
Quindi aggiorna le seguenti impostazioni di riga:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100%
- Imbottitura: 0px in alto, 0px in basso
- Posizione: Assoluta (desktop), Relativa (tablet e telefono)
- Posizione: in basso a sinistra
- Indice Z: 3
Modulo Blurb
Quindi, aggiungi un modulo blurb alla nuova riga.
Blurb contenuto
Quindi aggiorna il contenuto del blurb come segue:
- Titolo: Affari
- Icona: edifici
Stile Blurb
Quindi aggiorna le impostazioni di progettazione come segue:
- Colore icona: #333333
- Dimensione carattere icona: 40px
- Allineamento del testo: Centro
- Dimensione del testo del titolo: 12px
Quindi aggiungi il seguente CSS personalizzato all'immagine Blurb
margin-bottom: 10px;
Duplica colonna
Ora che abbiamo disegnato la nostra icona nella prima colonna, possiamo velocizzare la creazione e il design delle altre 5 icone duplicando l'intera colonna 5 volte.
Aggiorna i contenuti per Blurbs
Una volta create tutte e 6 le colonne/icone, torna indietro e aggiorna il titolo, l'icona e l'URL per ogni blurb.
Parte 3 Sezione 2 Commutatori
Ora che la sezione 1 è completa, possiamo iniziare ad aggiungere gli interruttori alla sezione destra del nostro layout a schermo diviso. Ci saranno un totale di tre interruttori che corrispondono alle parole grandi in ogni titolo a sinistra. A ciascuno degli interruttori verrà assegnata una posizione assoluta personalizzata sul desktop che li manterrà in posizione.
Impostazioni riga
Prima di iniziare ad aggiungere i moduli di commutazione, dobbiamo ottimizzare le dimensioni e la spaziatura della riga. Apri le impostazioni di riga per la riga nella sezione destra e aggiorna quanto segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 100% (desktop), nessuna (tablet e telefono)
- Altezza: 100%
Altezza colonna
Ora che la riga ha un'altezza uguale all'altezza della sezione, dobbiamo fare lo stesso per la colonna. Per fare ciò, aggiungi il seguente CSS personalizzato all'elemento principale per la colonna:
height: 100%;
Modulo di attivazione/disattivazione superiore
Con l'altezza della colonna in atto, aggiungiamo il primo modulo di commutazione alla riga.
Attiva/disattiva contenuto
Quindi aggiorna il contenuto dell'interruttore con il titolo "Divi" e incolla il seguente contenuto del corpo:
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. <a href="#">| Learn More ></a>
Attiva/disattiva design
Aggiorna il design dell'interruttore come segue:
- Colore icona: #333333
- Dimensione carattere icona: 40px
- Apri Toggle Colore di sfondo: trasparente
- Chiuso Toggle Colore di sfondo: trasparente
- Colore del testo del titolo aperto: #333333
- Colore del testo del titolo: #333333
- Carattere del titolo: Poppins
- Peso del carattere del titolo: ultraleggero
- Dimensione del testo del titolo: 40px
- Colore del corpo del testo: #333333
- Peso del carattere del collegamento: #333333
- Peso del carattere del collegamento: grassetto
- Stile del carattere del collegamento: TT
- Colore del testo del collegamento: #333333
- Spaziatura lettere collegamento: 3px (desktop), 5px (hover)
Attiva/disattiva dimensione e posizione
- Larghezza: 50% (desktop), 80% (tablet e telefono)
- Larghezza massima: 400 px
- Larghezza bordo: 0px
- Attiva/disattiva icona CSS personalizzato:
left:-60px;
- Posizione: Assoluta (desktop), Relativa (tablet e telefono)
- Scostamento verticale: 22%
- Scostamento orizzontale: 50%
- Indice Z: 2
Il CSS personalizzato aggiunto al modulo di attivazione posiziona l'icona di attivazione/disattivazione sulla dimensione sinistra dell'interruttore. E le impostazioni di posizione posizionano l'interruttore in una posizione assoluta utilizzando l'unità di lunghezza percentuale che scalerà con la larghezza del browser.
Modulo di attivazione/disattivazione inferiore
Duplica in alto Toggle
Per creare l'interruttore in basso, duplica l'interruttore appena creato.
Aggiorna posizione
Quindi apri le impostazioni di commutazione duplicate utilizzando la casella dei livelli e aggiorna l'offset di posizione come segue:
- offset verticale: 70%
Modulo di commutazione centrale
Attiva/disattiva Duplica in basso
Per creare l'interruttore centrale, duplica l'interruttore in basso.
Aggiorna posizione
Quindi aggiorna quanto segue:
- Posizione: Centro Sinistra
- Offset orizzontale: 19 px
Aggiorna dimensione
- Larghezza: 95%
- Larghezza massima: 500 px
CSS personalizzato
Per una funzionalità di progettazione opzionale, possiamo aggiungere uno snippet CSS personalizzato all'elemento principale per allineare il testo a destra del titolo.
Per fare ciò, incolla il seguente CSS nell'elemento principale:
display:flex; align-items:center;
Linee divisorie
Ora che i nostri interruttori sono a posto, possiamo aggiungere alcune linee divisorie per collegare gli interruttori superiore e inferiore con la parola corrispondente nella sezione sinistra.
Modulo divisore superiore
Per creare la linea divisoria superiore, aggiungi un nuovo modulo divisore sotto l'interruttore superiore.
Design del divisore
Quindi aggiorna le impostazioni del design del divisore come segue:
- Colore linea: #333333
- Posizione della linea: centrata verticalmente
- Peso del divisore: 2px
- Larghezza: 50%
- Trasforma Trasla Asse Y: 29px
- Trasforma Trasla asse X: -12px
- Stile di animazione: diapositiva
- Direzione dell'animazione: destra
- Durata dell'animazione: 2000 ms
- Intensità animazione: 10%
- Opacità iniziale dell'animazione: 100%
Visibilità e posizione del divisore
Ora, tutto ciò che dobbiamo fare è nascondere il divisore sul cellulare e posizionarlo in modo che si allinei con l'interruttore in alto.
- Disabilita su: telefono e desktop
- Posizione: Assoluta
- Scostamento verticale: 22%
- Indice Z: 1
Modulo divisore inferiore
Modulo divisore superiore duplicato
Per creare il divisore inferiore, duplica il modulo divisore superiore.
Aggiorna posizione
Quindi aggiorna l'offset di posizione per allinearlo con l'interruttore in basso:
- Scostamento verticale: 70%
Risultato finale
Una volta fatto, controlla il risultato finale sulla pagina live.
Attiva/disattiva apertura
Toggle Chiuso
Mobile
Pensieri finali
Questo layout a schermo diviso completo presenta alcune tecniche di progettazione uniche che torneranno utili per molti progetti futuri. Le doppie sezioni offrono innumerevoli combinazioni di colonne e design di divisori di sezione. E la possibilità di posizionare gli interruttori in modo assoluto sarà utile per il posizionamento preciso di informazioni importanti. Spero possa essere d'aiuto!
Non vedo l'ora di sentirti nei commenti.
Saluti!