Variabili di progettazione ACF vs Divi: quando usare cosa

Con l'ultima versione di Alpha di Divi 5, le variabili di progettazione sono entrate nell'ecosistema Divi come nuovo approccio alla gestione dei valori di progettazione e contenuto sui tuoi siti Web. Ciò ha entusiasmato i nostri utenti, in particolare quelli che hanno fatto affidamento su Avanced Custom Fields (ACF) per anni. Dovresti rimanere con ACF o passare alle variabili di Divi? O puoi usare entrambi contemporaneamente?

Questo post spiega la differenza e quando dovresti usare cosa. Ci arriviamo!

Divi 5 è pronto per essere utilizzato per le build del nuovo sito Web.

Quali sono le variabili di progettazione Divi?

Quando si costruisce un sito Web, riutilizzerai spesso le stesse informazioni su molte pagine, dai colori agli stili di carattere, dai dettagli di contatto e altro ancora. Le variabili di progettazione ti aiutano a gestire quegli elementi condivisi da un luogo centrale. A differenza dei campi ACF standard, le variabili di progettazione non sono legate al contenuto post-specifico, agiscono come valori di progettazione e contenuto globali, non campi di contenuto dinamici.

Invece di scavare attraverso ogni pagina per effettuare un aggiornamento minore, come la modifica di un numero di telefono o la regolazione di un colore di sfondo, si aggiorna una variabile una volta e tale cambiamento fluisce in tutto il sito automaticamente.

Vuoi cambiare i colori del tuo marchio per una promozione stagionale? Modificare una singola variabile. Hai bisogno di aggiornare il testo del piè di pagina o un logo? Una modifica aggiorna ogni istanza all'istante. Con le variabili di design di Divi, non stai solo acconciando più velocemente ma costruisci più intelligente.

Costruire un sito Web più intelligente e più facile da aggiornare

I campi ACF standard migliorano il modo in cui gli utenti di WordPress strutturano la progettazione e il contenuto creando campi personalizzati legati a post specifici. Le variabili di progettazione di Divi prendono un percorso completamente diverso. Sono valori di progettazione accessibili a livello globale che si aggiornano ovunque in una volta. La differenza potrebbe inizialmente sembrare sottile, ma cambia il modo in cui si costruisce e mantieni i siti WordPress.

Cosa porta ACF sul tavolo

Advanced Custom Fields (ACF) consente di aggiungere ulteriori campi di dati alle pagine e ai post nella sua versione principale. Ottieni più del semplice titolo e scatole di contenuti. ACF ti offre campi speciali per immagini, blocchi di testo, file, menu a discesa e molto altro.

È possibile raggruppare i campi in gruppi logici per i tuoi progetti. Ad esempio, potresti creare un gruppo di membri dello staff con spot per il titolo di lavoro, il dipartimento, la foto e la biografia. O creare dettagli del prodotto con campi per specifiche, prezzi e elenchi di funzionalità.

Questi gruppi di campo funzionano davvero bene con i tipi di post personalizzati. Quando li combini, è possibile creare sezioni di contenuti speciali come directory di team, elenchi di servizi o cataloghi di proprietà, ognuno con esattamente i campi giusti per quel contenuto.

Le persone adorano ACF perché si adatta perfettamente alla normale area di amministrazione di WordPress. I tuoi campi personalizzati si presentano direttamente nelle normali schermi di editing, rendendo facile per i clienti che non sono esperti di tecnologia aggiornare i contenuti.

Pagine delle opzioni: il tuo pannello di controllo a livello di sito

Le pagine delle opzioni ACF, disponibili in ACF Pro, consentono di creare un luogo centrale per le informazioni a livello del sito, a differenza dei normali campi ACF che si collegano a contenuti specifici. Questa funzione è ottima per:

• Informazioni sui contatti
• Collegamenti importanti
• Orario e sedi di affari
• Immagini e loghi predefiniti

Quando qualcosa cambia, come il tuo numero di telefono, devi aggiornarlo solo una volta nella sezione amministratore. La modifica verrà visualizzata ovunque sul tuo sito subito. Vale la pena notare che avrai bisogno dell'ACF Pro per utilizzare le pagine delle opzioni.

Profonda integrazione con Divi

I campi ACF standard si accoppiano bene con Divi attraverso il sistema di contenuti dinamici di Divi. Quando fai pagine nel Builder Divi, puoi estrarre informazioni dai tuoi campi personalizzati ACF. Questo lavoro di squadra consente di utilizzare gli strumenti di progettazione di Divi insieme alla gestione dei contenuti di ACF.

