Come creare un bellissimo social mobile Follow Bios con Divi (download gratuito!)

Quando crei il tuo sito web personale, è utile avere una pagina bio di follower social a cui puoi facilmente collegarti. È un ottimo biglietto da visita online con un riepilogo di ciò che fai e dove le persone possono vedere il tuo lavoro. Le informazioni condivise all'interno del bios dei follower sui social mobili sono generalmente limitate alla tua immagine, nome, titolo di lavoro, una piccola descrizione e collegamenti al portfolio. Puoi anche aggiungere un CTA aggiuntivo per aiutare i visitatori a mettersi in contatto con te.

In questo post, ti mostreremo come creare due bellissimi bios di follow sui social per dispositivi mobili utilizzando Divi. Alla fine del tutorial, condivideremo anche i file JSON di entrambi gli esempi in modo che tu possa iniziare subito.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata ai due esempi che ricreeremo da zero.

Esempio 1

Esempio 2

Inizia a ricreare l'esempio n. 1

Aggiungi nuova sezione

Colore di sfondo

Cominciamo con il primo esempio! Crea una nuova pagina o aprine una esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Spaziatura

Quindi, vai alle impostazioni di spaziatura della sezione e apporta alcune modifiche. Noterai che i valori differiscono in base alle dimensioni dello schermo. Manteniamo lo stesso tipo di design sottile su schermi di diverse dimensioni modificando l'imbottitura sinistra e destra mentre procediamo.

• Imbottitura superiore: 50 px (desktop e tablet), 0 px (telefono)
• Imbottitura inferiore: 50 px (desktop e tablet), 0 px (telefono)
• Imbottitura sinistra: 36vw (Desktop), 23vw (Tablet), 0vw (Telefono)
• Imbottitura destra: 36vw (Desktop), 23vw (Tablet), 0vw (Telefono)

Aggiungi riga n. 1

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.

• Colore di sfondo: #333333

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento nella scheda Progettazione e rimuovi tutto lo spazio personalizzato tra la colonna e la riga.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Scatola ombra

Stiamo anche aggiungendo un'ombra per creare un po' di profondità su schermi di dimensioni maggiori.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi modulo immagine

Carica immagine

È ora di iniziare ad aggiungere moduli! Inizia con un modulo immagine con un rapporto 1:1. L'immagine che stiamo usando, ad esempio, ha una larghezza e un'altezza di '500px'.

Allineamento

Una volta caricata l'immagine, vai alla scheda Design e modifica l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Stiamo riducendo la dimensione dell'immagine modificando la larghezza nelle impostazioni di dimensionamento successivo.

• Larghezza: 33%
• Allineamento del modulo: Centro

Frontiera

Stiamo anche trasformando l'immagine in un cerchio aggiungendo "50vw" a ciascuno degli angoli nelle impostazioni del bordo. Inoltre, aggiungeremo un bordo bianco utilizzando le seguenti impostazioni:

• Larghezza bordo: 8px
• Colore bordo: #ffffff

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra a scatola per creare un design dimensionale.

• Posizione verticale dell'ombra del riquadro: 40 px
• Forza sfocatura dell'ombra della scatola: 100 px
• Colore ombra: #000000

Aggiungi testo Modulo n. 1

Aggiungi contenuto H3

Al prossimo modulo! Aggiungi un modulo di testo proprio sotto il modulo immagine con alcuni contenuti H3.

Impostazioni testo H3

Continua andando alla scheda Design e modificando le impostazioni del testo H3.

• Carattere titolo 3: Open Sans
• Intestazione 3 Peso del carattere: semi grassetto
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #ffffff
• Altezza linea intestazione 3: 0,1 em

Spaziatura

Stiamo anche aggiungendo un margine superiore per creare spazio tra il modulo immagine e questo modulo testo.

• Margine superiore: 30px

Aggiungi testo Modulo #2

Aggiungi contenuto

Il prossimo modulo di cui abbiamo bisogno è un altro modulo di testo. Aggiungi il tuo titolo di lavoro alla casella del contenuto.

Impostazioni testo

Quindi, vai alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Peso del carattere del testo: normale
• Colore del testo: #919191
• Orientamento del testo: al centro

Aggiungi testo Modulo n. 3

Aggiungi contenuto

