Costruire la tua struttura di progettazione con Divi 5

Se hai mai lavorato con framework CSS come Bootstrap, ottieni perché è così popolare. Un framework di design ti offre una base riutilizzabile per progettare layout rapidi e coerenti, quindi non stai costruendo da zero ogni volta che modelli una pagina.

Sebbene la maggior parte dei framework si affidano a lezioni pre-scritte, si aspettano ancora che tu scriva CSS personalizzati per una personalizzazione più profonda, il che li rende difficili per i non codificanti. Ecco dove Divi 5 differisce.

Adesso un approccio visivo, sostituendo CSS con strumenti come variabili di design, preset di gruppi di opzioni e preset di elementi. Ottieni tutto il potere di un framework, senza scrivere una singola riga di CSS. In questo post, ti mostreremo come creare visivamente un framework di progettazione senza codice utilizzando Divi 5.

Divi 5 è pronto per essere utilizzato su nuovi siti Web , ma non raccomandiamo ancora di migrare quelli esistenti.

Come Divi 5 ti consente di creare un framework di design senza codice

Divi 5 viene ricostruito da zero per rendere il web design avanzato accessibile a tutti. Indipendentemente dal tuo livello di codifica, ti consente di costruire visivamente layout moderni e personalizzati. Costruire un quadro di progettazione non è diverso.

Iscriviti al nostro canale YouTube

Le variabili di progettazione consentono di definire i valori di progettazione globali

Le variabili di progettazione consentono di definire valori ripetibili come i colori, i caratteri, la spaziatura e altro ancora in un posto centrale. Una volta salvato, puoi riutilizzare questi valori in tutto il tuo sito Web per dargli un aspetto visivo coerente e di marca.

All'interno del Visual Builder, trova il gestore variabile per definire e archiviare diversi tipi variabili (numeri, testo, immagini, collegamenti, colori e caratteri) in modo organizzato.

