Configurazione di una guida di stile ai preset globali per il tuo prossimo sito Web Divi (download GRATUITO del framework!)

Ehi Divi Nation! Grazie per esserti unito a noi per la prossima puntata della nostra Divi Design Initiative settimanale in cui ogni settimana regaliamo nuovissimi omaggi. Oggi condividiamo un framework GRATUITO per la guida allo stile dei preset globali che puoi utilizzare per qualsiasi sito web che stai pianificando di creare. I preset globali di Divi ti aiutano ad accelerare il tuo processo di web design in pochissimo tempo, quindi diamo un'occhiata!

Scarica il framework della guida allo stile dei preset globali

Per mettere le mani sul framework della guida di stile dei preset globali gratuiti, dovrai prima scaricarlo 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!

Configurazione di una guida allo stile dei preset globali per il tuo prossimo sito Web Divi

Che cos'è una guida allo stile dei preset globali?

Una guida allo stile dei preset globali è una panoramica degli elementi più importanti che dovrai applicare allo stile per l'utilizzo all'interno del tuo sito web Divi. Consiste di tre parti:

1. Tavolozza dei colori

2. Stili di testo

3. Stili del modulo

Sebbene i preset globali vadano oltre i semplici moduli (colonne, righe e sezioni possono contenere anche preset globali), ci stiamo concentrando su alcuni degli elementi più uniformi nel tuo sito Web, ovvero le tre parti menzionate sopra. L'idea è che modellerai tutti gli elementi in un unico posto e non appena sarai soddisfatto dello stile di design che hai applicato, puoi trasformare i diversi stili di testo e stili di modulo in predefiniti globali.

La tavolozza dei colori è qualcosa che potrai aggiungere alle tue opzioni del tema Divi, ma ne parleremo più avanti nel post. Sarai in grado di mantenere la guida di stile in una finestra separata durante la progettazione di pagine e modelli. Questo ti aiuterà a copiare e incollare le impostazioni dello sfondo sfumato mentre procedi, invece di dover applicare manualmente le impostazioni una per una.

Quando creare/usare una guida allo stile dei preset globali

Preferibilmente, creerai e inizierai a utilizzare una guida di stile dei preset globali prima di creare le tue pagine, modelli, ecc. Il motivo è che sarai in grado di accedere immediatamente ai tuoi preset globali mentre costruisci i tuoi progetti, invece di dover andare torna al tuo design, ripristina gli stili in linea a livello di elemento e applica un preset globale.

Avviare il processo di creazione di Divi dopo aver creato una guida di stile ti aiuta a evitare di dover apportare modifiche manualmente ai moduli all'interno delle loro impostazioni individuali. Se stai lavorando con i preset globali dall'inizio, sarai in grado di modificarli in un'unica posizione e osservare le modifiche che si svolgono in tutto il tuo sito web contemporaneamente.

La guida gratuita allo stile del framework dei preset globali che condividiamo in questo post ti aiuterà a entrare direttamente nella fase di ispirazione del design. Invece di dover creare tu stesso una guida di stile, puoi concentrarti sulla creazione di uno stile di design con armonia ed equilibrio. Non appena hai finito di modellare i tuoi elementi dell'interfaccia utente all'interno della guida di stile, sarai in grado di trasformarli in predefiniti globali e usarli mentre crei le tue pagine e i tuoi modelli.

Come utilizzare la guida di stile dei preset globali

Scarica e carica il layout del framework nella tua libreria Divi

Inizia scaricando il layout del framework della guida di stile dei preset globali gratuiti in questo post. Quindi, dopo aver decompresso la cartella di download, vai alla tua libreria Divi all'interno del backend del tuo sito Web e fai clic su "Importa/Esporta" in alto. Una volta lì, passa alla scheda "Importa" e carica il layout del framework della guida di stile che puoi trovare nella cartella di download.

Crea una nuova bozza di pagina per il layout e carica il layout del framework

Una volta che il tuo layout è stato caricato, puoi aprirlo all'interno della libreria stessa o creare una bozza di pagina separata per esso. Per mantenere l'esperienza della pagina in corso, opteremo per la seconda opzione. Aggiungi una nuova pagina e individua il layout all'interno di "I tuoi layout salvati".

Imposta la tavolozza dei colori

Una volta all'interno della struttura della guida di stile, sarai in grado di impostare la tavolozza dei colori di tua scelta. Il numero di colori che aggiungi dipende interamente da te. Per visualizzare visivamente i colori all'interno della nostra guida di stile, utilizziamo le impostazioni di sfondo di un modulo di testo. Apri quel modulo di testo, vai alle sue impostazioni di sfondo e modifica il colore di sfondo. Copia il codice esadecimale che stai utilizzando e posizionalo all'interno del modulo di testo sottostante in modo da avere sempre una versione scritta di ciascun codice colore esadecimale anche all'interno della guida di stile dei preset globali.