Continua aggiungendo un altro modulo di testo con una breve descrizione di te stesso.

Impostazioni testo

Vai alle impostazioni del testo e apporta alcune modifiche.

• Carattere del testo: Open Sans
• Colore del testo: #b7b7b7
• Altezza riga di testo: 1,6 em
• Orientamento del testo: al centro

Dimensionamento

Modifica anche la larghezza del modulo.

• Larghezza: 68%
• Allineamento del modulo: Centro

Spaziatura

E aggiungi un margine superiore e inferiore per creare spazio aggiuntivo.

• Margine superiore: 30px
• Margine inferiore: 30 px

Aggiungi modulo pulsante

Aggiungi copia

Il modulo successivo e ultimo di cui abbiamo bisogno in questa riga è un modulo pulsante. Aggiungi qualche copia.

Allineamento

Quindi, vai alla scheda Progettazione e modifica l'allineamento del pulsante per farlo corrispondere ai moduli precedenti.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua modificando l'aspetto del pulsante nelle impostazioni del pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 13 px
• Colore del testo del pulsante: #ffffff
• Colore 1: #ad32ff
• Colore 2: #32baff
• Direzione del gradiente: 96 gradi
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 30 px
• Carattere pulsante: Open Sans
• Peso del carattere: Ultra grassetto
• Stile carattere: maiuscolo

Spaziatura

Aggiungi un margine personalizzato e un'imbottitura successiva.

• Margine inferiore: 50 px
• Imbottitura superiore: 15px
• Imbottitura inferiore: 15px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Scatola ombra

E completa il design del pulsante aggiungendo un'ombra a scatola.

• Posizione verticale dell'ombra del riquadro: 20 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.69)

Aggiungi riga #2

Struttura della colonna

Alla prossima riga! Utilizzare la seguente struttura a colonne:

Sfondo sfumato

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato:

• Colore 1: #1e1e1e
• Colore 2: #3f3f3f
• Tipo di gradiente: radiale
• Direzione radiale: in alto a sinistra
• Posizione di partenza: 26%
• Posiziona il gradiente sopra l'immagine di sfondo: Sì

Immagine di sfondo

Salva la seguente immagine sul tuo computer e usala come immagine di sfondo per la riga:

Insieme alle seguenti impostazioni di sfondo:

• Dimensione dell'immagine di sfondo: dimensione reale
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione
• Miscela immagine di sfondo: luce intensa

Dimensionamento

Quindi, vai alla scheda Progettazione e rimuovi tutto lo spazio tra le colonne e la riga. Questo ci aiuterà a sfruttare appieno lo spazio di fila che otteniamo.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Aggiungi un po' di imbottitura personalizzata in seguito.

• Imbottitura superiore: 84px
• Imbottitura inferiore: 84 px
• Imbottitura sinistra: 4vw (Desktop), 7vw (Tablet), 14vw (Telefono)
• Imbottitura destra: 4vw (Desktop), 7vw (Tablet), 14vw (Telefono)

Scatola ombra

Insieme a un'ombra di scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Schermo

Per assicurarci che tutte le icone di follow social appaiano una accanto all'altra, aggiungeremo una singola riga di codice CSS all'elemento principale della riga.

display: flex;

Aggiungi il modulo Segui social media alla colonna 1

Allineamento

Il primo modulo di cui abbiamo bisogno nella colonna 1 è un modulo di follow sui social media. Dopo aver aggiunto il modulo, modifica l'allineamento dell'elemento nella scheda Design.

• Allineamento oggetto: centro

Aggiungi nuovo social network

Continua aggiungendo un nuovo social network. Per questo esempio, stiamo usando Dribbble.

Collegamento

Aggiungi un link al tuo profilo Dribbble.

Sfondo sfumato

Quindi, cambia lo sfondo sfumato usando le seguenti impostazioni:

• Colore 1: #ea0061
• Colore 2: #ea4c8d
• Direzione del gradiente: 136 gradi

Spaziatura

E aumenta le dimensioni del modulo aggiungendo un'imbottitura personalizzata.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Frontiera

Stiamo anche trasformando il modulo in un cerchio aggiungendo "20vw" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

Ultimo ma non meno importante, aggiungi un'ombra di scatola.

• Posizione verticale dell'ombra del riquadro: 20 px
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: #000000

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

