Bold Portfolio FAQ Section — Divi 5 Layout

FAQ Portfolio Bold

High-impact FAQ section for portfolio sites. Two-column expandable questions on a deep emerald background with neon accents — built for Divi 5.

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

This is a full-width FAQ section built for portfolio sites that want the accordion pattern without the corporate-blue clichés. The section sits on a deep spruce background (#0a1f1a) with 96px of vertical padding on desktop, softening to 64px on phone so the block breathes but never dominates a scroll. The header stack is centered inside its own row: a tight FREQUENTLY ASKED eyebrow in neon green (#00ff88, 13px, 4px letter-spacing), a chunky 56px Outfit 800 headline ("The Questions I Get Most"), and a supporting sentence capped at 640px. On phone the headline drops to 36px with a 42px line-height so the display type still lands.

Below the header runs a two-column grid (1/2 + 1/2) with a 48px column gap and 24px row gap. Each column holds four questions rendered as native HTML <details> accordions inside a Divi Text module — no JavaScript dependency, no third-party plugin. Rows are separated by hairline borders in translucent neon green (rgba(0,255,136,0.22)), and every summary uses the accent color for the question label plus a large + on the right edge as the open/close cue. Answers flow in the light mint body color (#c9f5e0) at 16px with a 1.65 line-height for comfortable reading.

The layout wraps by design: because the row uses flex-wrap: wrap, the two columns stack cleanly on narrow viewports and each accordion spans full width, keeping tap targets generous. Outfit carries the entire block — heading, body, and summary labels — so the aesthetic stays consistent whether the reader is skimming on desktop or thumb-scrolling on a phone.

What’s inside

Divi Section with a solid dark-green background and asymmetric vertical padding (96px desktop / 64px phone)
Two Divi Heading modules: a tracked-out eyebrow and a large 56px Outfit 800 headline that scales down to 36px on phone
Centered Divi Text intro capped at 640px for a tight header block
Two-column row (1/2 + 1/2) with a 48px column gap and 24px row gap, set to wrap on narrower widths
Eight FAQ entries built with native HTML `<details>/<summary>` inside two Divi Text modules — no accordion plugin required
Neon green accent (`#00ff88`) drives eyebrow, question labels, `+` indicators, and hairline row borders
Consistent Outfit typography across headings, body copy, and accordion summaries
Editorial copy stubbed in for creative practices: scope, timelines, pricing, revisions, retainers, and kickoff

Who it’s for

Made for solo designers, art directors, illustrators, photographers, and small studios who want a bold, dark portfolio site rather than the usual clean-white template. The tone of the sample copy — project types, revision rounds, source-file handoff, retainer minimums — is written straight at prospective clients doing pre-discovery-call research. It also drops cleanly into portfolios for motion designers, brand strategists, tattoo artists, interior designers, and creative freelancers billing flat project fees. Anywhere the FAQ is really a soft-sell tool that preempts scope, timeline, and pricing objections before the intro call, this section pulls its weight.

Customization tips

Swap the palette at the preset level: the background (#0a1f1a), accent (#00ff88), and body text (#c9f5e0) are the only three colors doing work — retune all three together (e.g. graphite + coral, black + electric blue) rather than editing one in isolation. If you change the accent, remember to update the border color rgba(0,255,136,0.22) inside the details HTML so the hairlines still match. Keep question labels to roughly 50 characters so they sit on one line next to the + indicator; answers read best at two or three sentences (about 40–65 words). There are no images to worry about — the whole section is type and rules — so no aspect-ratio decisions to make. If eight questions is more than you need, delete <details> blocks in pairs (one from each column) to keep the two-column balance; drop below six and consider collapsing to a single full-width column.

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 Portfolio FAQ Section — Divi 5 Layout

Which Divi 5 modules is this actually built from?

Two Divi Heading modules for the eyebrow and headline, and three Divi Text modules — one for the intro paragraph and two more that hold the accordion HTML (four `<details>` elements each).

Do the accordions need a plugin or JavaScript?

No. They use the browser's native `<details>/<summary>` element, so open/close works out of the box in every modern browser with zero scripts loaded.

How does the two-column layout behave on mobile?

The row is set to `flex-wrap: wrap`, so on narrow viewports the two 1/2 columns stack into a single full-width column and each question becomes a comfortable tap target.

What should I edit first after importing?

Rewrite the eight question/answer pairs inside the two Divi Text modules — the sample copy is written for a freelance designer, so scope, timelines, pricing, and deliverables need to match your actual practice.

Can I add a ninth or tenth question?

Yes — duplicate one of the existing `<details>` blocks inside either Text module. Try to keep the totals even between the two columns so the visual weight stays balanced.

Where is the neon green accent controlled?

It appears in three places: the eyebrow heading color, the `<summary>` text color, and the border color on each `<details>` block (`rgba(0,255,136,0.22)`). Change all three together when re-skinning.

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.