Le variabili di progettazione sono come una versione senza codice delle proprietà personalizzate CSS, ma hanno molta più flessibilità. Ad esempio, generalmente si dichiara variabili CSS come : root {–Primary-color: #1A73E8; } , ma con le variabili di design di Divi, salvi il colore solo come colore primario .

Vedrai la loro vera potenza mentre effettuano aggiornamenti. Non è necessario passare attraverso il tuo foglio di stile; Basta modificare il valore variabile salvato una volta in variabile manager per aggiornare ogni istanza in tutto il sito Web. Ti permettono di visualizzare rapidamente le tue idee senza caccia attraverso diverse regole di stile.

Inoltre, è possibile definire elementi di contenuto comunemente ripetuti come indirizzo, e -mail, collegamenti, motivi di fondo, ecc., Come variabili di contenuto. Non devi inserirli manualmente più volte; Un clic e questi elementi vengono visualizzati sulla tua pagina. Ad esempio, salva e usa l'indirizzo dell'azienda come variabile di testo.

Per applicare una variabile di progettazione, passa l'opzione e cerca l'icona del contenuto dinamico.

Impara tutto sulle variabili di design

Salva combinazioni di stile comune con preset di gruppi di opzioni

I preset del gruppo di opzioni consentono di salvare e riutilizzare le impostazioni di design usate frequentemente, come spaziatura, bordi, ombre, stili di testo e sfondi, senza doverle ricostruirle ogni volta. Si concentrano su un gruppo specifico di opzioni all'interno di un modulo, in modo da poter modellare solo quella parte e applicarlo ovunque con un clic.

Ad esempio, supponiamo che tu utilizzi sempre lo stesso margine di imbottitura 40px e 10px su tutte le sezioni di testimonianze. Salva quelle impostazioni come preimpostazione di spaziatura . Quando si aggiunge un nuovo modulo di testimonianze, selezionare il preimpostazione e è fatto.

Ciò che rende potenti i preimpostazioni del gruppo di opzioni è che puoi mescolarli con variabili di design . Se il tuo colore primario viene salvato come variabile, puoi usarlo all'interno di un preimpostazione di sfondo, quindi se il colore del marchio cambia mai, l'intero preimpostazione si aggiorna con esso. Gli sfondi su tutte le pagine cambiano con un solo clic.

I preimpostazioni del gruppo di opzioni non sovrascrivono l'intero modulo, si applicano solo al gruppo di stile che scegli. Ma puoi sempre sovrascrivere i preset con impostazioni specifiche del modulo per personalizzare moduli specifici. Ciò ti consente di mantenere unici il layout e il contenuto, garantendo comunque uno stile visivo coerente sul tuo sito.

Impara tutto sui preset del gruppo di opzioni

Salva elementi completamente progettati con preset di elementi

Se sei stato un utente Divi, hai già familiarità con i preset di elementi. Ti permettono di salvare tutti gli stili personalizzati di un modulo, inclusi testo, spaziatura, colori, icone, effetti per il mouse, come preimpostazione dell'elemento, in modo da poterlo riutilizzare ovunque senza costruire da zero. Fondamentalmente stai creando una versione pronta per i tuoi moduli più usati.

Ecco un caso d'uso rapido: personalizzare e salvare un preimpostazione del blurb, quindi applicarlo ad altre sfocature non mandate per modellarle rapidamente.

Come questi strumenti riflettono nell'HTML del frontend

Divi 5 può sembrare uno strumento a non code, ma in realtà sta scrivendo un codice pulito e strutturato in background. Quando si regolano le impostazioni visivamente, come scegliere una preimpostazione di spaziatura o applicare i colori del tuo marchio dal gestore variabile, non stai solo accumulando un modulo. Stai anche scrivendo il codice.

Ogni decisione di progettazione che prendi viene tradotta in una corretta uscita del frontend. Divi gestisce la parte di codifica mentre ti concentri sul design.

Per mostrarti quanto sia potente, confronteremo il flusso di lavoro visivo in Divi 5 con un approccio manuale che utilizza un framework CSS tradizionale come Bootstrap.

Primo bootstrap:

Costruire manualmente un sistema di progettazione con codice in bootstrap

Per il nostro esempio, ho usato una configurazione di WordPress con il tema di sottovalutazione installato.

In un tipico flusso di lavoro basato sul codice, inizieresti definendo i valori di progettazione globale come variabili CSS. Ecco i nostri:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Diciamo che stiamo costruendo un semplice layout della pagina di contatto con un modulo di contatto e un pulsante in stile personalizzato. Per mantenere tutto coerente e riutilizzabile, useremo un mix di lezioni di utilità di Bootstrap e le nostre variabili CSS.

Innanzitutto, aggiungiamo codice personalizzato per un modulo di contatto utilizzando le classi di moduli integrate di Bootstrap per gestire il layout e lo stile di input.

Quindi aggiungiamo il codice per il nostro pulsante in stile. Qui, abbiamo combinato le classi di utilità Bootstrap con le nostre variabili CSS personalizzate per sfondo, raggio di confine e ombra. Questo ci dà pieno controllo sull'aspetto. Se vogliamo apportare modifiche, possiamo aggiornare le nostre variabili.

Come puoi vedere, è fantastico ed efficiente, ma tutto è costruito manualmente. Abbiamo definito le variabili, applicato le classi e scritto l'intero codice tutto da soli. E questo è un semplice layout, immagina di costruire pagine complesse usando questo approccio!

Ora, costruiamo la stessa pagina usando Divi 5 senza codifica.

Ricreare visivamente la stessa pagina con Divi 5

Iniziamo definendo le nostre variabili di progettazione globale che diventano parte del nostro sistema di progettazione a livello di sito. Innanzitutto, vai a Variable Manager> Colori . Quindi, scrivi il codice esadecimale per il colore primario (#e91e63) e salva.

Allo stesso modo, puoi anche salvare le variabili numeriche per il raggio del bordo {6px} e la spaziatura. Successivamente, aggiungo il modulo del modulo di contatto e personalizzo il pulsante di invio al mio stile preferito:

Ora salvo queste impostazioni dei pulsanti come preimpostazione del pulsante per un uso successivo.

Se aggiungo un altro pulsante e seleziono il preimpostazione del pulsante , vedi cosa succede? Viene disegnato automaticamente.

Per applicare un preimpostazione del gruppo di opzioni, librami sull'impostazione e cerca l'icona delle impostazioni .

Inoltre, hai notato come abbiamo applicato più stili personalizzati a un pulsante in un clic senza toccare una singola riga di codice? Questo è ciò che intendiamo quando diciamo che salvi visivamente le tue preferenze di design. È il tipo di flusso di lavoro per cui è costruito Divi 5. È veloce, coerente e completamente visivo.

Ciò che accade dietro le quinte è magico. Divi non sta solo impilando gli stili alla cieca. Ogni variabile di progettazione, preimpostazione e impostazione applicata è organizzata in codice pulito ed efficiente reso sul front -end.

La fonte di pagina della pagina di cui sopra divisa mostra che il colore primario viene salvato nella sezione radice, proprio come le variabili CSS:

E sul frontend, i preimpostazioni del gruppo di opzioni vengono automaticamente salvati e output come CSS pulito mira alle classi appropriate (.et_pb_button, .et_pb_contact_submit).

Entrambe le pagine sembrano uguali, ma il modo in cui sono state costruite e mantenute è completamente diverso.

In Bootstrap, abbiamo beneficiato delle sue lezioni di utilità ma dovevamo ancora scrivere codice. Ma con Divi 5, abbiamo ottenuto lo stesso risultato senza toccare una riga di codice, solo utilizzando le sue potenti funzionalità come variabili di design e preset di gruppi di opzioni.

Ogni modifica è stata applicata a pochi clic, senza alcun rischio di incoerenze, eppure il codice frontend è rimasto pulito. Divi memorizza i tuoi stili in un formato strutturato e riutilizzabile senza aggiungere markup inutili o styling in linea.

Come costruire il tuo framework di progettazione con Divi 5

Divi 5 offre tutti gli strumenti per creare un sistema di progettazione scalabile, ma proprio come nello sviluppo tradizionale, l'ordine in cui si utilizza questi strumenti. Camminiamo attraverso i gradini e, soprattutto, capiamo perché:

1. Definisci le tue variabili di progettazione globale

Prima di progettare una pagina, inizia definendo le tue variabili di design globale. Questi sono i valori fondamentali su cui si baserà l'intero sito, come i tuoi colori, caratteri, dimensioni, unità di spaziatura, ecc. Una volta che hai definito blocchi di costruzione del tuo sito, puoi riutilizzarli ovunque per mantenere tutto coerente, pulito e facile da gestire.

In Divi 5, hai il gestore variabile per crearli e organizzarli.

Ecco come i tipi variabili evidenziati svolgono un ruolo:

• Colori: salva i colori primari, secondari e accenti del tuo marchio in modo da non dover digitare i codici esagonali o abbinare le tonalità. Salva le variabili di colore e applicale con un clic.
• Fonti: definire i caratteri esatti che usi per titoli, testo del corpo o testimonianze. Invece di ri-selezionare Poppins in grassetto ogni volta che crei un H2, salvalo come variabile di carattere . Sarai in grado di riutilizzare facilmente lo stesso stile tra i moduli.
• Numeri: memorizzare i valori di progettazione preferiti, come un raggio del bordo 8px per carte o imbottitura 32px per i moduli di immagine, come variabili numeriche . È inoltre possibile utilizzare le unità avanzate interne variabili per realizzare progetti dinamici.

Una volta impostate le variabili principali, ogni preset e pagina che crei si baserà su di esse. E se la direzione del design cambia in seguito (diciamo, si desidera regolare la spaziatura della base) , devi solo aggiornare la variabile in un unico posto.

Dopo aver definito correttamente le variabili di progettazione, non è necessario cacciare e modificare ogni istanza. Basta modificare il valore una volta nel gestore variabile stesso.

2. Salva contenuto ricorrente a livello globale

Utilizzando Variable Manager , puoi anche salvare valori di contenuto come collegamenti, testo e immagini che spesso si ripetono attraverso il tuo sito. Normalmente copriresti e incolleresti ogni volta questi valori, ma Divi 5 ti consente di definirli una volta e riutilizzarli ovunque.

Ciò è particolarmente utile per salvare i collegamenti dei social media, i dettagli di contatto della tua azienda e altri contenuti ricorrenti che devono essere aggiunti manualmente.

Puoi salvare il contenuto attraverso le restanti tre variabili:

• Testo: diciamo che il tuo indirizzo aziendale appare nel piè di pagina, nella pagina dei contatti e nella sezione Hero della tua homepage. Salvalo come variabile di testo e selezionalo ovunque tu voglia che venga visualizzato l'indirizzo.
• Link: salva gli URL alla pagina Informazioni, alle raccolte di prodotti, ai profili sociali o ai termini e alle condizioni come variabili di collegamento.
• Immagini: se si utilizza il logo del marchio o un'immagine di sfondo su più pagine, salvala come variabile di immagine . Immagina di sostituire le immagini di segnaposto attraverso i modelli in clic!

Divi 5 ti consente di trattare testo, collegamenti e immagini come blocchi riutilizzabili. Queste variabili di contenuto possono sembrare piccole, ma influiscono notevolmente sulla velocità, la precisione e la manutenzione a lungo termine. Risparmia tempo, riduci gli errori e mantieni il tuo sito costantemente aggiornato.

3. Crea e salva gli stili core con preset del gruppo di opzioni

Una volta che le variabili di design sono in atto, il tuo prossimo passo è definire i modelli di styling principale del tuo sito utilizzando i preset del gruppo di opzioni. Salva le impostazioni di design comunemente usate come preset e riutilizzarle attraverso qualsiasi modulo.

Ecco come sfruttare al massimo i preset del gruppo di opzioni:

1. Salva preset per stili comuni

Inizia salvando i preset per le impostazioni che usi più spesso, come il raggio del bordo, i colori di sfondo o la spaziatura. Diciamo che utilizzo sempre l'imbottitura superiore 40px e il margine inferiore 10px per le testimonianze, quindi ho salvato quei valori come preimpostazione di spaziatura.

Posso immediatamente applicare quella spaziatura ai miei testimonianze (e altri moduli se voglio) . Fallo per ogni gruppo di impostazione che riutilizzate costantemente: bordi, ombre della scatola, sfondi a pulsanti, ecc., In modo da poterle riutilizzare quando si costruiscono pagine.

2. Combina le variabili di design con i preset

Quindi, rafforza il framework combinando le variabili di progettazione con i preimpostazioni del gruppo di opzioni. Supponiamo che tu abbia salvato un raggio del bordo 6px come variabile e lo hai utilizzato durante la creazione del gruppo di opzioni preimpostata. Se si modifica la variabile in seguito, i preset si aggiorneranno automaticamente anche sul sito.

Allo stesso modo, è possibile creare una tipografia fluida con un valore di clemp () per il testo reattivo. Salvalo all'interno di un preimpostazione H1 e applicalo costantemente alle intestazioni durante il layout. Questa combinazione di preset e variabili è dove il tuo quadro visivo inizia davvero a diventare modulare, scalabile e facile da mantenere.

È inoltre possibile salvare i preimpostazioni del gruppo di opzioni come impostazioni predefinite , il che significa che gli stili vengono applicati automaticamente anche a nuovi moduli. Applicare le impostazioni predefinite nei preset comuni in modo da non dover nemmeno selezionare un preset ogni volta.

4. Crea preset di elementi

I preset di elementi completano il tuo framework di progettazione. Dopo aver salvato i tuoi stili preferiti come preset, dovresti anche salvare gli stili del modulo come preset di elementi.

Ciò è particolarmente utile per i moduli che usi spesso, come CTA, testimonianze, sfocature e moduli di contatto. Ad esempio, se hai disegnato un pulsante CTA con il colore del tuo marchio, un'ombra morbida e l'imbottitura specifica, puoi salvare l'intero design come preset chiamato Luce primaria. Successivamente, applicalo immediatamente a qualsiasi nuovo pulsante con un clic.

Imposta i preset di elementi come impostazioni predefinite

È inoltre possibile impostare qualsiasi elemento preimpostato come impostazione predefinita, quindi ogni nuovo modulo di quel tipo segue automaticamente gli stili di progettazione salvati. Salvando il pulsante di luce primaria sopra predefinito come predefinito, vedrai il nuovo pulsante che eredita il suo stile:

Le impostazioni predefinite accelerano il flusso di lavoro e puoi comunque sovrascriverli se necessario. Ma nella maggior parte dei casi, avere preset ben definiti riduce il lavoro ripetitivo e rimuove le congetture di progettazione. Con queste tre funzionalità combinate, segui un framework di design basato su preset che rende la costruzione di siti Web completamente senza codice.

Progettazione di nuove pagine in base al framework di progettazione

Ora che ho salvato tutte le mie variabili di progettazione preferite, i preset del gruppo di opzioni e i preset di elementi, testiamo il nostro framework.

Costruire nuove pagine è diventato un'esperienza molto più veloce e più facile. Non ho bisogno di iniziare da zero o di ripristinare manualmente ogni modulo. Tutto ciò di cui ho bisogno è già impostato.

Come puoi vedere, ho applicato più modifiche al design in pochi clic. Sì, ho importato un layout Divi pre-realizzato, ma l'ho personalizzato in pochi secondi con il mio framework salvato in atto.

Invece di selezionare i caratteri, regolare la spaziatura o modificare manualmente i colori, ho semplicemente applicato i miei preset salvati. La progettazione dei pulsanti, le dimensioni del testo, gli stili di sfondo e i bordi delle immagini hanno seguito tutte le impostazioni del framework che ho creato in precedenza.

Applicare manualmente quegli stili a un modulo potrebbe non essere un grosso problema. Ma quando personalizzi un'intera pagina, la differenza è chiara. Puoi notare la facilità e la velocità con cui ho apportato tutte quelle modifiche. Questo è il vero vantaggio della creazione di un framework di progettazione: accelera il flusso di lavoro senza sacrificare la qualità o la coerenza.

La parte migliore arriva mentre si fa aggiornamenti. Se i miei valori globali cambiano mai, devo solo modificare le mie variabili di progettazione salvata tramite il gestore delle variabili. Posso anche modificare il mio gruppo di opzioni e preset di elementi facendo clic sull'icona di piccole impostazioni.

Questo è il potere che Divi 5 ti porta. Ti consente di creare, salvare e personalizzare l'intero framework di design senza toccare una singola riga di codice.

Costruire visivamente il tuo framework di progettazione senza codice

La creazione di un framework di progettazione non è più solo per gli sviluppatori. Con gli strumenti giusti, chiunque può farlo, anche se non hai mai toccato il codice prima. Come hai visto in questo post, tutto ciò che serve sono alcuni passaggi intelligenti per creare il tuo sistema di progettazione. Come? Usando Divi 5.

Divi 5 ti dà gli strumenti per farlo accadere

Divi 5 gestisce la complessità e ti dà il pieno controllo attraverso le sue caratteristiche avanzate. Puoi costruire più velocemente, rimanere coerente e effettuare aggiornamenti globali senza mai lasciare il Visual Builder. Fantastico, vero? Ma questa è solo la punta dell'iceberg e stiamo solo iniziando!

Abbiamo molte altre incredibili funzionalità in fila per il rilascio e non vediamo l'ora che tu li provi. Scarica oggi Alpha pubblica e crea il tuo framework di progettazione senza restrizioni di codifica.

Divi 5 è pronto per essere utilizzato su nuovi siti Web , ma non raccomandiamo ancora di migrare quelli esistenti.