I cassetti inferiori sono utili aggiunte a qualsiasi sito web, in quanto memorizzano contenuti aggiuntivi facilmente accessibili dagli utenti. I cassetti a piè di pagina sono contenitori di contenuti Web (come una sezione Divi) che possono essere aperti e chiusi facendo clic su un pulsante o passandoci sopra con il mouse. È come avere una piccola scorta di contenuti premium.
In questo tutorial, progetteremo un footer drawer mobile in Divi. Aggiungeremo il footer drawer all'area globale del footer del file modello di sito web in modo che il cassetto del piè di pagina sia accessibile a livello di sito con il normale contenuto del piè di pagina.
Con il processo che utilizzeremo, qualsiasi sezione Divi (e il suo contenuto) può essere convertito in un cassetto piè di pagina in pochi minuti.
Come aggiungere il modello del cassetto piè di pagina al tuo sito Divi
L'aggiunta di questo modello sostituirà il modello di sito web per impostazione predefinita (se ne hai uno) sul tuo sito Divi. Ti suggeriamo di aggiungerlo a un sito di prova in modo da non rovinare nulla su un sito live.
Per importare da soli il modello del cassetto a piè di pagina fisso sito web, decomprimere il file zip di download per accedere al file JSON.
Quindi vai alla dashboard di WordPress e vai a Divi> Theme Builder.
Quindi fare clic sull'icona della portabilità in alto a destra nella pagina.
Nella finestra della portabilità, scegli il file JSON che hai appena decompresso e seleziona l'opzione "Scarica backup prima dell'importazione", nel caso in cui in precedenza avevi qualcosa nel modello di sito web predefinito che non si desidera sovrascrivere.
Quindi fare clic sul pulsante Importa.
Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.
Ora passiamo al tutorial, ok?
Parte 1: aggiunta di un piè di pagina globale
Il generatore di temi Divi consente di sostituire il piè di pagina predefinito con uno nuovo aggiornando il modello di sito Web predefinito.
Per creare un piè di pagina globale, vai alla dashboard di WordPress e vai a Divi> Theme Builder. Quindi fare clic sullo spazio "Aggiungi piè di pagina globale" all'interno del modello di sito Web predefinito.
Quindi seleziona l'opzione "Crea piè di pagina globale" dall'elenco a discesa.
Aggiungi un layout predefinito a un layout piè di pagina globale
Questo distribuirà l'Editor del layout del modello dove ti verranno immediatamente richieste le tre scelte su come iniziare a costruire. Seleziona l'opzione "Scegli un layout predefinito".
Nella finestra a comparsa Carica dalla libreria, trova il layout della pagina di destinazione degli elementi decorativi. Quindi fare clic su "Usa questo layout".
Rimuovi i contenuti indesiderati dal layout predefinito
Una volta caricato il layout nell'editor, espandere la casella a comparsa Livelli facendo clic sull'icona dei livelli nel menu delle impostazioni. Quindi elimina tutte le sezioni del layout tranne le ultime due.
Sposta ed etichetta le due sezioni
Una volta rimosse le sezioni, dovresti avere due sezioni, una intitolata "Piè di pagina" e l'altra intitolata "Come funziona". Sposta la sezione "Piè di pagina" nella parte superiore del layout.
Modificare la dicitura nella sezione inferiore per leggere "Footer Drawer". Questa sarà la sezione che useremo come contenuto del nostro footer drawer.
Parte 2: creazione del cassetto dei piè di pagina fisso
Ora che abbiamo designato una delle sezioni come piè di pagina e l'altra come cassetto del piè di pagina, siamo pronti per iniziare a creare il nostro cassetto del piè di pagina fisso. Iniziamo creando l'icona blurb che useremo per attivare il cassetto del piè di pagina.
Creazione del pulsante del cassetto piè di pagina
Aggiungi una nuova linea
Nella sezione inferiore del piè di pagina, aggiungi una nuova riga a una colonna.
Etichetta la nuova riga "Pulsante cassetto" perché questa è la riga che conterrà il pulsante utilizzato per aprire e chiudere il cassetto. Quindi sposta la linea all'inizio della sezione.
Imbottitura di fila
Prima di aggiungere un modulo, apri le impostazioni della riga e aggiorna il riempimento come segue:
- Imbottitura: 0px alta, 0px bassa
Imbottitura di sezione
Quindi aprire le impostazioni nella sezione "Footer drawer" e aggiornare l'imbottitura come segue:
Per creare il pulsante cliccabile che attiva o disattiva il cassetto del piè di pagina, utilizzeremo un modulo blurb con un'icona. E gli daremo una forma a goccia d'acqua unica combinando la forma quadrata del contenitore del pod Blurb con l'icona del cerchio.
Ecco come.
Aggiungi un modulo Blurb
Aggiungi un modulo di testo di presentazione alla riga "Pulsante del cassetto" nella parte superiore della sezione.
Contenuto / icona Blurb
Quindi, rimuovere il titolo predefinito e il contenuto del corpo e selezionare l'icona della freccia che punta all'angolo in alto a sinistra (vedi screenshot). Stiamo usando l'icona parzialmente ruotata perché la ruoteremo in seguito.
BlurbDesign
Quindi dare il testo di presentazione come segue:
- Colore di sfondo: # 081540
Quindi aggiornare i parametri di progettazione come segue:
- Colore icona: #eeeeee
- Icona Cerchio: SÌ
- Colore cerchio: # 081540
- Usa la dimensione del carattere dell'icona: SÌ
- Dimensione carattere icona: 17 pixel
Dimensione del testo di presentazione
Ora dai al modulo un'altezza e una larghezza come segue:
- Larghezza: 30px
- Altezza: 30px
Ciò farà sì che l'icona del cerchio trabocchi nel contenitore di testo per creare la forma della goccia d'acqua.
Posizione Blurb
Quindi assegna al testo di presentazione una posizione assoluta nella parte superiore centrale della sezione.
- Posizione: assoluta
- Posizione: in alto al centro
Impostazioni di trasformazione Blurb
Ora possiamo usare le opzioni di trasformazione per ruotare il blurb / icona verso l'alto e posizionarlo appena sopra il contenitore della sezione. Ora quando nascondiamo la sezione sotto la finestra del browser, l'icona rimarrà visibile / cliccabile.
Aggiorna i seguenti elementi:
- Trasforma trasla asse X: -50%
- Trasforma la traslazione dell'asse Y: -250%
- Trasforma la rotazione dell'asse Z: -45 gradi
Quindi rimuovere l'animazione dell'icona predefinita:
- Animazione immagine / icona: nessuna animazione
Useremo JQuery per attivare il cassetto, quindi dobbiamo indirizzare il testo / l'icona come elemento cliccabile con una classe CSS che useremo più avanti nel codice. Aggiungi la seguente classe CSS:
- Classe CSS: cassetto target
Impostazioni sezione cassetto piè di pagina
Ora nasconderemo la sezione "Footer Drawer" utilizzando l'opzione di trasformazione della traduzione. Apri le impostazioni della sezione e aggiorna quanto segue:
- Trasforma trasla asse Y: 100%
Il bello dell'utilizzo della trasformazione qui è che i valori percentuali si basano sulle dimensioni effettive dell'articolo. Pertanto, il 100% sull'asse Y sarà direttamente relativo all'altezza della sezione (indipendentemente da quale sia in un dato momento). In altre parole, l'elemento verrà spostato lungo la distanza esatta come la sua altezza.
Per riportare il Footer Drawer in vista, avremo bisogno di invertire la traduzione di trasformazione che abbiamo appena aggiunto alla sezione. Per fare ciò, dovremo indirizzare l'elemento con una classe CSS e disabilitare la trasformazione della traduzione facendo clic sull'icona (riportare l'intera sezione alla sua posizione originale).
Aggiungi una classe CSS alla sezione del cassetto piè di pagina
Nella scheda Avanzate, aggiungi la seguente classe CSS:
- Classe CSS: has-transform
Sezione cassetto piè di pagina Posizione fissa
Per l'ultimo passaggio, dobbiamo fissare il cassetto del piè di pagina in modo che (con l'icona) fluttui nella parte inferiore della finestra del browser.
Aggiorna la posizione della sezione "Footer Drawer" come segue:
- Posizione: fissa
- Posizione: in basso a sinistra
- Indice Z: 13
Disattiva i contenuti mobili
Poiché avrai una quantità limitata di contenuto del cassetto piè di pagina che si adatta sia al tablet che al telefono (a causa dell'altezza limitata dello schermo), dovrai disabilitare / nascondere gli elementi non essenziali dal display. In questo esempio, nasconderemo la riga centrale del layout della sezione.
Apri le impostazioni dalla penultima riga nella sezione "Footer Drawer". Nella scheda Avanzate, aggiorna l'opzione di visibilità per disattivare la linea sul telefono e sul tablet.
Aggiunta di codice personalizzato
Per aggiungere la funzionalità di clic e di attivazione / disattivazione nel cassetto piè di pagina, è necessario aggiungere CSS e JQuery personalizzati alla pagina. Per fare ciò, crea un nuovo modulo di codice sotto il modulo Blurb utilizzato per il pulsante.
Quindi incollare il seguente codice nell'area del codice:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Salva le modifiche
Ricordati di salvare il layout prima di uscire dall'editor.
Salvare anche le modifiche nel generatore di temi.
Risultato finale
Ora possiamo andare a qualsiasi pagina del tuo sito web per vedere il risultato finale.
Considerazioni finali
Spero che il cassetto del piè di pagina mobile ti possa aiutare promuovere contenuti in modo divertente e accessibile. Come ogni cassetto, puoi riempirlo con qualsiasi cosa ti venga in mente.
Altre risorse
Ecco un elenco di tutorial che possono aiutarti a ottenere di più con le funzionalità interne di Divi.
- Come creare un toolbox a tema su Divi
- Come creare una sezione promozionale animata su Divi
- Come personalizzare le griglie su Divi
Tradotto da: Temi eleganti