Aggiungi un modulo di testo alla prima colonna successiva.

Impostazioni testo

Modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Peso del carattere del testo: Ultra grassetto
• Colore del testo: #ffffff
• Orientamento del testo: al centro

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Aggiungine un altro sotto il precedente.

Impostazioni testo

Modifica anche le impostazioni del testo di questo modulo.

• Carattere del testo: Open Sans
• Colore del testo: #898989
• Dimensione del testo: 11px
• Orientamento del testo: al centro

Clona moduli nella colonna 1 due volte e posiziona i duplicati nelle colonne rimanenti

Una volta che hai finito di personalizzare tutti i moduli nella colonna 1, puoi andare avanti e clonarli due volte. Posiziona i duplicati nelle due colonne rimanenti della riga.

Cambia social network

Certo, dovrai cambiare i social network.

Modifica i collegamenti ai social network

Insieme ai link.

Cambia gli sfondi sfumati dei social network

E gli sfondi sfumati di rete.

• Colore 1: #0043ff
• Colore 2: #00aced

• Colore 1: #ea2c59
• Colore 2: #fed270

Inizia a ricreare l'esempio n. 2

Aggiungi nuova sezione

Colore di sfondo

Al prossimo esempio! Aggiungi una nuova sezione con un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Spaziatura

Aggiungi un po' di imbottitura personalizzata in seguito.

• Imbottitura superiore: 50 px (desktop e tablet), 0 px (telefono)
• Imbottitura inferiore: 50 px (desktop e tablet), 0 px (telefono)
• Imbottitura sinistra: 36vw (Desktop), 23vw (Tablet), 4vw (Telefono)
• Imbottitura destra: 36vw (desktop), 23vw (tablet), 4vw (telefono)

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, vai alla scheda di progettazione delle impostazioni di riga e modifica le impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Aggiungi modulo immagine

Carica immagine

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è un modulo immagine con un rapporto 1:1.

Allineamento

Modificare l'allineamento dell'immagine.

• Allineamento immagine: centro

Dimensionamento

Modifica anche la larghezza.

• Larghezza: 33%
• Allineamento del modulo: Centro

Frontiera

E aggiungi "20px" a ciascuno degli angoli nelle impostazioni del bordo.

Scatola ombra

Completa il design dell'immagine aggiungendo un'ombra sottile.

• Intensità sfocatura ombra scatola: 51px
• Colore ombra: rgba(0,0,0,0.37)

Aggiungi testo Modulo n. 1

Aggiungi contenuto H3

Il prossimo modulo di cui abbiamo bisogno è un modulo di testo. Aggiungi del contenuto H3 a tua scelta.

Impostazioni testo H3

Modifica le impostazioni del testo H3 nella scheda Design.

• Carattere titolo 3: Open Sans
• Intestazione 3 Peso del carattere: Ultra grassetto
• Intestazione 3 Stile carattere: maiuscolo
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #000000
• Intestazione 3 spaziatura lettere: -1px
• Altezza linea intestazione 3: 0,9 em

Spaziatura

Aggiungi un margine superiore successivo.

• Margine superiore: 30px

Aggiungi testo Modulo #2

Aggiungi contenuto

Aggiungi un altro modulo di testo.

Impostazioni testo

Modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Colore del testo: #919191
• Orientamento del testo: al centro

Aggiungi riga #2

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica il colore di sfondo della riga.

• Colore di sfondo: #ffffff

Colore di sfondo della colonna 2

Aggiungi un colore di sfondo anche alla seconda colonna.

• Colore di sfondo della colonna 2: #efefef

Allineamento

Assicurati di utilizzare l'allineamento della riga a sinistra.

• Allineamento riga: a sinistra

Dimensionamento

Vai alle impostazioni di dimensionamento successivo e apporta alcune modifiche.

• Usa larghezza personalizzata: Sì
• Unità: %
• Larghezza personalizzata: 67%
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Stiamo anche aggiungendo del riempimento personalizzato alla riga e alle sue colonne.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura superiore colonna 1: 20px
• Imbottitura inferiore colonna 1: 20px
• Imbottitura superiore colonna 2: 20px
• Imbottitura inferiore colonna 2: 20px

Frontiera

Aggiungi '14px' negli angoli in alto a sinistra, in alto a destra e in basso a sinistra.

