Fluid Base for Divi

Fluid Base gives every Divi project a stronger start: a clean, fluid design foundation with responsive typography, spacing, layout widths, and practical fixes already in place. You spend less time rebuilding the basics and more time creating a polished, consistent design.

Fluid Base for Divi

Features

Automatic Fluid Design Foundation For Divi

Fluid Base creates a complete fluid design system for Divi and applies it across the relevant areas of a website. Typography, spacing, vertical rhythm, Section and Row rhythm, Row width, module defaults, menus, WooCommerce, Contact Form 7, classic WordPress areas, and supported Divi contexts can all follow the same responsive foundation.

Instead of fixing layouts module by module and breakpoint by breakpoint, Fluid Base turns a few core design values into a proportional system that scales smoothly across screen sizes. This gives Divi projects a stronger starting point, reduces repetitive setup work, and helps prevent inconsistent one-off values across the site.

Built For The Divi Workflow

Fluid Base fits into the familiar Divi workflow instead of forcing a separate way of working. The Visual Builder remains the central working environment, while Fluid Base handles the repetitive responsive groundwork in the background.

This is a major advantage for real Divi projects: designers can keep building the way they already work, while Fluid Base handles the responsive foundation for fluid typography, spacing, rhythm, Row width, module defaults, and full-site consistency.

When a specific module, Section, Row, page, or layout area needs a deliberate exception, local Divi values can still be used. The workflow stays familiar and flexible, but starts from a stronger responsive foundation.

In practice, this means fewer repetitive setup steps, fewer breakpoint corrections, and more time for the actual design work.

Generated Values, Automatically Applied

Fluid Base does not only generate fluid font-size and spacing values. It maps them to the relevant Divi areas and applies them where they belong.

Instead of manually selecting variables field by field in the Visual Builder, Fluid Base can automatically connect supported modules, typography settings, layout contexts, Sections, Rows, menus, WooCommerce modules, Contact Form 7 outputs, and classic WordPress areas to the same fluid design foundation.

This turns generated values into a usable design system for the entire Divi project instead of leaving them as another manual setup task.

Responsive Beyond The Divi Builder

Fluid Base is not limited to typical Divi Builder sections. It can also bring the same fluid typography, spacing, and layout logic to areas that often sit outside the Visual Builder or are not rebuilt with the Divi Theme Builder.

This includes menus, classic WordPress content, sidebars, footer widgets, login areas, 404 pages, search results, and other classic theme outputs. For existing client websites, hybrid Divi setups, and older WordPress structures, this helps the full website feel responsive and consistent - not just the Builder layouts.

That makes Fluid Base especially valuable for real-world Divi projects where not every part of a site has been rebuilt perfectly with the Theme Builder.

Works With WooCommerce, Contact Form 7 And Most Divi Extensions

Fluid Base supports all native Divi modules - including the latest Divi 5 additions like Instagram Feed and Table of Contents - and extends the same fluid foundation to WooCommerce, Contact Form 7, classic WordPress areas, and most Divi extension setups.

Not every third-party Divi extension can be tested individually, but Fluid Base follows Divi’s normal module and Builder patterns and is designed for broad compatibility with popular extensions such as Divi Pixel and similar tools.

Per-module Fluid Base overrides are not available for non-native third-party modules. In Divi 5 especially, Fluid Base variables can still be used flexibly with other extensions, keeping extended websites aligned with the same fluid typography and spacing system.

Fluid Typography, Spacing And Layout Rhythm

Fluid Base creates responsive type and spacing scales that adapt smoothly between small and large screens. Headings, body text, lists, menu text, module text, and classic content areas can scale fluidly between defined minimum and maximum values.

The same proportional logic applies to spacing and rhythm. Paragraph spacing, Section padding, Row padding, vertical rhythm, and common module spacing can scale together instead of being corrected manually for every breakpoint.

This helps solve common Divi issues such as typography that feels too large on mobile, too small on desktop, uneven Section spacing, inconsistent Row padding, and layouts that need constant manual responsive cleanup.

Section And Row Height, Width And Module Defaults

Sections and Rows define the structure and visual pace of a Divi layout. Fluid Base helps control Section and Row height rhythm, Row padding, shared Row width, and classic container width through the same design system.

Row width can follow responsive spacing logic, helping content areas stay balanced across mobile, tablet, laptop, and large desktop layouts. This gives Divi projects a more intentional layout structure without manually tuning every page from scratch.

Fluid Base also provides useful module defaults, helping common Divi modules start from a cleaner responsive baseline. Typography, spacing, lists, buttons, forms, and layout details can stay closer to the same design foundation from the beginning.

Control Where The System Applies

