ACF vs Divi Design Variables: When To Use What

With Divi 5’s latest Alpha release, Design Variables have entered the Divi ecosystem as a new approach to managing design and content values on your websites. This has excited our users, especially those who’ve relied on Advanced Custom Fields (ACF) for years. Should you stick with ACF or switch to Divi’s Variables? Or can you use both simultaneously?

This post explains the difference and when you should use what. Let’s get to it!

👉 Divi 5 is ready to be used for new website builds.

What Are Divi Design Variables?

When building a website, you’ll often reuse the same information across many pages, from colors to font styles, contact details, and more. Design Variables help you manage those shared elements from one central place. Unlike standard ACF fields, Design Variables are not tied to post-specific content, they act as global design and content values, not dynamic content fields.

Instead of digging through every page to make a minor update, like changing a phone number or adjusting a background color, you update a variable once, and that change flows throughout your entire site automatically.

Want to switch your brand colors for a seasonal promotion? Change a single variable. Need to update your footer text or a logo? One edit updates every instance instantly. With Divi’s Design Variables, you’re not just styling faster but building smarter.

Building a Smarter & Easier-To-Update Website

Standard ACF fields improve how WordPress users structure design and content by creating custom fields tied to specific posts. Divi’s Design Variables take a completely different route. They’re globally accessible design values that update everywhere at once. The difference might initially seem subtle, but it changes how you build and maintain WordPress sites.

What ACF Brings To The Table

Advanced Custom Fields (ACF) lets you add extra data fields to your pages and posts in its core version. You get more than just the basic title and content boxes. ACF gives you special fields for pictures, text blocks, files, dropdown menus, and lots more.

You can bundle related fields into logical groups for your projects. For example, you might make a staff member group with spots for job title, department, photo, and bio. Or create product details with fields for specs, pricing, and feature lists.

These field groups work really well with Custom Post Types. When you combine them, you can build special content sections like team directories, service listings, or property catalogs — each with exactly the right fields for that content.

People love ACF because it fits smoothly into the regular WordPress admin area. Your custom fields show up right in the normal editing screens, making it easy for clients who aren’t tech-savvy to update content.

Option Pages: Your Site-Wide Control Panel

ACF Option Pages, available in ACF Pro, let you create a central place for site-wide information, unlike regular ACF fields that attach to specific content. This feature is great for:

• Contact information
• Important links
• Business hours and locations
• Default images and logos

When something changes, like your phone number, you only need to update it once in the admin section. The change will show up everywhere on your site right away. It is worth noting that you’ll need the ACF Pro to use Option Pages.

Deep Integration With Divi

Standard ACF fields pair up nicely with Divi through Divi’s Dynamic Content system. When you’re making pages in the Divi Builder, you can pull information from your ACF custom fields. This teamwork lets you use Divi’s design tools alongside ACF’s content management.

Here’s how the process usually works:

• Set up custom fields with ACF
• Fill these fields with content in WordPress
• Design your page layout in Divi
• Connect your ACF content to your Divi modules

This combination of Divi and ACF creates a helpful separation. Content editors can update information in a clean, organized interface while designers can build layouts without getting bogged down in content management details.

Flexible Approach

Standard ACF fields work for your skills, whether you code or like visual tools. Developers can use template functions to display field values in custom themes. If you don’t code, you can still use ACF fields with builders like Divi without knowing PHP.

This flexibility makes standard ACF fields suitable for basic business websites and complex projects. You can begin with simple features and use more advanced ones as you learn and your site grows.

The Flexibility Of Divi’s Design Variables

Divi 5 Design Variables make website management simpler. They store design choices and reusable content that you can use anywhere on your site. When you update one variable, it changes everywhere you’ve used it.

The Variable Manager is found by clicking the variables icon in Divi 5’s Visual Builder sidebar. It allows you to manage all your design elements in one place.

Six Types of Design Variables

Divi 5 includes six different types of variables to help with various aspects of your website:

• Color Variables: Hold your brand colors, text colors, and backgrounds
  • You can name them clearly like “Coral Blush” or “Champagne Gold”
  • Use them for buttons, text, backgrounds, and borders
  • Then, you may change your whole color scheme by updating these few variables
• Font Variables: Set typography options beyond the Theme Customizer
  • You can create separate font settings for headings, body text, or special areas
  • This keeps typography consistent across your website
  • When needed, you can update all fonts at once
• Number Variables: Store measurements used in your design
  • Great for spacing, borders, sizes, and text dimensions
  • Work with CSS units like clamp() for responsive designs
  • These help you keep spacing and sizing consistent everywhere

Divi 5 variables also handle content that shows up throughout your site:

• Image Variables: Store pictures used in multiple places
  • Perfect for logos, background patterns, and photos
  • Update images once instead of on every page
  • Make seasonal updates or rebranding much faster
• Text Variables: Save written content that appears in many spots
  • Useful for contact information, taglines, and business hours
  • Change text once to update it everywhere
  • Keep information consistent when details change
• Link Variables: Store URLs for buttons and menus
  • Use for action buttons, social media links, and navigation
  • Avoid broken links when web addresses change
  • Update all related buttons at once when adding new pages

Real-World Benefits

Design Variables save time and reduce errors because it is visual. When a client wants to change their website colors, you can update just the color variables, and everything with that color (buttons, backgrounds, and text) immediately changes across the site.

These variables work well with Divi’s preset system. Add variables to your module presets, and when you update a variable, every module with that variable changes.

