An immersive, cinematic theme for premium real estate, residences, hotels and developers. A monumental serif wordmark over full-bleed imagery, a floating pill navigation, images in soft organic shapes, words that come into focus as visitors scroll, pinned story chapters and a light appearance by default, with a dark one a click away.
What Makes Canopy Special
Canopy reads like a residence brochure: a full-bleed cover, a name set very large, then calm chapters of forest green, cream and bronze.
- A monumental wordmark. The hero sets your title in a huge serif across a full-bleed cover with a slow zoom. Short titles are sized to span the full width, and their letters rise one by one.
- Organic masks. Images sit in arch, leaf and pebble shapes whose curves shift gently as they scroll through view.
- Focus type. Statements and project stories come into focus word by word, from a soft blur to sharp, as visitors scroll.
- Pinned story chapters. On large screens, Steps and Timeline sections stay in place while each chapter takes the stage in turn, with a "01 / 05" counter and a lime progress line.
- A floating pill and a full-screen menu. A centred forest glass pill holds the menu button, your logo and a Contact button. The menu drops like a forest curtain with huge serif links, your contact details and the local time.
- Forest chapters. Full-width forest bands carry the statements, testimonials and calls to action, and the footer ends with your site name rising letter by letter.
- Light first. The cream appearance is the default; the dark one is a click away and is remembered for each visitor.
Canopy 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 Canopy
.zipfile. -
Activate Canopy
Click Activate on the Canopy 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 colors, fonts, header style and which motion effects to keep.
-
Build Your Pages
Edit any page in Sections mode. Every section type works with Canopy; the interactive ones are described below.
-
Configure Menus
The Header Main menu is shown in the full-screen menu, on every screen size; with the Mega menu option it is also shown inside the pill on large screens. Its links are set very large: five or six read best.
Purchase Code (License Key)
The Canopy 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 studio for architecture, interiors and exhibitions. 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 | #2e3a26 |
The forest green: the header pill, the forest chapters (statements, testimonials, calls to action), the footer, the menu, the intro loader, the page transition and the buttons of the light appearance. |
| Secondary color | #a68150 |
The bronze details: hairlines, list markers, small leaves and the rules of outlined title banners. |
| Accent color | #e7fd55 |
The electric lime, used sparingly: text selection, focus rings, hovers on forest backgrounds, progress lines and the back-to-top ring. |
| Text color | #2e3a26 |
The ink of the light appearance. |
| Heading and body fonts | Instrument Serif / Work Sans | Instrument Serif sets the wordmarks and titles (it has a single regular weight, with italics); Work Sans carries the text and the small uppercase labels. Other fonts can be chosen. |
| Header styles | Transparent / Sticky | Sectioned pages start with a lighter glass pill over the first section that turns solid on scroll; other pages use the solid glass pill from the start. Default lets the pill scroll away with the page. |
| Header width and alignment | Centred pill | The pill floats in the centre of the screen; turn on Wide Header to let it span the full width. |
| Mega menu | Off | When on, the Header Main menu is also shown inside the pill on large screens. The full-screen menu stays available. |
| Content width | 1640px |
Maximum width of the content in the wide layout; the boxed layout uses its Container Width instead. |
| Footer colors | Empty | Leave empty to keep the forest footer and its giant wordmark, or set your own background, text and link colors. |
| CTA background color | Empty | Leave empty to keep the forest panel of the Call to Action section. |
Motion & Interactions
The Motion & Interactions card of the Theme Settings switches each effect on or off. All five are on by default. In Canopy they do the following:
| Option | Effect |
|---|---|
| Intro loader | A forest screen on the first page of each visit: your site name comes up from a blur, a cream line fills, the tagline appears, then the screen lifts away with a curved edge. |
| Page transitions | A forest panel with an arched top rises between pages, showing the name of the page being opened. |
| Contextual cursor | On mouse devices the cursor becomes a small cream ring that blends with the page and grows into a labelled pill over media (View, Play, Drag...). |
| Elastic type | In Canopy this is focus type: statements and project stories come into focus word by word as they scroll through. |
| Parallax and scroll effects | Image depth, the morphing organic masks, floating images, the hero cover that scales into rounded corners as you scroll, and the pinned story chapters of Steps and Timeline. |
With every option off, Canopy keeps only its gentle reveals: images, titles and text appear softly as they come into view.
Visitors who ask their device to reduce motion never see these effects, whatever the settings: the content is shown directly, without animation.
Light & Dark
Canopy opens in its light appearance: a cream page with forest ink. The moon button in the pill switches to the dark appearance, a forest-black page with cream text where bronze and lime keep their colors, with a circular reveal from the button. 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 Canopy. These ones get an interactive design:
| Section | In Canopy |
|---|---|
| Hero | A full-bleed cover with a slow zoom and a monumental wordmark whose letters rise one by one; short titles span the full width. As visitors scroll, the cover scales down into rounded corners. Rotating titles are supported: each new title rises in turn. The Landing Hero is the same, centred. |
| Marquee (interactive themes) | Big serif and sans words drifting across the page, separated by small bronze leaves, faster while visitors scroll. Choose the speed, direction, size and typography. |
| Statement (interactive themes) | A forest chapter where large serif words come into focus as they scroll through (effect Fill in word by word on scroll), or simply fade in, with an optional image and button. |
| Collection Wall (interactive themes) | A canvas of organically masked images with wall labels that visitors drag in any direction; nearer works drift faster. Each one opens in an image viewer. Choose the draggable wall (normal or tall) or a grid. |
| Portfolio | Large editorial cards in organic masks, staggered like a printed book, in two to four columns. |
| Steps | Horizontal layout: pinned story chapters with a counter and a lime progress line on large screens. Vertical layout: a path whose line grows as visitors scroll. Each step can have an image. |
| Timeline | Pinned chapters where each date takes the stage in turn (alternating, left or right). |
| About | An arched image with a floating years badge, a serif title and thin numbers that count up. |
| Testimonials | A forest chapter of large serif quotes, swiped or dragged, with a counter and previous / next buttons. |
| Carousel | Full-bleed slides crossfading with a slow zoom, a counter and a lime progress line. |
| Video | A cinematic frame with a poster and a large play pill; the player opens in place. With autoplay, it starts muted once the frame is in view. |
| Gallery, Gallery + Text, Image + Text | An organic mosaic of masked photographs that open in the viewer, images floating at different depths around a serif text column, and alternating masked rows with a floating detail crop. |
| Accordion, FAQ | Serif rows that open with a soft height animation, one at a time unless several are allowed; the FAQ sits beside an arched image. |
| Metrics, Countdown | Huge thin serif numbers that count up, and huge thin serif digits ticking towards an opening date. |
| Call to Action, Logo Bar, Before / After | A forest panel with a giant uppercase serif title and a pill button, partner logos (or names set in serif) in a ruled row or a drifting band, and comparisons in soft masks with a draggable divider. |
| Cards Grid, Features, Team, Pricing, Comparison, Journal / Events / Products previews, Titles, Divider, Banner | Budding image masks and serif titles, a ruled grid of amenities, arched portraits, paper plans ruled in bronze (the featured plan in forest), a hairline table whose highlighted column is tinted in sand, quiet editorial previews, uppercase serif titles (plain, split, in a band or over a photograph), bronze hairlines with leaves or an organic wave, and a slim forest announcement strip. |
Works & Projects
The works index shows large editorial cards in organic masks, with category filters that reshuffle the works in place (when they all fit on one page: set Portfolio → Items per page high enough) and a count of the works shown. Each project page opens with a cinematic cover, lists the project facts, tells its story in focus type, shows its gallery in the image viewer and ends with a band 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 Canopy palette, serif type and soft 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, the image viewer and the testimonials with the arrow keys, and the viewer closes with Escape.
- The full-screen menu keeps the focus inside it while it is open and closes with Escape.
- A "Skip to content" link is the first stop of the keyboard on every page.
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 Canopy by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Canopy stays installed: its files remain under
extensions/themes/canopy/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 Canopy card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/canopy/; - its published assets under
public/themes/canopy/; - its uploaded files under
storage/app/public/themes/canopy/; - 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 Canopy 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/canopy/. 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 Canopy slow because of all the animations?
No. The scroll effects run from a single animation loop that only works on what is on screen, images load lazily and the fonts load without blocking the page.
Can I keep the design but turn the motion down?
Yes. Switch off any effect in Theme Settings → Motion & Interactions. With every option off, Canopy is a calm editorial theme with gentle reveals.
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 pill steps aside while visitors read down a page and comes back on the way up, the full-screen menu is the navigation, the story chapters become a plain list, the collection wall follows your finger and the contextual cursor is only used with a mouse.