Ecco come il processo di solito funziona:

• Imposta campi personalizzati con ACF
• Riempi questi campi con il contenuto in WordPress
• Progetta il tuo layout di pagina in Divi
• Collega il tuo contenuto ACF ai moduli Divi

Questa combinazione di Divi e ACF crea una separazione utile. Gli editor di contenuti possono aggiornare le informazioni in un'interfaccia pulita e organizzata mentre i progettisti possono creare layout senza impantanarsi nei dettagli di gestione dei contenuti.

Approccio flessibile

I campi ACF standard funzionano per le tue abilità, che tu codifichi o piaccia gli strumenti visivi. Gli sviluppatori possono utilizzare le funzioni modello per visualizzare i valori dei campi in temi personalizzati. Se non codifica, puoi comunque utilizzare i campi ACF con costruttori come Divi senza conoscere PHP.

Questa flessibilità rende i campi ACF standard adatti a siti Web aziendali di base e progetti complessi. Puoi iniziare con funzionalità semplici e usarne più avanzate man mano che impari e il tuo sito cresce.

La flessibilità delle variabili di design di Divi

Divi 5 Variabili di progettazione rendono la gestione del sito Web più semplice. Memorizzano scelte di progettazione e contenuti riutilizzabili che puoi utilizzare ovunque sul tuo sito. Quando si aggiorna una variabile, cambia ovunque l'hai usata.

Il gestore variabile viene trovato facendo clic sull'icona delle variabili nella barra laterale del costruttore Visual di Divi 5. Ti consente di gestire tutti i tuoi elementi di design in un unico posto.

Sei tipi di variabili di design

Divi 5 include sei diversi tipi di variabili per aiutare con vari aspetti del tuo sito Web:

• Variabili a colori: tieni i colori del tuo marchio, i colori del testo e gli sfondi
  • Puoi nominarli chiaramente come "Blush Coral" o "Champagne Gold"
  • Usali per pulsanti, testo, sfondi e bordi
  • Quindi, puoi cambiare l'intera combinazione di colori aggiornando queste poche variabili
• FONT Variabili: imposta le opzioni tipografiche oltre il personalizzatore del tema
  • È possibile creare impostazioni di carattere separate per intestazioni, testo del corpo o aree speciali
  • Questo mantiene la tipografia coerente sul tuo sito web
  • Quando necessario, puoi aggiornare tutti i caratteri contemporaneamente
• Variabili numeriche: memorizzare le misurazioni utilizzate nel design
  • Ottimo per spaziatura, bordi, dimensioni e dimensioni del testo
  • Lavora con unità CSS come CLAMP () per progetti reattivi
  • Questi ti aiutano a mantenere la spaziatura e il dimensionamento coerenti ovunque

Le variabili Divi 5 gestiscono anche i contenuti che vengono visualizzati in tutto il tuo sito:

• Variabili di immagine: memorizza le immagini utilizzate in più punti
  • Perfetto per loghi, motivi di sfondo e foto
  • Aggiorna le immagini una volta anziché su ogni pagina
  • Fare aggiornamenti stagionali o rinominare molto più velocemente
• Variabili di testo: salva il contenuto scritto che appare in molti punti
  • Utile per informazioni di contatto, slogan e orari di lavoro
  • Cambia il testo una volta per aggiornarlo ovunque
  • Mantieni le informazioni coerenti quando i dettagli cambiano
• Variabili di collegamento: memorizza gli URL per pulsanti e menu
  • Utilizzare per pulsanti di azione, collegamenti sui social media e navigazione
  • Evita i collegamenti rotti quando gli indirizzi Web cambiano
  • Aggiorna tutti i pulsanti correlati contemporaneamente quando si aggiungono nuove pagine

Benefici del mondo reale

Le variabili di progettazione risparmiano tempo e riducono gli errori perché è visivo. Quando un cliente desidera cambiare i colori del proprio sito Web, puoi aggiornare solo le variabili di colore e tutto con quel colore (pulsanti, sfondi e testo) cambia immediatamente attraverso il sito.

Queste variabili funzionano bene con il sistema preimpostato di Divi. Aggiungi variabili ai preimpostazioni del modulo e quando si aggiorna una variabile, ogni modulo con quella variabile cambia.

