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.

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.

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:

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.