Folio & Fable — Elegant Bookshop The Shop Page for Divi 5

The layout opens with a full-bleed hero that places a dark forest-green gradient (rgba(16,36,26,0.72) on both stops) over a warm parchment base and a cover-fit bookshop photograph. A breadcrumb in Karla at 13px uppercase anchors the visitor immediately, then a 56px Libre Baskerville H1 drops into a single subline constrained to 600px. Padding steps down from 120px on desktop to 64px on phone, so the atmospheric weight of the section holds at every breakpoint rather than collapsing into a cramped banner.

The second section pairs a native Divi accordion against a 4:5 portrait image. The accordion strips all borders except a 2px dark-green bottom rule on each closed toggle, which keeps the interaction quiet and editorial. Four floor entries open and close inside Libre Baskerville 20px titles with Karla 16px body text in muted moss; on mobile, the column wraps above the image so a visitor reads the floor guide before the photograph. The asymmetric column widths (12/24 each on desktop) and center vertical alignment give the section the proportion of a magazine spread.

The gallery section follows a header row that is intentionally off-center: a 14/24-wide H2 column aligned to flex-end sits beside a 10/24 caption column, keeping the balance editorial rather than symmetrical. Below it, six images fill three equal columns, each column stacking a tall 4:5 image with a landscape 4:3. The columns alternate which ratio appears first, producing a staggered rhythm at 16px gaps that reads like a masonry grid without any custom CSS. All images use native Divi image modules with hard-coded object-fit cover and zero border radius, consistent with the layout's sharp-edged aesthetic.

The layout closes through two cream (#fffdf7) sections and a cognac (#9a5f00) CTA banner. The services section puts eight icon-and-text rows (FontAwesome checkmark, 18px, dark forest) inside a native Divi two-column CSS grid that collapses to one column on mobile. The FAQ section uses six H3 headings with a 3px top border rule as a divider instead of an accordion, keeping all answers visible for scanning. The final banner runs a space-between flex row: headline on the left in Libre Baskerville at 48px, and a ghost button with opening hours on the right, both in off-white against the warm cognac field.