Auto-apply controls make it possible to choose where the generated variables should be used across typography, spacing, Section and Row rhythm, Row width, content areas, sidebars, footer widget areas, supported modules, and classic WordPress outputs.

This makes Fluid Base flexible for both clean new builds and existing client websites. A project can follow one shared responsive foundation where consistency matters, while specific areas can stay untouched, be fine-tuned, or use their own local Divi values when the layout requires it.

Auto-applied values can also be overwritten locally whenever a module, Section, Row, page, or layout area needs a deliberate exception.

One-Click Starting Point And Reusable Presets

The default Fluid Base preset gives new projects an immediate responsive foundation with fluid typography, balanced spacing, Section and Row rhythm, Row width, and useful module defaults.

Instead of rebuilding the same responsive setup before every project, designers can start from a structured baseline and fine-tune only where the project actually needs it. This helps new Divi builds move faster from technical setup to real design work.

Fluid Base settings and presets can also be exported and imported with a few clicks. This is useful for recurring project structures, agency workflows, starter setups, and consistent Divi systems across multiple client sites.

Divi 5 Native, Divi 4 Optimized

In Divi 5, Fluid Base uses Divi’s native variable system. Fluid font-size and spacing values are created as Divi variables and applied directly inside the Divi workflow. This keeps the system clean, modern, and highly performant because Fluid Base uses Divi’s native variable workflow and keeps the usual Builder workflow intact.

In Divi 4, Fluid Base brings the same design logic through optimized CSS output. Since Divi 4 cannot use Divi 5’s native variable system, CSS generation is especially important.

CSS output is based on active feature groups, relevant page contexts, and detected content. Prepared styles can be cached and reused, helping Divi 4 projects benefit from a fluid system without unnecessary site-wide CSS bloat.

Performance-Focused Output

Fluid Base is built to keep the frontend lean. In Divi 5, fluid values use Divi’s native variable system, so the responsive foundation is delivered through Divi’s native variable workflow instead of a broad extra CSS layer.

For Divi 4, Fluid Base uses optimized CSS generation with active feature detection, page context awareness, content detection, and cached prepared styles. Output stays focused on what each page actually needs.

The result is a fluid design system without unnecessary global overhead: responsive typography, spacing, layout rhythm, menus, widgets, and classic areas stay aligned while the generated output remains targeted, efficient, and practical for real Divi websites and client projects.

Practical Divi Fixes For Real Projects

Fluid Base includes focused Divi fixes for classic theme areas and frontend details that often need manual cleanup in real projects. These fixes help menus, layout behavior, headers, footers, forms, search areas, and text flow stay more aligned with the same fluid system.

Typography - Orphan Text

Improves frontend text wrapping so very short final words are less likely to stand alone on a new line. This helps text blocks look more polished and balanced across responsive layouts.
Layout - Scrollbar Gutter Stability

Reserves the browser scrollbar gutter so centered Divi layouts keep the same horizontal position when moving between short pages without a scrollbar and long pages with a scrollbar. This helps prevent small but visible layout jumps between pages.
Layout - Sticky Footer Viewport Fill

Lets the main content area fill the browser viewport on short pages so the footer reaches the bottom edge instead of leaving empty body space below it. This keeps short pages visually cleaner and more intentional.
Header - Primary Menu Overflow Guard

Helps keep long desktop primary menus, search, and cart controls inside Divi’s configured header height. Fluid Base can reduce horizontal menu spacing first, hide Search when space is tight, and use Divi’s mobile menu before menu items overlap the logo or page content.
Header - Top Header Spacing Reset

Normalizes the classic top-header row so contact items, menus, and social icons sit on one cleaner horizontal bar. Optional controls can match the Footer Bottom height model on desktop, align social icons to the right, and define block gaps or icon spacing.
Footer - Footer Bottom Spacing Reset

Normalizes the classic Footer Bottom row so credits and social icons sit on one cleaner horizontal bar. Controls for block gaps and icon spacing help the footer feel more balanced, including stacked mobile footer layouts.
Footer - Footer Widget Block Stack

Keeps footer widgets on a predictable vertical stack so classic widgets, block widgets, and widget headings feel more consistent with the Fluid Base spacing and typography system. This helps classic footer widget areas look cleaner without rebuilding them from scratch.
Classic Theme Area - Core Form Styling

Adds Divi-like field and button styling to native frontend WordPress/Core forms in content, sidebar, footer-widget, search, password, login, and classic comment areas. WooCommerce forms, the WordPress admin, standalone wp-login.php, native Divi modules, and Builder editing are not changed.
Classic Theme Area - Search Button Icon

Uses a search icon instead of visible Search text on native Classic Theme Area search submit controls. When inactive, Fluid Base leaves the original Search text unchanged.

Fluid Base for Divi

