Bella Nota — Elegant Restaurant Contact Page for Divi 5

Full Landing Restaurant Elegant

A warm, elegant Divi 5 landing page for an Italian trattoria — hero with reservation CTA, contact block, FAQ, and candlelit closing CTA. Playfair Display + Outfit, terracotta on cream.

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

Bella Nota is a four-section contact page for a restaurant, and every design decision pushes toward one action: getting a table booked. The hero opens on a warm cream canvas (#FAF3E7) with a 3/5–2/5 split — a Playfair Display headline at 68px on the left, a portrait food photo with a 24px radius and a deep, soft shadow on the right. A terracotta eyebrow line (13px, 3px letter-spacing, uppercase) sets the tone before the headline lands, and a single pill-shaped "Reserve a Table" button in the same terracotta (#B4472E) carries the accent color that repeats through the entire page. Hours, address, and phone sit in small muted type directly under the button, so the essentials are visible without scrolling.

The middle of the page does the practical work. Two white cards on a slightly lighter cream background (#FBF6EF) sit side by side with a 40px gap: one holds the address, phone, email, and hours with clickable tel: and mailto: links; the other holds a working Divi Contact Form with name and email side by side, plus full-width party-size and message fields. The cards share a 20px radius, a 1px warm-tone border, and generous 48px/40px internal padding, so the form never feels cramped. Below that, four FAQ cards answer pre-visit questions (parking, accessibility, private events, gift cards) in the same card language, with a subtle shadow lift on hover.

The page closes by flipping the palette: a near-black espresso section (#2A1810) with a photographic background under a 135° gradient overlay, cream Playfair headline, and a second reservation button — this one rectangular rather than pill, signaling finality. Spacing is deliberate throughout: section padding steps from 140px on desktop to 90px on tablet to 64–72px on phone, headlines scale from 68px down to 36px, and every multi-column row collapses to a single full-width stack on mobile, image and form included.

What’s inside

Split hero with 3/5–2/5 column structure: Playfair Display headline, terracotta eyebrow, pill CTA button, and a rounded portrait image with layered box shadow
Working Divi 5 Contact Form module with four fields — name and email in a half-width pair, party-size and message full width — styled with cream field backgrounds and 12px radii
Info card with clickable tel: and mailto: links, address, and an hours block with an italic reservations note
Four FAQ cards in two 2-column rows, each with a Playfair h3 question, 16px Outfit body copy, and a hover shadow lift
Dark closing CTA section with background photo, 135° gradient overlay, cream headline, divider accent, and a full contact/hours footer block
Consistent card system: white surfaces, 20px radius, 1px warm border, preset soft shadows reused across contact and FAQ sections
Responsive typography baked in at three breakpoints — hero headline 68/48/36px, section h2s 48–54px down to 32–34px on phone
Section padding tuned per device (140px desktop → 90px tablet → 64–72px phone) with all rows collapsing to single-column stacks on mobile

Who it’s for

This layout fits any sit-down restaurant that takes reservations — trattorias, bistros, wine bars, farm-to-table spots, and neighborhood fine dining. The warm cream-and-terracotta palette and serif headlines lean Italian and Mediterranean, but the structure works for any cuisine where the goal is a booked table rather than an online order. It also adapts well to cafés with event space, supper clubs, and private-dining venues, since the FAQ cards and contact form already cover party size, private events, and accessibility. If you run a fast-casual or delivery-first concept, the reservation-centered flow is the wrong shape — but for anyone whose contact page needs to answer "where are you, when are you open, and can I get a table Saturday," this is exactly that page.

Customization tips

Start with the copy: swap the restaurant name, address, hours, and the phone/email in both the info card and the dark footer block — they appear in three places, so search for them rather than editing one. The terracotta accent (#B4472E) is used on the eyebrows, both buttons, links, and the form button; changing it consistently re-brands the whole page. Keep the hero headline under about eight words so the 68px Playfair setting doesn't wrap to three lines on desktop. The hero image is portrait (1000×1200, roughly 5:6) — replace it with a similarly tall crop or the column balance shifts. The dark CTA background image sits under an 82–92% opacity gradient, so almost any moody photo works there. In the form, point the receiver email at your own address and rename the party-size field if you'd rather ask something else. FAQ answers run 40–60 words each; staying in that range keeps the four cards visually even.

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 Bella Nota — Elegant Restaurant Contact Page for Divi 5

Does the contact form actually work, or is it decorative?

It's the real Divi 5 Contact Form module with four configured fields — name, email, an optional party-size line, and a message. You only need to set the receiver email address (it ships pointing at a placeholder) and submissions will send through Divi's built-in handler. Field styling, the pill submit button, and the half-width name/email pair are all preset.

How does the two-card contact section behave on phones?

The info card and the form card sit side by side on desktop, then stack vertically on tablet and phone — each card goes full width in order, info first, form second. The same happens to the FAQ cards and the hero's text/image split. Nothing is hidden on mobile; everything reflows into a single column with reduced section padding.

What should I edit first after importing?

The contact details. The phone number, email, address, and hours appear in the hero footer line, the "Find us" card, and the dark closing section — update all three, plus the tel: and mailto: link targets inside them. Then set the contact form's receiver email, and finally swap the two photos.

Are the photos included, and what sizes do I need to replace them?

The layout references two stock photos from Pexels (free to use). The hero image is portrait, about 5:6 — a 1000×1200px crop is ideal since the column caps it at 480px wide. The closing CTA background is landscape and sits under a dark gradient overlay, so a wide shot around 1600px works; detail matters less there because the overlay mutes it.

Which fonts does it use, and can I swap them?

Headings are Playfair Display (weights 500–600) and body text is Outfit — both Google Fonts that Divi loads automatically. You can swap them in each heading and text module's font settings; if you replace Playfair, pick another high-contrast serif or reduce the 68px hero size, since the layout's elegance leans heavily on that typeface's proportions.

The FAQ answers mention parking and gift cards — do I have to keep those topics?

No. The four FAQ cards are plain Divi Text modules with an h3 and a paragraph, so you can replace both the questions and answers freely. Parking, accessibility, private events, and gift cards are just the four questions restaurant guests ask most — keep the ones that apply and rewrite the rest. Aim for 40–60 words per answer to keep the card heights balanced.

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.