L'utilizzo delle nuove opzioni di dimensionamento trascinabili di Divi non solo ci aiuta a creare siti Web altamente reattivi, ma ci aiuta anche a creare interazioni uniche. Usando queste opzioni puoi personalizzarne qualsiasi sito web crei e personalizzi la struttura delle tue pagine in base alle tendenze di design attuali.
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 precedentemente aperta verrà automaticamente chiusa. Inizieremo spiegando l'approccio generale e continueremo ricreando da zero l'esempio che puoi vedere di seguito. Ci auguriamo che questo tutorial ti incoraggi a creare i tuoi progetti di sezioni al passaggio del mouse!
Andiamo!
Panoramica
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato.
Fase di progettazione
Prima di immergerci nel tutorial, esamineremo la tecnica utilizzata per creare sezioni di rollover. È possibile applicare questa tecnica a qualsiasi tipo di sito web costruisci, con qualsiasi stile.
1. Aggiungi la prima sezione alla tua pagina
Supponi di iniziare un nuovo design su una pagina nuova di zecca. La prima cosa da fare è aggiungere una nuova sezione regolare.
2. Aggiungi una nuova riga includendo il titolo di una sezione
Quindi puoi continuare aggiungendo una nuova riga con un modulo di testo che include il titolo della sezione. Potresti anche aggiungere un modulo di divisione e qualcosa che indichi che la linea si espande al passaggio del mouse o al tocco. È importante separare il titolo della sezione dal resto del file contenuto della sezione. Assicurati quindi di lasciare abbastanza spazio tra il titolo della sezione e tutto ciò che segue.
3. Regola il resto contenuto sezione
Gli elementi di design che seguono i titoli delle sezioni dipendono interamente da te. Puoi creare una sezione lunga o corta come desideri e utilizzare qualsiasi stile di design.
4. Modifica le altezze predefinite e passa con il mouse sopra la sezione
Dopo aver perfezionato la sezione e tutti i suoi elementi di design, è il momento di creare l'effetto rollover. L'altezza predefinita della sezione è progettata per corrispondere solo al titolo della sezione. Al passaggio del mouse, la sezione tornerà alla sua dimensione iniziale.
5. Nascondi lo sfioro verticale
Un'altra parte importante di questa tecnica nasconde il trabocco verticale. Dopo aver impostato un'altezza massima predefinita per la sezione che è inferiore all'altezza della sezione iniziale, viene creato un overflow. Per assicurarti che l'overflow non venga visualizzato, devi 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 il tuo Visitatori apprezzerà.
Inizio del design!
Aggiungi una nuova sezione
Colore di sfondo predefinito
Ora che abbiamo seguito l'approccio descritto in questo post, è il momento di iniziare a mettere in pratica le cose! Aggiungi una prima sezione normale a una nuova pagina della tua sito web WordPress e apri la sezione Impostazioni. Cambia il colore di sfondo predefinito della tua sezione con un colore a tua scelta.
- Colore di sfondo: # 000000
Sorvola il colore di sfondo
Cambia questo passaggio del colore di sfondo.
- Colore di sfondo: #ffffff
Aggiungi riga 1
Struttura a colonne
Continua ad aggiungere la prima riga alla sezione utilizzando la seguente struttura di colonne:
Aggiungi un modulo di testo
Aggiungi contenuto H2
Aggiungi un modulo di testo alla tua prossima nuova riga. Aggiungi una copia H2 con il simbolo "▼" mentre la sezione si sviluppa.
Impostazioni di testo H2
Vai alla scheda Module Design e modifica le impostazioni del testo H2.
- Intestazione carattere 2: Trebuchet
- Titolo 2 Peso carattere: Ultra grassetto
- Titolo 2 Allineamento del testo: a sinistra
- Titolo 2 Colore del testo: #ff0f3b
- Titolo 2 Dimensione testo: 100 pixel (desktop), 80 pixel (tablet), 60 pixel (telefono)
- Titolo 2 Interlinea: -5px
Aggiungi un modulo di divisione
visibilità
Il secondo e ultimo modulo di cui abbiamo bisogno in questa riga è un modulo di divisione. Assicurati di abilitare l'opzione "Mostra separatore" nelle impostazioni di visibilità.
- Mostra divisore: sì
Colore
Quindi vai alla scheda Design e cambia il colore del separatore.
- Colore: #ff0f3b
dimensionamento
Modificare anche i parametri di dimensionamento del modulo.
- Peso del divisore: 2px
- Larghezza: 14%
Aggiungi la linea 2
Struttura a colonne
Prossima riga! Qui è dove dovrai posizionare tutto contenuto che desideri visualizzare passando il mouse (desktop) o facendo clic su (tablet e dispositivo mobile). Utilizziamo la seguente struttura di colonne, ma tieni presente che puoi aggiungere tutte le righe e i moduli che desideri e personalizzarli in base alle tue esigenze:
Aggiungi un modulo di testo alla colonna 1
Aggiungi contenuto
Inserisci un modulo di testo nella prima colonna con il contenuto che preferisci.
Impostazioni del testo
Vai alla scheda Design del modulo di testo e cambia l'orientamento del testo.
- Orientamento del testo: giustificazione
Aggiungi un modulo di testo alla colonna 2
Aggiungi contenuto
Aggiungi anche un modulo di testo alla seconda colonna con il contenuto che preferisci.
Impostazioni del testo
Di nuovo, cambia l'orientamento del testo nelle impostazioni del testo del modulo.
- Orientamento del testo: giustificazione
Aggiungi i parametri di dimensionamento alla sezione
Dimensionamento predefinito
Una volta completata la sezione, è il momento di creare l'effetto hover. Apri le impostazioni della sezione e modifica l'altezza massima per le diverse dimensioni dello schermo:
- Altezza massima: 300px (desktop), 280px (tablet), 260px (telefono)
in bilico
Attiva anche l'opzione hover sull'altezza massima e aggiungi un valore sufficientemente grande da coprire tutti gli elementi, indipendentemente dalle dimensioni dello schermo. Questo valore garantisce che tutti gli elementi vengano visualizzati senza superare la dimensione iniziale del contenitore della sezione.
- Altezza massima: 5000px
Straripamento verticale
Quindi vai alla scheda Avanzate della sezione e modifica l'overflow verticale. Ciò nasconderà tutto il contenuto che va oltre il contenitore della sezione.
- Straripamento verticale: nascosto
transizioni
Per creare una transizione graduale, modifichiamo anche le impostazioni di transizione nella scheda Avanzate.
- Durata della transizione: 800ms
- Tempo di transizione: 500 ms
Clona l'intera sezione tutte le volte che vuoi
Dopo aver creato la prima sezione del cavalcavia, puoi clonarla tutte le volte che vuoi.
Cambia i titoli delle sezioni
Naturalmente, vorrai cambiare i titoli delle sezioni duplicate.
Cambia i colori del testo H2
Per creare variazioni nel design, cambieremo anche i colori del testo dei moduli evidenziati nella schermata di stampa sottostante.
- Titolo 2 Colore del testo: #c4c4c4
Cambia i colori del separatore
Con i colori di separazione che accompagnano i moduli di testo.
- Colore: #c4c4c4
Panoramica
Ora che tutti i passaggi sono stati completati, diamo un'ultima occhiata al risultato.
Considerazioni finali
In questo articolo, 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 crei. Abbiamo iniziato spiegando l'approccio e continuato ricreando l'esempio di progettazione da zero. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto.
