Bold Restaurant FAQ Layout — Wood-Fired Steakhouse Guest Questions | Divi 5

FAQ Restaurant Bold

Bold dark FAQ layout for restaurants — covers reservations, dress code, dietary needs, private events, parking, and gift cards. Editable Divi 5 JSON with orange accents.

Rate this element

Be the first to rate

Download this section — free

Divi 5 JSON — import in seconds
Commercial license included
No account needed

Click to view the full page

Overview

A dark, ember-lit stage for the standard restaurant question wall. The section drops onto a near-black #0a0a0a canvas with 130px of top breathing room on desktop, then opens with a small ember-orange eyebrow (#ff6a13, 13px Outfit 600, 5px letter-spacing, uppercase) that reads "Established 2018 · Nashville." Below it, the h2 lands in warm ivory (#F5EFE6) at Outfit 800, 58px, with a tight -1px letter-spacing that keeps the display size from looking loose. An 18px muted-taupe intro paragraph (#B8B0A7) caps at 640px so the copy breaks in the middle of the column instead of stretching wall-to-wall.

The FAQ itself is a six-question grid arranged as three rows of two, with 28px column and row gaps. Every card is a glassy panel — rgba white 4% fill, a 1px hairline border at rgba white 8%, an 18px corner radius, and a soft 18px/40px black-35% drop shadow — and the border warms to ember orange (rgba 255,106,19,0.4) on hover so the whole grid feels alive under the cursor. Questions render as h3 Outfit 700 at 22px in ivory; answers sit at 16px Outfit with 1.75 line-height in the same muted taupe as the intro. A dimmer sign-off paragraph (#8A837B) closes the section with a host-desk phone and email, links picked out in ember orange.

Responsive behavior is handled with real breakpoint overrides, not fluid guesswork. Section padding steps 130/110 desktop → 96/80 tablet → 80/64 phone; the h2 scales 58 → 44 → 34px; card padding drops from 44/40 to 32/28 on phone; and the two-column rows switch to a stacked flex column so cards read single-file. Nothing collapses awkwardly, and no card ends up taller than its sibling as long as answers stay in the two-to-four-sentence range the copy was designed around.

What’s inside

Header block: uppercase ember eyebrow, 58px Outfit 800 h2, and 640px-capped intro paragraph, all centered
Six FAQ cards in a 2-column grid (three rows of 1_2, 1_2) with 28px column and row gaps
Glassy card treatment: rgba white 4% fill, 1px hairline border, 18px radius, 18px/40px drop shadow
Ember-orange hover state on every card border (rgba 255,106,19,0.4) — no JS required
Questions marked up as h3 Outfit 700 for real heading hierarchy and SEO structure
Footer contact line with mailto and tel-style copy, links themed in the ember accent
Full breakpoint overrides for section padding, h2 size, and card padding at tablet + phone
Built only from native Divi 5 Section, Row, Column, Heading, and Text modules — no third-party plugins

Who it’s for

Purpose-built for restaurants, steakhouses, chophouses, cocktail bars, wine rooms, private-event venues, and chef-driven concepts that want a premium, nighttime feel without going ornate. The six-card structure covers the classic restaurant FAQ script — reservations, dress code, dietary needs, private events, parking, takeout and gift cards — so most operators can swap copy and ship. Beyond hospitality, the dark palette and ember accent transplant cleanly to boutique hotels, spas, tattoo studios, whiskey distilleries, motorcycle dealerships, and any dark-mode SaaS or agency page that needs a serious, warm FAQ block. If your brand voice is confident and your room is dim, this layout will feel at home.

Customization tips

Palette lives in three colors: swap #0a0a0a for slate, deep green, or aubergine; retune the ember #ff6a13 to gold, copper, or crimson; and keep #F5EFE6 for headings — the muted-taupe body copy will still read cleanly against most dark backgrounds. If you flip to a light section, invert the card fill from rgba white 4% to rgba black 4% and the hairline border the same way. Question titles look best at ~40 characters or fewer (they render at 22px in a half-width column); answers work best at 2–4 sentences (roughly 60–90 words) so neighboring cards stay the same height. There are no photos to replace — this is a fully typographic layout, so you skip aspect-ratio work entirely. To add cards, duplicate one of the 1_2, 1_2 rows and keep the 28px column gap. To trim to four cards, delete a whole row rather than a single column so the grid stays symmetrical.

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 Restaurant FAQ Layout — Wood-Fired Steakhouse Guest Questions | Divi 5

How many questions does the layout ship with, and how do I add more?

Six cards, laid out as three rows of two. To add more, duplicate one of the 1_2, 1_2 rows and keep the 28px column gap so the rhythm matches. To trim, delete a full row rather than a single column — a lone column in a 1_2, 1_2 row will sit half-width and look off-balance unless you resize it to 4_4.

Is this an accordion or an always-open FAQ?

Always-open. Every answer is visible in the rendered HTML, which is deliberate for SEO and screen-reader accessibility. If you want click-to-expand behavior instead, swap each card's Heading + Text pair for the Divi Accordion module — the card's background, border, and shadow styling can stay on the column.

How does the grid behave on tablet and phone?

Real breakpoint overrides, not just fluid CSS. Section padding drops from 130/110 desktop to 96/80 tablet to 80/64 phone. The h2 scales from 58px to 44px to 34px. Card padding relaxes from 44/40 to 32/28 on phone, and the two-column rows switch to flexDirection column so cards stack single-file with the same shadow and hover glow intact.

Can I use it on a light or cream background?

Yes — invert three values. Change the section background from #0a0a0a to your light tone, flip the heading color from #F5EFE6 to a near-black, and swap the card fill and border from white-on-transparent to black-on-transparent (rgba 0,0,0,0.04 fill / rgba 0,0,0,0.08 border). The ember orange accent works on both.

What should I edit first when I drop it into a project?

Start with the eyebrow ("Established 2018 · Nashville") and the h2 — those set the voice. Then work down the six questions in order; the last card (takeout / gift cards) is often the one that varies most by concept. Finish with the sign-off line at the bottom: replace the phone and email, and the mailto link picks up the ember color automatically.

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.