Come creare progetti Mobile-First con Divi

Molti siti Web ricevono tonnellate di visitatori da dispositivi mobili. Questo porta alla domanda se i tuoi progetti siano sufficientemente ottimizzati per schermi di dimensioni più piccole. Con Divi, anche un design creato per un'esperienza desktop diventa immediatamente reattivo. Ma solo perché qualcosa è reattivo non significa che sia anche ottimizzato.

Se il mobile è la tua principale fonte di visitatori, può davvero aiutare iniziare a progettare e costruire da una prospettiva mobile invece che da desktop. In questo post, ti mostreremo esattamente come farlo. Dopo aver esaminato alcuni suggerimenti e trucchi che dovresti tenere a mente, ricreeremo anche un esempio da zero che tenga conto di questi suggerimenti.

Arriviamo ad esso!

Anteprima

Come accennato in precedenza, inizieremo esaminando alcuni suggerimenti e trucchi. Successivamente, ricreeremo un esempio da zero che utilizza questi suggerimenti. Diamo un'occhiata al risultato.

Mobile

Desktop

Approccio

Iscriviti al nostro canale Youtube

1. Passa alla visualizzazione mobile subito dopo aver aggiunto una nuova pagina

La prima cosa che devi fare, dopo aver aggiunto una nuova pagina, è passare immediatamente alla visualizzazione mobile. Ciò ti consentirà di creare un design orientato ai dispositivi mobili e accurato.

2. Abilita le opzioni reattive per ogni elemento di design e modifica prima i valori mobili

Una volta che inizi a progettare qualsiasi design tu stia cercando, ti consigliamo di abilitare le opzioni reattive per gli elementi di design. Ciò include ma non è limitato alla dimensione del testo, al riempimento e al margine. I primi valori che aggiungerai saranno i valori mobili (anziché quelli desktop) per assicurarti che il design sia ottimizzato prima per i dispositivi mobili.

3. Rimuovi lo spazio predefinito tra le colonne e aggiungi il riempimento manualmente se necessario

Per creare più spazio orizzontale, si consiglia inoltre di rimuovere tutta la spaziatura interna personalizzata predefinita tra le colonne. Se necessario, puoi sempre aggiungere manualmente l'imbottitura a ogni colonna o elemento di design e scegliere tu stesso la distanza che vuoi che ci sia.

4. Posiziona 2 o 3 colonne una accanto all'altra per creare un design orizzontale

La struttura responsive in Divi è orientata verticalmente. Ciò significa che i moduli e le colonne vengono visualizzati uno sotto l'altro. Ciò, tuttavia, richiede uno scorrimento verticale maggiore. A seconda del design su cui stai lavorando, creare un flusso più orizzontale può davvero fare la differenza.

5. Modificare le visualizzazioni di desktop e tablet lungo la strada o in seguito

Anche se stai progettando per uno scopo mobile-first, è importante mantenere in ordine anche le altre visualizzazioni. Le opzioni reattive incluse in ogni elemento di design ti aiuteranno a raggiungere questo obiettivo. Puoi scegliere di modificare questi valori in seguito o durante il processo di progettazione.

Iniziamo a ricreare l'esempio!

Aggiungi nuova sezione

Apri una nuova pagina, passa alla visualizzazione mobile e aggiungi una nuova sezione per iniziare.

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla tua sezione utilizzando la seguente struttura a colonne:

Aggiungi modulo di testo alla riga

Aggiungi contenuto H2

Aggiungi un modulo di testo alla colonna della tua riga e inserisci del contenuto del titolo H2.

Impostazioni testo H2

Quindi, vai alle impostazioni del testo dell'intestazione e modifica l'aspetto del titolo.

• Intestazione 2 Font: Didact Gothic
• Intestazione 2 Allineamento del testo: Centro
• Colore testo titolo 2: #333333
• Titolo 2: Dimensione testo: 5.5vw (telefono), 5vw (tablet), 2vw (desktop)

Aggiungi modulo divisore alla riga

Visibilità

