Dark Webinar Platform Pricing Table for Divi 5: Three-Plan Comparison

Pricing Events Dark

A dark-themed three-plan pricing comparison table for event and webinar platforms, built with Divi 5. Compare Meet, Present, and Summit tiers with attendee limits and feature breakdowns.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

This section opens with a two-level label system that earns its vertical space: a 13px uppercase Inter eyebrow in #9aa4c0 reading "Compare plans" establishes context before the 44px h2 "Host an event of any size" lands at full weight. Both sit inside nested Group modules with explicit maxWidth constraints (1080px and 720px respectively), left-aligned against the #0b1020 deep-navy canvas. The subhead below the title — set at 18px with 1.6em line-height in the same muted slate — tells buyers the billing cadence without cluttering the headline zone. The entire header block uses textWrap: balance on the h2 so it never breaks awkwardly at any viewport.

The table itself is a four-column CSS Grid Group (gridColumnCount: 4, columnGap: 1px, rowGap: 1px) with the gaps filled by the group's own #2a3558 background, which acts as a hairline divider without any border juggling. Every cell is a Group module that swaps between two background values: #0b1020 for the base rows and #151c33 for the "Present" (middle/featured) plan column, creating a persistent highlight band that draws the eye without a separate highlighted-card component. Cell padding is 18px top/bottom, 16px left/right on desktop, tightening to 14px/6px on mobile — tight enough to stay compact, generous enough to keep tap targets comfortable.

Feature availability is communicated through two distinct signals. Checkmark icons use the Font Awesome f00c glyph at 16px, centered and set in #f2f4fa, for positive inclusion. Unavailable features render an HTML — in the muted #9aa4c0 slate, center-aligned in a Text module — a quieter signal that does not require a separate icon set and degrades cleanly if webfonts are slow to load. This binary vocabulary covers four feature rows: HD video and chat, attendees per event (with numeric values 100 / 1,000 / 10,000), branded registration pages, breakout rooms, and live translation.

On mobile the row collapses via flexDirection: column on the Row module, and the section padding steps down from 100px to 72px (tablet) then 48px (phone). Font sizes across plan headers and cell text also step down to 12px on phone, keeping the grid legible without horizontal scroll. The CTA button — "Host an event" in #0b1020 text on a #7c9cff periwinkle background — sits below the grid with 12px rounded corners, a 1px matching border, and an inversion hover state (transparent fill, periwinkle text), giving it clear affordance against the dark background without competing with the table above it.

What’s inside

Three-plan comparison grid built with native Divi 5 Group modules using CSS Grid layout (4 columns, 1px gap-as-divider technique) -- no custom code or third-party modules required
Per-plan header cells showing plan name and price as stacked Text modules, with the center 'Present' plan column highlighted via a distinct `#151c33` background that persists across every row
Font Awesome checkmark icons (divi/icon module, `f00c` glyph, 16px) for positive feature inclusion, paired with muted HTML en-dash Text modules for unavailable features -- no icon library dependencies beyond Divi's built-in FA set
Two-level section header: uppercase 13px eyebrow heading (h4), bold 44px h2 with `textWrap: balance`, and an 18px billing-cadence subhead, each in separate Group modules with distinct maxWidth constraints for controlled line lengths
Periwinkle CTA button (`#7c9cff` fill, `#0b1020` label, 12px border-radius) with a full inversion hover state (transparent background, periwinkle text) wired directly in the button module decoration
Fully responsive: section padding steps down in three breakpoints (100px / 72px / 48px), font sizes drop to 12px on phone, and the row switches to `flexDirection: column` so the grid stacks vertically on narrow screens
All typography set in Inter via Divi's built-in font system -- no Google Fonts embed code required if Inter is already loaded by your theme

Who it’s for

This section is the right fit for webinar platforms, virtual conference tools, and online event software selling tiered hosting plans. It also works for course creators and membership site builders who need to present attendee-cap or feature tiers side by side. The dark palette and periwinkle accent read as modern SaaS, so it fits agencies building sites for tech event brands, community platforms, or professional development providers. If your client runs corporate training, virtual summits, or hybrid events and needs a pricing section that feels premium without being flashy, this grid structure communicates scale and capability clearly.

Customization tips

Start with the two background tokens: swap #0b1020 (base) and #151c33 (featured column) in the Group module decoration panels to shift the entire palette. The #7c9cff periwinkle used on the button and implicitly as the accent can be changed in the button's background and border color fields simultaneously. Plan names ("Meet", "Present", "Summit") and prices are plain Text modules -- edit the inner content directly. Feature row labels are also Text modules in the leftmost column; keep them short (under 30 characters) or the column will compress the plan cells on tablet. The attendee counts (100 / 1,000 / 10,000) follow the same pattern. To add a feature row, duplicate any existing 4-cell row group and edit the content -- the grid layout handles positioning automatically. To remove the "Most popular" badge from the Present header cell, delete the first Text module inside that group; the plan name and price Text modules below it will reflow upward.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Dark Webinar Platform Pricing Table for Divi 5: Three-Plan Comparison

How does the 'featured' column highlight work without a separate card component?

The "Present" plan column cells use `#151c33` as their Group background instead of the base `#0b1020`. The outer grid Group sets its own background to `#2a3558` and uses 1px column and row gaps, so that background color bleeds through as hairline dividers. No custom CSS is needed -- the entire effect is native Divi 5 Group decoration.

What modules are actually used in this layout?

The section uses five native Divi 5 module types: divi/section, divi/row, divi/column, divi/group, divi/heading, divi/text, divi/icon, and divi/button. No third-party or premium modules are required.

Does the table scroll horizontally on mobile, or does it restack?

The Row module has `flexDirection: column` set at the phone breakpoint, so the entire layout stacks vertically on narrow screens rather than trying to fit four columns into a phone viewport. The grid becomes a single-column stacked list of rows. If you need a horizontally scrollable table instead, you would need to add overflow-x CSS to the outer Group -- that is not wired in by default.

What should I change first when adapting this for a different product?

Edit the three plan-header cells (plan name and price text) and the feature label column (the leftmost cells in each row). Then update the h2 headline and subhead text. The CTA button label is a single text field. Those six touchpoints cover 90% of the content swap -- the visual structure requires no changes.

Are there images or background images in this section?

No. The entire section is color-only -- flat background colors on the section and on each cell Group. There are no background images, gradients, or media embeds. This keeps the layout fast-loading and means there are no image aspect ratios to manage.

Can I add a fourth pricing plan column?

Yes. Change the grid Group's `gridColumnCount` from 4 to 5 in the layout (decoration > layout > gridColumnCount), then duplicate one of the existing plan-header cells and the corresponding cells in each feature row. The 1px gap dividers will extend automatically. On mobile you may want to test the stacked result, as adding more plan cells increases the vertical length of the stacked layout.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.