Come creare sezioni al passaggio del mouse con le nuove impostazioni di ridimensionamento e overflow di Divi
Pubblicato: 2019-05-20L'utilizzo delle nuove opzioni di ridimensionamento trascinabili di Divi non solo ti aiuta a creare siti Web altamente reattivi, ma può anche davvero aiutare a creare interazioni uniche. Giocando con queste opzioni, puoi personalizzare qualsiasi sito web che stai creando e personalizzare le strutture delle tue pagine per soddisfare le attuali tendenze di design.
In questo tutorial, in particolare, ti mostreremo come creare sezioni al passaggio del mouse con Divi. Creeremo una nuova pagina e consentiremo la visualizzazione di tutti i titoli delle sezioni, ma ogni sezione si aprirà solo al passaggio del mouse (desktop) o al clic (mobile). Non appena apri un'altra sezione, quella che hai aperto in precedenza si chiuderà automaticamente. Inizieremo spiegando l'approccio generale e continueremo ricreando da zero l'esempio che puoi vedere di seguito. Speriamo che questo tutorial ti incoraggi a creare anche i tuoi progetti di sezioni al passaggio del mouse!
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout delle sezioni al passaggio del mouse
Per mettere le mani sul layout delle sezioni al passaggio del mouse gratuito, dovrai 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 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.
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!
Approccio
Prima di immergerci nel tutorial vero e proprio, esamineremo la tecnica utilizzata per creare sezioni al passaggio del mouse. Puoi applicare questa tecnica a qualsiasi tipo di sito web che stai costruendo, con qualsiasi tipo di stile di design.
1. Aggiungi la prima sezione alla tua pagina
Supponiamo che tu stia iniziando un nuovo design su una pagina completamente nuova. La prima cosa che devi fare è aggiungere una nuova sezione regolare.
2. Aggiungi una nuova riga che includa un titolo di sezione
Quindi, puoi continuare aggiungendo una nuova riga con un modulo di testo che include il titolo della sezione. Puoi anche aggiungere un modulo divisore e qualcosa che indichi che la riga si espande al passaggio del mouse o al tocco (vedi esempio nell'anteprima di questo post). È importante mantenere il titolo della sezione separato dal resto del contenuto della sezione, quindi assicurati di lasciare abbastanza spazio bianco tra il titolo della sezione e ciò che viene dopo.
3. Perfeziona il resto del contenuto della sezione (aggiungi tutte le righe e i moduli che desideri)
Gli elementi di design che seguono i titoli delle sezioni dipendono interamente da te. Puoi rendere la sezione lunga o corta quanto vuoi e utilizzare qualsiasi tipo di stile di design.
4. Modificare l'altezza massima predefinita e passare il mouse sulla sezione
Una volta che hai finito di mettere a punto la sezione e tutti gli elementi di design in essa contenuti, è il momento di creare l'effetto hover. L'altezza predefinita della tua sezione è pensata per adattarsi solo al titolo della sezione. Al passaggio del mouse, la sezione riprenderà la sua dimensione iniziale.
5. Nascondi l'overflow verticale
Un'altra parte importante di questa tecnica è nascondere l'overflow verticale. Dopo aver impostato un'altezza massima predefinita per la sezione che è inferiore all'altezza iniziale della sezione, verrà creato un overflow. Per assicurarti che l'overflow non venga visualizzato, dovrai assicurarti che sia nascosto nelle impostazioni di visibilità della sezione.
5. Ripeti i passaggi per tutte le sezioni della pagina
Ripeti gli stessi passaggi per tutte le sezioni della tua pagina per creare un'esperienza utente ovvia che i tuoi visitatori apprezzeranno.
Iscriviti al nostro canale Youtube
Iniziamo a ricreare!
Aggiungi nuova sezione
Colore di sfondo predefinito
Ora che abbiamo affrontato l'approccio di questo post, è ora di iniziare a mettere in atto le cose! Aggiungi una prima sezione normale a una nuova pagina sul tuo sito Web WordPress e apri le impostazioni della sezione. Cambia il colore di sfondo predefinito della tua sezione in un colore a tua scelta.
- Colore di sfondo: #000000
Colore di sfondo al passaggio del mouse
Cambia questo colore di sfondo al passaggio del mouse.
- Colore di sfondo: #ffffff
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo la prima riga alla tua sezione utilizzando la seguente struttura a colonne:
Modulo Aggiungi testo
Aggiungi contenuto H2
Aggiungi un modulo di testo alla tua nuova riga successiva. Aggiungi una copia H2 insieme al simbolo '▼' che indica che qualcosa verrà dopo.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2.
- Intestazione 2: Carattere: Trabucco
- Peso carattere titolo 2: Ultra grassetto
- Intestazione 2 Allineamento del testo: a sinistra
- Colore testo titolo 2: #ff0f3b
- Titolo 2: Dimensione testo: 100 px (desktop), 80 px (tablet), 60 px (telefono)
- Intestazione 2 Spaziatura lettere: -5px
Aggiungi modulo divisore
Visibilità
Il secondo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo divisore. Assicurati di abilitare l'opzione "Mostra divisore" nelle impostazioni di visibilità.
- Mostra divisore: Sì
Colore
Quindi, passa alla scheda Design e cambia il colore del divisore.
- Colore: #ff0f3b
Dimensionamento
Modifica anche le impostazioni di dimensionamento del modulo.
- Peso del divisore: 2px
- Larghezza: 14%
Aggiungi riga #2
Struttura della colonna
Alla prossima riga! È qui che dovrai posizionare tutto il contenuto che desideri visualizzare dopo aver passato il mouse (desktop) o aver fatto clic (tablet e mobile). Stiamo utilizzando la seguente struttura a colonne, ma tieni presente che puoi aggiungere tutte le righe e i moduli che desideri e adattarli alle tue esigenze:
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
Posiziona un modulo di testo nella prima colonna con un contenuto a tua scelta.
Impostazioni testo
Vai alla scheda Design del Modulo Testo e cambia l'orientamento del testo.
- Orientamento del testo: giustifica
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto
Aggiungi un modulo di testo anche alla seconda colonna con alcuni contenuti a tua scelta.
Impostazioni testo
Di nuovo, cambia l'orientamento del testo nelle impostazioni del testo del modulo.
- Orientamento del testo: giustifica
Aggiungi impostazioni di dimensionamento alla sezione
Dimensionamento predefinito
Una volta completata la sezione, è il momento di attivare l'effetto hover. Apri le impostazioni della sezione e modifica l'altezza massima tra diverse dimensioni dello schermo:
- Altezza massima: 300 px (desktop), 280 px (tablet), 260 px (telefono)
Dimensionamento al passaggio del mouse
Abilita anche l'opzione al passaggio del mouse sull'altezza massima e aggiungi un valore sufficientemente alto da coprire tutti gli elementi su diverse dimensioni dello schermo. Questo valore assicura che tutti i tuoi elementi vengano visualizzati senza superare la dimensione iniziale del contenitore della sezione.
- Altezza massima: 5000 px
Trabocco verticale
Quindi, vai alla scheda Avanzate della sezione e modifica l'overflow verticale. Questo nasconderà tutto il contenuto che supera il contenitore della sezione.
- Overflow verticale: nascosto
transizioni
Per creare una transizione graduale, stiamo anche modificando le impostazioni delle transizioni nella scheda Avanzate.
- Durata della transizione: 800 ms
- Ritardo di transizione: 500 ms
Clona l'intera sezione tutte le volte che vuoi
Dopo aver creato la prima sezione al passaggio del mouse, puoi clonarla tutte le volte che vuoi.
Cambia i titoli delle sezioni
Ovviamente, ti consigliamo di modificare i titoli delle sezioni dei duplicati.
Cambia i colori del testo H2
Per creare qualche variazione nel design, cambieremo anche i colori del testo dei moduli evidenziati nella schermata di stampa sottostante.
- Colore testo titolo 2: #c4c4c4
Cambia i colori dei divisori
Insieme ai colori divisori che accompagnano i moduli di testo.
- Colore: #c4c4c4
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come utilizzare in modo creativo le nuove opzioni di ridimensionamento trascinabili di Divi per creare interazioni uniche, utilizzando le sezioni al passaggio del mouse, su qualsiasi sito Web che stai creando. Abbiamo iniziato spiegando l'approccio e continuato ricreando l'esempio di progettazione da zero. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.