With Divi 5’s newest Alpha unencumber, Design Variables have entered the Divi ecosystem as a brand new way to managing design and content material values to your web sites. This has excited our customers, particularly those that’ve depended on Complex Customized Fields (ACF) for years. Must you stick to ACF or transfer to Divi’s Variables? Or are you able to use each concurrently?
This put up explains the adaptation and when you can use what. Let’s get to it!
Divi 5 is able for use for brand new website online builds.
What Are Divi Design Variables?
When construction a website online, you’ll continuously reuse the similar knowledge throughout many pages, from colours to font types, touch main points, and extra. Design Variables can help you set up the ones shared components from one central position. In contrast to same old ACF fields, Design Variables don’t seem to be tied to post-specific content material, they act as world design and content material values, no longer dynamic content material fields.
As an alternative of digging via each and every web page to make a minor replace, like converting a telephone quantity or adjusting a background colour, you replace a variable as soon as, and that fluctuate flows during all your web site routinely.
Need to transfer your emblem colours for a seasonal promotion? Exchange a unmarried variable. Wish to replace your footer textual content or a symbol? One edit updates each and every example immediately. With Divi’s Design Variables, you’re no longer simply styling sooner however construction smarter.
Development a Smarter & More uncomplicated-To-Replace Web page
Same old ACF fields give a boost to how wordpress customers construction design and content material by means of developing customized fields tied to precise posts. Divi’s Design Variables take a fully other course. They’re globally out there design values that replace in all places directly. The adaptation may first of all appear delicate, but it surely adjustments the way you construct and care for wordpress websites.
What ACF Brings To The Desk
Advanced Custom Fields (ACF) allows you to upload additional knowledge fields in your pages and posts in its core model. You get extra than simply the elemental identify and content material packing containers. ACF will provide you with particular fields for footage, textual content blocks, information, dropdown menus, and so much extra.
You’ll be able to package deal similar fields into logical teams in your tasks. For instance, chances are you’ll make a group of workers member crew with spots for task identify, division, photograph, and bio. Or create product main points with fields for specifications, pricing, and have lists.
Those box teams paintings in point of fact neatly with Customized Submit Varieties. Whilst you mix them, you’ll construct particular content material sections like staff directories, carrier listings, or belongings catalogs — each and every with precisely the suitable fields for that content material.
Other people love ACF as it suits easily into the common wordpress admin house. Your customized fields display up proper within the standard modifying monitors, making it simple for shoppers who aren’t tech-savvy to replace content material.
website-vast-keep-an-eye-on-panel”/>Possibility Pages: Your website-Vast Keep an eye on Panel
ACF Possibility Pages, to be had in ACF Professional, can help you create a central position for site-wide knowledge, in contrast to common ACF fields that connect to precise content material. This selection is superb for:
Touch knowledge
Essential hyperlinks
Trade hours and places
Default photographs and symbols
When one thing adjustments, like your telephone quantity, you handiest want to replace it as soon as within the admin phase. The exchange will display up in all places to your web site straight away. It’s price noting that you just’ll want the ACF Professional to make use of Possibility Pages.
Deep Integration With Divi
Same old ACF fields pair up properly with Divi via Divi’s Dynamic Content material device. Whilst you’re making pages within the Divi Builder, you’ll pull knowledge out of your ACF customized fields. This teamwork allows you to use Divi’s design equipment along ACF’s content material control.
Right here’s how the method typically works:
Arrange customized fields with ACF
Fill those fields with content material in wordpress
Design your web page format in Divi
Attach your ACF content material in your Divi modules
This mixture of Divi and ACF creates a useful separation. Content material editors can replace knowledge in a blank, arranged interface whilst designers can construct layouts with out getting slowed down in content material control main points.
Versatile Method
Same old ACF fields paintings in your abilities, whether or not you code or like visible equipment. Builders can use template purposes to show box values in customized issues. If you happen to don’t code, you’ll nonetheless use ACF fields with developers like Divi with out realizing PHP.
This adaptability makes same old ACF fields appropriate for fundamental trade web sites and sophisticated tasks. You’ll be able to start with easy options and use extra complicated ones as you be told and your web site grows.
The Flexibility Of Divi’s Design Variables
Divi 5 Design Variables make website online control more effective. They retailer design alternatives and reusable content material that you’ll use any place to your web site. Whilst you replace one variable, it adjustments in all places you’ve used it.
The Variable Supervisor is located by means of clicking the variables icon in Divi 5’s Visible Builder sidebar. It lets you set up your whole design components in a single position.
Six Sorts of Design Variables
Divi 5 comprises six several types of variables to lend a hand with quite a lot of facets of your website online:
Colour Variables: Hang your emblem colours, textual content colours, and backgrounds
You’ll be able to identify them obviously like “Coral Blush” or “Champagne Gold”
Use them for buttons, textual content, backgrounds, and borders
Then, you might exchange all your colour scheme by means of updating those few variables
Font Variables: Set typography choices past the Theme Customizer
You’ll be able to create separate font settings for headings, frame textual content, or particular spaces
This assists in keeping typography constant throughout your website online
When wanted, you’ll replace all fonts directly
Quantity Variables: Retailer measurements used for your design
Nice for spacing, borders, sizes, and textual content dimensions
Paintings with CSS devices like clamp() for responsive designs
Those can help you stay spacing and sizing constant in all places
Divi 5 variables additionally deal with content material that displays up during your web site:
Symbol Variables: Retailer footage utilized in a couple of puts
Highest for emblems, background patterns, and footage
Replace photographs as soon as as an alternative of on each and every web page
Make seasonal updates or rebranding a lot sooner
Textual content Variables: Save written content material that looks in lots of spots
Helpful for touch knowledge, taglines, and trade hours
Exchange textual content as soon as to replace it in all places
Stay knowledge constant when main points exchange
Hyperlink Variables: Retailer URLs for buttons and menus
Use for motion buttons, social media hyperlinks, and navigation
Keep away from damaged hyperlinks when internet addresses exchange
Replace all similar buttons directly when including new pages
Actual-Global Advantages
Design Variables save time and cut back mistakes as a result of it’s visible. When a consumer needs to modify their website online colours, you’ll replace simply the colour variables, and the entirety with that colour (buttons, backgrounds, and textual content) in an instant adjustments around the web site.
Those variables paintings neatly with Divi’s preset device. Upload variables in your module presets, and while you replace a variable, each and every module with that variable adjustments.
For web sites that glance just right on all gadgets, quantity variables with CSS purposes like clamp() lend a hand your layouts have compatibility any display screen measurement without having separate designs. When a couple of folks paintings on a website online, Design Variables stay everybody the use of the similar design laws. This is helping the web site keep constant {and professional} regardless of who makes adjustments.
How They Examine
When evaluating Same old ACF fields and Divi’s Design Variables, we’re taking a look at two other approaches to creating web sites extra manageable. Let’s wreck down their core variations:
Characteristic
ACF
Divi’s Design Variables
Core Serve as
Customized fields with versatile knowledge varieties
Globally out there design values and quick updates
Design Keep an eye on
Would possibly require template customization and customized code
Direct visible interface
Utility Scope
Submit/web page particular or site-wide by way of Possibility Pages
Acquainted wordpress workflow; PHP wisdom for complicated implementation
Accomodates all ability ranges.
Typography Keep an eye on
Textual content fields with guide CSS access
Visible controls with CSS purposes
Integration
Works throughout issues and developers
Local to the Divi ecosystem
Same old ACF fields shine when you wish to have structured content material that adjustments between posts and pages, whilst Divi Design Variables maintains site-wide design consistency. There are some facets the place the ACF Possibility Pages (to be had in ACF Professional) and Divi Design Variables are equivalent:
It’s necessary to needless to say Divi Design Variables don’t attempt to do the entirety ACF Professional does. They provide you with in a different way to retailer and use the similar knowledge throughout your website online. ACF can nonetheless do loads of issues that Divi Variables can’t:
Divi Variables paintings nice for easy jobs like converting touch information, swapping footage with the seasons, or updating your emblem colours. ACF is perfect for web sites that want specialised content material control past design components, like developing customized fields and put up varieties. Likewise, ACF Possibility Pages, to be had with ACF Professional, are a extra mature model of Divi Design Variables.
Then again, Divi’s Design Variables are constructed into Divi 5 at no additional value. You’ll be able to arrange colours, fonts, textual content, and photographs proper within the builder you already use. There is not any want for additonal plugins or studying new methods. Your mission necessities will have to information which device takes the lead function for your workflow, however needless to say those equipment remedy essentially other issues regardless of their floor similarities.
Can ACF And Divi Variables Paintings In combination?
Sure. You’ll be able to in truth use each same old ACF fields and Divi Design Variables at the similar website online. They paintings neatly in combination as a result of they deal with other portions of your web site. Whilst you pair them up, same old ACF fields can deal with advanced knowledge relationships like an actual property web site with a belongings listings put up sort that connects to brokers, community, and pricing customized fields.
In the meantime, Design Variables stay your emblem colours, typography, and spacing constant throughout each and every web page and put up template. This implies your website online has each robust knowledge control and visible consistency.
Your content material editors can paintings with ACF’s acquainted fields to replace belongings main points or pricing, whilst your web site maintains its skilled glance via Divi’s design device. This mixture will provide you with higher keep watch over than both instrument may provide by myself.
The secret’s realizing which instrument to make use of for each and every task. Via figuring out their strengths, you’ll construct web sites with subtle content material buildings that also care for a cohesive visible identification. Let’s have a look at actual examples of the way those equipment remedy not unusual website online issues in combination.
Use Case #1 — Native Trade Web page With Seasonal Adjustments
A neighborhood bakery website online wishes structured content material and seasonal design updates. We blended same old ACF fields and Divi Design Variables in a realistic manner for this web site.
Same old ACF fields deal with the bakery’s product catalog with customized put up varieties and fields for:
Pieces
Merchandise descriptions
Components and allergen knowledge
Pricing tiers
Availability standing
Those main points exchange for each and every product, so ACF’s structured way works completely. The bakery group of workers updates product knowledge via ACF’s acquainted wordpress interface.
In the meantime, Divi Design Variables set up the seasonal design components:
Colour schemes that fluctuate with the seasons
Promotional banner textual content for vacations
Featured product photographs at the homepage
Background patterns that refresh per month
When fall arrives, the bakery proprietor merely updates the seasonal colour variables from summer time pastels to autumn tones, and all of the web site refreshes immediately.
The background symbol adjustments to turn fall-themed decorations, without having to edit each and every web page in my view the use of Symbol Variables as following:
This setup provides the bakery the most efficient of each worlds: structured product knowledge via same old ACF fields and fast seasonal refreshes via Divi’s Design Variables.
Use Case #2 — Images Portfolio Web page
A images trade website online must steadiness arranged shopper galleries with a constant visible emblem. Right here’s how same old ACF fields and Divi Design Variables remedy this problem. Same old ACF fields set up the structured content material facets:
Consumer mission galleries as a customized put up sort
Customized fields for:
Carrier programs with detailed pricing fields
Testimonial assortment with shopper names
Mission varieties
Apparatus specs
The photographer updates each and every shopper gallery via ACF’s interface, including:
In the meantime, Divi Design Variables deal with the logo consistency:
Typography device for all headings and frame textual content
Logo colour palette carried out throughout all pages
Spacing values for a constant format rhythm
Gallery grid settings for uniform presentation
Want a emblem refresh? The photographer updates a couple of Design Variables, and the entire web site adjustments. The galleries stay their spacing as a result of quantity variables, and each and every mission assists in keeping its main points because of ACF.
When wedding ceremony season will get busy, the photographer adjustments one textual content variable for reserving standing, and it updates in all places at the web site. Not more checking each and every web page to mend the similar textual content. This mixture assists in keeping footage and shopper information (in ACF) become independent from how the web site appears to be like (with Design Variables) so the photographer can get the construction and look proper.
Making The Proper Selection For Your Mission
Having a look at our bakery and images examples, we will be able to see those equipment take on other website online demanding situations. The bakery proprietor updates product information whilst without difficulty swapping seasonal colours. The photographer assists in keeping galleries arranged however can nonetheless replace their web site’s glance with only a few clicks.
Some websites handiest want the sort of equipment, whilst others paintings higher with each. Something is apparent: opting for between same old ACF fields and Divi Design Variables doesn’t must be an either-or resolution.
Design Variables
ACF
Each
Best possible for
Visible consistency, speedy taste adjustments, simple information updates
Divi 5 has added some other helpful possibility in your toolkit. Whether or not you’re construction one thing easy or advanced, you presently have extra tactics to create websites that glance just right and paintings neatly.
Get started Development Smarter
The key is that Divi 5‘s Design Variables and same old ACF fields each and every remedy other issues whilst having some overlap (particularly with Choices Pages). Want fast design updates throughout your web site? Design Variables shine. Need robust content material control with conditional common sense? Same old ACF fields ship.
Many websites paintings neatly with each equipment facet by means of facet. ACF Possibility Pages are higher for managing advanced content material wishes. Design Variables aren’t supposed to totally exchange Possibility Pages, however for many customers with easy necessities, they are able to be a powerful choice.
The Design Variables characteristic is now to be had with Divi 5 — no additional value, no coding wanted, and it’s able in your subsequent mission.
Have in mind: Divi 5 works perfect for brand new web sites. We don’t counsel shifting present websites to Divi 5 simply but.
The put up ACF vs Divi Design Variables: When To Use What gave the impression first on Elegant Themes Blog.