Crea una tavolozza di colori personalizzata con codici colore all'interno del tuo Divi Theme Builder

Vai a Opzioni del tema Divi

I codici esadecimali nella guida di stile possono essere utilizzati per creare una tavolozza di colori personalizzata a cui potrai accedere rapidamente mentre costruisci all'interno di Divi. Ti consigliamo di farlo prima di applicare lo stile al testo e ai moduli all'interno del framework della guida di stile. Per aggiungere la tavolozza dei colori, vai alle Opzioni del tema Divi.

Personalizza la tavolozza dei colori usando i codici esadecimali nella guida di stile

Aggiungi i codici colore esadecimali di tua scelta, che puoi trovare nella guida di stile, alla tavolozza dei colori predefinita.

Aggiungi stili di testo

Successivamente, sarai in grado di modellare i diversi tipi di testo all'interno della struttura della guida di stile. Quante alternative fornisci per ogni tipo di testo dipende interamente da te, solo perché c'è un'opzione "primaria", "secondaria" e "terziaria", non significa che dovresti avere 3 varianti per ogni tipo di testo. Sentiti libero di rimuovere o aggiungere più possibilità.

Moduli di stile

Nell'ultima parte del framework della guida di stile, abbiamo elencato tutti i moduli Divi più utilizzati. Qui puoi iniziare a modificare i moduli in base allo stile che hai in mente. Il fatto che tutti i moduli siano così alla portata l'uno dell'altro ti aiuterà a ottenere una migliore panoramica dello stile di design e del suo equilibrio. Per ogni modulo popolare, abbiamo fornito anche un'opzione "primario", "secondario" e "terziario". Ma, ancora una volta, sentiti libero di determinare tu stesso quante varianti di ciascun modulo usi durante la tua pagina e il processo di creazione del modello.

Trasforma i moduli in preset globali (uno per uno e con il nome scelto)

Una volta che tutti gli stili di testo e gli stili dei moduli sono stati completati, non dimenticare anche l'aspetto reattivo, è il momento di trasformare i moduli in predefiniti globali. Per fare ciò, puoi aprire ogni modulo con stile su un livello individuale e creare un nuovo preset dagli stili correnti nella parte superiore del modale. Puoi scegliere di rendere il tuo modulo primario anche quello predefinito. Una volta creato il preset globale, assicurati che quel preset specifico sia selezionato per il modulo, questo ti aiuterà a importare ed esportare i preset globali utilizzando il layout della guida di stile.

Prova anche a trovare un modo semplificato di nominare i tuoi moduli, così potrai facilmente consultare la guida di stile nel caso fossi confuso. Un buon approccio per nominare tre varianti di uno stile Modulo Blurb potrebbe essere:

• Pulsante principale
• Pulsante secondario
• Pulsante terziario

E puoi ripetere questo approccio per ogni stile di testo o modulo che trasformi in un preset globale.

Moduli nidificati: trasforma anche gli elementi nidificati in preset globali

Per i moduli nidificati, come il modulo Segui social media, dovrai aprire l'elemento all'interno del modulo e salvare anche quell'elemento come nuovo predefinito.

Esporta e importa il layout della guida di stile (con preimpostazioni) su un sito Web diverso

Non appena hai trasformato tutti i moduli in predefiniti globali e selezionato quei predefiniti all'interno delle impostazioni del modulo, sarai in grado di esportare il layout con tutti i predefiniti al suo interno. Quindi, non appena carichi il layout su un altro sito Web, avrai la possibilità di importare i preset insieme al layout, il che a sua volta ti aiuta a risparmiare tempo. Salva il layout della guida di stile completato, inclusi i preset, nella tua libreria Divi. Quindi, esporta il file.

Vai al sito Web in cui desideri caricare la nuova guida di stile, vai alla libreria Divi e carica il file JSON con i preset per iniziare con il processo di creazione di Divi!

Suggerimento: mantieni la guida di stile in una scheda separata per copiare/incollare stili specifici (gradienti/ombra riquadro/bordo/...)

Ultimo ma non meno importante, è un'ottima idea tenere sempre la guida di stile in una scheda separata. L'utilizzo dell'opzione di copia-incolla integrata e su più pagine di Divi ti aiuterà a trasferire rapidamente gli stili, come gli sfondi sfumati, da un elemento all'altro!

Nuove guide di stile preimpostate globali ogni settimana!

Ci auguriamo che questo framework di guida allo stile dei preset globali ti piaccia. Puoi utilizzare questo framework per qualsiasi tipo di sito web che crei. Non vediamo l'ora di sentire le vostre opinioni nella sezione commenti qui sotto. Assicurati di ricontrollare la prossima settimana per altri omaggi!