Proprio sotto il modulo di testo che hai aggiunto, vai avanti e aggiungi un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Quindi, vai alla scheda Design e cambia il colore del divisore.

• Colore: #333333

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Larghezza: 48%
• Allineamento del modulo: Centro

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo un'altra riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo alla riga.

• Colore di sfondo: #ffe69e

Colore di sfondo della colonna 2

Aggiungi un colore di sfondo anche alla seconda colonna della riga.

• Colore di sfondo della colonna 2: #ffd65b

Allineamento

Quindi, modificare l'allineamento delle righe.

• Allineamento riga: a sinistra

Dimensionamento

Successivamente apri le impostazioni di dimensionamento. Qui, vorremmo rimuovere tutto lo spazio predefinito tra le colonne. Utilizziamo anche una larghezza personalizzata per la colonna per renderla bella sul desktop.

• Usa larghezza personalizzata: Sì
• Unità: PX
• Larghezza personalizzata: 700 px
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Continua andando alle impostazioni di spaziatura e aggiungi manualmente alcuni margini personalizzati e valori di riempimento.

• Margine superiore: 5vw
• Margine inferiore: 5vw
• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 1: 10vw (telefono), 8vw (tablet), 4vw (desktop)
• Imbottitura inferiore colonna 1: 10vw (telefono), 8vw (tablet), 4vw (desktop)

Frontiera

Aggiungi anche alcuni angoli arrotondati alla riga.

• In alto a destra: 10px
• In basso a destra: 10px

Scatola ombra

E dagli anche un'ombra sottile.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.16)

CSS personalizzato

Ultimo ma non meno importante, posizioneremo le colonne una accanto all'altra su schermi di dimensioni più piccole per assicurarci di sfruttare appieno lo spazio orizzontale che abbiamo. Vai alla scheda Avanzate e aggiungi una singola riga di codice CSS all'elemento principale.

display: flex;

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto H3

È ora di iniziare ad aggiungere moduli! Aggiungi un titolo Modulo di testo alla prima colonna e inserisci del contenuto H3.

Impostazioni testo H3

Quindi, vai alla scheda Progettazione e modifica le impostazioni del testo dell'intestazione.

• Intestazione 3 Font: Didact Gothic
• Intestazione 3 Peso del carattere: grassetto
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #ee6f49
• Titolo 3: Dimensione testo: 4vw (telefono), 3vw (tablet), 1.5vw (desktop)

Aggiungi modulo divisore alla colonna 1

Visibilità

Aggiungi un modulo divisore successivo. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Quindi, cambia il colore del divisore.

• Colore: #ffffff

Dimensionamento

Insieme alle impostazioni di dimensionamento.

• Peso del divisore: 4px
• Larghezza: 30%
• Allineamento del modulo: Centro

Spaziatura

Aggiungi anche un margine superiore personalizzato al modulo.

• Margine superiore: 4vw (telefono), 2vw (tablet), 1.5vw (telefono)

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il modulo successivo e ultimo necessario nella prima colonna è un modulo pulsante. Inserisci qualche copia.

Allineamento

Quindi vai alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Modifica anche l'aspetto del pulsante nelle impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 3vw (telefono), 2vw (tablet), 1.5vw (desktop)
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ee6f49
• Larghezza bordo pulsante: 0px
• Carattere pulsante: Didact Gothic
• Peso del carattere: grassetto

Aggiungi modulo immagine alla colonna 2

Carica icona

L'unico modulo di cui avremo bisogno nella colonna 2 è un modulo immagine. Puoi utilizzare qualsiasi immagine a tua scelta, ma se desideri utilizzare esattamente le stesse icone utilizzate in questo esempio, puoi andare al Pacchetto di layout del negozio di mobili e scaricarle alla fine del post.

Allineamento

Quindi, vai alla scheda Design e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Clona riga #2

Una volta che hai finito di modificare la riga, puoi andare avanti e clonarla.

Cambia il colore di sfondo della riga

Avremo bisogno di apportare alcune modifiche a questo duplicato, a partire dal colore di sfondo della riga.

• Colore di sfondo: #8ee5cf

