Promo Box (Divi)

Deal and promotion boxes for Divi 5 — a highlighted title, a big offer, prices, a coupon with a copy button, a deal countdown, a stock bar, badges and two buttons, with the image beside, above, below or behind the text. Hover the boxes. Each is labelled with its settings.

1. Image beside the text

Top: the defaults — image on the right (on top on phones), “Hot deal” tag, accent highlight, “up to 40% off”, a coupon to copy, zoom on hover. Bottom: image on the left, gradient highlight, a sale price, a stock bar, a countdown to midnight, two buttons and a corner ribbon.

2. Above, below or no image

Left: a product cut-out on top, round sticker, marker highlight, lift on hover, centred text. Middle: image below, hand-drawn underline, an inner frame on hover, outline button. Right: no image, outlined letters, starburst, a shine sweep on hover.

3. Image behind the text

The image fills the box under a navy overlay at 0.8 opacity, multiplied · centred text 560 px wide · 440 px tall (360 on phones) · inline countdown per visitor (48 hours, then starts again) · white button and a text link · the whole box is a link.

4. When the countdown ends

Left: a fixed date in the past — “When It Ends: Show a message”. Middle: the same with “Keep the box, stop at zero” and boxes without days. Right: a fixed date next week, boxes with days.

5. Styled from the Design tab, on a dark background

Box background, border and radius · accent, highlight and offer colours · fonts for the eyebrow, title, description, offer and price · coupon, stock bar and timer colours · button font, padding, radius and hover colours · badge colours.