Per i siti Web che sembrano buoni su tutti i dispositivi, le variabili numeriche con funzioni CSS come CLAMP () aiutano i layout a adattarsi a qualsiasi dimensione dello schermo senza bisogno di design separati. Quando più persone lavorano su un sito Web, le variabili di progettazione mantengono tutti utilizzando le stesse regole di progettazione. Questo aiuta il sito a rimanere coerente e professionale, indipendentemente da chi apporta le modifiche.

Come si confrontano

Quando si confrontano i campi ACF standard e le variabili di progettazione di Divi, stiamo esaminando due diversi approcci per rendere più gestibili i siti Web. Analizziamo le loro differenze fondamentali:

I campi ACF standard brillano quando è necessario contenuti strutturati che cambia tra post e pagine, mentre le variabili di progettazione Divi mantengono la coerenza del design a livello di sito. Ci sono alcuni aspetti in cui le pagine delle opzioni ACF (disponibili in ACF Pro) e le variabili di progettazione Divi sono simili:

È importante capire che le variabili di progettazione Divi non cercano di fare tutto ciò che fa ACF Pro. Ti danno un altro modo per archiviare e utilizzare le stesse informazioni sul tuo sito Web. ACF può ancora fare molte cose che le variabili Divi non possono:

Le variabili Divi funzionano perfettamente per lavori semplici come cambiare le informazioni di contatto, scambiare foto con le stagioni o aggiornare i colori del tuo marchio. L'ACF è ideale per siti Web che necessitano di una gestione dei contenuti specializzati oltre agli elementi di progettazione, come la creazione di campi personalizzati e tipi di post. Allo stesso modo, le pagine delle opzioni ACF, disponibili con ACF Pro, sono una versione più matura delle variabili di progettazione Divi.

Tuttavia, le variabili di progettazione di Divi sono integrate in Divi 5 senza costi aggiuntivi. Puoi impostare colori, caratteri, testo e immagini proprio nel costruttore che già usi. Non sono necessari plugin extra o di apprendimento di nuovi sistemi. I requisiti del progetto dovrebbero guidare quale sistema assume il ruolo principale nel flusso di lavoro, ma ricorda che questi strumenti risolvono problemi fondamentalmente diversi nonostante le loro somiglianze di superficie.

Le variabili ACF e Divi possono funzionare insieme?

SÌ. Puoi effettivamente utilizzare sia i campi ACF standard che le variabili di progettazione Divi sullo stesso sito Web. Funzionano bene insieme perché gestiscono diverse parti del tuo sito. Quando li abbini, i campi ACF standard possono gestire relazioni di dati complesse come un sito immobiliare con un tipo di post di elenchi di proprietà che si collega ad agenti, vicinato e campi personalizzati di prezzi.

Nel frattempo, le variabili di design mantengono i colori del marchio, la tipografia e la spaziatura coerenti in ogni pagina e modello. Ciò significa che il tuo sito Web ha sia una potente gestione dei dati che una coerenza visiva.

I tuoi redattori di contenuti possono lavorare con i campi familiari di ACF per aggiornare i dettagli o i prezzi delle proprietà, mentre il tuo sito mantiene il suo aspetto professionale attraverso il sistema di progettazione di Divi. Questa combinazione ti dà un controllo migliore di quanto entrambi gli strumenti potrebbero fornire da solo.

La chiave è sapere quale strumento utilizzare per ogni lavoro. Comprendendo i loro punti di forza, è possibile creare siti Web con sofisticate strutture di contenuti che mantengono ancora un'identità visiva coesa. Diamo un'occhiata agli esempi reali di come questi strumenti risolvono insieme problemi di siti Web comuni.

Utilizzo del caso n. 1 - Sito Web commerciale locale con modifiche stagionali

Un sito Web di panetteria locale ha bisogno di contenuti strutturati e aggiornamenti di progettazione stagionale. Abbiamo combinato campi ACF standard e variabili di progettazione Divi in ​​modo pratico per questo sito.

I campi ACF standard gestiscono il catalogo dei prodotti del forno con tipi e campi personalizzati per:

• Elementi
• Descrizioni degli articoli
• Ingredienti e informazioni allergene
• Livelli di prezzo
• Stato di disponibilità

Questi dettagli cambiano per ogni prodotto, quindi l'approccio strutturato di ACF funziona perfettamente. Il personale del forno aggiorna le informazioni sul prodotto tramite l'interfaccia WordPress familiare di ACF.

Nel frattempo, le variabili di progettazione Divi gestiscono gli elementi di design stagionale:

• Schemi di colore che cambiano con le stagioni
• Testo di banner promozionale per le vacanze
• Immagini di prodotti in primo piano sulla homepage
• Modelli di sfondo che si aggiornano mensilmente

