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.

Importa modello divi

Infine, salva le modifiche nel generatore di temi e visualizza una pagina live per visualizzare la barra a piè di pagina fissa.

Salva le modifiche al layout divi

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.

Selezione dell'editor Divi

Quindi seleziona l'opzione "Crea piè di pagina globale" dall'elenco a discesa.

Aggiungi un piè di pagina modello divi

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".

Scegli il modello divi precostruito

Nella finestra a comparsa Carica dalla libreria, trova il layout della pagina di destinazione degli elementi decorativi. Quindi fare clic su "Usa questo layout".

Usa un modello divi

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.

Elimina la sezione non necessaria

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.

Piè di pagina Divi

Modificare la dicitura nella sezione inferiore per leggere "Footer Drawer". Questa sarà la sezione che useremo come contenuto del nostro footer drawer.

Modifica l'etichetta del piè di pagina divi

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.

cassetto piedi fisso

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.

Layout di selezione divi

Imbottitura di fila

Prima di aggiungere un modulo, apri le impostazioni della riga e aggiorna il riempimento come segue:

  • Imbottitura: 0px alta, 0px bassa
Spaziatura divi di configurazione

Imbottitura di sezione

Quindi aprire le impostazioni nella sezione "Footer drawer" e aggiornare l'imbottitura come segue:

Configurazione della spaziatura delle sezioni Divi

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.

Cassetto piè di pagina divi
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.

Scegli l'icona del cassetto piè di pagina
BlurbDesign

Quindi dare il testo di presentazione come segue:

  • Colore di sfondo: # 081540
Modifica sfondo divi

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
Personalizza il pulsante divi di blurb
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.

Modifica il design del pulsante divi
Posizione Blurb

Quindi assegna al testo di presentazione una posizione assoluta nella parte superiore centrale della sezione.

  • Posizione: assoluta
  • Posizione: in alto al centro
Modifica la posizione del pulsante divi
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
Pulsante di ritorno divi

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
Definisci un selettore divi

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.

Trasforma sezione divi

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
Aggiungi classe ha trasformazione divi

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
Modifica la posizione sull'angolo divi

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.

Nascondi sezione su dispositivo mobile

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.

Controllo visibilità sezione divi

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.

Aggiungi il codice del modulo

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 );   
Aggiungi modulo codice divi

Salva le modifiche

Ricordati di salvare il layout prima di uscire dall'editor.

Salva modifiche divi

Salvare anche le modifiche nel generatore di temi.

Salva le modifiche

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.

Tradotto da: Temi eleganti