Come creare una barra laterale push scorrevole in Divi

Le barre laterali possono essere fantastiche, ma possono anche essere uno spreco di spazio. Ecco perché la creazione di una barra laterale di spinta scorrevole può essere un'opzione perfetta per coloro che desiderano avere una barra laterale che non distragga l'utente dal contenuto principale della pagina. Inoltre, questo tipo di barra laterale offre all'utente la possibilità di vedere o nascondere la barra laterale ogni volta che lo desidera.

L'effetto di spinta scorrevole è unico in quanto la barra laterale scorre dal lato sinistro della pagina mentre si spinge simultaneamente (o si schiaccia) il contenuto principale della pagina per adattare la barra laterale alla finestra. In breve, fa scorrere la barra laterale e spinge la pagina.

Una volta creata la barra laterale, diventa uno strumento versatile per tutti i tipi di applicazioni, inclusi menu e moduli.

Arriviamo ad esso!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout della barra laterale di spinta scorrevole 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 i file

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.

SCARICA

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 della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Per aggiungerlo a una pagina o a un modello, dovrai aggiungere una nuova sezione e scegliere il layout della sezione dalla libreria.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Scegli un layout predefinito".
   
4. Scegli il pacchetto di layout dell'evento e fai clic per utilizzare il layout della pagina iniziale dell'evento.
   

Come creare una barra laterale push scorrevole in Divi

Per creare la barra laterale di spinta scorrevole, avremo bisogno di utilizzare una nuova sezione normale. Ridimensioneremo e posizioneremo la sezione in modo che diventi una barra laterale fissa che si apre quando si fa clic su un pulsante, spingendo (e schiacciando) l'area del contenuto principale sulla destra per fare spazio alla barra laterale.

Costruire la sezione

Innanzitutto, aggiungiamo una nuova sezione regolare alla pagina.

Quindi sposta la sezione nella parte superiore della pagina.

Impostazioni della sezione

Aprire le impostazioni della sezione e aggiornare la posizione da correggere come segue:

• Posizione: fissa
• Indice Z: 9999

Nella scheda Progettazione, aggiorna le dimensioni e la spaziatura come segue:

• Larghezza: 350 px (desktop e tablet), 100% (telefono)
• Altezza: 100%
• Imbottitura: 100px in alto, 0px in basso

Il riempimento serve per fare spazio all'intestazione nella parte superiore della pagina.

Successivamente, nella scheda Avanzate, assegna alla sezione una Classe CSS:

• Classe CSS: et-push-sidebar

Una volta che la classe CSS è a posto, dai alla sezione un colore di sfondo:

• Colore di sfondo: #1a1e36

Per creare una separazione più evidente, torna alla scheda Progettazione e aggiungi un bordo destro.

• Larghezza bordo destro: 2px
• Colore bordo destro: #eeeeee

Questo si occupa della sezione che funge da contenitore principale per la nostra barra laterale. Ora è il momento di iniziare a costruire i due pulsanti che useremo per aprire e chiudere la barra laterale.

Creazione dei pulsanti di commutazione della barra laterale

Ci saranno due pulsanti usati per attivare la barra laterale. Il primo pulsante sarà un'icona "X" che chiuderà la versione mobile della barra laterale dopo che è stata aperta. La "X" sarà costruita utilizzando un modulo blurb. Il secondo è il pulsante di attivazione/disattivazione principale che costruiremo utilizzando un modulo blurb ruotato con testo verticale e posizionato assolutamente adiacente alla barra laterale/sezione.

Andiamo ad esso.

Creazione della riga per i pulsanti

Crea una nuova riga a una colonna all'interno della sezione/barra laterale.

Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Imbottitura: 0px in alto, 0px in basso

Nella scheda Avanzate, aggiorna le opzioni di posizione come segue:

• Posizione: Assoluta
• Indice Z: 1

Creazione dell'icona di chiusura "X"

Per creare l'icona di chiusura "X", aggiungi un modulo blurb alla riga. Potrebbe essere più semplice aggiungere un nuovo modulo utilizzando il modale Livelli perché sarà un po' difficile fare clic sulle cose.

Contenuto

Quindi apri le impostazioni del blurb. Nella scheda del contenuto, elimina il titolo e il contenuto del corpo e aggiungi l'icona X al blurb.

• Usa l'icona: S
• Icona: x (vedi screenshot)

Design

Nella scheda Progettazione, aggiorna quanto segue:

• Colore icona: #eeeeee
• Posizionamento immagine-icona: a sinistra
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 40px
• Larghezza: 50px

Quindi, abbassa leggermente l'icona aggiungendo la seguente proprietà di traduzione di trasformazione:

• Trasforma Traduci X : 100px
• Trasforma Traduci Y: -10px

Avanzate

Nella scheda Avanzate, disabilita il blurb su tablet e desktop in modo che lo vediamo solo sul display del telefono.

• Disabilita su: tablet e desktop

Quindi aggiungi una classe CSS al blurb e assegnagli una posizione fissa in modo che rimanga visibile durante lo scorrimento del contenuto della barra laterale sul display del telefono.

• Classe CSS: et-slide-push-close
• Posizione: fissa
• Posizione: in alto a destra

