v2026 Background & Surface Style Guide
A fully isolated reference for the reusable Section, Row, Module, image-overlay and helper classes available through the global v2026 Theme Options stylesheet.
How to use the global classes
- Open the relevant Divi Section, Row, Column or Module.
- Go to Advanced → CSS ID & Classes.
- Use the copy icon beside a class name to copy the complete class or class combination to your clipboard.
- Alternatively, select the
v2026-class shown beneath the required sample manually. - Paste it into the element’s CSS Class field without the leading dot.
- Use one main Section, Row or Module surface class on the same element.
- Combine it with optional radius, shadow or clipping helpers when required.
Important notes
- Each sample surface uses the same live
v2026-class printed beneath it. - The remaining
sg2026-classes only control this guide’s layout, labels and sample images. - For overlays, set the background image in Divi and remove any Divi background gradient.
- Keep width, max width, spacing, responsive sizing and column structure controlled through Divi.
- Add
v2026-cliponly when the background must be clipped inside rounded corners.
Section styles
Apply these classes to standard Divi Sections. Decorative gradients and overlays are listed first; simple flat backgrounds are listed last.
1. Gradient and textured Section backgrounds
Dark Atmospheric Section
Use for premium dark sections needing soft cyan lighting and a subtle lower divider. Apply to a standard Divi Section.
v2026-section-dark-atmosphereDark Radial Section
Use for dark feature sections that need cyan and blue ambient glows without a grid texture.
v2026-section-dark-radialDark Grid Section
Use for technical, AI or platform sections. The class adds the dark gradient, grid texture and lower glow.
v2026-section-dark-gridLight Radial Section
Use for light solution or platform sections that need a soft blue focus behind the content.
v2026-section-light-radialLight Showcase Section
Use for polished light sections with subtle cyan and blue ambient glows.
v2026-section-light-showcaseDark Strip Section
Use for full-width callout or transition strips. It includes a horizontal navy gradient and subtle cyan top border.
v2026-section-dark-strip2. Section image overlays
Overlay setup: add the background image through Section Settings → Content → Background → Image, remove any Divi gradient, and apply the overlay class to that same Section. Section Rows and Modules are automatically layered above the overlay.
Hero Overlay: Left Focus
Set the background image in Divi, remove any Divi gradient, then apply this class to the same Section. Best when the headline is on the left.
v2026-section-overlay-hero-leftHero Overlay: Framed Focus
Set the image in Divi and apply this class when the visual subject is mainly on the right and needs stronger framing.
v2026-section-overlay-hero-focusBalanced Dark Image Section
Use for general image-backed Sections needing readable white text across the full content width.
v2026-section-overlay-dark-balancedSoft Light Image Section
Use for image-backed Sections with dark text. The image remains visible under a soft white-to-blue wash.
v2026-section-overlay-soft-light3. Flat and simple Section backgrounds
Pure Black Section
Use for black header bands, separators or high-contrast transitions.
v2026-section-blackFooter Dark Section
Use for footer or closing sections needing a near-black vertical gradient.
v2026-section-footer-darkDeep Navy Section
Use when a simple solid navy background is preferred over a decorative gradient.
v2026-section-navyLight Blue Section
Use as the standard pale blue background around cards, dashboards and feature content.
v2026-section-light-blueLogo Band Section
Use for customer-logo strips, trust bands and quiet neutral content rows.
v2026-section-logo-bandSoft Pale Section
Use for ordinary light content sections requiring a soft off-white and blue tone.
v2026-section-softSoft Gray Section
Use for a slightly darker neutral background when separating adjacent light sections.
v2026-section-soft-grayWhite Section
Use when a pure white Section background is required.
v2026-section-whiteRow styles
Apply these to Divi Rows. Decorative gradients and image overlays are listed first; simpler Row surfaces are listed last.
1. Gradient, textured and glass Row surfaces
Standard Dark CTA Row
Recommended default for dark CTA and feature Rows. Combine with radius, shadow and clip helpers as needed.
v2026-row-dark-standardDark Content Row
Use for a contained dark Row with a subtle cyan highlight.
v2026-row-dark-cardDark Radial Row
Use for a Row that needs stronger ambient cyan and blue lighting.
v2026-row-dark-radialDark Grid Row
Use for contained technical or platform content requiring a grid pattern.
v2026-row-dark-gridDark Strip Row
Use for horizontal callouts with a directional dark gradient.
v2026-row-dark-stripDark Glass Row
Use for translucent dark Rows placed over a dark Section. The class includes a fine border and glass-like surface.
v2026-row-glass-darkLight Radial Row
Use for a light Row needing a subtle blue focus inside a pale or white Section.
v2026-row-light-radial2. Row image overlays
Overlay setup: add the image through
Row Settings → Content → Background → Image,
remove the Divi gradient, and apply the selected overlay class.
Add a radius helper and v2026-clip when the Row needs rounded image edges.
Image Row Overlay: Left Focus
Set the Row background image in Divi and apply this class when the text is mainly on the left.
v2026-row-overlay-dark-leftImage Row Overlay: Balanced
Use for image-backed Rows with content distributed across the Row.
v2026-row-overlay-dark-balancedImage Row Overlay: Soft Light
Use for image-backed Rows with dark text. Remove any Divi gradient before applying this class.
v2026-row-overlay-soft-light3. Flat and simple Row surfaces
Solid Dark Panel Row
Use when the Row needs a simple solid navy surface without decorative lighting.
v2026-row-dark-panelLight Floating Row
Use for a simple light Row with a subtle blue border and soft shadow.
v2026-row-light-cardModule and Column styles
Apply these to Text, Blurb, CTA and Code Modules, or to individual Divi Columns. Decorative card surfaces are listed before the simple ones.
1. Decorative Module and Column surfaces
Dark Glass Module
Use on a Text, Blurb, CTA or Code Module when a translucent glass surface is required.
Dark Glass Module
Use on a Text, Blurb, CTA or Code Module when a translucent glass surface is required.
v2026-module-glass-darkDark Content Module
Recommended default dark Module card with a restrained cyan highlight.
Dark Content Module
Recommended default dark Module card with a restrained cyan highlight.
v2026-module-dark-cardDark Cyan-Edge Module
Use when a dark card needs a stronger cyan highlight and cyan-tinted border.
Dark Cyan-Edge Module
Use when a dark card needs a stronger cyan highlight and cyan-tinted border.
v2026-module-dark-cyanDark Blue-Edge Module
Use when a dark card needs a broader blue and cyan light focus.
Dark Blue-Edge Module
Use when a dark card needs a broader blue and cyan light focus.
v2026-module-dark-blue2. Flat and simple Module and Column surfaces
Solid Dark Module
Use for a simple solid navy Module or Column background.
Solid Dark Module
Use for a simple solid navy Module or Column background.
v2026-module-dark-panelLight Floating Module
Use for a light translucent card with a subtle border and shadow.
Light Floating Module
Use for a light translucent card with a subtle border and shadow.
v2026-module-light-cardPale White Module
Use for a simple lightly tinted white Module or Column card.
Pale White Module
Use for a simple lightly tinted white Module or Column card.
v2026-module-white-card3. Module accents
Gradient-text classes are normally added directly to the Text Module or to a span inside the content. The accent-button class can be added to a Divi Button Module or directly to a button or link.
v2026-module-gradient-text-cyanv2026-module-gradient-text-bluev2026-module-accent-buttonOptional helper classes
These classes modify shape, shadow or clipping only. Combine them with one main Section, Row or Module style class.
8px radius
+ v2026-shadow-soft
+ v2026-shadow-strong
+ v2026-clip
Radius: use only one radius helper on the same element. Shadow: use either the soft or strong shadow. Clip: use when a background image, overlay or child content must remain inside the rounded boundary.
v2026-radius-smv2026-radius-mdv2026-radius-lgv2026-shadow-softv2026-shadow-strongv2026-clipRecommended combinations
Copy the complete combination into the Divi CSS Class field. Classes are separated by spaces.
Use Divi settings for width, max width, padding, columns and alignment.
v2026-row-dark-standard v2026-radius-md v2026-shadow-soft v2026-clipDark feature Module
Reusable styling for a Text, Blurb, CTA or Code Module.
v2026-module-dark-card v2026-radius-md v2026-shadow-soft v2026-clipThe complete gradient, grid and glow are supplied by one class.
v2026-section-dark-gridSet the image in Divi before applying the overlay and helper classes.
v2026-row-overlay-dark-left v2026-radius-md v2026-shadow-soft v2026-clipLight floating Module
Suitable for cards placed inside a pale or light-blue Section.
v2026-module-light-card v2026-radius-md v2026-shadow-softSet the image in Divi and keep the content typography dark.
v2026-section-overlay-soft-lightGlobal CSS and preview-page separation
Keep the reusable v2026- utility system in
Divi Theme Options → Custom CSS.
Keep the isolated sg2026- preview stylesheet only inside
this Style Guide page’s Page Settings CSS. Do not add the preview classes
to live website Sections, Rows or Modules.