Come posizionare i pulsanti in modo assoluto per creare layout di pulsanti unici in Divi
Pubblicato: 2020-02-26Le opzioni di posizione integrate di Divi sono un comodo strumento di progettazione per il posizionamento preciso di qualsiasi elemento Divi, inclusi i pulsanti. La maggior parte delle volte, ci affidiamo alla posizione statica predefinita di un pulsante che segue il flusso del documento (o della pagina). Tuttavia, se sappiamo come posizionare i pulsanti in modo assoluto, possiamo creare alcuni layout di pulsanti unici e pratici per i nostri contenuti Divi.
In questo tutorial, ti mostreremo come creare 4 diversi layout di pulsanti che accentueranno in modo univoco il modulo Blurb di Divi. Questo sarà utile quando usi i blurb sul tuo sito web.
Iniziamo.
Sbirciata
Dai un'occhiata a questo rapido sguardo ai quattro layout di pulsanti che creeremo in questo tutorial.
Scarica GRATUITAMENTE i layout dei pulsanti Divi
Per mettere le mani sui design del layout dei pulsanti di questo tutorial, devi 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.
Creazione del layout dei pulsanti n. 1: pulsanti doppi in basso
Per il primo dei nostri quattro layout di pulsanti, creeremo due pulsanti in basso sotto un modulo blurb. Questa è un'ottima opzione per presentare contenuti (come i servizi) che richiedono due CTA. Inoltre, questo è un ottimo modo per mantenere i pulsanti bloccati nella parte inferiore delle colonne con altezze uguali.
Per iniziare, aggiungi una riga a due colonne (0 metà metà) alla sezione.
Impostazioni riga
- Usa larghezza grondaia personalizzata: S
- Larghezza grondaia: 2
- Equalizza le altezze delle colonne: S
- Larghezza: 100%
- Margine: 50px in basso
- Imbottitura: 0px in alto, 0px in basso
Impostazioni colonna 1
- Colore di sfondo: #2e3858
- Imbottitura: 50px in basso
Questa imbottitura in basso creerà lo spazio necessario per quando aggiungeremo i pulsanti posizionati in modo assoluto.
Design del modulo Blurb
Quindi, aggiungi un modulo blurb alla colonna 1.
Quindi carica un'immagine nel modulo blurb come segue:
Vai alle impostazioni di progettazione e aggiorna quanto segue:
- Allineamento immagine/icona: a sinistra
- Carattere del titolo: PT Sans
- Peso del carattere del titolo: grassetto
- Colore del testo del titolo: #ffffff
- Dimensione del testo del titolo: 38px
- Spaziatura delle lettere del titolo: 2px
- Colore del corpo del testo: #ffffff
- Larghezza immagine: 40%
- Larghezza contenuto: 100%
- Larghezza: 100%
- Imbottitura: 50 px, in alto, 50 px in basso, 30 px a sinistra, 30 px a destra
Aggiunta dei pulsanti doppi inferiori
Pulsante #1 Design
Aggiungi un nuovo modulo pulsanti sotto il modulo blurb.
Quindi aggiorna le impostazioni del pulsante come segue:
- Dimensione del testo del pulsante: 16 px
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #2dc3a3
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Spaziatura delle lettere dei pulsanti: 2px
- Carattere pulsante: PT Sans
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: TT
- Margine: 0px in basso
- Imbottitura: 1em in alto, 1em in basso, 1.5em a sinistra, 2.5em a destra
Pulsante n. 1 Posizionamento assoluto
Per posizionare il pulsante assolutamente in basso a sinistra della colonna, aggiornare quanto segue:
- Posizione: Assoluta
- Posizione: in basso a sinistra
Divi lo rende facile con la griglia di posizione cliccabile integrata. Poiché vogliamo che il pulsante si trovi a filo nella parte inferiore della colonna, non sono necessari valori di offset.
Pulsante n. 2 Design e posizione
Per creare il pulsante n. 2, duplica il modulo pulsante precedente.
Il duplicato verrà impilato direttamente sopra il pulsante precedente, quindi se stai utilizzando il visual builder, potrebbe sembrare che non sia successo nulla. Fare clic per aprire le impostazioni del modulo pulsanti e aggiornare quanto segue:
- Colore di sfondo: #df4570
- Posizione Posizione: in basso a destra
Ora cancella la colonna 2 attualmente vuota e duplica la colonna 1 per ottenere un design duplicato esatto anche nella colonna di destra.
Layout del pulsante n. 1 Risultato
Controlla il risultato. Nota che il contenuto nella colonna di destra spinge la colonna più in basso nella pagina, ma poiché i nostri pulsanti sono posizionati in modo assoluto, continuano ad abbracciare il fondo per un bel design simmetrico.
Creazione del layout dei pulsanti n. 2: tre pulsanti laterali
Per il layout dei pulsanti successivo, posizioneremo tre pulsanti a destra di un modulo blurb in una singola colonna.
Per avviare il design del layout del pulsante successivo, duplica la riga precedente.
Impostazioni sfocatura
Aggiorna le impostazioni del blurb come segue:
- Colore di sfondo: #df4570
- Larghezza immagine: 60%
- Larghezza: 56% (desktop e tablet), 100% (telefono)
Questo creerà la stanza di cui abbiamo bisogno a destra del blurb per aggiungere il nostro layout a tre pulsanti.
Pulsante di posizionamento #1
Per posizionare il pulsante n. 1, apri le impostazioni del pulsante per il pulsante verde nell'angolo in basso a sinistra e aggiorna quanto segue:
- Posizione: Assoluta (desktop e tablet), Relativa (telefono)
- Posizione: in alto a destra
- Offset verticale: 20% (desktop e tablet), 0% (telefono)
- Offset orizzontale: 5% (desktop e tablet), 0% (telefono)
Pulsante di posizionamento #2
Per posizionare il pulsante n. 2, duplica il pulsante appena posizionato. Puoi eliminare il pulsante rosso in basso a destra perché non ci servirà.
Quindi apri le impostazioni per il pulsante duplica e aggiorna quanto segue:
- Colore di sfondo: #df4570
Quindi spostare leggermente il pulsante verso il basso per aumentare l'offset verticale.
- Scostamento verticale: 35%
Pulsante di posizionamento n. 3
Infine, ripeti il processo ancora una volta duplicando il pulsante precedente e aggiornando quanto segue:
- Colore di sfondo: #3599e5
- Scostamento verticale: 50%
Risultato layout pulsante n. 2
Controlla il risultato finale del layout a tre pulsanti.
Creazione del layout dei pulsanti n. 3: pulsanti sparsi e ridimensionati
Per questo prossimo layout, posizioneremo i pulsanti un po' più sporadicamente e quindi regoleremo la dimensione di alcuni pulsanti usando la scala di trasformazione.
Per iniziare, duplica la riga precedente contenente il layout a tre pulsanti.
Impostazioni sfocatura
Quindi apri le impostazioni per il modulo blurb nella colonna 1 e aggiorna quanto segue:
- Larghezza: 60%
- Colore di sfondo: trasparente
- Larghezza: 60%
- Allineamento del modulo: Centro
- Allineamento del testo: centro
- Allineamento del modulo: centro
- Larghezza bordo: 2px
- Colore del bordo: rgba (255,255,255,0.15)
- Dimensione del testo del testo: 20px
- Margine: 50px in alto
Posizionamento pulsante n. 1
- Scostamento verticale: 8%
- Scostamento orizzontale: -7%
Pulsante #2 Posizionamento
- Posizione Posizione: in alto a destra
- Scostamento verticale: 34%
- Scostamento orizzontale: -10%
- Scala di trasformazione: 80%
Pulsante #3 Posizionamento
- Posizione Posizione: in basso a destra
- Scostamento verticale: -3%
- Scostamento orizzontale: 5%
- Scala di trasformazione: 138%
Impostazioni riga
- Larghezza grondaia: 4
- Larghezza: 80% (da tavolo)
Layout del pulsante n. 3 Risultato
Controlla il risultato finale.
Creazione del layout dei pulsanti n. 4: pulsanti con linguetta a strappo
Per quest'ultimo layout di pulsanti, creeremo alcune linguette in alto a destra del blurb.
Per avviare il progetto, duplica la riga del layout del pulsante n. 2.
Impostazioni colonna
Successivamente, aggiorna le impostazioni dello sfondo per la colonna n. 1 come segue:
- Colore di sfondo (desktop): nessuno (predefinito)
- Colore di sfondo (telefono): #2e3858
Nella scheda Avanzate, aggiorna l'opzione di visibilità in modo che l'overflow sia nascosto sul display del telefono.
- Overflow orizzontale (telefono): Nascosto
- Overflow verticale (telefono): nascosto
Posiziona il pulsante della linguetta di estrazione n. 1
Ora possiamo usare i tre pulsanti attualmente nella colonna come i nostri pulsanti pull-tab. Apri le impostazioni per il pulsante in alto e aggiorna quanto segue:
- Offset verticale: 0px
- Offset orizzontale: 0px
Poiché utilizzeremo il pulsante per una scheda, dobbiamo fare spazio all'icona giusta in modo che appaia centrata ogni volta che sporge da dietro il modulo blurb. Vai avanti e aggiorna l'imbottitura dei pulsanti come segue:
- Imbottitura: 2em a sinistra, 3em a destra
Quindi aggiungi il seguente CSS personalizzato all'elemento After:
padding-left: 10px;
Quindi aggiorna l'offset orizzontale sul telefono come segue:
- Offset orizzontale (telefono): -134px
Ciò nasconderà il lato sinistro del pulsante al di fuori della colonna sul display del telefono in modo che il pulsante completo venga visualizzato al passaggio del mouse/clic.
Pulsante di posizionamento della linguetta #2
Per posizionare il secondo pulsante estraibile, duplica il pulsante precedente e aggiorna il colore di sfondo del duplicato.
- Colore di sfondo: #df4570
Quindi, aggiorna la posizione come segue:
- Offset verticale: 63 px
Quindi aggiorna le seguenti opzioni di posizione per il display del telefono:
- Posizione (telefono): Parente
- Offset verticale (telefono): 0%
Linguetta di posizionamento Pulsante #3
Infine, per posizionare il terzo pulsante della linguetta, duplicare il modulo pulsante precedente. Quindi apri le impostazioni per il modulo pulsante duplicato e aggiorna quanto segue:
- Colore di sfondo: #3599e5
- Offset verticale: 126px
Una volta posizionato il terzo pulsante, usa la funzione di selezione multipla di Divi tenendo premuto Cmd (o Ctrl) e facendo clic su ciascuno dei moduli del pulsante.
Quindi apri le impostazioni di uno dei moduli pulsante e aggiungi la seguente trasformazione traduci al passaggio del mouse.
- Trasforma Trasla Asse X (hover): 68%
Questo aggiornerà tutti e tre i pulsanti con la funzionalità di pull-tab al passaggio del mouse spostandolo a destra del 68%.
Posizionamento del modulo Blurb
Questo layout dei pulsanti richiede che il modulo blurb nasconda parzialmente i tre pulsanti. Pertanto daremo al blurb una larghezza del 100% e quindi utilizzeremo il margine destro per esporre la parte necessaria delle schede dei pulsanti. Quindi tutto ciò che dobbiamo fare è dare al blurb un indice Z alto per assicurarci che si trovi sopra i pulsanti.
Apri le impostazioni del modulo blurb e aggiorna quanto segue:
- Larghezza: auto
- Margine: 50 px a destra
- Posizione: Parente
- Indice Z: 11
Quindi aggiorna il colore di sfondo.
- Colore di sfondo: #2e3858
Impostazioni riga
Dopo che i pulsanti blurb e pull-tab sono finiti, apri le impostazioni della riga e aggiorna la larghezza per dare a quelle schede un po' di spazio per muoversi.
- Larghezza: 80%
Elimina la colonna 2 e quindi duplica la colonna 1 in modo da avere lo stesso design in ciascuna.
Quindi apri le impostazioni per la colonna 1 e assegnagli il seguente indice Z:
- Indice Z: 12
Ciò assicurerà che i pulsanti nella colonna uno non siano nascosti dietro il contenuto nella colonna 2 al passaggio del mouse.
Se lo desideri, puoi aggiornare le icone di ciascun pulsante in base alle tue esigenze.
Layout del pulsante n. 4 Risultato
Controlla il risultato finale del layout dei pulsanti della linguetta.
Risultati finali
Pensieri finali
Il posizionamento dei pulsanti apre assolutamente la porta a infiniti layout di pulsanti in Divi. Si spera che questo tutorial ti aiuti a capire come utilizzare al meglio la posizione assoluta in Divi. Altre utili funzioni integrate come le opzioni di trasformazione e l'indice Z rendono i pulsanti posizionati in modo assoluto.
Non vedo l'ora di sentirti nei commenti.
Saluti!