Come costruire popover dinamici (menu mobili) in Divi con Popper.js

Hai mai sentito parlare della biblioteca chiamata Popper.js? Questa libreria ti consente di creare popover su JavaScript. L'uso dei popover è piuttosto comune in questi giorni, soprattutto perché aiuta a visualizzare ulteriori informazioni su un elemento specifico (pulsante, collegamento, ecc.). Il motivo per considerare il popover dinamico è principalmente per assicurarsi che venga visualizzato nel punto giusto rispetto alla posizione del soggetto sullo schermo. In concreto, se il soggetto è nella parte inferiore dello schermo, il popover verrà visualizzato in alto. Se si trova nella parte superiore dello schermo, il popover verrà visualizzato in basso, ecc.

In questo tutorial, sfrutteremo la potenza di Popper.js in Divi per creare popover dinamici (menu mobili) quando si fa clic su un pulsante. Ciò consentirà a chiunque di creare un popover con elementi Divi, per visualizzare qualsiasi contenuto dopo un clic del pulsante. Ci assicureremo anche che il popover sia dinamico, poiché regolerà la sua posizione per preservare la visibilità più ideale mentre l'utente interagisce con la tua pagina.

Ecco un'illustrazione del posizionamento di questi popover ...

Per ottenere ciò, avremo bisogno di CSS e JavaScript personalizzati. Ma possiamo ancora fare affidamento sulle potenti capacità di progettazione di Divi Builder per creare un popover utilizzando qualsiasi elemento Divi.

Iniziamo!

Anteprima del menu mobile

Ecco una rapida occhiata al menu mobile che progetteremo in questo tutorial. Puoi vedere come la posizione del menu mobile cambia dinamicamente mentre l'utente scorre o cambia le dimensioni del browser. Inoltre da non perdere la piccola freccia che è posizionata anche per puntare dinamicamente al suo riferimento (o in questo caso, il pulsante).

Creazione di un popover con Popper.js in Divi

Come abbiamo detto in precedenza, utilizzeremo popper.js in Divi per creare un popover posizionato dinamicamente, che viene rivelato quando si fa clic sull'oggetto del popover (pulsante). Con Divi, possiamo creare facilmente un menu mobile e un pulsante. Successivamente aggiungeremo il codice necessario per far funzionare entrambi in armonia.

La sezione

Quindi inizieremo aggiungendo un ID cliente alla sezione normale che è pronta per impostazione predefinita. Apri le impostazioni della sezione e aggiungi il seguente ID:

• ID CSS: sezione popper

Crea Popper Popover con Divi Row

Successivamente, aggiungeremo una riga di una colonna alla sezione. Questa riga diventerà il nostro elemento popover Popper che si apre quando si fa clic su un pulsante.

Apri le impostazioni della riga e aggiorna lo stile come segue:

• Colore di sfondo: # 333333

• Larghezza grondaia: 2
• Larghezza: 100%
• Larghezza massima: 500 px
• Padding: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra
• Angoli arrotondati: 10px

Poiché questa riga diventerà il nostro elemento popover popper, dobbiamo aggiungere un ID CSS che funga da selettore nel nostro codice. Dobbiamo anche assicurarci che la visibilità rimanga in overflow (è nascosta dagli angoli arrotondati).

Vai alla scheda Avanzate e aggiorna quanto segue:

• ID CSS: popper-popup
• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungiamo contenuto alla riga popover

Possiamo aggiungere qualsiasi modulo (i) che vogliamo alla nostra riga per riempire il menu mobile con qualsiasi contenuto desideriamo. Per questo esempio, aggiungeremo alcuni pulsanti alla riga che funge da menu personalizzato che appare all'interno del popover.

Per iniziare, aggiungi un modulo pulsante alla colonna della riga.

Ora aggiungiamo un po 'di stile al nostro pulsante. Aggiorneremo le impostazioni dei pulsanti come segue:

• Allineamento pulsanti: centro
• Usa stili personalizzati per il pulsante: SÌ
• Larghezza bordo pulsante: 1 px
• Colore bordo pulsante: # 555555
• Raggio del bordo del pulsante: 10 px
• Icona del pulsante: vedi screenshot
• Margine: 20px in alto, 20px in basso, 20px a sinistra, 20px a destra
• Imbottitura: 0.5em in alto, 0.5em in basso, 2em a sinistra, 2em a destra

Importante: stiamo usando il margine sul modulo per creare la spaziatura invece di usare gli spazi tra le righe perché aggiungeremo una freccia (usando un divisore) che deve essere posizionata sul bordo della riga (con posizione assoluta). Qualsiasi riempimento di riga o colonna spingerà la freccia lontano dal bordo.

Ora, dobbiamo aggiungere il seguente snippet CSS personalizzato all'elemento principale per fare in modo che il pulsante si estenda per l'intera larghezza della colonna / riga:

display: block !important

Ora puoi duplicare il pulsante due (o più) volte per aggiungere altri pulsanti al nostro menu popover.

Creazione della freccia popover

Popper.js supporta un posizionamento della freccia insieme al popover. Per costruire la freccia, aggiungi un nuovo divisore sotto l'ultimo pulsante nella nostra riga.

Nelle impostazioni del divisore, selezionare per non mostrare il divisore. Quindi, nella scheda Avanzate, aggiungi il seguente ID CSS:

• ID CSS: popper-freccia

In seguito utilizzeremo un CSS esterno personalizzato per modellare e posizionare la freccia.

Creazione del pulsante popover (o riferimento)

