Advanced Pricing Table (Divi)

A whole pricing section for Divi 5, well beyond the built-in Pricing Tables: each plan is a Pricing Plan child module with a price for up to three billing periods behind a toggle, tabs or pills; a usage slider multiplies per-unit prices; six designs, four badge styles, original prices, per-period checkout links, feature lists with included / excluded / highlighted lines, headings and tooltips, currency and number formatting, hover effects — and on phones the plans become a swipeable carousel with dots.

1. Monthly / yearly toggle

Cards · a toggle between monthly and yearly (with a “Save 20%” tag) · the yearly Growth price shows its original price struck out · the buttons switch to the yearly checkout links · a tooltip on “Client portal” · lift on hover · the featured plan raised · a carousel with dots on phones, starting on the featured plan.

2. Three periods, header band

Segmented tabs for monthly, yearly and lifetime · coloured header bands with icons · a corner ribbon · the lifetime price for the enterprise plan is text (“Let’s talk”) · a heading inside a feature list · euro after the number with a comma decimal · icons in circles.

3. Usage slider, per-seat pricing

A usage slider (1–50 team members) multiplies the per-seat price of Team and Business · “for 5 seats” under the price follows it · pills for monthly / yearly · outline design · a plan-level accent colour on Business · dividers between features · buttons under the price.

4. Joined columns, four plans

Four joined columns with a full-width banner on the featured plan · centred content · one billing period (no switch) · a pound sign · product images as plan media · a carousel on tablets too.

5. Finished design

Gradient featured plan on a dark page · minimal outer plans · custom colours for the cards, text, price, features, switch and buttons · Georgia prices · no hover movement.