Site Editor, styles and motion
Open Appearance → Editor to change global styles, templates, template parts and navigation. Lumina Edu uses native WordPress blocks; no page builder is required.
Global styles
Use Styles to choose Base, Night Study or Workshop, and to adjust the colour and type presets.
- Base is the Stone page with Paper tables, ink rules and one Signal orange spent on decisions.
- Night Study takes the ink of the hero band over the whole page: paper becomes ink, the hairlines lift off it, and Signal keeps its one job.
- Workshop keeps the Stone page but marks decisions in ink-green instead of orange, for training catalogues that sit beside a client's own brand.
Each variation keeps the same content, layout and markup; only the colour set changes.
By default the site also follows the visitor's light or dark setting, and with Lumina Edu Core active
the header carries a light/dark switch that remembers the visitor's choice. A child theme that wants
one scheme only can turn the following off with the lumina_edu_follow_color_scheme filter.
Type is Bricolage Grotesque for text and headings and Geist Mono for dates, prices, lengths, rails and labels. Both fonts are bundled with the theme, so no font is fetched from another server. After changing any colour, check links, buttons, form controls, focus rings and the words set over photographs, at desktop and phone widths.
The grounds
A section sits on one of a few grounds, and each home uses them in a rhythm: Stone (with Paper for tables), the match tint (the pale orange the board answers on), the night band (ink, with a photograph) and the Signal band (orange, once per home, on a decision). The week planner stays on Stone in both light and dark, because the planner is paper. The grounds are colour presets; a section's ground is its Group's background in the editor.
Header, footer and navigation
The header and footer are template parts, printed fresh on every page from the pages that exist and from Site details. The header and the footer say what each shows and what editing them in the Site Editor changes.
Templates and patterns
Templates control repeated structure; page content stays in Pages. The theme's page templates are Page and Page without title (for a page that opens on its own banner or hero), plus templates found by the page's address for Programs, Sessions, Instructors, Departments, Campuses, Deadlines, How to apply and Compare programs, and one each for a program, an instructor, a department and a campus.
Sections are in the inserter under Patterns → Sections, and whole pages under Patterns → Full pages. A pattern is a starting copy, not a linked master: once inserted, it is yours to change.
If a template was changed by accident, open it and use Reset to go back to the theme's file. Export valuable Site Editor changes before resetting or moving a site.
The pattern and template reference lists every section and where the demo uses it.
What fills a dynamic section
Sections that state records — the finder, the boards, the week, the tutors, departments, campuses, deadlines, questions, the hours — are the plugin's blocks. Editing the surrounding page changes its headings, lede and photographs, not the records. Change a program, a session or a tutor on its own screen, and the hours and general questions in Settings → Site details.
Motion and reduced motion
Photographs move, a little, and very little else does.
| What | How it moves | When it does not |
|---|---|---|
| Sections and slots rise into place as they enter the screen | A fade and a 16 px rise, finished early in the element's entry, so nothing is still fading while it is being read | Reduced motion; a browser without scroll-driven animations; print |
| Full-width photographs drift with the scroll: the heroes, the night bands, the campus band, the title banners | At most 8% of travel, tied to the scroll position. A hero's photograph only starts to move as the hero leaves the screen | The same three cases |
| Photographs answer the pointer | A slow zoom to at most 1.04 inside their own clipped slot, and the rail's cell fills Signal | Reduced motion. A touch screen has no hover, and nothing is hidden behind it |
| The outlined ribbon | The design's outlined type drifts slowly along the Signal band and the footer | Reduced motion; print |
| Controls | Colours change over a short transition | Reduced motion: the state changes, the travel does not |
How it is built, because it decides what you can rely on:
- CSS only. No script and no library drives any of it. The scroll effects sit behind
@supports (animation-timeline: view())andprefers-reduced-motion: no-preference. - Nothing is ever left invisible. Each animation states only where an element comes from, so its ordinary rendering is the destination. A browser without scroll-driven animations, a reader who asked for less motion, a print sheet and a screenshot all get the finished page.
- Under
prefers-reduced-motion: reduceevery section is already in place and still: nothing rises, drifts or zooms, and the ribbon stands still. - The timings are tokens in
theme.jsonundersettings.custom.motion. Retuning the theme's pace is editing those values in a child theme. - There is no slider, no carousel, no video hero and no page-transition loader.
To give a block of your own the same behaviour, add a class in the block's Advanced → Additional
CSS class(es): lue-reveal to rise on entry, lue-zoom on an Image for the hover zoom, and
lue-drift on a full-width Cover for the scroll drift.