Screenshots

Fluid Base for Divi

Frequently Asked Questions

What are the biggest benefits of Fluid Base?

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.

What exactly does Fluid Base do? How does the plugin work?

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. The Divi 4 version achieves the same visual result through controlled CSS overrides.

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.

What is the difference between the Divi 5 and Divi 4 version?

There is no visual difference on the frontend. For the end user, both versions look the same: in both Divi 4 and Divi 5, the website is fully responsive, with fluid typography and fluid spacing.

The main difference lies in how this result is achieved technically.

In Divi 5, Fluid Base uses the variable system provided by Divi 5. The plugin creates fluid variables that are not only applied automatically, but can also be used wherever Divi 5 supports variables in the Visual Builder. This is especially performant, flexible, and user-friendly because Fluid Base uses Divi 5’s native variable workflow directly inside the Visual Builder.

In Divi 4, the same visual result is achieved through targeted CSS overrides. This means the frontend remains fluid and responsive as well, but Divi 4 cannot use the same native variable logic as Divi 5. As a result, modules in Divi 4 cannot be controlled quite as granularly through the Fluid Base panel integrated into the Visual Builder as they can in the Divi 5 version.

In summary: the visible result is the same. Divi 5 provides the more modern, native, and flexible technical foundation.

Could all of this also be done manually, especially since Divi 5 already includes a variable generator for fluid font sizes?

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.

What is the difference between Fluid Base and a simple variable generator?

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.

Is Fluid Base still useful when the well-known Divi Responsive Helper plugin is already in use?

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.

Which Divi modules are supported by Fluid Base?

Fluid Base supports all Divi modules.

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.

Does Fluid Base also help with classic WordPress areas outside the Divi Theme Builder?

Yes. In general, it is best practice to build Divi websites as cleanly and consistently as possible with the Theme Builder, including areas such as 404 pages, blog archives, search results, or footers.

In practice, however, many existing websites were not built entirely with the Theme Builder. Classic WordPress areas, older templates, sidebars, or widget-based footers are often still used, while those areas are still expected to visually match the rest of the Divi design.

This is precisely where Fluid Base also helps. The plugin is not limited to individual Divi Builder layouts. It can also connect classic WordPress areas such as sidebars, footer widgets, 404 pages, and search results to the fluid system.

This keeps the design more consistent on existing websites or sites that are not fully built with the Theme Builder, without manually adjusting every classic WordPress output with CSS.

Does Fluid Base support WooCommerce and Contact Form 7?

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.

Can Fluid Base adjustments be exported and imported on another website?

Yes. One can export settings and presets with just a few clicks and import the same on another site.

It is particularly handy for repeating project templates, agency processes, or any customized starting points. An established fluid design system need not be created anew every time there is a new project.

Can individual values still be overwritten in the Visual Builder?

Yes, because it forms an essential component of the idea.

The Fluid Base establishes the fluid base automatically; however, it is still controllable. In case some particular module, section, page, or layout area requires its own values to be set, these can be overridden in the Visual Builder.

The system is flexible. While providing a reliable framework, it allows for exceptions to be made when desired.

Many plugins that extend Divi or WordPress promise many features, but then fail in edge cases, require manual CSS hacks or workarounds, or force a specific way of working. There may also be side effects with other plugins, slower websites, or unstable setups. Are these concerns justified with Fluid Base?

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.

Does Fluid Base slow down the website?

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. As a result, the fluid design system itself does not create any relevant additional slowdown for the 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. Only the CSS that is actually needed for the specific page is output. 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 itself, however, is designed as a targeted system for responsive foundations: with native Divi 5 integration, controlled CSS output for Divi 4, and no blanket overhead across the entire website.

Which languages does Fluid Base support in the admin interface?

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

Fluid Base for Divi

Features

Automatic Fluid Design Foundation For Divi

Built For The Divi Workflow

Generated Values, Automatically Applied

Responsive Beyond The Divi Builder

Works With WooCommerce, Contact Form 7 And Most Divi Extensions

Fluid Typography, Spacing And Layout Rhythm

Section And Row Height, Width And Module Defaults

Control Where The System Applies

One-Click Starting Point And Reusable Presets

Divi 5 Native, Divi 4 Optimized

Performance-Focused Output

Practical Divi Fixes For Real Projects

Typography - Orphan Text

Layout - Scrollbar Gutter Stability

Layout - Sticky Footer Viewport Fill

Header - Primary Menu Overflow Guard

Header - Top Header Spacing Reset

Footer - Footer Bottom Spacing Reset

Footer - Footer Widget Block Stack

Classic Theme Area - Core Form Styling

Classic Theme Area - Search Button Icon

Screenshots

Frequently Asked Questions