For websites that look good on all devices, number variables with CSS functions like clamp() help your layouts fit any screen size without needing separate designs. When multiple people work on a website, Design Variables keep everyone using the same design rules. This helps the site stay consistent and professional no matter who makes changes.

How They Compare

When comparing Standard ACF fields and Divi’s Design Variables, we’re looking at two different approaches to making websites more manageable. Let’s break down their core differences:

Standard ACF fields shine when you need structured content that changes between posts and pages, while Divi Design Variables maintains site-wide design consistency. There are some aspects where the ACF Option Pages (available in ACF Pro) and Divi Design Variables are similar:

It’s important to understand that Divi Design Variables don’t try to do everything ACF Pro does. They give you another way to store and use the same information across your website. ACF can still do lots of things that Divi Variables can’t:

Divi Variables work great for simple jobs like changing contact info, swapping photos with the seasons, or updating your brand colors. ACF is ideal for websites that need specialized content management beyond design elements, like creating custom fields and post types. Likewise, ACF Option Pages, available with ACF Pro, are a more mature version of Divi Design Variables.

However, Divi’s Design Variables are built into Divi 5 at no extra cost. You can set up colors, fonts, text, and images right in the builder you already use. There is no need for extra plugins or learning new systems. Your project requirements should guide which system takes the lead role in your workflow, but remember that these tools solve fundamentally different problems despite their surface similarities.

Can ACF And Divi Variables Work Together?

Yes. You can actually use both standard ACF fields and Divi Design Variables on the same website. They work well together because they handle different parts of your site. When you pair them up, standard ACF fields can handle complex data relationships like a real estate site with a property listings post type that connects to agents, neighborhood, and pricing custom fields.

Meanwhile, Design Variables keep your brand colors, typography, and spacing consistent across every page and post template. This means your website has both powerful data management and visual consistency.

Your content editors can work with ACF’s familiar fields to update property details or pricing, while your site maintains its professional look through Divi’s design system. This combination gives you better control than either tool could provide alone.

The key is knowing which tool to use for each job. By understanding their strengths, you can build websites with sophisticated content structures that still maintain a cohesive visual identity. Let’s look at real examples of how these tools solve common website problems together.

Use Case #1 — Local Business Website With Seasonal Changes

A local bakery website needs structured content and seasonal design updates. We combined standard ACF fields and Divi Design Variables in a practical way for this site.

Standard ACF fields handle the bakery’s product catalog with custom post types and fields for:

• Items
• Item descriptions
• Ingredients and allergen information
• Pricing tiers
• Availability status

These details change for each product, so ACF’s structured approach works perfectly. The bakery staff updates product information through ACF’s familiar WordPress interface.

Meanwhile, Divi Design Variables manage the seasonal design elements:

• Color schemes that change with the seasons
• Promotional banner text for holidays
• Featured product images on the homepage
• Background patterns that refresh monthly

When fall arrives, the bakery owner simply updates the seasonal color variables from summer pastels to autumn tones, and the entire site refreshes instantly.

The background image changes to show fall-themed decorations, without needing to edit each page individually using Image Variables as following:

This setup gives the bakery the best of both worlds: structured product data through standard ACF fields and quick seasonal refreshes through Divi’s Design Variables.

Use Case #2 — Photography Portfolio Website

A photography business website needs to balance organized client galleries with a consistent visual brand. Here’s how standard ACF fields and Divi Design Variables solve this challenge. Standard ACF fields manage the structured content aspects:

• Client project galleries as a custom post type
• Custom fields for:
  • Service packages with detailed pricing fields
  • Testimonial collection with client names
  • Project types
  • Equipment specifications

The photographer updates each client gallery through ACF’s interface, adding:

• Project date and location
• Basic information
• Image sorting and categorization

Meanwhile, Divi Design Variables handle the brand consistency:

• Typography system for all headings and body text
• Brand color palette applied across all pages
• Spacing values for a consistent layout rhythm
• Gallery grid settings for uniform presentation

Need a brand refresh? The photographer updates a few Design Variables, and the whole site changes. The galleries keep their spacing because of number variables, and each project keeps its details thanks to ACF.

When wedding season gets busy, the photographer changes one text variable for booking status, and it updates everywhere on the site. No more checking every page to fix the same text. This combination keeps photos and client info (in ACF) separate from how the site looks (with Design Variables) so the photographer can get the structure and appearance right.

Making The Right Choice For Your Project

Looking at our bakery and photography examples, we can see these tools tackle different website challenges. The bakery owner updates product info while effortlessly swapping seasonal colors. The photographer keeps galleries organized but can still update their site’s look with just a few clicks.

Some sites only need one of these tools, while others work better with both. One thing is clear: choosing between standard ACF fields and Divi Design Variables doesn’t have to be an either-or decision.

Divi 5 has added another useful option to your toolkit. Whether you’re building something simple or complex, you now have more ways to create sites that look good and work well.

Start Building Smarter

The bottom line is that Divi 5‘s Design Variables and standard ACF fields each solve different problems while having some overlap (especially with Options Pages). Need quick design updates across your site? Design Variables shine. Want powerful content management with conditional logic? Standard ACF fields deliver.

Many sites work well with both tools side by side. ACF Option Pages are better for managing complex content needs. Design Variables aren’t meant to fully replace Option Pages, but for most users with simple requirements, they can be a strong alternative.

The Design Variables feature is now available with Divi 5 — no extra cost, no coding needed, and it is ready for your next project.

💡Remember: Divi 5 works best for new websites. We don’t recommend moving existing sites to Divi 5 just yet.