Built for Divi 5

Custom code.
Visual editing.

Bring custom HTML, CSS, and JavaScript into Divi 5 and customize supported content visually — without going back to the code for every change.

HTMLCSSJavaScriptDynamic ContentACFWooCommerce
Custom Code
<section class="hero-card">
  <h2>Build Something Different.</h2>
  <p>Your custom component inside Divi.</p>
  <a href="#">Explore</a>
</section>
LIVE PREVIEW

Build Something Different.

Your custom component inside Divi.

Explore
OV Code BlockVisual Builder
HeadingBuild Something Different.
Text Color#F7F8FB
Button Link/explore/
A Better Workflow

Custom code shouldn't mean
giving up visual editing.

Build unique components your way, then keep customizing them from inside Divi 5.

01 — GENERATE

Build with AI

Create unique HTML, CSS and JavaScript components using your favorite AI coding assistant or write them yourself.

02 — IMPORT</>

Bring it into Divi

Paste your custom component directly into OV Code Block and keep the structure you already built.

03 — CUSTOMIZE

Edit it visually

Change supported text, images, colors, links, backgrounds and more without hunting through source code.

See It In Action

From code to visual
in seconds.

Select an editable property and see how custom code becomes manageable inside your visual workflow.

HTML / CSSSOURCE
<article class="product-card">
  <img src="image.jpg">
  <h3>Creative Component</h3>
  <p>Designed with custom code.</p>
  <a href="#">Discover</a>
</article>
Visual ResultDIVI 5

Creative Component

Designed with custom code. Customized visually.

Discover
Real Divi 5 Workflow

See OV Code Block
working inside Divi 5.

Select content in your custom-coded layout, edit supported values visually, and see the result directly inside the Divi 5 Visual Builder.

OV Code Block editing custom content inside the Divi 5 Visual Builder
01 — SELECT Choose the content you want to customize.
02 — EDIT Change supported text, images, colors, links and more.
03 — SEE IT LIVE Watch the design update directly inside Divi.
Visual Editing

Edit what matters.
Keep your code intact.

OV Code Block detects supported elements and exposes practical controls for everyday customization.

Text & Headings

Edit supported text content directly without searching through your markup.

Colors & Backgrounds

Customize colors, backgrounds, borders and supported CSS values from an easier visual interface.

Images

Swap images and supported background media without rewriting HTML.

Links

Update button and link destinations visually.

More Controls

SVG fill, videos, poster images, iframes, CSS variables, hover states, tables and more.

SVGVIDEOIFRAME:ROOTHOVER
AI + Divi 5

AI writes the code.
OV Code Block makes it yours.

Use your preferred coding assistant to generate custom components, then bring them into Divi 5 and keep customizing supported content visually.

Your Prompt
Describe the component you want.
</>
HTML + CSS + JavaScript
Use custom or AI-generated code.
OV
OV Code Block
Import and expose supported editable content.
Divi 5 Visual Builder
Continue designing in your normal workflow.
Dynamic Content

Static code becomes
dynamic.

Connect supported elements to WordPress, ACF, custom post types and taxonomies to build reusable coded templates.

One Custom TemplateACF + CPT
<h2></h2>
<p></p>
<a href="">View location</a>
Multiple EntriesONE TEMPLATE

Modern Villa

$850,000

Ocean House

$1,250,000

City Loft

$475,000

WooCommerce

Build product layouts
your way.

Combine your own HTML structure with dynamic WooCommerce product data inside Divi Theme Builder.

Use product fields, categories, tags, attributes and other supported data to create custom single-product experiences.

OV
IN STOCK

Creative Product

$89.00

A custom WooCommerce product layout powered by your own HTML and dynamic product data.

Add to Cart
Native Divi 5 Workflow

Built for Divi 5.
Not adapted to it.

OV Code Block was created for the new Divi 5 architecture and designed to feel at home inside the Visual Builder.

5

Native Divi 5 Module

Built specifically for the new Divi architecture.

Visual Builder

Customize supported content directly from your Divi workflow.

Theme Builder

Create reusable coded templates powered by dynamic content.

Responsive Ready

Use your components across modern Divi layouts and devices.

What You Can Build

Custom components.
Still inside Divi.

From animated sections to interactive pricing and dynamic WooCommerce layouts — your custom code can remain part of your Divi workflow.

CREATIVE STUDIO

Build something
different.

Animated Hero

Custom HTML, CSS and JavaScript with visually editable content.

MonthlyYearly
Starter $19 /mo

Interactive Pricing

Pricing cards, variants and custom JavaScript interactions.

OV
IN STOCK

Creative Product

$89.00

Dynamic Product

WooCommerce data rendered inside your own custom structure.

OV Code Block

Your code. Your design.
Now editable in Divi.

Bring custom HTML, CSS and JavaScript into a visual Divi 5 workflow — with dynamic content, ACF, WooCommerce and more.

This page itself is a live example of what OV Code Block can bring into Divi 5.