Bold Tattoo Studio Pricing Section for Divi 5: Three-Tier Session Rates

Pricing Portfolio Bold

Bold three-tier tattoo studio pricing section for Divi 5. Displays flash, half-day, and full-day session rates with feature lists and booking CTAs on a yellow background.

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 opens on a flat electric yellow (#ffd60a) section background — a deliberate choice that reads as studio signage rather than web convention. The section carries 80px vertical padding on desktop, scaling down to 56px on tablet and 36px on mobile, so the breathing room stays proportional without wasting screen space on small devices.

The header block is a single centered column: an all-caps Work Sans eyebrow at 13px with 2px letter-spacing, followed by an Unbounded 800-weight h2 at 44px with -1px tracking and textWrap: balance — so the headline "Small flash, long days, big pieces." breaks cleanly at every viewport. A Work Sans body line at 18px with 1.6em line-height sits beneath it as a sub-explanation. Both the h2 group and the body text group are constrained to max-widths of 720px and 640px respectively, keeping line lengths readable on wide monitors without an explicit grid hack.

The three pricing cards sit in a 1/3 + 1/3 + 1/3 row with a 24px column gap and alignItems: stretch so all cards reach the same height regardless of content length. The middle card (Half day, $450) uses a solid #2438ff cobalt background to mark it as the recommended tier — a white "Most popular" pill badge using 12px uppercase Work Sans at the top confirms this visually. The outer two cards use white backgrounds with 3px solid #0c0c14 borders and a hard offset box shadow (6px 6px 0 #0c0c14, blur: 0) — a neo-brutalist detail consistent with tattoo studio aesthetics. On hover, every card and button translates -4px on the Y axis for a subtle lift that reinforces the shadow depth.

Each card is structured identically: a name/price/unit group at the top, a divider-bordered features list in the middle (three icon + text rows using FontAwesome check icons), and a CTA button pinned to the bottom via flexGrow on the features group. On tablet the three columns wrap to full width; on mobile they stack vertically in a single column. Price figures use Unbounded at 44px on desktop, stepping to 40px on tablet and 36px on phone, so the numbers remain the dominant visual element at every size.

What’s inside

Three-column pricing row (Flash / Half day / Full day) with `alignItems: stretch` so cards always match height, plus 24px gap hardcoded in the layout
Neo-brutalist hard-shadow card style: 3px solid `#0c0c14` border + 6px/6px zero-blur box shadow on each card, with a `-4px` Y-axis hover lift on both cards and buttons
Middle-column featured treatment: solid `#2438ff` cobalt background, white type throughout, a white pill badge labelled "Most popular", and a white-background CTA button
Dual typeface pairing: Unbounded (800w) for all price figures and card titles, Work Sans for eyebrow, body text, feature list items, and button labels
Per-card feature lists built from native Divi Icon + Text module pairs inside flex rows, with a top-border divider group separating them from the price area
Responsive column switching: `nowrap` three-column on desktop, `wrap` on tablet, single-column `flex-direction: column` on phone — all wired natively in the column `flexType` settings
Centered header block with constrained max-widths (720px for h2, 640px for body) and `textWrap: balance` on the main headline to prevent awkward single-word orphans
CTA buttons use zero border-radius and the same hard shadow as the cards, keeping the flat ink-stamp aesthetic consistent from header to call-to-action

Who it’s for

This layout is built for independent tattoo artists and multi-artist studios who need a pricing page that matches the visual language of their craft — direct, high-contrast, no soft gradients or rounded corners. It also translates well to other appointment-based creative studios: piercing studios, barber shops, and independent ink-and-design shops where session duration is the natural pricing unit. The three-tier Flash / Half day / Full day structure maps onto any time-based service model, so custom portrait photographers, recording studios, or makeup artists doing day-of-event bookings can adapt the card labels with minimal copy changes.

Customization tips

The yellow section background (#ffd60a) is the loudest palette choice: swap it for any flat color in the Divi section background field and the rest of the layout adapts automatically. The cobalt featured card (#2438ff) should stay noticeably different from both the section background and the outer cards — high contrast is what makes it read as "recommended." The hard shadow color (#0c0c14) is shared across borders, shadows, and icon colors; changing it in one place requires updating it in the card border, box shadow, and icon modules individually (there is no global token here).

Keep card titles to one or two words — the Unbounded font at 22px starts wrapping at three short words on mobile. Price figures have no hard limit but values above five digits will break the baseline alignment with the unit label. Feature list items are capped at roughly 30 characters before they wrap past the icon; the current items ("Up to eight hours", "Sleeves and back pieces") are close to that limit. Button labels should stay under 20 characters to avoid overflow on the 1/3 column width.

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 Bold Tattoo Studio Pricing Section for Divi 5: Three-Tier Session Rates

How does the layout handle three columns on a narrow phone screen?

The row is configured with `flex-direction: column` on phone and `flexType: 24_24` on each column, so all three cards stack vertically at full width. The section padding also steps down from 80px to 36px, so the stacked cards don't feel cramped.

Which Divi 5 modules does this section actually use?

The layout uses native Divi 5 Section, Row, Column, Heading, Text, Group, Icon, and Button modules only. No third-party modules or custom code blocks are required.

What should I edit first after importing?

Start with the three price figures and tier names inside each column's Heading and Text modules. Then update the three feature list items per card to match your actual service inclusions. The CTA button text is the last thing to change before the section is ready to publish.

Does the "Most popular" badge on the middle card require any custom CSS?

No. It is a plain Divi Group module with a white background, 12px border-radius applied to all corners, and a Text module inside. You can change the label text, background color, or text style entirely within the Divi visual builder.

Are there any images in this layout?

No images are used. The visual weight comes entirely from the flat color backgrounds, the hard offset box shadows, and the typography contrast between Unbounded and Work Sans. This means the layout renders immediately without any image loading dependency.

Can I add a fourth pricing tier without breaking the responsive behavior?

You can duplicate a column and update the row's `columnStructure` to a four-column value, but the current responsive wrapping rules are set specifically for three equal columns. A fourth column will wrap to a new row on tablet rather than displaying four across, and you would need to adjust the `flexType` values on each column to get the layout you want.

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.