I due elementi chiave di un popper popover includono l'elemento popover (o popper) e il soggetto a cui si attacca il popover. Puoi utilizzare qualsiasi elemento Divi come riferimento che genera il popover, ma per questo esempio useremo un pulsante.

Creazione del soggetto per Popper: pulsante

Prima di creare il nostro pulsante, dobbiamo aggiungere una nuova riga di una colonna sotto la nostra riga popover.

Quindi aggiungi un nuovo modulo pulsanti alla riga.

Aggiorna le impostazioni dei pulsanti con alcuni stili di base come segue:

• Colore testo pulsante: #ffffff
• Colore sfondo pulsante: # a043e8
• Larghezza bordo pulsante: 0 px
• Raggio del bordo del pulsante: 10 px

Successivamente, aggiungi l'ID CSS necessario che ci consentirà di scegliere come target e utilizzare il pulsante come riferimento per il popover in seguito:

• ID CSS: pulsante popper

Aggiungiamo il codice

Ora che il nostro popover e il pulsante sono completi, siamo pronti per aggiungere il codice per realizzare la magia.

Per fare ciò, aggiungi un modulo di codice sotto il modulo del pulsante di riferimento nella seconda riga.

È importante che il codice si trovi in ​​fondo alla pagina perché funzioni.

Innanzitutto, aggiungeremo il CSS.

Nella casella del contenuto del codice, aggiungi i tag di stile necessari per racchiudere CSS in HTML. Quindi copia e incolla il seguente CSS tra i tag di stile:

/*hide and show popup styling*/ #popper-popup {display: none;}#popper-popup[data-popper-reference-hidden] {visibility: hidden;pointer-events: none;}#popper-popup[show-popper] {display: block;z-index: 9999;} /*keep popper visible in the Divi Builder for editing*/ #et-fb-app #popper-popup {display: block;}   /*build the arrow targeting the divider with class 'popper-arrow'*/ #popper-arrow,#popper-arrow::before {position: absolute;width: 8px;height: 8px;background: #333333;}#popper-arrow {visibility: hidden;}#popper-arrow::before {visibility: visible;content: "";transform: rotate(45deg);} /*position arrow using popper.js data-popper-placement attribute*/ #popper-popup[data-popper-placement^="top"] #popper-arrow {bottom: -4px;} #popper-popup[data-popper-placement^="bottom"] #popper-arrow {top: -4px;} #popper-popup[data-popper-placement^="left"] #popper-arrow {right: -4px;} #popper-popup[data-popper-placement^="right"] #popper-arrow {left: -4px;} /*hide arrow when reference outside of viewport*/#popper-popup[data-popper-reference-hidden] #popper-arrow::before {visibility: hidden;}

Successivamente, dobbiamo accedere alla libreria popper.js aggiungendo uno script che importa Popper.js dal loro CDN (https://unpkg.com/@popperjs/core@2). Sotto il tag di stile finale, incolla il seguente script nella casella del codice.

Utilizza il seguente src all'interno di un tag script per importare la libreria:

src="https://unpkg.com/@popperjs/core@2"

Dovrebbe sembrare come questo:

Ora importeremo Popper.js prima di aggiungere il codice che lo utilizzerà. Quindi, dopo lo script che punta a Popper.js, aggiungi i tag di script necessari per racchiudere il Javascript che dobbiamo aggiungere. Quindi incolla il seguente Javascript tra i tag dello script.

const popperButton = document.querySelector("#popper-button");const popperPopup = document.querySelector("#popper-popup");const popperSection = document.querySelector("#popper-section");const popperArrow = document.querySelector("#popper-arrow"); let popperInstance = null; //create popper instancefunction createInstance() {popperInstance = Popper.createPopper(popperButton, popperPopup, {placement: "auto",//preferred placement of poppermodifiers: [{name: "offset",//offsets popper from the reference/buttonoptions: {offset: [0, 8],},},{name: "flip",//flips popper with allowed placementsoptions: {allowedAutoPlacements: ["right", "left", "top", "bottom"],rootBoundary: "viewport",},},],});} //destroy popper instancefunction destroyInstance() { if (popperInstance) {popperInstance.destroy();popperInstance = null;}} //show and create popperfunction showPopper() {popperPopup.setAttribute("show-popper", "");popperArrow.setAttribute("data-popper-arrow", "");createInstance();} //hide and destroy popper instancefunction hidePopper() {popperPopup.removeAttribute("show-popper");popperArrow.removeAttribute("data-popper-arrow");destroyInstance();} //toggle show-popper attribute on popper to hide or show it with CSS function togglePopper() {if (popperPopup.hasAttribute("show-popper")) {hidePopper();} else {showPopper();}}//execute togglePopper function when clicking the popper reference/buttonpopperButton.addEventListener("click", function (e) {e.preventDefault();togglePopper();});

Questo è tutto! Abbiamo finito. Controlliamo ora il risultato finale.

Anteprima del risultato finale

Per visualizzare il risultato di questo tutorial, dobbiamo creare uno spazio di scorrimento per testare la magia di posizionamento del popper popover.

Per fare ciò, apri le impostazioni della sezione e aggiungi un margine come segue:

• Margine: 80vh superiore, 80vh inferiore

Ecco come appare la funzionalità:

Si noti come la posizione del popover (e della freccia) cambia dinamicamente mentre l'utente scorre o modifica le dimensioni del browser.

Riassumendo

Se vuoi creare un popover usando popper.js in Divi, dovrai fare affidamento su un bel po 'di Javascript, ma ne vale la pena. Il posizionamento dinamico del popover è un ottimo componente dell'interfaccia utente che gioverebbe a qualsiasi sito web. Cosa ne pensi di questo? Hai già provato? Facci sapere.