A fully interactive, motion-rich theme for architects, designers, galleries and museums. Headlines that stretch toward the pointer, frames that open as you scroll, a draggable collection wall, page transitions and a light appearance by default, with a dark one a click away.
What Makes Atrium Special
Atrium is built around the way people look at work in a gallery: slowly, up close, with the label next to the piece.
- Elastic type. Large headings use a variable font whose letters widen and lighten near the pointer. On touch screens they breathe gently instead.
- Scroll-driven frames. The home hero opens from a small frame to a full-screen image as visitors scroll, and project pages open an image out of an arched window.
- Wall labels. Every work, artwork and photograph carries a museum-style caption: title in italic, then place, year and material.
- Collection wall. A canvas of works visitors drag in any direction, each opening in a viewer that zooms out of its thumbnail.
- Page transitions and a contextual cursor. A colour panel sweeps between pages, and on mouse devices the cursor changes to View, Play, Drag or Read.
- A revealed footer. The page lifts off a Klein blue footer whose giant wordmark stretches as it comes into view.
- Light first. The light appearance is the default; the dark one is a click away and is remembered for each visitor.
Atrium belongs to the interactive themes family. Interactive themes share the same extra section types (Marquee, Statement, Collection Wall) and the same Motion & Interactions settings, so you can switch between them without rebuilding your pages.
Getting Started
-
Install the Theme
Go to Admin panel → Themes, click Upload and select the Atrium
.zipfile. -
Activate Atrium
Click Activate on the Atrium card and enter your purchase code when asked. Your content is untouched: themes only change how it is displayed.
-
Set the Colors and Motion
Open Theme Settings to choose the accent color, fonts, header style and which motion effects to keep.
-
Build Your Pages
Edit any page in Sections mode. Every section type works with Atrium; the interactive ones are described below.
-
Configure Menus
The Header Main menu is shown in the header on large screens and in the full-screen menu on every screen. Keep it short: five or six links read best.
Purchase Code (License Key)
The Atrium theme is licensed separately from the main application and from every other theme or add-on, so it has its own purchase code (license key). You are asked for it the first time you activate the theme in Admin panel → Themes.
Our products are sold on three platforms, and the way you receive a purchase code depends on where you bought the product.
| Platform / Marketplace | How you get the purchase code | Where to find it again |
|---|---|---|
| bedigit.com Store In-site purchase (Shop) |
Generated automatically when the order is paid, then sent by email, either in its own license email, or inside the order confirmation email. | My Account → My Licenses on bedigit.com |
| Gumroad | Created as soon as Gumroad notifies us of the sale, then sent in a separate email, in addition to the Gumroad receipt. | The license email, your Gumroad Library, and My Account → My Licenses on bedigit.com |
| Envato Market CodeCanyon |
Issued by Envato, not by us, and never sent by email: you download it yourself from your Envato account. | Envato account → Downloads → License certificate & purchase code |
Check your spam folder. For bedigit.com Store and Gumroad purchases the purchase code is delivered by email, and automated license emails are very often filtered. If the message is not in your inbox, look in your spam / junk folder before contacting support, and add our sender address to your contacts or allow list.
1. bedigit.com Store (in-site purchase)
As soon as your order is marked Paid, a license key is generated automatically for every licensed item in the order (one key per purchased unit) and emailed to the address used on the order, either in a dedicated license email or inside the order confirmation email. The key also stays available under My Account → My Licenses, where you can reveal it, copy it, see the domains it is activated on, and deactivate a domain to free an activation slot. The matching invoice is under My Account → My Orders.
2. Gumroad
A Gumroad purchase produces two separate emails: the Gumroad receipt (sent by Gumroad, giving access to the files) and a license key email (sent by bedigit.com) that contains your purchase code. The second one is generated as soon as Gumroad notifies us of the sale, so it normally arrives within seconds of the payment. When the product uses Gumroad’s own license-key feature, the same key is also shown in the Gumroad receipt and under Library → your purchase on gumroad.com. Use the same email address on bedigit.com as on Gumroad and your keys are linked to your account automatically, under My Account → My Licenses; you can also add a Gumroad key manually from My Account → My Gumroad Licenses.
3. Envato Market (CodeCanyon)
Envato issues and delivers the purchase code itself: we never email it, so there is nothing to look for in your spam folder. Log in to your Envato / CodeCanyon account, open Downloads, find the item, and choose License certificate & purchase code from the Download dropdown; the code is written in that certificate. It looks like 12345678-90ab-cdef-1234-567890abcdef and never changes, even when you renew item support. See the official article: Where Is My Purchase Code?
Lost your purchase code? Search your mailbox (spam folder included) for “license” or “purchase code”, then check My Account → My Licenses on bedigit.com for Store and Gumroad purchases, or Downloads → License certificate on Envato. If it is still missing, open a ticket on our Help Center with your order number (Store), Gumroad sale ID or buyer email (Gumroad), or Envato username and item name (Envato).
Demo Content
The live demo shows a fictional architecture and exhibition studio. Its texts are written for the demo; the photographs come from Unsplash and the films are embedded from YouTube. Replace them with your own work before going live.
The demo content is not imported automatically when you activate the theme: build your pages from the sections described below, or start from a page you already have.
Make It Yours
| Setting | Default | What it changes |
|---|---|---|
| Primary color | #1238d6 |
The accent: buttons, links, markers, the page transition panel and the footer. It is lightened automatically in the dark appearance. |
| Accent color | #e0a526 |
The small "on view" indicator and highlights. |
| Text color | #15161a |
The ink of the light appearance. |
| Heading and body fonts | Archivo | Archivo has a width axis: the elastic type effect needs it. Other fonts work, without the stretching. |
| Header styles | Transparent / Sticky | Sectioned pages start with a header over the first section that turns to frosted glass on scroll; other pages use the glass header from the start. |
| Footer colors | Empty | Leave empty to keep the Klein blue footer, or set your own background, text and link colors. |
Motion & Interactions
The Motion & Interactions card of the Theme Settings switches each effect on or off:
| Option | Effect |
|---|---|
| Intro loader | An animated loader with your site name on the first page of each visit. |
| Page transitions | A panel in your primary color sweeps across the screen between pages, showing the name of the page being opened. |
| Contextual cursor | On mouse devices the cursor becomes a ring that shows the action under it (View, Play, Drag, Open, Read). |
| Elastic type | Large headings stretch toward the pointer, and breathe on touch screens. |
| Parallax and scroll effects | Image depth, the opening hero frame, the arched image window and the pinned horizontal process. |
Visitors who ask their device to reduce motion never see these effects, whatever the settings: the content is shown directly, without animation.
Light & Dark
Atrium opens in its light appearance (gallery walls by day). The moon button in the header switches to the dark appearance with a circular reveal, and the choice is remembered for each visitor, including on the login and registration pages.
In Theme Settings → Appearance Mode you can start in dark, follow the visitor's system setting, or hide the switch to lock one appearance.
Interactive Sections
Every section type works with Atrium. These ones get an interactive design:
| Section | In Atrium |
|---|---|
| Hero | An elastic headline above a framed image that opens to full screen as visitors scroll. Rotating titles in words mode swap the braced words and the image in the frame. |
| Marquee (interactive themes) | Words drifting across the page, faster while visitors scroll. Choose the speed, direction, size and typography. |
| Statement (interactive themes) | One or two large sentences that fill in word by word as they scroll into view, with an optional image and button. |
| Collection Wall (interactive themes) | Works visitors drag in any direction (or a grid), each opening in a viewer with its label. |
| Portfolio | A "salon hang" of six works with wall labels, masked reveals and parallax (three columns), or a regular grid (two or four). |
| Accordion | Large expanding rows whose titles stretch on hover: ideal for disciplines or services. |
| Steps | Horizontal layout: the section is pinned and the steps slide sideways while visitors scroll. Each step can have an image. |
| Before / After | A full-width comparison with a draggable divider that hints at itself when it comes into view. |
| Metrics | Digits roll into place like a mechanical counter. |
| Video | A wide poster that grows to full width on scroll; the player opens in a dialog. Add a poster image or let YouTube videos use their own thumbnail. |
| Events Preview | An exhibition-style list (on view, upcoming, past); an image follows the pointer over each row. |
| Testimonials, Logo Bar, Blog Preview, Team, Timeline, Countdown, Gallery, Image + Text, Call to Action, Titles | Large serif quotes in a draggable slider, a ruled client grid, editorial journal cards, grayscale portraits that tilt, a line that draws itself, an opening countdown, an editorial gallery, masked image rows, a giant elastic link and split headings. |
Works & Projects
The works index offers category filters that reshuffle the works in place (when they all fit on one page: set Portfolio → Items per page high enough) and a list view where an image follows the pointer. Each project page opens with a full-screen cover, lists the project facts like a wall label, and shows its films, comparisons and gallery before leading to the next project.
Add-on Pages
Pages of add-ons (journal, events, shop, help desk, account...) use the shared layouts restyled with the Atrium palette, type and shapes, in both appearances.
Accessibility
- Every effect is turned off for visitors who ask their device to reduce motion.
- Headings split into letters keep their full text for screen readers.
- The collection wall moves with the arrow keys, the comparison slider with the keyboard, and the viewer closes with Escape.
- Focus is always visible, and the full-screen menu closes with Escape.
Updating
How to update this theme to a newer version.
Admin Panel Upload (Recommended)
- Download the latest
.zipfile of this theme. - Go to Admin panel → Themes and click the Upload button.
- Select or drag the
.zipfile into the upload area. - A confirmation prompt will show the current and new version numbers. Click Replace to proceed.
- Go to Admin panel → System Update (
/admin/update) to apply any pending database migrations.
Tip: Your theme settings (colors, fonts, custom CSS) are stored in the database and will not be lost when you replace the theme files.
Uninstallation
How to stop using this theme without losing anything.
Themes are not switched on and off one by one: exactly one theme is active at a time, so you stop using Atrium by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Atrium stays installed: its files remain under
extensions/themes/atrium/and its card stays in the list. - Its settings (colors, fonts, layout, header and footer options, custom CSS) stay stored in the database, and so does the per-section styling you gave it on the home page.
- The purchase code recorded at activation is kept, so activating the theme again does not ask for it.
Activate it again whenever you like: the front-end comes back exactly as you left it.
Removing
How to delete this theme permanently, and what goes with it.
Removing deletes the theme for good. The active theme cannot be removed, so removal is always two steps:
- Activate a different theme (see Uninstallation).
- Click Remove on the Atrium card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/atrium/; - its published assets under
public/themes/atrium/; - its uploaded files under
storage/app/public/themes/atrium/; - its Vite build artifacts: the hashed files under
public/build/and their manifest entries; - its row in the
themestable, which is where its settings live, so the colors, fonts, layout options and custom CSS you configured for it are lost.
This cannot be undone. Export or note down any custom CSS you want to keep before removing the theme: installing it again later starts from the theme's default settings.
Per-section home page styling is stored under the theme's name rather than against the theme row, so it survives the removal: install Atrium again and your section styling is still there, while the theme's own settings start from their defaults.
The removal is refused, before anything is deleted, when the theme is still active or when the web server (PHP) user cannot delete extensions/themes/atrium/. In that last case, give that user write permission on the directory and on its parent, then try again.
Deleting the folder over FTP or SSH is not equivalent: the published assets, the build artifacts and the themes row are all left behind. Use Remove in the admin panel instead.
Frequently Asked Questions
Is Atrium slow because of all the animations?
No. The effects run from a single animation loop that only works on what is on screen, images load lazily and nothing heavy is loaded before the page is readable.
Can I keep the design but turn the motion down?
Yes. Switch off any effect in Theme Settings → Motion & Interactions. With every option off, Atrium is a calm editorial theme.
Why are Marquee, Statement and Collection Wall greyed out with my other theme?
They are sections of the interactive themes. With another theme active they stay on your pages but are not displayed; the section picker shows them as not available in the active theme.
Does the theme work on phones and tablets?
Yes. The menu becomes full screen, the pinned process becomes a swipeable row, the collection wall follows your finger and headings breathe instead of following a pointer.