7 tecniche per creare siti Web audaci e colorati con Divi

Usare uno stile di design audace e colorato per il tuo sito web è un ottimo modo per far risaltare il tuo sito web. Ti aiuterà a portare un'atmosfera positiva al tuo sito Web e, sebbene non si adatti a nessun tipo di sito Web, si adatta sicuramente a molti di essi.

In questo post, ti mostreremo 7 diverse tecniche Divi su come creare un web design audace e colorato utilizzando solo le opzioni integrate di Divi. Per prima cosa, esamineremo le diverse tecniche e poi ricreeremo un esempio che corrisponda alla descrizione.

Questo è l'ultimo post della serie di post in cui abbiamo gestito 4 diversi stili di siti Web e come realizzarli utilizzando Divi:

1. Pulito e astratto
2. Minimo
3. Appartamento
4. Audace e colorato

Arriviamo ad esso!

Iscriviti al nostro canale Youtube

1. "Trasforma" le righe in sezioni con colonne

La prima tecnica che puoi utilizzare per creare un web design audace e colorato è trasformare le righe in sezioni. Rimuovendo tutto il riempimento predefinito tra una sezione e una riga, non lascerai alcuna differenza apparente tra i due. Questo, in combinazione con la rimozione della larghezza della grondaia, consente di avere due colonne che vengono premute insieme.

2. Sfumature + Texture di sfondo

L'utilizzo di sfondi sfumati sul tuo sito Web può fornire risultati sorprendenti. Ma ciò che ti aiuta a potenziare ancora di più questi colori è combinarli con uno sfondo strutturato. Per mantenere il saldo, utilizzare questa combinazione solo per una colonna. Mantieni la seconda colonna pulita e leggera per un tocco moderno.

3. Colori sfumati semitrasparenti + divisori sotto la sezione

Dopo aver trasformato una riga in una sezione, puoi aggiungere anche divisori di sezione allo sfondo della colonna. Per assicurarti che i divisori siano visibili, senza sovrapporre il contenuto, usa colori sfumati leggermente trasparenti per la tua colonna.

4. Sovrapposizione di colonne orizzontali di moduli

Vedete spesso che i siti web utilizzano la sovrapposizione verticale. La sovrapposizione orizzontale, invece, è meno frequente anche se può portare a risultati assolutamente sbalorditivi. Per ottenere questo tipo di risultato, è importante sapere che gli elementi nella colonna di destra hanno un vantaggio gerarchico rispetto agli elementi nella colonna di sinistra. Non puoi ottenere lo stesso risultato se metti i tuoi elementi nella colonna di sinistra.

5. Copia divisa per un allineamento perfetto

Non c'è niente di più soddisfacente che avere un allineamento perfetto. È uno dei principi di progettazione primari che distingue un buon design da un cattivo design. Per assicurarti che questo allineamento sia perfetto quando si sovrappongono due colonne, prova a suddividere la tua copia in diversi moduli di testo. Ciò ti consentirà di creare un allineamento perfetto facendo corrispondere il margine sinistro negativo a quella parola o frase in particolare.

6. Combina i colori del testo nero e semitrasparente

Per aggiungere l'aspetto in grassetto al tuo sito web, usa una dimensione del carattere grande per la copia che stai condividendo insieme a un peso del carattere del testo ultra grassetto. E per bilanciare l'audacia, puoi passare dall'uso di un colore di testo nero a uno semitrasparente. Questo ti aiuterà a creare abbastanza profondità e variazioni sul tuo sito web.

7. Evita l'ombra del riquadro in alto o in basso per unire le sezioni

Puoi facilmente unire due sezioni della tua pagina giocando con le opzioni dell'ombra della scatola. Per prima cosa, usa un'ombra molto sottile. Ciò significa utilizzare una forza di sfocatura sufficiente, una forza di diffusione negativa e un colore dell'ombra molto chiaro. Una volta creata la tua sottile ombra a scatola, gioca con la posizione verticale. Per la prima sezione della pagina, assicurati di spostare la posizione verticale fino a quando l'ombra del riquadro non appare nella parte inferiore della sezione. Lo stesso vale per l'ultima sezione, ma assicurati che non appaia in alto.

Anteprima

Ora che abbiamo esaminato tutte le diverse tecniche, è il momento di mettere in pratica le cose. Ricreeremo il seguente design:

Iniziamo a creare: aggiungi la sezione standard n. 1

Impostazioni della sezione

Divisore superiore

Aggiungi una nuova pagina con una sezione standard e apri subito le impostazioni della sezione. La prima cosa di cui avremo bisogno è un divisore superiore:

• Stile divisore: trova nell'elenco
• Colore divisore: rgba (0,0,0,0.13)
• Altezza divisore: 900 px
• Capovolgimento divisore: verticale
• Disposizione dei divisori: sotto il contenuto della sezione

Divisore inferiore

Continua aggiungendo anche un divisore inferiore simile.

• Stile divisore: trova nell'elenco
• Colore divisore: rgba (0,0,0,0.13)
• Altezza divisore: 900 px
• Disposizione dei divisori: sotto il contenuto della sezione

