Come massimizzare le finestre mobili di Divi utilizzando la copia ruotata
Pubblicato: 2020-06-06Quando progetti un sito web, devi fare una scelta importante all'inizio: "Quale dispositivo devo progettare per primo?" Spesso la risposta è desktop. Ma solo perché progetti per desktop prima, non significa che il tuo design mobile non possa essere così completo. Utilizzando la copia ruotata, ad esempio, puoi massimizzare i viewport mobili di Divi e inserire più contenuti all'interno dei viewport mobili senza sovraccaricare i tuoi visitatori o il tuo design. In questo tutorial, ti mostreremo esattamente come farlo all'interno di Divi. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Scarica GRATUITAMENTE il layout di massimizzazione delle finestre mobili
Per mettere le mani sul layout delle finestre mobili massimizzante 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!
Iniziamo a ricreare!
Aggiungi nuova sezione
Spaziatura
Inizia aggiungendo una nuova sezione alla pagina su cui stai lavorando. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 50% (desktop), 100% (tablet e telefono)
- Allineamento riga: a sinistra
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Elemento principale CSS
Per assicurarci che tutte le colonne rimangano una accanto all'altra, aggiungeremo anche una singola riga di codice CSS all'elemento principale della riga.
display: flex;
Impostazioni colonna 1
Animazione
Quindi, apriremo le impostazioni della colonna 1 e aggiungeremo la seguente animazione:
- Stile di animazione: dissolvenza
Elemento principale CSS
Manterremo la dimensione della colonna su schermi di dimensioni più piccole aggiungendo la seguente riga di codice CSS all'elemento principale della colonna:
width: 40% !important;
Impostazioni colonna 2
Animazione
Successivamente, apriremo le impostazioni della colonna 2 e applicheremo la seguente animazione:
- Stile di animazione: dissolvenza
- Ritardo animazione: 200 ms
Elemento principale CSS
Manteniamo le dimensioni della colonna su schermi di dimensioni inferiori aggiungendo la seguente riga di codice CSS:
width: 60% !important;
Aggiungi modulo immagine alla colonna 2
Carica immagine
È ora di aggiungere moduli. Aggiungi un modulo immagine alla colonna 2 e carica un'immagine verticale a tua scelta.
Dimensionamento
Passa alla scheda di progettazione del modulo e forza l'intera larghezza sul modulo.
- Forza intera larghezza: Sì
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto H2
Nella colonna 1, il primo modulo di cui abbiamo bisogno è un modulo di testo con contenuto H2.
Impostazioni testo H2
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H2 come segue:
- Intestazione 2 Carattere: Montserrat
- Intestazione 2 Peso del carattere: Leggero
- Allineamento del testo titolo 2: al centro (solo tablet e telefono)
- Colore testo titolo 2: #000000
- Titolo 2: Dimensione testo: 3vw (desktop), 50 px (tablet), 40 px (telefono)
- Intestazione 2 Spaziatura lettere: -3px
Dimensionamento
Successivamente, modificheremo la larghezza nelle impostazioni di dimensionamento.
- Larghezza: 89% (desktop), 150% (tablet e telefono)
Trasforma Ruota
Per ruotare il nostro modulo su schermi di dimensioni più piccole, utilizzeremo le impostazioni di rotazione della trasformazione.
- Sinistra: 270 gradi (solo tablet e telefono)
Posizione
Stiamo anche riposizionando il modulo in modo diverso su schermi di dimensioni diverse.
- Posizione: Assoluta
- Posizione: in basso al centro (desktop), al centro (tablet e telefono)
- Offset verticale: 50 px
Aggiungi modulo divisore alla colonna 1
Visibilità
Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 1 è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.
- Mostra divisore: Sì
Linea
Passa alla scheda di progettazione del modulo e cambia il colore della linea.
- Colore linea: #000000
Dimensionamento
Modifica anche le impostazioni di dimensionamento.
- Larghezza: 50% (desktop), 30% (tablet e telefono)
Posizione
E completa le impostazioni del modulo riposizionando il modulo di conseguenza:
- Posizione: Assoluta
- Posizione: Centro Destra
Aggiungi riga #2
Struttura della colonna
Alla riga successiva, usa la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica le impostazioni di dimensionamento come segue:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Equalizza le altezze delle colonne: Sì
- Larghezza: 100%
- Larghezza massima: 50% (desktop), 100% (tablet e telefono)
- Allineamento riga: a destra
Spaziatura
Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Elemento principale CSS
Per assicurarci che entrambe le colonne rimangano una accanto all'altra su schermi di dimensioni inferiori, aggiungeremo una singola riga di codice CSS all'elemento principale della riga.
display: flex;
Impostazioni colonna 1
Sfondo sfumato
Successivamente, apriremo le impostazioni della colonna 1 e applicheremo uno sfondo sfumato.
- Colore 1: #1a9970
- Colore 2: #000000
- Tipo di gradiente: lineare
- Direzione gradiente: 153 gradi
Animazione
Stiamo utilizzando un'animazione ritardata anche su questa colonna.
- Stile di animazione: dissolvenza
- Ritardo animazione: 400 ms
Elemento principale CSS
Quindi, ci assicureremo di mantenere le dimensioni della colonna su schermi di dimensioni più piccole aggiungendo la seguente riga di codice CSS all'elemento principale della colonna:
width: 25% !important;
Visibilità
Ultimo ma non meno importante, nasconderemo gli overflow della colonna per assicurarci che nulla superi il contenitore.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Impostazioni colonna 2
Colore di sfondo
Vai alle impostazioni della colonna 2. Usa il seguente colore di sfondo per questo:
- Colore di sfondo: #f4f4f4
Animazione
Applica anche un'animazione ritardata.
- Stile di animazione: dissolvenza
- Ritardo animazione: 600 ms
Elemento principale CSS
E completa le impostazioni della colonna aggiungendo una singola riga di codice CSS all'elemento principale della colonna. Ciò assicurerà che la colonna mantenga le sue dimensioni su schermi di dimensioni più piccole.
width: 75% !important;
Aggiungi modulo di testo alla colonna 2
Aggiungi contenuto
È ora di aggiungere moduli. Aggiungi un modulo di testo alla colonna 2 con un contenuto descrittivo a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Dimensioni del testo: 15 px (desktop), 14 px (tablet), 13 px (telefono)
- Altezza riga di testo: 2,4 em
Dimensionamento
Quindi, modificheremo le impostazioni di dimensionamento.
- Larghezza: 80%
- Allineamento del modulo: Centro
Spaziatura
Completeremo le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.
- Imbottitura superiore: 15%
- Imbottitura inferiore: 15%
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 2 è un modulo pulsante. Aggiungi una copia a tua scelta.
Allineamento
Passa alla scheda di progettazione del modulo e modifica l'allineamento del pulsante.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Modella il pulsante successivo.
- Usa stili personalizzati per pulsante: Sì
- Colore del testo del pulsante: #000000
- Colore di sfondo del pulsante: #ffffff
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Montserrat
- Mostra icona pulsante: Sì
- Posizionamento dell'icona del pulsante: a sinistra
- Mostra solo l'icona al passaggio del mouse per il pulsante: No
Spaziatura
E completa le impostazioni del modulo aggiungendo alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.
- Imbottitura superiore: 2%
- Imbottitura inferiore: 2%
- Imbottitura sinistra: 10%
- Imbottitura destra: 10%
Aggiungi modulo di testo alla colonna 1
Aggiungi contenuto
Nella colonna 1, l'unico modulo di cui abbiamo bisogno è un modulo di testo. Aggiungere il seguente contenuto alla casella del contenuto: '— 01'.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Montserrat
- Peso del carattere del testo: sottile
- Colore del testo: #ffffff
- Dimensioni del testo: 50 px (desktop), 40 px (tablet), 35 px (telefono)
- Allineamento del testo: Centro
Dimensionamento
Aumenta successivamente la larghezza del modulo.
- Larghezza: 150%
Trasforma Traduci
Quindi, vai alle impostazioni di trasformazione e riposiziona il modulo modificando le impostazioni di conversione della trasformazione:
- In basso: -50% (solo tablet e telefono)
Trasforma Ruota
Stiamo ruotando il modulo anche su schermi di dimensioni più piccole.
- Sinistra: 270 gradi (solo tablet e telefono)
Posizione
E completeremo le impostazioni del modulo riposizionando il modulo nella scheda Avanzate.
- Posizione: Assoluta
- Posizione: Centro
Clona la sezione per il riutilizzo
Una volta completata la prima sezione, puoi clonarla tutte le volte che vuoi.
Cambia tutto Copia e collegamenti
Assicurati di modificare tutte le copie e i collegamenti.
Cambia immagine
Insieme all'immagine del ritratto e il gioco è fatto!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Pensieri finali
In questo post, ti abbiamo mostrato come massimizzare le tue finestre mobili all'interno di Divi. Più specificamente, abbiamo utilizzato la copia ruotata per adattare più contenuti all'interno delle nostre finestre senza creare un'esperienza di progettazione travolgente. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a 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.