With Divi 5’s newest Alpha liberate, Design Variables have entered the Divi ecosystem as a brand new technique to managing design and content material values for your web pages. This has excited our customers, particularly those that’ve depended on Complicated Customized Fields (ACF) for years. Must you persist with ACF or transfer to Divi’s Variables? Or are you able to use each concurrently?
This put up explains the variation and when you can use what. Let’s get to it!
👉 Divi 5 is able for use for brand new web site builds.
What Are Divi Design Variables?
When construction a web site, you’ll ceaselessly reuse the similar knowledge throughout many pages, from colours to font kinds, touch main points, and extra. Design Variables can help you set up the ones shared parts from one central position. Not like usual ACF fields, Design Variables aren’t tied to post-specific content material, they act as international design and content material values, no longer dynamic content material fields.
As an alternative of digging thru each 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 all over all your website mechanically.
Need to transfer your logo colours for a seasonal promotion? Trade a unmarried variable. Wish to replace your footer textual content or a symbol? One edit updates each example in an instant. With Divi’s Design Variables, you’re no longer simply styling quicker however construction smarter.
Construction a Smarter & More uncomplicated-To-Replace Website online
Same old ACF fields give a boost to how WordPress customers construction design and content material by way of growing customized fields tied to precise posts. Divi’s Design Variables take a fully other course. They’re globally obtainable design values that replace in every single place immediately. The adaptation may first of all appear refined, but it surely adjustments the way you construct and take care of WordPress websites.
What ACF Brings To The Desk
Complicated Customized Fields (ACF) means that you can upload additional knowledge fields for your pages and posts in its core model. You get extra than simply the fundamental identify and content material bins. ACF provides you with particular fields for photos, textual content blocks, information, dropdown menus, and a lot extra.
You’ll package similar fields into logical teams in your tasks. As an example, you may make a group of workers member crew with spots for task identify, division, picture, and bio. Or create product main points with fields for specifications, pricing, and have lists.
Those box teams paintings in reality neatly with Customized Publish Varieties. Whilst you mix them, you’ll construct particular content material sections like crew directories, carrier listings, or belongings catalogs — each and every with precisely the best fields for that content material.
Other folks 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.
Possibility Pages: Your Web page-Huge Keep an eye on Panel
ACF Possibility Pages, to be had in ACF Professional, allow you to create a central position for site-wide knowledge, not like common ACF fields that connect to precise content material. This option is superb for:
- Touch knowledge
- Vital hyperlinks
- Trade hours and places
- Default pictures and symbols
When one thing adjustments, like your telephone quantity, you most effective want to replace it as soon as within the admin phase. The exchange will display up in every single place for your website straight away. It’s price noting that you simply’ll want the ACF Professional to make use of Possibility Pages.
Deep Integration With Divi
Same old ACF fields pair up well with Divi thru Divi’s Dynamic Content material gadget. Whilst you’re making pages within the Divi Builder, you’ll pull knowledge out of your ACF customized fields. This teamwork means that you can use Divi’s design gear along ACF’s content material control.
Right here’s how the method most often works:
- Arrange customized fields with ACF
- Fill those fields with content material in WordPress
- Design your web page structure in Divi
- Attach your ACF content material for your Divi modules
This mix 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 Means
Same old ACF fields paintings in your talents, whether or not you code or like visible gear. Builders can use template purposes to show box values in customized topics. In case you don’t code, you’ll nonetheless use ACF fields with developers like Divi with out figuring out PHP.
This adaptability makes usual ACF fields appropriate for elementary industry web pages and complicated tasks. You’ll start with easy options and use extra complex ones as you be told and your website grows.
The Flexibility Of Divi’s Design Variables
Divi 5 Design Variables make web site control more practical. They retailer design alternatives and reusable content material that you’ll use any place for your website. Whilst you replace one variable, it adjustments in every single place you’ve used it.
The Variable Supervisor is located by way of clicking the variables icon in Divi 5’s Visible Builder sidebar. It means that you can set up all of your design parts in a single position.
Six Kinds of Design Variables
Divi 5 comprises six various kinds of variables to assist with more than a few facets of your web site:
- Colour Variables: Hang your logo colours, textual content colours, and backgrounds
- You’ll identify them obviously like “Coral Blush” or “Champagne Gold”
- Use them for buttons, textual content, backgrounds, and borders
- Then, chances are you’ll exchange all of your colour scheme by way of updating those few variables
- Font Variables: Set typography choices past the Theme Customizer
- You’ll create separate font settings for headings, frame textual content, or particular spaces
- This helps to keep typography constant throughout your web site
- When wanted, you’ll replace all fonts immediately
- Quantity Variables: Retailer measurements used to your design
- Nice for spacing, borders, sizes, and textual content dimensions
- Paintings with CSS gadgets like clamp() for responsive designs
- Those can help you stay spacing and sizing constant in every single place
Divi 5 variables additionally care for content material that displays up all over your website:
- Symbol Variables: Retailer photos utilized in more than one puts
- Absolute best for trademarks, background patterns, and footage
- Replace pictures as soon as as an alternative of on each web page
- Make seasonal updates or rebranding a lot quicker
- Textual content Variables: Save written content material that looks in lots of spots
- Helpful for touch knowledge, taglines, and industry hours
- Trade textual content as soon as to replace it in every single place
- Stay knowledge constant when main points exchange
- Hyperlink Variables: Retailer URLs for buttons and menus
- Use for motion buttons, social media hyperlinks, and navigation
- Steer clear of damaged hyperlinks when internet addresses exchange
- Replace all similar buttons immediately when including new pages
Actual-Global Advantages
Design Variables save time and scale back mistakes as a result of it’s visible. When a consumer desires to modify their web site colours, you’ll replace simply the colour variables, and the entirety with that colour (buttons, backgrounds, and textual content) right away adjustments around the website.
Those variables paintings neatly with Divi’s preset gadget. Upload variables for your module presets, and while you replace a variable, each module with that variable adjustments.
For web pages that glance just right on all gadgets, quantity variables with CSS purposes like clamp() assist your layouts are compatible any display dimension while not having separate designs. When more than one other folks paintings on a web site, Design Variables stay everybody the usage of the similar design laws. This is helping the website keep constant {and professional} regardless of who makes adjustments.
How They Evaluate
When evaluating Same old ACF fields and Divi’s Design Variables, we’re having a look at two other approaches to creating web pages extra manageable. Let’s smash down their core variations:
| Characteristic | ACF | Divi’s Design Variables |
|---|---|---|
| Core Serve as | Customized fields with versatile knowledge varieties | Globally obtainable design values and quick updates |
| Design Keep an eye on | May require template customization and customized code | Direct visible interface |
| Software Scope | Publish/web page particular or site-wide by means of Possibility Pages | Web page-wide design consistency |
| Replace Mechanism | Replace in admin, displays the place applied | One exchange updates all circumstances right away |
| Interface | Backend WordPress admin house | Divi’s Visible Builder setting |
| Technical Necessities | Acquainted WordPress workflow; PHP wisdom for complex implementation | Accomodates all ability ranges. |
| Typography Keep an eye on | Textual content fields with handbook CSS access | Visible controls with CSS purposes |
| Integration | Works throughout topics and developers | Local to the Divi ecosystem |
Same old ACF fields shine when you want 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 identical:
| Characteristic | ACF Possibility Pages | Divi Design Variables |
|---|---|---|
| World settings garage | ✅ | ✅ |
| Central control interface | ✅ | ✅ |
| Retailer textual content content material | ✅ | ✅ |
| Retailer symbol references | ✅ | ✅ |
| Retailer hyperlinks/URLs | ✅ | ✅ |
| Replace more than one circumstances immediately | ✅ | ✅ |
| Integration beef up | Relies. Most often restricted integration | Complete integration inside Divi builder |
| Direct styling keep an eye on | May require customized implementation | Visible interface |
| Responsive values with CSS purposes | Guide textual content access | Integrated beef up |
| Incorporated inside core | Calls for Professional model | Incorporated with Divi 5 |
It’s essential to keep in mind that Divi Design Variables don’t attempt to do the entirety ACF Professional does. They come up with differently to retailer and use the similar knowledge throughout your web site. ACF can nonetheless do a number of issues that Divi Variables can’t:
| Capacity | ACF | Divi Design Variables |
|---|---|---|
| Create customized put up varieties | ✅ | ❌ |
| Construct customized metaboxes | ✅ | ❌ |
| Construct advanced knowledge relationships | ✅ | ❌ |
| Make customized taxonomies | ✅ | ❌ |
| Arrange conditional fields | ✅ | ❌ |
| Create repeater fields | ✅ | ❌ |
| Design versatile content material blocks | ✅ | ❌ |
| Upload box validation | ✅ | ❌ |
| Construct customized admin monitors | ✅ | ❌ |
| Retailer content material in database | ✅ | ❌ |
| Hook up with different plugins by means of API | ✅ | ❌ |
| Paintings with Divi | ✅ | ✅ |
| Paintings with any WordPress theme | ✅ | ❌ |
Divi Variables paintings nice for easy jobs like converting touch information, swapping footage with the seasons, or updating your logo colours. ACF is perfect for web pages that want specialised content material control past design parts, like growing 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.
Alternatively, Divi’s Design Variables are constructed into Divi 5 at no additional value. You’ll arrange colours, fonts, textual content, and pictures proper within the builder you already use. There is not any want for additonal plugins or finding out new techniques. Your undertaking necessities must information which gadget takes the lead function to your workflow, however keep in mind that those gear resolve essentially other issues in spite of their floor similarities.
Can ACF And Divi Variables Paintings In combination?
Sure. You’ll if truth be told use each usual ACF fields and Divi Design Variables at the identical web site. They paintings neatly in combination as a result of they care for other portions of your website. Whilst you pair them up, usual ACF fields can care for advanced knowledge relationships like an actual property website with a belongings listings put up kind that connects to brokers, community, and pricing customized fields.
In the meantime, Design Variables stay your logo colours, typography, and spacing constant throughout each web page and put up template. This implies your web site has each tough 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 website maintains its skilled glance thru Divi’s design gadget. This mix provides you with higher keep an eye on than both software may supply on my own.
The bottom line is figuring out which software to make use of for each and every task. Via working out their strengths, you’ll construct web pages with refined content material constructions that also take care of a cohesive visible identification. Let’s take a look at actual examples of ways those gear resolve commonplace web site issues in combination.
Use Case #1 — Native Trade Website online With Seasonal Adjustments
An area bakery web site wishes structured content material and seasonal design updates. We blended usual ACF fields and Divi Design Variables in a sensible means for this website.
Same old ACF fields care for the bakery’s product catalog with customized put up varieties and fields for:
- Pieces
- Merchandise descriptions
- Substances and allergen knowledge
- Pricing tiers
- Availability standing
Those main points exchange for each and every product, so ACF’s structured method works completely. The bakery group of workers updates product knowledge thru ACF’s acquainted WordPress interface.
In the meantime, Divi Design Variables set up the seasonal design parts:
- Colour schemes that fluctuate with the seasons
- Promotional banner textual content for vacations
- Featured product pictures at the homepage
- Background patterns that refresh per month
When fall arrives, the bakery proprietor merely updates the seasonal colour variables from summer season pastels to autumn tones, and all the website refreshes in an instant.
The background symbol adjustments to turn fall-themed decorations, while not having to edit each and every web page for my part the usage of Symbol Variables as following:
This setup offers the bakery the most productive of each worlds: structured product knowledge thru usual ACF fields and fast seasonal refreshes thru Divi’s Design Variables.
Use Case #2 — Images Portfolio Website online
A pictures industry web site must steadiness arranged shopper galleries with a constant visible logo. Right here’s how usual ACF fields and Divi Design Variables resolve this problem. Same old ACF fields set up the structured content material facets:
- Shopper undertaking galleries as a customized put up kind
- Customized fields for:
- Carrier applications with detailed pricing fields
- Testimonial assortment with shopper names
- Undertaking varieties
- Apparatus specs
The photographer updates each and every shopper gallery thru ACF’s interface, including:
- Undertaking date and placement
- Fundamental knowledge
- Symbol sorting and categorization
In the meantime, Divi Design Variables care for the logo consistency:
- Typography gadget for all headings and frame textual content
- Emblem colour palette carried out throughout all pages
- Spacing values for a constant structure rhythm
- Gallery grid settings for uniform presentation
Desire a logo refresh? The photographer updates a couple of Design Variables, and the entire website adjustments. The galleries stay their spacing on account of quantity variables, and each and every undertaking helps to keep its main points because of ACF.
When marriage ceremony season will get busy, the photographer adjustments one textual content variable for reserving standing, and it updates in every single place at the website. Not more checking each web page to mend the similar textual content. This mix helps to keep footage and shopper information (in ACF) become independent from how the website seems (with Design Variables) so the photographer can get the construction and look proper.
Making The Proper Selection For Your Undertaking
Having a look at our bakery and pictures examples, we will see those gear take on other web site demanding situations. The bakery proprietor updates product information whilst easily swapping seasonal colours. The photographer helps to keep galleries arranged however can nonetheless replace their website’s glance with only a few clicks.
Some websites most effective want any such gear, whilst others paintings higher with each. Something is obvious: opting for between usual ACF fields and Divi Design Variables doesn’t must be an either-or resolution.
| Design Variables | ACF | Each | |
|---|---|---|---|
| Very best for | Visible consistency, speedy taste adjustments, simple information updates | Structured content material, advanced fields, relationships | Initiatives wanting each structured content material & design adjustments |
| Instance makes use of | Web page-wide colours/trademarks and content material, seasonal/cyclical updates | Web page-wide touch information, international settings, corporate main points (calls for Possibility Pages) | Splitting of considerations (design vs content material), huge websites |
| Editor | Visible Builder interface | WordPress admin interface | Each editors can be utilized |
| Price | Incorporated with Divi | Plugin (might come with paid options) | — |
Divi 5 has added every other helpful choice for 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 Construction Smarter
The key is that Divi 5‘s Design Variables and usual ACF fields each and every resolve other issues whilst having some overlap (particularly with Choices Pages). Want fast design updates throughout your website? Design Variables shine. Need tough content material control with conditional good judgment? Same old ACF fields ship.
Many websites paintings neatly with each gear aspect by way of aspect. ACF Possibility Pages are higher for managing advanced content material wishes. Design Variables aren’t intended to totally substitute Possibility Pages, however for many customers with easy necessities, they are able to be a robust 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 undertaking.
💡Have in mind: Divi 5 works easiest for brand new web pages. We don’t counsel transferring present websites to Divi 5 simply but.
The put up ACF vs Divi Design Variables: When To Use What gave the impression first on Sublime Topics Weblog.
WordPress Web Design