Rimuovi il colore di sfondo della colonna 2

Continua rimuovendo il colore di sfondo della colonna 2.

Aggiungi il colore di sfondo della colonna 1

Stiamo invece aggiungendo un colore di sfondo alla prima colonna.

• Colore di sfondo della colonna 1: # 47e5bd

Cambia moduli in colonne

Stiamo anche cambiando le colonne per i moduli.

Cambia icona nel modulo immagine

Quindi, cambia l'icona nel Modulo immagine.

Aggiungi filtro al modulo immagine

E fallo combaciare con i nuovi colori di sfondo di riga e colonna cambiando la tonalità nelle impostazioni dei filtri.

• Tonalità: 65 gradi

Modifica allineamento righe

Modificare l'allineamento delle righe successivo.

• Allineamento riga: a destra

Cambia bordo riga

Insieme agli angoli arrotondati.

• In alto a sinistra: 10px
• In basso a sinistra: 10px

Cambia il colore del testo del modulo di testo nella colonna 2

Utilizziamo anche un altro colore del testo per il modulo di testo nella colonna 2.

• Colore testo titolo 3: #7b9710

Cambia il colore di sfondo del pulsante

E stiamo usando lo stesso colore per lo sfondo del pulsante.

• Colore di sfondo del pulsante: #7b9710

Clona entrambe le righe

Ora che abbiamo entrambi i lati della riga, possiamo clonarli entrambi fino al numero di volte necessario e metterli in ordine.

Modifica duplicato #1

Cambia il colore di sfondo della riga

Inizieremo cambiando il colore di sfondo della riga del primo duplicato.

• Colore di sfondo: #ffc9cf

Cambia colore colonna

Quindi, modificheremo anche il colore di sfondo della colonna 2.

• Colore di sfondo della colonna 2: #ffadb6

Cambia icona nel modulo immagine

Cambia l'icona nel modulo immagine con un'altra a tua scelta.

Aggiungi filtro al modulo immagine

E cambia la tonalità nelle impostazioni dei filtri per farla corrispondere ai nuovi colori di sfondo di riga e colonna.

• Tonalità: 309 gradi

Cambia il colore del testo

Stiamo cambiando anche il colore del testo.

• Colore testo titolo 3: #f862b0

Cambia il colore di sfondo del pulsante

E stiamo usando lo stesso colore per lo sfondo del pulsante.

• Colore di sfondo del pulsante: #f862b0

Modifica duplicato #2

Cambia il colore di sfondo della riga

Al prossimo e ultimo duplicato! Cambia il colore di sfondo della riga.

• Colore di sfondo: #b2c4ff

Cambia colore colonna

Fai la stessa cosa per il colore di sfondo della colonna 1.

• Colore di sfondo della colonna 1: #9eb4ff

Cambia icona nel modulo immagine

Quindi, cambia l'icona che viene utilizzata.

Aggiungi filtro al modulo immagine

Insieme alla tonalità nelle impostazioni dei filtri del modulo immagine.

• Tonalità: 221°

Cambia il colore del testo

Modificare il colore del testo del modulo immagine successivo.

• Colore testo titolo 3: #6287f9

Cambia il colore di sfondo del pulsante

E usa lo stesso colore per lo sfondo del pulsante.

• Colore di sfondo del pulsante: #6287f9

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato.

Mobile

Desktop

Pensieri finali

Se la tua principale fonte di visitatori proviene da dispositivi mobili, è importante ottimizzare tutto per quella particolare dimensione dello schermo. Con Divi, tutto diventa immediatamente reattivo. Ma solo perché qualcosa è reattivo, non significa che sia ottimizzato anche per quella particolare dimensione dello schermo. Un altro modo per avvicinarsi alla progettazione per dispositivi mobili è iniziare la progettazione da una prospettiva incentrata sui dispositivi mobili. In questo post, abbiamo condiviso alcuni suggerimenti e trucchi su come farlo. Successivamente, abbiamo ricreato un esempio che è all'altezza di queste regole e ci consente di creare un risultato sorprendente. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!