Divi5Lab

Corporate Real Estate CRM Pricing Table for Divi 5: Three-Plan Comparison

Clean, corporate-style Divi 5 pricing section for real estate CRM tools. Three-tier comparison table (Solo $29, Agency $59, Group $99) with feature rows and a start free trial CTA.

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 pricing section uses a four-column CSS grid laid out inside a native Divi 5 Group module to render a true comparison table — one column for feature labels, three for plan tiers (Solo at $29, Agency at $59, Group at $99). The grid is assembled with gridColumnCount: 4 and a 1px gap filled by the parent group's #d3dbe8 background, which acts as a hairline divider between every cell without a single border declaration on individual cells. The result is a crisp, ledger-style table that reads like a spreadsheet and avoids the visual noise of nested card borders.

The header block above the grid uses a deliberate two-level hierarchy: a 13px uppercase IBM Plex Sans label in steel-blue (#4f5d73) announces "Compare plans," while the 44px H2 in deep navy (#13233f) carries the actual selling line. The subheading narrows to 720px max-width and left-aligns, so the eye anchors left before scanning right across the columns — a natural reading path for a comparison layout.

Inside the grid, alternating rows carry a light #f2f5fa tint on the Agency ("Most popular") column cells, creating a persistent vertical highlight that guides the eye toward the recommended tier without a bold outline or badge overlay. Feature availability is communicated in two ways: FontAwesome checkmark icons (fa , 16px, centered) for included features, and an em-dash text node in #4f5d73 for excluded ones, keeping the visual weight even across all cells.

Mobile behavior is explicit in the JSON: the outer row switches to flexDirection: column on phone breakpoints, and section padding steps down from 96px to 44px vertically. The H2 scales from 44px to 30px through three breakpoints. Cell padding reduces from 16px to 6px horizontally on phones, keeping content readable without horizontal scroll. The CTA button — "Start free trial" in #1c4a94 blue with 6px radius and 28px side padding — sits below the grid and inherits the full column width, making it the clear exit point of the section.

What’s inside

  • Full-width four-column CSS grid (native Divi 5 Group with `gridColumnCount: 4`) used as the comparison table skeleton
  • Three plan tiers — Solo ($29), Agency ($59, highlighted as Most Popular), Group ($99) — each in a dedicated grid column with plan name and price stacked via `flexDirection: column`
  • FontAwesome checkmark icons (fa solid ``, 16px) and em-dash text nodes for clean include/exclude signaling across five feature rows
  • Five labeled feature rows: Contact and deal tracking, Listing syndication (tiered: 500 / 5,000 / Unlimited), Email and SMS campaigns, Team reporting, Custom branding
  • Alternating `#f2f5fa` cell backgrounds on the Agency column to create a persistent "recommended" highlight without borders or badges
  • Responsive H2 heading scaling across three breakpoints (44px desktop → 36px tablet → 30px phone) using IBM Plex Sans with `textWrap: balance`
  • A native Divi 5 Button module below the grid — "Start free trial" in `#1c4a94` with 6px radius and 14px/28px padding — as the section's sole CTA

Who it’s for

This layout is a strong fit for real estate technology companies, CRM vendors targeting brokerages, and PropTech startups that sell per-agent or per-seat software subscriptions. It works equally well for boutique real estate agencies building a white-label tool site, franchise groups presenting tiered membership options to their agents, and web designers building client sites in the real estate, mortgage, or property management verticals. The feature rows (deal tracking, listing syndication, email campaigns, team reporting, custom branding) map directly to the language buyers in this space already use.

Customization tips

The three-color palette (#13233f deep navy, #1c4a94 action blue, #4f5d73 slate, #f2f5fa cell tint) is controlled entirely through text and background color fields on individual Group and Text modules — no global preset is required. To rebrand, update #1c4a94 on the button background and #13233f on heading and icon color nodes; the tint column will follow if you adjust the #f2f5fa groups.

Plan names and prices sit in separate Text modules so you can swap "Solo / Agency / Group" for your own tier names without touching the price nodes. Keep plan names under 12 characters to avoid line-wrapping in the 16px-padded cells. Feature row labels (left column) comfortably hold up to 30 characters at 14px before the cell height grows; longer labels will push all row heights up uniformly because the grid tracks row height from the tallest cell. The CTA button label fits up to 22 characters without padding adjustment.

How to install this layout

  1. Download the layout JSON file from this page.
  2. Open the target page in the Divi 5 builder.
  3. Open the portability panel (up/down arrows icon) and choose the Import tab.
  4. Upload the JSON. Tick “replace existing content” only for full-page imports.
  5. 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 Corporate Real Estate CRM Pricing Table for Divi 5: Three-Plan Comparison

Does the table scroll horizontally on mobile, or does the layout reflow?

The outer Divi row is set to `flexDirection: column` on phone breakpoints, which stacks everything into a single column. The four-column grid itself does not reflow to a stacked list — on very narrow screens the grid cells compress. If you need a fully stacked mobile view, you would need to replace the CSS grid Group with a separate mobile-only module structure.

Which modules make up the comparison grid?

The grid is a single Divi 5 Group module with `display: grid` and `gridColumnCount: 4`. Each cell is a nested Group containing either a Text module (for labels, prices, and dashes) or an Icon module (for checkmarks). There are no Pricing or Blurb modules — the table is built entirely from Group, Text, and Icon primitives.

How is the "Most Popular" column visually distinguished?

The Agency column cells use a `#f2f5fa` background instead of the default `#ffffff`. The header cell for that column also includes a small "Most popular" label as a Text node above the plan name. No borders, shadows, or badges are used — the tint alone carries the emphasis.

What should I edit first after importing?

Start with the three plan name Text modules and their corresponding price Text modules — those appear in the second, third, and fourth header cells of the grid. Then update the H2 heading ("The right plan for your agency") and the button label ("Start free trial") to match your own offer before touching feature rows or colors.

Are there any images in this layout?

No. The section uses no image modules, background images, or avatar photos. The entire layout is typography, icons, and color blocks, which means there are no aspect ratio constraints and no placeholder images to replace.

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.