Come mostrare magnificamente i servizi sui dispositivi mobili con Divi (download gratuito!)
Pubblicato: 2019-02-25Se ti stai concentrando su progetti mobile-first, questo post potrebbe aiutarti. Abbiamo creato due bellissimi esempi di vetrine di servizi che hanno un bell'aspetto su schermi di dimensioni più piccole. Inoltre, sono stati specificamente progettati per apparire al meglio sui dispositivi mobili pur mantenendo un buon design sul desktop. In questo post, ti mostreremo passo dopo passo come ricrearli da zero. Speriamo che questo tutorial ti ispiri a liberare la tua creatività durante la progettazione di sezioni di servizi per qualsiasi sito web che crei. Alla fine del tutorial, potrai anche scaricare i file JSON di entrambe le sezioni.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata ai due esempi mobili che ricreeremo.
Esempio 1
Esempio #2
Iniziamo a ricreare l'Esempio #1
Iscriviti al nostro canale Youtube
Aggiungi nuova sezione
Sfondo sfumato
Crea una nuova pagina e aggiungi una sezione normale. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato.
- Colore 1: #ff0f83
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: sinistra
- Posizione di partenza: 20%
- Posizione finale: 20%
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:
Aggiungi testo Modulo n. 1
Aggiungi contenuto
Il primo modulo di cui avremo bisogno è un modulo di testo. Aggiungi del contenuto alla casella del contenuto.
Impostazioni testo
Quindi, vai alla scheda Design e modifica le impostazioni del testo.
- Carattere del testo: Poppins
- Peso del carattere del testo: pesante
- Colore del testo: #ffffff
- Dimensione del testo: 20vw
- Altezza riga di testo: 1em
- Intensità della sfocatura dell'ombra del testo: 0,95 em
- Colore ombra del testo: rgba(0,0,0,0.13)
- Orientamento del testo: al centro
Aggiungi testo Modulo #2
Aggiungi contenuto H2
Aggiungi un altro modulo di testo proprio sotto il precedente. Inserisci alcuni contenuti H2 a tua scelta.
Impostazioni testo H2
Quindi, vai alla scheda Design e modifica le impostazioni del testo H2.
- Intestazione 2 Carattere: Poppins
- Intestazione 2 Peso del carattere: grassetto
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #000000
- Titolo 2: Dimensione testo: 10vw (telefono e tablet), 10vw (desktop)
Spaziatura
Crea una sovrapposizione tra entrambi i moduli di testo utilizzando un margine superiore negativo.
- Margine superiore: -12vw (telefono), -10vw (tablet), -8vw (desktop)
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo un'altra riga utilizzando la seguente struttura di colonne:
Sfondo sfumato
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato.
- Colore 1: #3239ff
- Colore 2: RGB (255,255,255,0)
- Tipo di gradiente: radiale
- Direzione radiale: destra
- Posizione di partenza: 30%
- Posizione finale: 30%
Dimensionamento
Vai alle impostazioni di dimensionamento successivo e consenti alla riga di occupare l'intera larghezza dello schermo.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Aggiungi anche alcuni valori di spaziatura. Questi valori assicureranno che tutto appaia a posto su tutte le dimensioni dello schermo.
- Imbottitura sinistra: 0vw (telefono e tablet), 15vw (desktop)
- Imbottitura destra: 0vw (telefono e tablet), 15vw (desktop)
CSS personalizzato
Inoltre, posizioniamo le due colonne l'una accanto all'altra aggiungendo una riga di codice CSS nella scheda Avanzate.
display: flex;
Aggiungi modulo di testo alla colonna 1
Aggiungi H3 e collega il contenuto
Ora possiamo iniziare ad aggiungere moduli! Aggiungi un modulo di testo alla prima colonna con una copia H3 e un collegamento.
Colore di sfondo
Quindi, vai alle impostazioni di sfondo del modulo e aggiungi un colore di sfondo.
- Colore di sfondo: rgba (255,255,255,0.95)
Impostazioni testo
Continua modificando l'orientamento del testo nelle impostazioni del testo del modulo.
- Orientamento del testo: al centro
Link alle impostazioni del testo
Modifica anche le impostazioni del testo del collegamento.
- Carattere del collegamento: Poppins
- Peso del carattere Linke: grassetto
- Stile carattere collegamento: sottolineato
- Colore sottolineatura collegamento: #000000
- Colore del testo del collegamento: #000000
- Dimensione del testo del collegamento: 3vw (telefono), 2vw (tablet), 1vw (desktop)
Impostazioni testo H3
Insieme alle impostazioni del testo H3.
- Intestazione 3 Carattere: Poppins
- Intestazione 3 Peso del carattere: ultraleggero
- Colore testo titolo 3: #000000
- Intestazione 3 Dimensioni testo: 4vw (telefono), 3vw (tablet), 2vw (desktop)
- Intestazione 3 Altezza riga di testo: 1,9 em per una forma circolare o 3 em per una forma ovale
Spaziatura
Per creare una forma da questo modulo, aggiungeremo alcuni margini personalizzati e valori di riempimento nelle impostazioni di spaziatura.
- Margine sinistro: 5vw
- Margine destro: -5vw
- Imbottitura superiore: 17vw (telefono), 20vw (tablet), 15vw (desktop)
- Imbottitura inferiore: 17vw (telefono), 20vw (tablet), 15vw (desktop)
Frontiera
Trasformiamo il quadrato in un cerchio usando gli angoli arrotondati aggiungendo "100vw" a ciascuno degli angoli.
Scatola ombra
E per creare un po' di profondità, aggiungeremo un'ombra sottile.
- Forza sfocatura dell'ombra della scatola: 100 px
- Colore ombra: rgba(0,0,0,0.12)
Clona modulo di testo 4 volte
Ora che abbiamo finito di modificare il primo modulo di testo, possiamo andare avanti e clonarlo quattro volte. Metti due dei duplicati nella seconda colonna.
Modifica duplicato #1
Spaziatura
Continua modificando le impostazioni di spaziatura del primo duplicato.
- Margine superiore: 20vw
- Margine sinistro: -5vw
- Margine destro: 5vw
Modifica duplicato #2
Colore di sfondo
Apri il secondo duplicato e cambia il colore di sfondo.
- Colore di sfondo: rgba (255,248,209,0.92)
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine superiore: -5vw
Modifica duplicato #3
Colore di sfondo
Quindi, apri il terzo duplicato e cambia il colore di sfondo.
- Colore di sfondo: rgba (219,255,223,0.95)
Spaziatura
Modificare le impostazioni di spaziatura successiva.
- Margine superiore: -5vw
- Margine sinistro: -5vw
- Margine destro: 5vw
Modifica duplicato #4
Spaziatura
Apri anche l'ultimo duplicato e aggiungi un margine superiore negativo per completare il disegno.
- Margine superiore: -5vw
Iniziamo a ricreare l'Esempio #2
Aggiungi nuova sezione
Al secondo esempio! Aggiungi una nuova sezione alla tua pagina.
Aggiungi riga n. 1
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Modulo Aggiungi testo
Aggiungi contenuto H2
Il primo modulo di cui avremo bisogno è un modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.
Impostazioni testo H2
Quindi, vai alla scheda Design e modifica le impostazioni del testo H2.
- Intestazione 2 Carattere: Poppins
- Intestazione 2 Allineamento del testo: Centro
- Colore testo titolo 2: #333333
- Titolo 2: Dimensione testo: 7vw (telefono e tablet), 4vw (desktop)
Aggiungi modulo divisore
Visibilità
Aggiungi un modulo divisore proprio sotto il modulo di testo. Assicurati che l'opzione "Mostra divisore" sia abilitata.
Colore
Quindi, vai alla scheda Design e modifica il colore del divisore.
- Colore: #333333
Dimensionamento
Gioca anche con le impostazioni di dimensionamento.
- Peso del divisore: 5px
- Larghezza: 12%
- Allineamento del modulo: Centro
Aggiungi riga #2
Struttura della colonna
Continua aggiungendo una nuova 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 bianco.
- Colore di sfondo: #ffffff
Dimensionamento
Vai alle impostazioni di dimensionamento successivo e consenti alla riga di occupare l'intera larghezza dello schermo.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Aggiungi alcuni margini personalizzati e valori di riempimento accanto per ottimizzare il design per tutte le dimensioni dello schermo.
- Margine superiore: 2vw
- Margine inferiore: 2vw
- Imbottitura superiore: 10vw (telefono e tablet), 5vw (desktop)
- Imbottitura inferiore: 10vw (telefono e tablet), 5vw (desktop)
- Imbottitura sinistra: 2vw (telefono e tablet), 20vw (desktop)
- Imbottitura destra: 2vw (telefono e tablet), 20vw (desktop)
Scatola ombra
Stiamo usando anche un'ombra sottile della scatola.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.07)
CSS personalizzato
Ultimo ma non meno importante, posiziona entrambe le colonne una accanto all'altra aggiungendo una singola riga di codice CSS all'elemento principale nella scheda avanzata.
display: flex;
Aggiungi modulo Blurb alla colonna 1
Seleziona icona
Ora possiamo iniziare ad aggiungere moduli! L'unico modulo di cui abbiamo bisogno nella colonna 1 è un modulo Blurb. Seleziona un'icona a tua scelta.
Sfondo sfumato
Quindi, aggiungi uno sfondo sfumato.
- Colore 1: #7b28ef
- Colore 2: #29b6e5
- Direzione del gradiente: 142°
Impostazioni icona
Modificare le impostazioni dell'icona successivamente.
- Colore icona: #ffffff
- Posizionamento delle icone: in alto
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 5vw (telefono e tablet), 4vw (desktop)
Dimensionamento
E cambia le impostazioni di dimensionamento.
- Larghezza: 48% (telefono e tablet), 78% (desktop)
Spaziatura
Stiamo anche aggiungendo alcuni margini personalizzati e valori di riempimento per ottimizzare il design su tutte le dimensioni dello schermo.
- Margine superiore: 2vw (telefono)
- Imbottitura superiore: 8.5vw (telefono), 9vw (tablet), 6vw (desktop)
- Imbottitura inferiore: 3vw (telefono), 5vw (tablet), 4vw (desktop)
Frontiera
Trasforma il modulo in un cerchio successivamente aggiungendo "100vw" a ciascuno degli angoli nelle impostazioni del bordo.
Scatola ombra
Stiamo aggiungendo anche un'ombra di scatola.
- Posizione verticale dell'ombra del riquadro: 10 px
- Forza di diffusione dell'ombra della scatola: 5px
- Colore dell'ombra: rgba (2,185,252,0,35)
Aggiungi il modulo di testo n. 1 alla colonna 2
Aggiungi contenuto H3
Alla seconda colonna! Il primo modulo di cui abbiamo bisogno è un modulo di testo del titolo. Aggiungi del contenuto H3.
Impostazioni testo H3
Quindi, vai alla scheda Design e modifica le impostazioni del testo H3.
- Intestazione 3 Carattere: Poppins
- Intestazione 3 Dimensioni testo: 4vw (telefono), 3vw (tablet), 2vw (desktop)
Spaziatura
Aggiungi successivamente alcuni valori di spaziatura personalizzati.
- Margine superiore: 0vw (telefono), 3vw (tablet e desktop)
- Margine sinistro: -20vw (telefono e tablet), 0vw (desktop)
- Margine destro: 0vw
- Imbottitura inferiore: 2vw (telefono e tablet), 1vw (desktop)
- Imbottitura sinistra: 5vw (telefono e tablet), 2vw (desktop)
Frontiera
Insieme a un bordo sinistro.
- Larghezza bordo sinistro: 5px
- Colore bordo sinistro: #f4f4f4
- Stile bordo sinistro: doppio
Aggiungi modulo divisore alla colonna 2
Mostra divisore
Il secondo modulo di cui abbiamo bisogno è 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: #f4f4f4
Stili
Successivamente, cambia lo stile del divisore nelle impostazioni degli stili.
- Stile divisore: doppio
Dimensionamento
Continua modificando le diverse opzioni nelle impostazioni di dimensionamento.
- Peso del divisore: 5px
- Altezza: 0px
Spaziatura
E gioca anche con i valori di spaziatura.
- Margine sinistro: -20vw (telefono e tablet), 0vw (desktop)
Aggiungi il modulo di testo n. 2 alla colonna 2
Aggiungi contenuto
Il modulo successivo di cui abbiamo bisogno nella seconda colonna è un altro modulo di testo. Aggiungi del contenuto del corpo a tua scelta.
Impostazioni testo
Quindi, vai alla scheda Design e modifica le impostazioni del testo.
- Dimensione del testo: 2vw (telefono), 1.7vw (tablet), 0.8vw (desktop)
- Orientamento del testo: a sinistra
Spaziatura
Gioca anche con i valori di spaziatura.
- Margine superiore: 0vw
- Margine sinistro: -20vw (telefono e tablet), 0vw (desktop)
- Margine destro: 0vw
- Imbottitura superiore: 3vw (telefono e tablet), 2vw (desktop)
- Imbottitura sinistra: 5vw (telefono e tablet), 2vw (desktop)
Frontiera
E aggiungi un bordo sinistro.
- Larghezza bordo sinistro: 5px
- Colore bordo sinistro: #f4f4f4
- Stile bordo sinistro: doppio
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno nella seconda colonna è un modulo pulsante. Aggiungi qualche copia.
Impostazioni dei pulsanti
Quindi, vai alla scheda Design e modifica le impostazioni del pulsante.
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 2.5vw (telefono), 2vw (tablet), 1vw (desktop)
- Colore del testo del pulsante: #4f77e8
- Larghezza bordo pulsante: 1px
- Colore bordo pulsante: #4f77e8
- Raggio del bordo del pulsante: 1px
- Carattere pulsante: Poppins
Spaziatura
Modifica anche i valori di spaziatura.
- Margine superiore: 4vw (telefono e tablet), 2vw (desktop)
- Margine sinistro: -20vw (telefono e tablet), 0vw (desktop)
Clona riga due volte
Ora che abbiamo finito di modificare la riga e tutti i suoi moduli, possiamo clonarla due volte.
Cambia icone
Assicurati di cambiare le icone per entrambi i moduli Blurb.
Cambia sfondi sfumati
Modifica anche gli sfondi sfumati.
- Colore 1: #ff2885
- Colore 2: #d6ac24
- Colore 1: #70ff1e
- Colore 2: #2699ff
Cambia i colori delle ombre della casella
Abbina il colore dell'ombra della casella con il nuovo sfondo sfumato.
- Colore ombra: rgba (255,208,2,0,37)
- Colore ombra: rgba (42,255,0,0,37)
Modifica i colori del bordo e del testo del pulsante
E completa il design cambiando il bordo del pulsante e i colori del testo.
- Colore del testo del pulsante: #e96c54
- Colore bordo pulsante: #e96c54
- Colore del testo del pulsante: #4dcb93
- Colore bordo pulsante: #4dcb93
Scarica GRATUITAMENTE le sezioni dei servizi mobili
Per mettere le mani sulle sezioni dei servizi mobili gratuiti, dovrai prima scaricarle 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!
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato mobile di entrambi gli esempi.
Esempio 1
Esempio #2
Pensieri finali
In questo post, ti abbiamo mostrato due modi creativi su come mostrare i servizi sui dispositivi mobili utilizzando solo le opzioni integrate di Divi. Ci auguriamo che questo approccio mobile-first ti ispiri anche a diventare creativo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!