Quando arriva l'autunno, il proprietario della panetteria aggiorna semplicemente le variabili di colore stagionali dai pastelli estivi ai toni autunnali e l'intero sito si aggiorna all'istante.

L'immagine di sfondo cambia per mostrare decorazioni a tema autunno, senza bisogno di modificare ogni pagina utilizzando le variabili di immagine come segue:

Questa configurazione offre alla panetteria il meglio di entrambi i mondi: dati strutturati sul prodotto attraverso campi ACF standard e aggiornamenti stagionali rapidi attraverso le variabili di progettazione di Divi.

Caso di utilizzo n. 2 - Sito Web del portafoglio fotografico

Un sito Web aziendale di fotografia deve bilanciare le gallerie dei clienti organizzate con un marchio visivo coerente. Ecco come i campi ACF standard e le variabili di progettazione Divi risolvono questa sfida. I campi ACF standard gestiscono gli aspetti del contenuto strutturato:

• Gallerie del progetto client come tipo di post personalizzato
• Campi personalizzati per:
  • Pacchetti di servizio con campi di prezzi dettagliati
  • Raccolta di testimonianze con nomi dei clienti
  • Tipi di progetto
  • Specifiche dell'attrezzatura

Il fotografo aggiorna ogni galleria client tramite l'interfaccia di ACF, aggiungendo:

• Data e posizione del progetto
• Informazioni di base
• Smorting e categorizzazione dell'immagine

Nel frattempo, le variabili di progettazione Divi gestiscono la coerenza del marchio:

• Sistema tipografico per tutte le intestazioni e il testo del corpo
• Tavolozza dei colori del marchio applicata su tutte le pagine
• Valori di spaziatura per un ritmo di layout coerente
• Impostazioni della griglia della galleria per presentazione uniforme

Hai bisogno di un aggiornamento del marchio? Il fotografo aggiorna alcune variabili di design e l'intero sito cambia. Le gallerie mantengono la loro spaziatura a causa delle variabili numeriche e ogni progetto mantiene i suoi dettagli grazie all'ACF.

Quando la stagione del matrimonio si occupa, il fotografo cambia una variabile di testo per lo stato di prenotazione e si aggiorna ovunque sul sito. Niente più controlla ogni pagina per correggere lo stesso testo. Questa combinazione mantiene le foto e le informazioni sul client (in ACF) separate da come appare il sito (con variabili di design) in modo che il fotografo possa ottenere la struttura e l'aspetto giusto.

Fare la scelta giusta per il tuo progetto

Guardando i nostri esempi di panetteria e fotografia, possiamo vedere questi strumenti affrontare diverse sfide del sito Web. Il proprietario del forno aggiorna le informazioni sul prodotto mentre scambiano senza sforzo i colori stagionali. Il fotografo mantiene organizzate le gallerie ma può comunque aggiornare il look del loro sito con pochi clic.

Alcuni siti hanno bisogno solo di uno di questi strumenti, mentre altri lavorano meglio con entrambi. Una cosa è chiara: la scelta tra i campi ACF standard e le variabili di progettazione Divi non deve essere una decisione o una decisione.

Divi 5 ha aggiunto un'altra opzione utile al tuo toolkit. Che tu stia costruendo qualcosa di semplice o complesso, ora hai più modi per creare siti che abbiano un bell'aspetto e funzionino bene.

Inizia a costruire più intelligente

La linea di fondo è che le variabili di progettazione di Divi 5 e i campi ACF standard risolvono ciascuno diversi problemi pur avendo un po 'di sovrapposizione (specialmente con le pagine delle opzioni). Hai bisogno di aggiornamenti di design rapidi attraverso il tuo sito? Le variabili di design brillano. Vuoi una potente gestione dei contenuti con logica condizionale? Field ACF standard consegna.

Molti siti funzionano bene con entrambi gli strumenti fianco a fianco. Le pagine delle opzioni ACF sono migliori per la gestione delle esigenze di contenuto complesse. Le variabili di progettazione non sono pensate per sostituire completamente le pagine delle opzioni, ma per la maggior parte degli utenti con requisiti semplici, possono essere una forte alternativa.

La funzione Variabili di progettazione è ora disponibile con Divi 5 - nessun costo aggiuntivo, nessuna codifica necessaria ed è pronta per il tuo prossimo progetto.

Ricorda: Divi 5 funziona meglio per nuovi siti Web. Non raccomandiamo ancora di spostare i siti esistenti su Divi 5.