A cinematic, scroll-driven theme for real estate agencies, brokers, developers and property managers. A soft peach-to-blue sky with drifting clouds, a cover photo that rises like a building as visitors scroll, a giant wordmark that shows the photo through its letters, two-tone headlines that fill in word by word, chevron image strips and a white page by default, with a night appearance a click away.
What Makes Skyline Special
Skyline opens on a sky: soft clouds over a warm horizon, your headline, then the photograph of a building rising into view.
- The rising sky hero. With a cover photo, the hero holds its place while visitors scroll: the photo grows like a building seen from a rising camera, the clouds part to each side and the headline fades away.
- A wordmark with the photo inside. The first word of your site name then appears across the screen in heavy type, outlined first, then filled with the hero photo seen through its letters; the rest of the name (or the hero label) sits underneath.
- Two-tone headlines. Titles are set in two tones: the first part in ink, the continuation in a soft grey that fills to ink word by word as it scrolls by.
- Chevron strips. Photographs are cut into arrow shapes that slide in one after the other, in the About, Gallery and Events sections.
- The services band. Features (and a Cards Grid without pictures) become a near-black band where each service is a row: a small numbered circle, a short text and a giant word sliding in from the far side.
- A clear bar and a full-screen menu. The header floats over the sky with no fill and turns white with a hairline once the page scrolls. It holds your logo, the centred navigation and a Contact pill; below 1200px wide the navigation moves into a full-screen white menu topped with a band of sky.
- Light first. The white appearance is the default; the night one, with a dusk sky, is a click away and is remembered for each visitor.
Skyline 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.
Design System
Typography
Hanken Grotesk carries everything: tight display headings with negative letter-spacing, the heavy wordmark of the hero and calm body text. Fraunces, an editorial serif, is always loaded alongside it for the italic accents: testimonial quotes, quotations in articles, the tagline of the intro loader and the serif words of the Marquee section.
Palette
The first three colors come from your Theme Settings; the sky colors are part of the design and adapt to the appearance.
Shapes and details
- Photographs with almost square corners, hairlines between rows, and pill buttons whose arrow slides on hover.
- Round buttons for arrows and pagination, small sand chevrons as markers and separators.
- Without an uploaded logo, the header shows your site name beside a small sun.
Getting Started
-
Install the Theme
Go to Admin panel → Themes, click Upload and select the Skyline
.zipfile. -
Activate Skyline
Click Activate on the Skyline 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 Skyline; start the home page with a Hero that has a cover photo to get the rising sky and the wordmark.
-
Configure Menus
The Header Main menu is shown centred in the header from 1200px wide, with dropdowns, and in the full-screen menu on smaller screens. The Footer Links and Footer More menus are set in large type in the footer, and Footer Legal in its bottom line.
Purchase Code (License Key)
The Skyline 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 | #151717 |
The solid pill buttons (and the primary color of the add-on pages). On a light primary the button label turns dark automatically. In the dark appearance the buttons become light, with a hint of this color. |
| Secondary color | #6b6f6f |
The soft grey of the second half of the two-tone headlines, and of small details such as number suffixes, step descriptions and the active menu link. |
| Accent color | #e7c9a0 |
The warm sand, used sparingly: rating stars, chevron separators and markers, and the rule beside quotations. |
| Text color | #151717 |
The ink of the light appearance. |
| Heading and body fonts | Hanken Grotesk / Hanken Grotesk | Hanken Grotesk is loaded with its full weight range for the display titles and the wordmark. Other fonts can be chosen; Fraunces stays the serif of the italic accents. |
| Header styles | Transparent / Sticky | Sectioned pages start with a bar floating over the sky that turns white with a hairline after a short scroll; other pages use the white bar from the start. Both stay on screen. Default lets the bar scroll away with the page. |
| Header width and alignment | Wide, centred navigation | The bar spans the full width; turn off Wide Header to align it with the content. The navigation can also be aligned to the left or the right. |
| Header colors | Empty | Background color or image, text color, button colors and bottom border, applied to the Sticky and Default bars (the transparent bar keeps the theme colors). |
| Mega menu | Off | When on, the Header Main menu is shown as a mega menu in place of the centred navigation from 1200px wide. The full-screen menu stays the navigation of smaller screens. |
| Content width | 1440px |
Maximum width of the content in the wide layout; the boxed layout uses its Container Width (1320px) instead. |
| Footer style | Default | Default is the near-black footer; Dark goes to the deepest black with a faint peach and blue glow along the top edge; Minimal is a lighter, more compact footer with ink text on the haze surface (a raised dark surface in the dark appearance). The footer colors below still win over the style. |
| Footer colors | Empty | Leave empty to keep the colors of the footer style, or set your own background, title, text and link colors. |
| CTA background color | Empty | Leave empty to keep the night sky of the Call to Action section, or set a color to paint the band instead. A background color or gradient set in the section's Style tab wins over it. |
| Back to top | On | A round button that appears once visitors have scrolled most of a screen; its ring fills as they read down the page. |
Motion & Interactions
The Motion & Interactions card of the Theme Settings switches each effect on or off. All five are on by default. In Skyline they do the following:
| Option | Effect |
|---|---|
| Intro loader | A sky screen with drifting clouds on the first page of each visit: your site name rises into view, your site tagline appears in serif italics, a thin line draws, then the sky lifts away. |
| Page transitions | A white sheet with a cloud edge slides up between pages, showing the name of the link that was clicked, then lifts away on the new page. |
| Contextual cursor | On mouse devices the cursor becomes a small dark dot that grows over links and buttons and turns into a labelled pill over media (View, Open, Drag, Play, Read). |
| Elastic type | In Skyline this is the two-tone fill: the grey half of every headline, and the Statement text, fills to ink word by word as it scrolls through the screen. When it is off, the two tones simply stay as they are. |
| Parallax and scroll effects | The rising sky hero and its wordmark scene, the horizontal Steps that slide sideways while the page scrolls, and the photographs that drift gently inside their frames. When it is off, the hero shows its two scenes one after the other, still, with the wordmark already filled, and the horizontal Steps scroll sideways on their own. |
With every option off, Skyline keeps its gentle reveals (photos rising, chevrons sliding in, giant service words), the drifting clouds and marquees, the vertical steps that light up and the timeline line that draws as visitors scroll.
Visitors who ask their device to reduce motion never see these effects, whatever the settings: the content is shown directly, without animation.
Light & Dark
Skyline opens in its light appearance: white and haze surfaces with near-black ink under a peach-to-blue sky. The moon button in the header switches to the night appearance: deep ink surfaces, white type and a dusk sky with a warm horizon. On browsers that support it, the new appearance spreads from the button in a circular reveal. The choice is remembered for each visitor.
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 Skyline. These ones get a Skyline design:
| Section | In Skyline |
|---|---|
| Hero | The sky with drifting clouds, a big headline with a two-tone continuation, pill buttons, and the cover photo rising from the bottom like a building. With Parallax on, the section holds while visitors scroll and plays the rising scene, then the wordmark (the first word of your site name) with the photo seen through its letters. Without a photo the sky stands alone. Image & Text Layout: Side by Side places the text beside a tall photo instead, and Stacked (Full Width) sets the text on the sky with the photo full width below it, drifting gently, without the wordmark. Rotating titles are supported, and the wordmark follows the rotating photos. |
| Landing Hero | The sky with drifting clouds, a centred two-tone headline and pill buttons, the cover photo rising from the bottom edge. |
| Marquee (interactive themes) | Big words separated by a small drawn chevron, drifting across the page and a touch faster while visitors scroll (React to scrolling). Choose the speed, direction and size. The typography alternates sans serif words with grey Fraunces italics (the default), or sets every word in sans serif or in Fraunces italics. |
| Statement (interactive themes) | A small label in the side column, large two-tone text whose grey words fill to ink as it scrolls by (effect Fill in word by word on scroll; with Fade in the two tones stay as they are), an optional pill button and a photograph beside it. |
| Collection Wall (interactive themes) | A canvas of rounded photographs with small labels over a patch of sky, which visitors drag in any direction with inertia; nearer works drift faster than far ones. Each work opens in the image viewer. Choose the draggable wall (normal or tall) or a clean grid. |
| Portfolio | Tall image cards with the title set over the photograph and an outline "Learn more" pill. |
| Steps | Horizontal (the default): numbered columns side by side, each step's picture cut with a stepped roofline, under a progress bar and an "01 / 05" counter. On large screens with Parallax on, the section holds while the columns slide sideways with the scroll; otherwise they scroll sideways on their own, snapping to each step, and stack on phones. Vertical: the title and description stay in place on the left while numbered rows scroll by on the right between hairlines, each lighting up as it passes the middle of the screen, with a small thumbnail or the icon of the step. |
| Timeline | Dates set large in the side column and entries between hairlines, with a progress line drawing down as the page scrolls (alternating, left or right). |
| About | The two-tone head, the photograph cut into a chevron strip, the intro and the key figures between hairlines, counting up. |
| Testimonials | A large picture on one side (the background image set in the section's Style tab, otherwise a sky tile with the author's portrait), the quote in Fraunces italics on the other, numbered round buttons to move between quotes and the author line with stars. Quotes crossfade and change slowly on their own, pausing while the visitor points at or focuses them. |
| Cards Grid, Features | Cards with pictures become image cards (title over the photo, outline pill); Features, and cards without pictures, become the near-black services band with its giant words. |
| Gallery, Gallery + Text, Image + Text, Image | Photographs clipped into chevrons in rows that slide in one after the other, each opening in the viewer; a small grid of photographs beside a column of text; alternating rows where a square-cornered photograph rises into place beside a two-tone heading; a single photograph rising into place with its caption. |
| Video | A full-width poster under a soft veil, the two-tone title over it and a "Play" pill; the player loads on click, or starts muted once half of it is in view when Autoplay is on. |
| Carousel | Full-width slides inside a square frame, with round arrows and line markers. |
| Metrics, Countdown | Giant tight figures on a hairline with a short grey label, counting up once in view; days, hours, minutes and seconds in giant figures over the soft sky. |
| Call to Action | A band of night sky with drifting clouds, a centred two-tone headline and a white pill. The CTA background color of the Theme Settings paints the band instead, and a color or gradient set in the section's Style tab wins over it; a Style background image becomes a photograph under a dark veil. |
| Logo Bar | Partners in a hairline grid (their names set in type when there is no logo), or, with the Scrolling style, a slow band that reacts to the scroll. |
| Accordion, FAQ, Tabs | The two-tone head on one side and hairline rows on the other that open in place (a plus turning into a minus), one at a time unless the accordion allows several; the FAQ can show a photo beside its questions. Tabs are pills with a sliding ink pill, or a vertical list. |
| Team, Pricing, Comparison | Square-cornered portraits with the name, the role in grey and links on hover; plans as columns between hairlines with the featured plan on the near-black band; a hairline table whose highlighted column sits on the haze surface. |
| Journal, Events and Products previews | The latest posts as rows on the haze band (date, title, excerpt, "Read more" pill, picture on the far side); an agenda of hairline rows with a big day number, time, place and a chevron-cut picture; quiet square-cornered product cards. |
| Titles, Divider, Banner | A two-tone heading with a hairline drawing across under it, the split title, a haze (filled) or hairline (outlined) title banner, a title over a full-width photo (or the night sky) under a veil, and an animated title whose chosen entrance plays once in view; a hairline, a soft horizon wave or three small chevrons; a slim notice bar with a small chevron. |
| Contact Form, Map, Before / After | A calm form with underlined fields beside the two-tone head; the map in a square frame beside a hairline details column; square comparison frames with a round ink grip and pill labels. |
Works & Projects
The works index shows category pills with a sliding ink over the image cards. When all the works fit on one page (set Portfolio → Items per page high enough), the pills filter them in place with a smooth reshuffle and a count of the works shown; otherwise each pill opens its category page. Each project page opens with a sky head and the two-tone title, the cover rising below, the project facts beside the story, the videos and comparisons, the gallery in the image viewer, and ends with a full-width 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 Skyline palette, type and hairlines, in both appearances, under the same sky page header.
Accessibility
- Every effect is turned off for visitors who ask their device to reduce motion; marquees then show their words as a still, wrapping line.
- Two-tone headlines stay real text: only their color changes, so screen readers read them normally.
- The collection wall moves with the arrow keys once focused, and the image viewer, the testimonials and the tabs follow the arrow keys too; 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 Skyline by activating another one. Go to Admin panel → Themes and click Activate on the theme you want instead.
- Skyline stays installed: its files remain under
extensions/themes/skyline/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 Skyline card and confirm the prompt.
That deletes:
- the theme directory
extensions/themes/skyline/; - its published assets under
public/themes/skyline/; - its uploaded files under
storage/app/public/themes/skyline/; - 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 Skyline 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/skyline/. 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 Skyline slow because of all the animations?
No. The scroll effects run from a single animation loop that only works on what is on screen and sleeps while the tab is hidden, images load lazily and the fonts load without blocking the page.
Which word does the hero wordmark show?
The first word of your site name (Settings → General), with the rest of the name, or the hero label when the name is a single word, on the line below. The wordmark appears with a Hero that has a cover photo.
Can I keep the design but turn the motion down?
Yes. Switch off any effect in Theme Settings → Motion & Interactions. With every option off, Skyline is a calm, airy 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 a theme that does not provide them 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. Below 1200px wide the full-screen menu is the navigation, the horizontal steps scroll sideways (and stack on phones), the collection wall follows your finger, the testimonials can be swiped and the contextual cursor is only used with a mouse.