Scarica e usa 6 divisori di moduli GRATUITI per Divi
Pubblicato: 2019-01-07Ormai, ci siamo tutti abituati ai divisori di sezione inclusi in Divi. Nei tutorial precedenti, ti abbiamo anche mostrato come applicare questi divisori di sezione a moduli e righe. Ma se vuoi utilizzare divisori di moduli che sono collegati solo ai moduli e non ad altri elementi di design, questo post è per te. Condivideremo 6 divisori di moduli GRATUITI che puoi utilizzare per qualsiasi tipo di sito Web Divi che crei. Questi divisori di modulo saranno inclusi in un file Illustrator che potrai scaricare più avanti in questo post. Questo tutorial ti aiuterà anche a creare il tuo tipo di divisori di moduli.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata ai 6 diversi divisori di moduli che potrai scaricare e al loro aspetto su schermi di diverse dimensioni.
Desktop
Telefono
Scarica i divisori del modulo GRATUITAMENTE
Per mettere le mani sui divisori dei moduli, dovrai prima scaricarli 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ì e venerdì! 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!
Iscriviti al nostro canale Youtube
Cambia i colori dei divisori in Illustrator
Apri file Illustrator nella cartella scaricata
Nella prima parte di questo tutorial, prepareremo i divisori di modulo di cui abbiamo bisogno. Nella cartella di download, puoi trovare i divisori dei moduli per una tavolozza di colori specifica. Tuttavia, se desideri utilizzare un'altra tavolozza di colori, dovrai creare i divisori dei moduli necessari utilizzando il file Illustrator che puoi trovare nella cartella di download.
Scegli lo stile del divisore del modulo, sblocca il livello e abilita la visibilità
Una volta aperto il file Illustrator, vai avanti e seleziona il divisore di tua scelta nella scheda dei livelli. Sblocca il livello e abilita l'opzione di visibilità in modo da poter iniziare subito.
Fare clic su Divisore modulo e cambiare colore
Ora, a seconda di quanti moduli vuoi creare un divisore, il numero di divisori di modulo di cui hai bisogno può variare. Per ricreare l'esempio che ti abbiamo mostrato all'inizio del post, ad esempio, avremo bisogno del divisore del modulo in quattro colori diversi. Inizia con il primo cambiando il colore del divisore in bianco.
- Colore divisore: #ffffff
Esporta divisore modulo PNG per Web
Dopo aver modificato il colore, puoi continuare salvando il modulo immagine come file immagine PNG per il web.
Ripeti i passaggi per ogni colore necessario (x4)
Come accennato in precedenza, avrai bisogno di vari divisori di moduli. Ripeti i passaggi precedenti per ciascuno dei colori.
- Colore 1: #ffffff
- Colore 2: #2759f6
- Colore 3: #97adf4
- Colore 4: #b2ceff
Crea Divi Design
Anteprima backend
Dopo aver salvato tutti i divisori di moduli, è ora di passare a Divi! Il risultato finale che stiamo creando sarà simile a questo sul backend:
Aggiungi nuova sezione
Aggiungi una nuova pagina o aprine una esistente e aggiungi una sezione normale.
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.
- Rendi questa riga a larghezza intera: Sì
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Aggiungi modulo immagine alla colonna 1
Carica divisore modulo bianco
Il primo modulo di cui avremo bisogno, nella colonna 1, è un modulo immagine. Carica il primo divisore di modulo che puoi trovare nella cartella di download o scegli quello che hai modificato nella tua tavolozza di colori.
Colore di sfondo
Quindi, aggiungi un colore di sfondo al modulo immagine. Questo colore deve corrispondere al colore di sfondo di qualsiasi modulo successivo.
- Colore di sfondo: #2759f6
Dimensionamento
Quindi, vai alle impostazioni di dimensionamento e abilita l'opzione "Forza larghezza intera".
- Forza intera larghezza: Sì
Aggiungi modulo Blurb alla colonna 2
Aggiungi contenuto
Il secondo modulo di cui abbiamo bisogno nella colonna 1 è un modulo Blurb. Inizia aggiungendo alcuni contenuti a tua scelta.
Seleziona icona
Quindi, seleziona un'icona a tua scelta.
Colore di sfondo
Continua aggiungendo lo stesso colore di sfondo che hai usato per il modulo immagine divisore modulo.
- Colore di sfondo: #2759f6
Impostazioni icona
Quindi, vai alle impostazioni dell'icona e apporta alcune modifiche.
- Colore icona: #ffffff
- Posizionamento immagine/icona: in alto
- Usa dimensione carattere icona: Sì
- Dimensione carattere icona: 50 px
Impostazioni testo
Modifica anche le impostazioni del testo.
- Orientamento del testo: al centro
- Colore del testo: chiaro
Impostazioni del testo del titolo
Modifica anche l'aspetto del testo del titolo.
- Peso del carattere del titolo: Ultra grassetto
- Stile carattere del titolo: maiuscolo
Spaziatura
E crea un po' di spazio per il modulo utilizzando il riempimento personalizzato.
- Imbottitura superiore: 50px
- Imbottitura inferiore: 50 px
- Imbottitura sinistra: 50 px
- Imbottitura destra: 50px
Clona modulo immagine 3 volte e modulo Blurb due volte
Una volta che hai finito di modificare il primo Modulo Immagine (contenente il divisore del modulo) e il Modulo Blurb, puoi andare avanti e clonare il Modulo Immagine tre volte e il Modulo Blurb due volte. Questo darà il seguente risultato nel backend:
Posiziona i duplicati nell'ordine corretto
Modifica l'ordine dei duplicati per assicurarti di iniziare con un modulo immagine seguito da un modulo Blurb, come mostrato di seguito:
Cambia i colori di sfondo dei duplicati del modulo Blurb
Quindi, cambia i colori di sfondo dei moduli Blurb.
- Modulo Blurb #2: #97adf4
- Modulo Blurb n. 3: #b2ceff
Cambia divisore modulo nel modulo immagine
Apri il primo modulo immagine duplicato e carica il secondo divisore del modulo che hai creato (oppure scegline uno che puoi trovare nella cartella di download).
Cambia il colore di sfondo del modulo dell'immagine del divisore del modulo (corrisponde al colore di sfondo del modulo Blurb successivo)
Dopo aver caricato il nuovo divisore del modulo, dovrai cambiare anche il colore di sfondo di quel modulo immagine. Assicurati di abbinare questo colore al colore di sfondo del modulo Blurb che verrà dopo.
- Divisore modulo n. 2: #2759f6
Ripetere i passaggi per i due moduli divisori rimanenti
Ripeti i passaggi precedenti per i due divisori di modulo rimanenti nella colonna e il gioco è fatto!
- Divisore modulo n. 3 Colore di sfondo: # 97adf4
- Divisore modulo #4 Colore sfondo: #b2ceff
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata ai 6 diversi divisori di moduli che sei riuscito a scaricare all'inizio di questo post!
Desktop
Telefono
Pensieri finali
In questo post, abbiamo condiviso 6 divisori di moduli gratuiti che puoi utilizzare per qualsiasi tipo di sito web che stai costruendo. Questi divisori di moduli possono aiutarti a creare un design più giocoso e creare moduli unici e divertenti. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!