Spaziatura

Quindi, dai alla sezione un margine e rimuovi il riempimento predefinito.

• Margine superiore e inferiore: 50 px
• Margine sinistro e destro: 50 px
• Imbottitura superiore e inferiore: 0px
• Imbottitura sinistra e destra: 0px

Angoli arrotondati

Quindi, apri le impostazioni del bordo e aggiungi alcuni angoli arrotondati.

• In alto a sinistra: 20px
• In alto a destra: 20px

Scatola ombra

Stiamo usando un'ombra sottile nella parte superiore della nostra sezione apportando le seguenti modifiche:

• Posizione verticale dell'ombra del riquadro: -23 px
• Forza sfocatura ombra scatola: 37 px
• Forza di diffusione dell'ombra della scatola: -29 px
• Colore ombra: rgba(0,0,0,0.22)
• Posizione ombra scatola: Ombra esterna

Aggiungi nuova riga

Struttura della colonna

Non che abbiamo finito di modificare le impostazioni della sezione, possiamo continuare aggiungendo una riga con due colonne.

Sfondo sfumato colonna 1

Senza aggiungere ancora alcun modulo, apriremo le impostazioni della riga. La prima cosa che dovremo fare è aggiungere uno sfondo sfumato alla nostra prima colonna.

• Colore 1: RGB (255,191,0,0,76)
• Colore 2: rgba(153,0,255,0.87)

Immagine di sfondo della trama della colonna 1

Combineremo questo sfondo sfumato con uno sfondo strutturato. L'immagine che sto usando fa parte del Meetup Layout Pack di Divi. Salva la seguente immagine sul desktop facendo clic con il tasto destro e salvandola (è un file png con trame bianche, non sarai in grado di vedere come appare finché non lo apri sul tuo computer e/o lo usi sul tuo sito web ):

Dopo aver caricato l'immagine nella tua libreria multimediale, assicurati di selezionare "adatta" anche come dimensione dell'immagine di sfondo della colonna 1.

Colore di sfondo della colonna 2

Quindi, dai alla tua seconda colonna il colore di sfondo "# F7F7F7".

Dimensionamento

"Trasformeremo" la nostra riga in una sezione facendola occupare l'intera larghezza della sezione.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

Oltre a far sì che la riga occupi l'intera larghezza della sezione, dovremo anche rimuovere l'imbottitura superiore e inferiore della nostra sezione.

• Imbottitura superiore e inferiore: 0px

Aggiungi modulo divisore alla colonna 1

Nascondi divisore

Iniziamo ad aggiungere i moduli! La prima cosa di cui avremo bisogno è un modulo divisore nella prima colonna. Utilizziamo questo modulo solo per creare lo spazio di cui abbiamo bisogno nella prima colonna. In realtà non vogliamo che si presenti. Una volta aggiunto il modulo, assicurati di disabilitare l'opzione "Mostra divisore".

Spaziatura

Vai alle impostazioni Spaziatura successiva e aggiungi la seguente imbottitura personalizzata al divisore:

• Imbottitura superiore: 200 px (desktop e tablet), 150 px (telefono)
• Imbottitura inferiore: 200 px (desktop e tablet), 150 px (telefono)

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi copia

Ora possiamo passare alla seconda colonna. Qui, lasceremo cadere i nostri tre diversi moduli di testo e li faremo sovrapporre a entrambe le colonne. Se vuoi che un modulo si sovrapponga a due o più colonne, dovrai sempre posizionarlo nella colonna a destra. È proprio così che funziona la struttura gerarchica. Aggiungi il tuo primo modulo di testo e aggiungi qualche copia.

Impostazioni testo

Successivamente apri le impostazioni del testo e applica le seguenti modifiche:

• Peso del carattere del testo: Ultra grassetto
• Stile del carattere del testo: maiuscolo
• Colore del testo: #000000
• Dimensione del testo: 250 px (desktop), 200 px (tablet), 100 px (telefono)
• Altezza riga di testo: 0,75 em

Spaziatura

Avremo anche bisogno di un po' di margine. Il margine sinistro negativo che stiamo usando corrisponde alla copia che abbiamo scelto. Se vuoi farlo funzionare anche con altro testo, dovrai giocare con questo valore. Modificalo finché non vedi l'inizio di un carattere allineato con la transizione delle colonne.

• Margine superiore: 200 px (desktop), -250 px (tablet), -120 px (telefono)
• Margine sinistro: -279px (desktop), 5% (tablet e telefono)

Clona modulo di testo due volte

Clona #1

Cambia testo

Abbiamo creato il nostro primo modulo di testo e per risparmiare un po' di tempo, lo cloneremo due volte e apporteremo alcune modifiche. La prima cosa che devi cambiare riguardo al secondo modulo di testo è la copia.

Cambia spaziatura

La copia che stiamo usando qui è diversa, quindi ciò significa che dovremo cambiare il margine sinistro. Nota come utilizziamo anche i numeri decimali per allineare perfettamente il modulo di testo. Sbarazzati anche del margine superiore.

