The biggest benefits are automation, consistency, and control.

Fluid Base creates a fluid design system for Divi, generates the corresponding font size and spacing variables, and applies them exactly where they belong without manual field-by-field setup.

At the same time, the normal Divi workflow remains intact: values can still be overwritten locally in the Visual Builder when a specific module, section, or page needs its own adjustment.

This reduces repetitive responsive setup work, reduces breakpoint fixes, and creates more consistent layouts across the entire website.

Fluid Base creates a fluid design system based on a few core parameters. These include, for example, minimum and maximum layout widths as well as matching minimum and maximum font-size and spacing values.

Based on these settings, font sizes and spacing adapt smoothly to the output device and browser size. On smartphones, font sizes and spacing become more compact because less space is available. On larger desktop screens, they become more spacious so the available space is used more effectively. The overall design remains proportionally balanced.

In the Divi 5 version, Fluid Base uses the variable system provided by Divi 5. The plugin creates the relevant font-size and spacing variables and inserts them automatically in the appropriate places within Divi elements. Divi 4 applies the shared design through targeted CSS overrides. Available controls and layout behavior differ between Divi editions.

These values can still be overwritten manually in the Visual Builder whenever intentional layout adjustments are needed on specific pages, individual modules, or special areas.

Fluid Base also includes practical Divi improvements for real project requirements. One example is automatic main menu width detection: when there is no longer enough horizontal space for all menu items, the menu can automatically switch to the tablet or smartphone layout before the navigation visually breaks.

Both editions provide shared fluid typography and spacing. Divi 5 uses native variables in supported Builder fields. Divi 4 uses targeted CSS overrides and group-level controls in the Fluid Base modal.

The available fields and Divi layouts differ, so identical frontend results are not guaranteed. You can still make individual exceptions in both editions. In Divi 4, disable the relevant Fluid Base group before entering local module values. In Divi 5, you can also detach an individual supported field from its shared value.

Check existing pages at phone, tablet and desktop widths after applying a shared design. Custom widths, positioning and CSS may still need individual changes. See Applying Fluid Base to existing pages.

While theoretically all of this could be done manually, in practice it requires a great deal of time and creates a significant risk of inconsistencies.

Creating these variables is just the beginning. After that, they would have to be selected manually for every text field, module, section, or preset and assigned to the right places in the Visual Builder. This means many additional clicks, tab switches, and repeated steps.

For areas such as the main menu, internal module spacing, or classic WordPress areas, CSS selectors often also have to be identified and overwritten manually.

Fluid Base automates this groundwork: variables are created, mapped to the appropriate Divi areas, and applied where they are needed. A once-defined preset can be loaded quickly on new pages or in new projects. The technical setup work is handled before the actual design work begins.

A variable generator creates values. Fluid Base turns those values into a usable system.

The plugin creates fluid font-size and spacing variables and applies them automatically in Divi. This removes the need to decide manually which variable belongs in which field or to enter values field by field.

Fluid Base places the generated values directly where they are relevant: in modules, sections, rows, typography areas, spacing settings, and other website contexts. This creates an automatically applied design foundation for the entire Divi project, rather than a loose collection of individual variables.

That depends on whether the main requirement is additional responsive UI assistance or an automatically applied design foundation for the entire Divi project.

Divi Responsive Helper offers many useful UI additions and improvements for working more comfortably with responsive layouts in Divi. These features were intentionally not copied for Fluid Base because the focus is different.

Fluid Base starts at the design foundation. While Responsive Helper can help with generating responsive fonts, Fluid Base goes significantly further: the plugin does not only generate fluid values, it also applies them automatically in Divi. The variables therefore do not have to be selected manually in the Visual Builder and entered field by field.

Fluid Base also covers more than responsive typography. It includes responsive spacing, vertical rhythm, section and row rhythm, and important module defaults. It also covers areas that are not fully controlled through the Visual Builder, such as the main menu or classic WordPress areas that were not built with the Theme Builder.

In short: Divi Responsive Helper mainly improves the handling of responsive settings. Fluid Base creates an automatically applied fluid design foundation for the entire Divi project.

Fluid Base covers the Divi modules and supported targets listed in the Per-Module Overrides reference. The available typography, spacing and inner-element controls vary by module and Divi edition. Modules such as Gravity Forms and Imagely Gallery also require their related integration plugin.