Scatola ombra

E completa il design della riga aggiungendo una sottile ombra a scatola.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.17)

Aggiungi il modulo Segui social media alla colonna 1

Allineamento

Nella prima colonna, avremo bisogno di un modulo Follow sui social media. Modificare l'allineamento dell'elemento.

• Allineamento oggetto: centro

Aggiungi nuovo social network

Quindi, aggiungi un nuovo social network. Stiamo usando Dribbble.

Collegamento

Aggiungi il link al tuo portfolio Dribbble.

Sfondo sfumato

E cambia lo sfondo sfumato del social network.

• Colore 1: #ea0061
• Colore 2: #ea4c8d
• Direzione del gradiente: 136 gradi

Spaziatura

Aggiungi successivamente alcuni valori di riempimento personalizzati.

• Imbottitura superiore: 20px
• Imbottitura inferiore: 20px
• Imbottitura sinistra: 20px
• Imbottitura destra: 20px

Frontiera

E aggiungi "10px" a ciascuno degli angoli del social network.

Scatola ombra

Completa il design del modulo aggiungendo un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto

Aggiungi un modulo di testo alla seconda colonna.

Impostazioni testo

Modificare le impostazioni del testo di conseguenza:

• Carattere del testo: Open Sans
• Peso del carattere del testo: Ultra grassetto
• Colore del testo: #000000
• Orientamento del testo: al centro

Spaziatura

Crea spazio aggiungendo successivamente un margine superiore.

• Margine superiore: 10px

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Il secondo modulo di cui abbiamo bisogno nella colonna 2 è un altro modulo di testo.

Impostazioni testo

Modifica le impostazioni del testo.

• Carattere del testo: Open Sans
• Colore del testo: #898989
• Dimensione del testo: 11px
• Orientamento del testo: al centro

Clona riga #2

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

Scambia moduli

Scambia i moduli dopo.

Aggiungi il colore di sfondo della colonna 1

Quindi, aggiungi un colore di sfondo della colonna 1 alla riga duplicata.

• Colore di sfondo della colonna 1: #dbdbdb

Rimuovi il colore di sfondo della colonna 2

Successivamente, rimuovi il colore di sfondo della colonna 2.

Modifica allineamento righe

Modifica anche l'allineamento delle righe.

• Allineamento riga: a destra

Modifica dimensione riga

Insieme alla larghezza personalizzata nelle impostazioni di dimensionamento.

• Larghezza personalizzata: 66,99%

Cambia bordo riga

Ci stiamo anche assicurando che '14px' venga assegnato solo agli angoli in alto a destra e in basso a destra.

Cambia Social Follow Network

Continua cambiando il social network.

Cambia lo sfondo sfumato del social follow network

Insieme allo sfondo sfumato.

• Colore 1: #0043ff
• Colore 2: #00aced

Clona entrambe le righe di follow social

Una volta che hai finito di avere entrambe le righe di follow social, puoi clonare ognuna di esse.

Cambia bordo del duplicato #1

Modifica gli angoli arrotondati del primo duplicato.

Cambia Social Segui la rete del duplicato n. 1

Insieme al social network.

Cambia sfondo sfumato del duplicato n. 1

E lo sfondo sfumato.

• Colore 1: #ea2c59
• Colore 2: #fed270

Cambia bordo del duplicato #2

Continua modificando anche gli angoli arrotondati del secondo duplicato.

Cambia Social Follow Network di Duplicate #2

Insieme al social network.

Cambia sfondo sfumato del duplicato n. 2

E, ancora una volta, lo sfondo sfumato che viene assegnato al social network.

• Colore 1: #00306b
• Colore 2: #007bb6

Scarica The Mobile Social Follow Bios GRATUITAMENTE

Per mettere le mani sulle sezioni di follow social mobile gratuite, 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 i file

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.

SCARICA

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 eseguito tutti i passaggi, diamo un'ultima occhiata al risultato di entrambi gli esempi che abbiamo ricreato.

Esempio 1

Esempio 2

Pensieri finali

In questo post, ti abbiamo mostrato come creare incredibili biografie di follower sui social per i dispositivi mobili. Puoi utilizzare questi design come biglietto da visita online e reindirizzare le persone a questa pagina in modo che possano mettersi in contatto o visualizzare i link del tuo portfolio. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!