• Margine sinistro: -360.7px (desktop), 5% (tablet e telefono)

Clona #2

Cambia testo

Modifica anche la copia del tuo terzo modulo di testo.

Cambia il colore del testo

E per far risaltare ancora di più il design, cambieremo il colore del testo di questo modulo in 'rgba(0,0,0,0.19)'.

Cambia spaziatura

Stiamo rimuovendo il margine superiore per questo modulo e aggiungendo invece un margine inferiore. Anche il margine sinistro negativo è diverso.

• Margine inferiore: 200 px
• Margine sinistro: -410 px (desktop), 5% (tablet e telefono)

Aggiungi la sezione standard #2

Impostazioni della sezione

Spaziatura

Abbiamo finito con la prima sezione, è ora di passare alla successiva! Dopo aver aggiunto una nuova sezione standard, apri le impostazioni Spaziatura e apporta le seguenti modifiche:

• Margine superiore e inferiore: 50 px
• Margine sinistro e destro: 50 px
• Imbottitura superiore e inferiore: 0px
• Imbottitura sinistra e destra: 0px

Angoli arrotondati

Continua aggiungendo alcuni angoli arrotondati in basso:

• In basso a sinistra: 20 px
• In basso a destra: 20 px

Scatola ombra

Aggiungi anche un'ombra scatola nella parte inferiore della sezione.

• Posizione verticale dell'ombra del riquadro: 47 px
• Forza sfocatura ombra scatola: 37 px
• Forza di diffusione dell'ombra della scatola: -29 px
• Colore ombra: rgba(0,0,0,0.22)
• Posizione ombra scatola: Ombra esterna

Aggiungi nuova riga

Struttura della colonna

Quindi, aggiungi una riga con tre colonne alla tua nuova sezione.

Dimensionamento

Stiamo "trasformando" anche questa riga in una sezione:

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì

Spaziatura

E rimuoveremo l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore e inferiore: 0px

Aggiungi il modulo Blurb n. 1 alla colonna 1

Scegli icona

In totale, avremo bisogno di tre moduli Blurb. Uno per ogni colonna. Inizieremo aggiungendone uno nella prima colonna e, dopo aver finito, lo cloneremo e lo collocheremo nelle colonne rimanenti. Questo ci aiuterà a risparmiare tempo. Dopo aver aggiunto il contenuto al modulo Blurb, seleziona un'icona nelle impostazioni Immagine e icona.

Sfondo sfumato

Faremo sembrare che l'icona si sovrapponga alla parte superiore del modulo Blurb utilizzando uno sfondo sfumato per esso:

• Colore 1: RGB (255,255,255,0)
• Colore 2: #A21DF9
• Posizione di partenza: 20%
• Posizione finale: 20%

Immagine di sfondo trama

Stiamo combinando lo sfondo sfumato con lo stesso sfondo strutturato che abbiamo usato nella sezione precedente.

Impostazioni icona

Modifica le impostazioni dell'icona in seguito:

• Colore icona: #000000
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 85 px

Impostazioni testo

Continua modificando l'impostazione del testo.

• Orientamento del testo: al centro
• Colore del testo: chiaro

Impostazioni del testo del titolo

Quindi, utilizzeremo le seguenti impostazioni per definire lo stile del nostro titolo blurb:

• Peso del carattere del titolo: Ultra grassetto
• Stile del carattere del testo: maiuscolo
• Dimensione del testo del titolo: 46px

Impostazioni del corpo del testo

E le seguenti impostazioni per il corpo del testo:

• Peso del carattere del corpo: leggero
• Dimensione del testo del corpo: 18px

Spaziatura

Ultimo ma non meno importante, daremo al nostro modulo Blurb un po' di spazio per respirare aggiungendo un'imbottitura personalizzata:

• Imbottitura superiore: 50px
• Imbottitura inferiore: 100 px
• Imbottitura sinistra e destra: 50 px

Clona modulo Blurb due volte e posizionalo nelle colonne rimanenti

Clona #1

Cambia icona

Quando hai finito di modificare il modulo Blurb, clonalo due volte. Dopo averlo fatto, posiziona i duplicati nelle colonne rimanenti. Quindi, apri il Modulo Blurb nella seconda colonna e cambia l'icona che viene utilizzata.

Cambia sfumatura di sfondo

Continua cambiando il secondo colore di sfondo sfumato in '# D47A9A'.

Clona #2

Cambia icona

Fai la stessa cosa per il modulo Blurb nell'ultima colonna.

Cambia sfumatura di sfondo

Per questo modulo, usiamo invece '#F3BF3E' come secondo colore di sfondo sfumato.

Anteprima

Se hai seguito ciascuno dei passaggi precedenti, dovresti aver ottenuto il seguente risultato su schermi di dimensioni diverse:

Pensieri finali

In questo post, ti abbiamo mostrato come creare siti Web audaci e colorati utilizzando solo le opzioni integrate di Divi. Innanzitutto, abbiamo esaminato alcune tecniche Divi che puoi affrontare e, successivamente, abbiamo ricreato da zero un esempio di corrispondenza. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!