That includes the latest Divi 5 modules like Instagram Feed or Table of Contents. All WooCommerce modules are also supported, and Contact Form 7 can also become part of the same fluid typography and spacing foundation.

This means Fluid Base is not limited to classic standard modules, but also extends to shop areas, forms, and modern Divi 5 modules. As a result, the design system remains more consistent across the entire website.

Yes. We recommend building Divi websites with the Theme Builder, including page templates and areas such as archives and footers. Fluid Base also supports classic areas rendered by the theme outside those Builder layouts, such as sidebars and widget footers that you have not built with the Theme Builder.

Use Setup › Classic Theme Area Overrides to connect supported typography and spacing in those areas to the shared design. Choose the area, save the settings you change and check it on the page. A Theme Builder layout uses the matching supported Builder or Per-Module Overrides. Existing classic areas do not have to be rebuilt just to use Fluid Base.

Yes. Fluid Base supports WooCommerce and Contact Form 7.

This is especially important for complete websites, because shops, product pages, cart areas, or forms can otherwise quickly feel disconnected from the rest of the website. With Fluid Base, these areas can follow the same typography and spacing system as the rest of the website.

Yes. In UI / Export / Import › Export, download your Fluid Base configuration. On the other website, use Import to select the saved file and import it. Import replaces that site’s Fluid Base configuration and applies its supported settings. Check the resulting text sizes and spacing before using the setup publicly.

Export saves the Fluid Base settings.

In Divi 5, Import can replace supported saved Builder values, including manual values and local Fluid Base exceptions. In Divi 4, it updates shared output without rewriting existing shortcode content.

Yes. In Divi 5, remove the Fluid Base variable from a supported field, enter your individual value and save the page. Other connected fields keep following the shared design. You can also switch off a supported group in the Fluid Base modal.

In Divi 4, open the floating Fluid Base modal, disable the relevant group, then enter the local Divi values and save the page. Check the result on the public page as well as in the Builder. See Keep one-off differences local.

As WordPress users for well over a decade, these concerns are very understandable. They reflect exactly the kind of experience many WordPress users have already had with extensions.

That is why Fluid Base was built with particular attention to avoiding these problems. Fluid Base is not meant to interfere with Divi’s usability or design philosophy, but to work with Divi. The normal Divi workflow remains intact. The Visual Builder remains the central working environment. Modules, sections, and pages can still be edited as usual.

The philosophy behind it: Fluid Base integrates cleanly into the familiar Divi workflow. The actual design work stays in the Visual Builder, while Fluid Base handles the responsive foundation in the background. It follows Divi’s way of working, uses familiar Builder patterns, and keeps design decisions where Divi users expect them.

Fluid Base primarily removes the repetitive responsive groundwork that usually takes a lot of time: generating variables, assigning values, keeping spacing and typography consistent, and reducing manual adjustments.

In short: Fluid Base does not push Divi into a different way of working. It works within the Divi workflow. It removes a significant amount of manual adjustment work while remaining controllable when intentional exceptions or individual layout decisions are needed.

Fluid Base is designed to work in a targeted and performant way.

In Divi 5, Fluid Base uses the native variable system of Divi 5. Fluid values are provided through Divi 5’s native variable system instead of a broad extra CSS layer across the whole website.

For Divi 4, optimized CSS output is especially important because Divi 4 cannot rely on Divi 5’s native variable system. Fluid Base therefore does not generate unnecessary rules across the entire website by default. Instead, it takes enabled groups, page contexts, and detected content into account. The output is limited according to the supported page context and detected content. Prepared styles can also be cached and reused.

Of course, actual performance always depends on the entire project, including hosting, theme setup, other plugins, caching, and individual customizations. Fluid Base uses native Divi 5 integration, controlled CSS output and caching to reduce repeated work. Check performance on the complete website with its actual content and plugins.

The Fluid Base interface is available out of the box in English and German and automatically follows the selected WordPress language.

Divi 4 applies many Fluid Base settings through additional CSS. This is simpler to manage, but it also increases the amount of CSS on the website.

Divi 5 allows Fluid Base to connect supported settings directly with Divi. It does this by placing Fluid Base variables in native Divi 5 fields and updating the saved settings of supported modules. Override Sync handles these changes when a preset is applied and restores previous values when a new preset no longer controls a field.

The setup therefore looks more complex, but the website continues to use Divi 5’s native system in many areas. This retains its performance advantages and also supports compatible custom modules that use standard Divi 5 fields.