Potrebbe capitarti di voler creare un sito web con un menu bottom, cioĆØ nella parte bassa dello schermo, e magari che con lo scroll si vada a posizionare in alto nella consueta posizione top del menu.

Mi ĆØ capitato di pensare a questa soluzione per un sito web che volevo fosse diverso dai soliti standard, anche se di norma la soluzione adottata da tutti, cioĆØ con un menu in alto, ormai ĆØ entrata nell’uso consueto e quindi ĆØ familiare e User firendly.

Potresti perĆ² aver bisogno di creare uno sticky menu in basso, cioĆØ un menĆ¹ che stia appiccicato al bottom dello schermo, o un menu che mentre scrolli lo schermo si vada a posizionate in alto nella pagina.

Non avendo trovato alcun tutorial in italiano per creare un menu bottom che scorra in alto nella pagina, ho deciso di tradurre il tutorial in inglese sul sito ufficiale di Elegant themes.

Un menu bottom che salga allo scroll fino al top della pagina

Ecco in un video l’effetto finale che si otterrĆ :

Cosa ti occorre per cominciare

Per prima cosa ti occorre il tema DIVI, e devi caricarlo ed installarlo nel tuo sito in WordPress.

Successivamente devi creare una nuova pagina sul tuo sito web, che ospiterĆ  il menĆ¹ in basso, ed editarla tramite il DIVI Builder:

Divi tutorial creare un menu bottom

Quando hai attivato il Divi builder nella pagina, selezione “Build from scratch” per iniziare a creare la pagina da zero.

Creare un bottom sticky menu nella pagina

SeguirĆ² in questo tutorial l’esempio che hai visto nel video, creando una sezione above the fold, cioĆØ che riempia tutto lo schermo, poi una sezione che contiene lo sticky menu che rimanga appiccicato al bottom (parte bassa) della pagina, e una sezione Below the fold, sotto al menĆ¹ per far vedere l’effetto dello scroll mediante il quale il menĆ¹ sale e si va ad attaccare al top (parte alta) dello schermo.

Questo ĆØ solo per far vedere bene come funziona lo scroll come nell’esempio, ma se hai giĆ  creato la tua pagina puoi saltare questi passaggi e andare direttamente alla parte del tutorial dove ĆØ spiegato come creare il menĆ¹ bottom e quali impostazioni dargli.

Creare la sezione Above the fold

Per creare la sezione a tutto schermo inserisci una nuova sezione (in azzurro) e una unica riga (in verde), senza aggiungere anche un modulo (nero) con Divi builder.

Per far sƬ che la sezione (azzurra) sia a tutto schermo, andiamo ad editarla inserendo le seguenti opzioni:

  • Background Color: #e9f9ff
  • Background Image: [aggiungi tu una immagine]

e nella tab “design” inserisci nella parte dedicata al Dimensionamento e alla Spaziatura:

  • Min Height: 100vh (desktop), auto (tablet and phone)
  • Padding: 20vh top, 20vh bottom
Tutorial DIVI sticky bottom menu

Per identificare meglio la sezione Above the fold, puoi anche, come citato nel tutorial in inglese, inserire un testo o un titolo all’interno di questa sezione, scrivendo ad esempio “Above the fold” in grande.

Tutorial DIVI sticky bottom menu

Creare la sezione Below the fold

Per apprezzare al meglio il risultato come nell’esempio abbiamo bisogno di creare una sezione “below the fold”, cioĆØ che appaia solo quando scrolliamo in basso la pagina.

Puoi semplicemente duplicare la sezione Above the fold e cambiare lo sfondo e il testo in grande per differenziarla dalla sezione above the fold.

Creare lo sticky menu bottom

Per creare il menu bottom appiccicato alla parte bassa dello schermo abbiamo bisogno di creare una terza sezione (azzurra), tra la sezione Above the fold e la sezione below the fold. Questa sezione conterrĆ  una sola riga (verde) e per differenziarla dal resto puoi impostarle uno sfondo blu ad esempio.

Creare uno sticky bottom menu con DIVI

Imposta la sezione che conterrĆ  il menĆ¹ con un padding pari a zero sia in alto che in basso, cosƬ sarĆ  piĆ¹ bassa:

bottom sticky menu divi tutorial

C’ĆØ bisogno poi, sempre nella sezione, di impostare un overflow sempre visibile, questo per fare in modo che in presenza di menĆ¹ a tendina, essi siano sempre visibili in primo piano.

Quindi nella tab “Avanzate” devi inserire:

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible
tutorial divi sticky bottom menu to top

Per impostazione predefinita, su mobile il menu a discesa si apre sotto l’icona del menu. Se noi lasciassimo le cose come sono, con una barra di menu in basso, parte del menu a discesa verrebbe nascosto dalla stessa barra.

Quindi per migliorare l’esperienza utente meglio far rimanere in alto la barra di navigazione.
Per fare questo dobbiamo assegnare una posizione assoluta alla barra su Smartphone e Tablet, mentre su Desktop la possiamo lasciare relativa:

  • Position: Relative (desktop), Absolute (tablet and phone)
sticky navigation bar tutorial italiano divi

A questo punto possiamo impostare la barra di navigazione in modo che sia sticky, cioĆØ appiccicata allo schermo o in basso (su desktop) o in alto (per smartphone e tablet).

Per fare questo nella sezione “Avanzate” -> “Effetti di scroll” impostiamo:

  • Sticky Position: Stick to Top and Bottom (desktop), Stick to Top (tablet and phone)

Con questa impostazione per desktop (Stick to Top and Bottom) faremo in modo che allo scrollo il menĆ¹ passi dall’essere appiccicato alla parte bassa dello schermo fino ad appiccicarsi alla parte alta dello schermo.

tutorial creare sticky menu bottom divi

Fatto questo abbiamo completato le impostazioni della sezione in modo che sia in basso su Desktop e sticky, mentre sarĆ  in alto per dispositivi mobili, e appiccicata alla parte alta dello schermo (sticky).

Creare il menu

Possiamo ora procedere a creare il nostro menĆ¹ all’interno della sezione creata. All’interno della singola riga (verde), possiamo inserire il modulo di DIVI “menu”:

Inserire un menu con Divi builder

Potremo cosƬ inserire un menu naturalmente giĆ  creato con WordPress dalla sezione “Aspetto > menu”, aggiungere un logo e formattarlo a nostro piacimento.

Fatto questo, abbiamo finito, ed il risultato sarĆ  come nell’esempio, con lo scroll presente come nel video inserito qui all’inizio dell’articolo.

Leggi anche

Vota l\'articolo post
Se ti piacciono i miei contenuti
Iscriviti alla Newsletter per ricevere gli aggiornamenti

Ti trovi qui: