Documentation

Lumea — Theme Documentation

Lumea is a HubSpot CMS theme for aesthetic-medicine clinics, med spas, wellness and healthcare brands — an editorial, conversion-oriented design built entirely with HubL, HTML and drag-and-drop areas. Live demo: 148735844.hs-sites-eu1.com. Support: contact@aivoytech.com.

1. Requirements

A HubSpot account with Content Hub (any tier). A few features need a paid tier — site search results and HubSpot video. Everything else works on the free Content tools. No external libraries or build step: the theme ships ready to use.

2. Install & create your first page

  1. After installing Lumea, go to Marketing → Website → Website Pages → Create → Website page.
  2. Pick the Lumea theme, then choose a template (e.g. Lumea — Home).
  3. Every page template is drag-and-drop: hover a section to reorder or delete it, or add modules with the + button.
  4. Click Publish.

Tip: create one page from each template (Home, About, Team, Treatments Listing, Treatment Detail, Contact) and a blog, so your whole site is built.

3. Theme settings (global styling)

Open Design Manager → Lumea → Edit (or Themes → Lumea → Customize) to set:

  • Colors — primary, secondary, accent, body text, muted, page and alternate background, hyperlink and hover, validation. Every module reads these tokens, so one change re-skins the whole site.
  • Typography — body and heading fonts plus H1–H6 sizes and hyperlink styling. Fonts are self-hosted (Cormorant Garamond + Mulish) — no Google CDN and nothing to configure.
  • Buttons — background, text and hover colors.
  • Forms — background, label, border and field-border colors.

4. Global header

Edit from any page by opening the header and clicking Edit global content.

  • Navigation menu — pick one HubSpot menu (manage it in Settings → Website → Navigation). It drives both the desktop nav and the mobile menu. Two levels are supported (top items + one dropdown). Until you select a menu, a sample nav is shown and is replaced the moment you pick yours.
  • Mobile menu phone — an optional tap-to-call number at the bottom of the mobile menu (leave empty to hide).
  • Brand / logo — upload a logo image or use the company name as type.
  • Header button — the primary call-to-action. Point it at #consult to open the consultation modal, or any URL.
  • Announcement bar — an empty drag-and-drop strip above the nav for an optional promo line.

5. Global footer

Open the footer and choose Edit global content.

  • Brand block — logo/name, blurb, phone and social links (pick a network — Instagram, Facebook, X, LinkedIn, YouTube, TikTok — and paste the profile URL; the white icon appears automatically and hides when the URL is empty).
  • Link columns — up to 4 columns (default 3). Each has a title, an editable list of links, and a Show this column toggle to hide it without deleting it.
  • Footer base — an editable credit on the left and a copyright on the right (shows © year + company automatically, or your own text).

6. Consultation modal (global booking form)

A slide-in booking panel is included site-wide. It is a global module — configure it once under Edit global content → Consultation Modal:

  • Form — choose the HubSpot form to embed. The fields shown are whatever that form defines (set them in Marketing → Forms).
  • It opens from the header button, any link to #consult, or any element with a data-open-consult attribute.

7. Page templates

All page templates are drag-and-drop. Two keep an intentional fixed-layout section where a free-form grid could not reproduce the design:

  • Home — hero, trust strip, treatment categories, editorial intro, featured treatment, before/after, testimonial, journal preview, CTA.
  • About — manifesto, founder note, clinic gallery, values, milestones, CTA.
  • Team — senior practitioners in an alternating layout plus a support-staff grid.
  • Treatments Listing — a filterable, searchable, paginated treatment grid.
  • Treatment Detail — long-form content beside a sticky at-a-glance booking rail, plus similar treatments and CTA.
  • Contact — a booking form beside a get-in-touch card with map, details and hours.

The Home hero has three layouts (the Style field): Full bleed (default), Right column and Type forward.

Deep-linking treatment categories

Any link to /treatments#category (lowercase, matching a filter chip) opens the Treatments listing pre-filtered — e.g. /treatments#injectables. Useful in breadcrumbs and footer links.

8. Blog

  1. In Settings → Website → Blog, set the listing template to Lumea — Blog Listing and the post template to Lumea — Blog Post.
  2. The listing shows a featured post, a newsletter band and a category-filtered, paginated grid. The post template has a reading-progress bar, share buttons, an author card and related posts.
  3. Blog labels — every UI string on the blog (featured CTA, headings, pagination, "Share", "About the author", etc.) is editable. On the blog page, open the Blog labels module and edit the Listing / Post groups.

9. System pages

Lumea ships themed templates for 404, 500, password prompt, search results, subscription preferences, subscription update confirmation and backup unsubscribe. Assign them in Settings → Website → Pages → System pages (and Private content for the password page).

10. Forms & spam protection

  • The fields in any form are defined by the HubSpot form you select, not the theme. To add fields, edit the form in Marketing → Forms.
  • If a form shows a "protected by reCAPTCHA" badge you don't want, turn off CAPTCHA in the form's Options tab. (If you hide the badge with CSS instead, Google's terms require you to display their reCAPTCHA disclosure text.)

11. Performance

  • Fonts are self-hosted with font-display: swap, and the two above-the-fold files are preloaded.
  • Images use srcset + width/height to avoid layout shift; all bundled images stay under 1 MB.
  • Run Lighthouse on the published, logged-out URL for an accurate score — the in-app editor and browser extensions inflate the numbers.

12. Support

Questions or issues: contact@aivoytech.com. Please include your portal ID and a link to the page in question.