Divi5Lab

Tidewell Movement Studio — Organic Wellness Teachers Page for Divi 5

Meet the four certified teachers at Tidewell Movement Studio. Pilates, yoga, breathwork and prenatal movement in small classes where every instructor actually watches you.

Rate this element

Be the first to rate

Download this section, free

  • Divi 5 JSON, imports in seconds
  • Commercial license included
  • No account needed
Part of a theme pack

This page ships inside Tidewell: Pilates & Yoga Studio Theme (6 Pages), 6 coherent pages that share one brand.

$12.00one-time, commercial license
See everything in the pack

Click to view the full page

Overview

The layout opens with a deep espresso section (#2e2a22) that sets an immediate editorial tone. A centered h4 overline in small-caps DM Sans at 13px gives the page its first orientation cue, followed by a Fraunces h1 at 60px (stepping down to 46px on tablet and 34px on phone) with a tight -1px letter-spacing that reads like a print headline. A 72px-wide horizontal rule sits beneath it as a visual pause before a restrained 19px lead sentence, capped at 640px wide. The section closes with a curve-shaped Divi 5 divider that sweeps into the warm linen (#f3eadc) grid below, creating a soft architectural transition rather than a hard cut.

The teacher grid uses a four-column equal layout that pairs each educator's 1:1 square portrait with a minimal name-and-discipline card. The card design is deliberately plain: a 2px top border in #2e2a22 replaces any decorative frame, a 16px gap below the image functions as breathing room, and the discipline line is set in 13px DM Sans uppercase, small enough to read as a label rather than a heading. On tablet the grid wraps to two columns; on phones it stacks to a single column. Square crops with no border radius enforce a directory-style formality that supports the professional positioning without visual noise.

The founder bio section shifts the register entirely. The lead teacher's portrait reappears at a 4:5 aspect ratio inside a container constrained to 360px wide, with a pill-top and 32px bottom-radius border treatment, the single curved image element in an otherwise grid-hard layout. The facing column delivers her note in Fraunces at 22px with 1.6em leading, a deliberate choice to slow the reader down, and closes with an italic signature. The warm off-white background (#fbf6ee) differentiates this moment from the linen grid above and the dark principles section below.

The principles section returns to the espresso palette and uses a numbered-row pattern: a fixed 64px index column, a flex-grow heading column in Fraunces at 34px, and a 360px-max description column, all separated by 2px horizontal Divi Divider modules. The three-column flex row collapses to a single stacked column on phone, preserving logical reading order. The final section overlays a studio photograph as a full-bleed background and floats a card at max 520px, rounded at 28px on all corners with a 1px linen border and a warm box shadow, containing the sole CTA button in forest green (#41603a) on a full-pill radius.

What’s inside

  • Five native Divi 5 sections with fully specified responsive breakpoints for padding, font sizes, and column layout across desktop, tablet, and phone
  • Four-column teacher grid (1:1 square portraits, 2px top-border name cards) collapsing to 2 columns on tablet and a single stack on phone
  • Founder bio section with a 4:5 portrait using a pill-top/32px-bottom-radius border treatment paired with an italic editorial pull-quote in Fraunces 22px
  • Numbered values list (01-04) using a three-column flex-row pattern with Divi 5 Divider modules separating each principle
  • Full-bleed background-image CTA section with a floating card, 28px rounded corners, warm box shadow, and a forest-green pill button
  • Dual-font system throughout: Fraunces for all display and editorial headings, DM Sans for labels, body copy, and UI text
  • Curve-style section divider connecting the dark hero to the linen teacher grid, configured via Divi 5's native section divider settings

Who it’s for

Yoga studios, Pilates reformer rooms, breathwork practices, and boutique wellness centers that want to present their teaching team with editorial warmth rather than a clinical staff directory. Works equally well for dance and movement therapy practices, small group personal training studios, and wellness retreats that need to communicate an intimate, human-led experience. The layout's tone, unhurried, text-forward, and visually quiet, also suits somatic therapists, acupuncture clinics, and any health professional building a team page that needs to feel grounded rather than corporate.

Customization tips

Swap the entire palette by replacing #2e2a22 (dark sections) and the pair #f3eadc/#fbf6ee (the two light tones). The visual hierarchy holds because it depends on value contrast rather than specific hues. The four teacher cards accept any 1:1 square portrait; keep faces centered in the source crop since object-fit: cover has no repositioning control beyond the image itself. The founder bio portrait is constrained to 360px wide at a 4:5 ratio, so prepare images at roughly 720x900px before uploading. Each principle description reads best as one short sentence; two or three lines will start unevening the row heights across the four principles. The CTA card headline works at two to five words (30-40px); longer copy breaks the single-line intent on mobile. The forest green button (#41603a) is the only accent color in the layout, replacing it with a single brand color is the fastest way to make the pack feel native to your site.

How to install this layout

  1. Download the layout JSON file from this page.
  2. Open the target page in the Divi 5 builder.
  3. Open the portability panel (up/down arrows icon) and choose the Import tab.
  4. Upload the JSON. Tick “replace existing content” only for full-page imports.
  5. 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 Tidewell Movement Studio — Organic Wellness Teachers Page for Divi 5

How do the four teacher portrait images behave on smaller screens?

The four-column grid collapses to two columns on tablet and a single column on phone. Each portrait is a 1:1 square with object-fit: cover, so the framing is locked to the source crop. Trim faces to the center of a square before uploading for consistent results across all breakpoints.

Which Divi 5 modules does this layout use?

Section, Row, Column, Heading, Text, Image, Divider, Group, and Button, all core Divi 5 modules with no third-party plugins or custom code required.

The founder portrait has a rounded top and a flatter bottom. Can I change that?

Yes. The Image module uses Divi 5's native border radius control: 999px on the two top corners and 32px on the bottom two. Set all four corners to 0px for a straight square, or all to 999px for a full pill. The control lives in the Image module's Design tab under Border.

How does the numbered values section reorder on phone?

Each row is a flex Group that switches from row to column direction on phone. The numbered index (01, 02...) sits first in the source order, so it renders above the heading and description on narrow screens, preserving logical reading order without any manual reordering.

What size should the CTA section background image be?

The section uses background-size: cover centered at center center, so any image at 1600px wide or wider will look sharp on retina displays. Replace the default Pexels URL in the Section module's Background settings with your own studio photo.

Can I add a fifth teacher card to the grid?

The current row is configured as equal-columns_4. Adding a fifth card requires switching to a five-column row structure or allowing flex-wrap to push it onto a second row. On tablet the layout already wraps to two columns, so a second desktop row would flow naturally into the existing responsive behavior.

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.

Included in these packs

More full landing pages

Browse all full landing pages