Questo si occupa del pulsante Chiudi icona "X".

Creazione del pulsante di attivazione/disattivazione della barra laterale principale

Per creare il pulsante di attivazione/disattivazione della barra laterale principale, aggiungi un modulo di contrassegno sotto l'icona a forma di "X" esistente.

Contenuto

Aggiorna il titolo e fai clic per utilizzare l'icona della freccia verso il basso.

• Titolo: Informazioni sull'evento
• Usa l'icona: S
• Icona: freccia giù (vedi screenshot)

Quindi, aggiungi un colore di sfondo al blurb.

• colore di sfondo: #eeeeee

Design

Nella scheda Progettazione, aggiorna quanto segue:

• Colore icona: #1a1e36
• Posizionamento immagine/icona: a sinistra
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 25px
• Carattere del titolo: cavalcavia
• Peso del carattere del titolo: grassetto
• Stile carattere titolo: TT
• Colore del testo del titolo: #1a1e36
• Spaziatura delle lettere del titolo: 2px
• Altezza della riga del titolo: 1.2em
• Imbottitura: 0.6em in alto, 1em a sinistra, 1em a destra
• Angoli arrotondati: 5px sui due angoli inferiori

Per posizionare e ruotare il blurb all'esterno della sezione, usa le opzioni di trasformazione come segue:

• Trasforma Traduci Y : 100px
• Trasforma Ruota Z: -90°
• Trasforma origine: in alto a destra

Avanzate

Nella scheda Avanzate, aggiorna quanto segue:

• Classe CSS: et-slide-push-toggle
• Posizione: Assoluta
• Posizione: al centro a destra

Aggiunta di codice personalizzato con un modulo di codice

Una volta completati i due pulsanti, siamo pronti per aggiungere il codice personalizzato che fornirà la funzionalità di spinta scorrevole di cui abbiamo bisogno per la barra laterale.

Per aggiungere il codice, innanzitutto aggiungi un modulo di codice alla stessa colonna.

Quindi incolla il seguente codice nel modulo di codice.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Creazione della riga del contenuto della barra laterale

La prima riga che abbiamo creato era per i pulsanti e il codice che fanno funzionare la barra laterale. Questa riga successiva sarà per il contenuto della barra laterale.

Per creare la riga del contenuto della barra laterale, aggiungi una nuova riga a una colonna sotto la prima riga nella barra laterale/sezione.

Impostazioni riga

Apri le impostazioni della nuova riga e aggiorna quanto segue:

• Larghezza: 100%
• Altezza: 100%
• Imbottitura: 5% sopra, 5% sotto, 5% sinistra, 5% destra

Nella scheda Avanzate, aggiorna le opzioni di overflow come segue:

• Overflow orizzontale: scorrimento (desktop e tablet), automatico (telefono)
• Overflow verticale: scorrimento (desktop e tablet), automatico (telefono)

Riempire la barra laterale con contenuti/moduli

Ora che la barra laterale è pronta, tutto ciò che devi fare è aggiungere qualsiasi modulo alla seconda riga della barra laterale, se necessario. Per questo esempio, sto semplicemente copiando i moduli dal layout della home page dell'evento e incollandoli nella colonna della riga.

Risultato finale

Dai un'occhiata al risultato finale sulla pagina live.

Aggiunta della barra laterale di spinta scorrevole a un modello di pagina

Se desideri utilizzare questa barra laterale su tutte le tue pagine per impostazione predefinita, dovrai aggiungere la barra laterale/sezione a un modello di pagina utilizzando Divi Theme Builder.

Salva il layout della sezione nella libreria Divi

Per fare ciò, prima salva la sezione utilizzata per creare la barra laterale nella libreria Divi. Puoi farlo facendo clic sui tre punti sulla barra laterale nel modale dei livelli, aggiungendo il nome del layout e salvandolo nella libreria.

Crea un nuovo modello di pagina

Quindi, vai al generatore di temi e crea un nuovo modello e assegna quel modello a tutte le pagine.

Aggiunta della barra laterale scorrevole al modello di pagina

Quindi, fai clic per modificare il modello di pagina.

All'interno dell'editor di layout del modello, aggiungi una nuova sezione a larghezza intera.

Quindi inserisci un modulo di contenuto del post a larghezza intera nella sezione.

Fare clic su Avanti per. creare una nuova sezione sopra la sezione a larghezza intera. Quindi fare clic sulla scheda Aggiungi da libreria e selezionare il layout della sezione Barra laterale Push scorrevole dalla libreria.

Una volta terminato, puoi modificare la barra laterale come preferisci utilizzando l'editor del layout del corpo.

Salva le impostazioni del generatore di temi

Assicurati di salvare le modifiche nel generatore di temi.

Ora tutte le tue pagine avranno la barra laterale.

Pensieri finali

Una barra laterale di spinta scorrevole è un'opzione perfetta per quelli di voi che cercano il meglio di entrambi i mondi: una barra laterale che rimane in prima linea senza togliere (o distrarre) il contenuto principale della pagina. Sentiti libero di usarlo per tutti i tipi di cose come moduli di registrazione, e-mail opt-in, menu e molto altro.

Non vedo l'ora di sentirti nei commenti.

Saluti!