Atelier documentation
A portfolio for creative studios: a tilted wall of work that drifts on its own, projects that lean as you scroll, three project layouts and a full-screen menu.
Installation
- Download
atelier-package.zipfrom your purchase email or your purchases library and unzip it: it containsatelier.zip(the theme),atelier-demo.zip(the demo content), a README and the licence. Do not unzipatelier.zip. - In Ghost Admin, open Settings → Design & branding → Change theme.
- Click Upload theme, select the zip, then Activate.
Atelier requires Ghost 6 (self-hosted, or a Ghost(Pro) plan that allows custom themes).
Updating
Upload the new zip the same way and confirm the overwrite. Your content, navigation and theme settings are kept.
Import the demo content
The download includes atelier-demo.zip: posts, pages, tags, navigation and images.
- Use a new or empty site: importing over existing content creates duplicates. On a fresh Ghost, first delete the default content in Settings → Advanced → Danger zone → Delete all content.
- Open Settings → Advanced → Import/Export and import the zip (not just the JSON, or the images will be missing).
- Theme settings are not part of an import: set them in Design & branding (see the table below).
Projects
- A project is a post with the internal tag
#project. Without any#project, the homepage shows all your posts as projects. - The facts on a project come from native fields: Discipline = its public tags, Year = its publication date, Team = its authors.
- Badges on the pictures: a flame for a Featured post, a camera for a post tagged
#video, a lock for members-only work. The badge does not add a video: put yours in the post with a Video or Embed card.
Project layouts
In the post settings, under Template:
| Template | Layout |
|---|---|
| Default | The feature image fills the screen, with the title and facts on it; the story follows. |
| Project - side | Title, facts and text fixed on the left; the feature image and every Image or Gallery card of the post scroll on the right. |
| Project - gallery | Title, facts and text, then every image of the post in columns (a Gallery card is split into its images). |
Homepage
| Section | Content comes from |
|---|---|
| Tilted wall | The feature images of your 25 latest posts, drifting on their own in opposite directions. Hidden with fewer than five images. |
| Heading | Hero title (words between *asterisks* take the accent colour), Hero text, Button label and Button link. |
| Wide image | The Publication cover (Settings → Design & branding). |
| Selected work | Your #project posts, in the Homepage layout you choose: Tilted wall (three leaning columns), Index (large titles, the picture follows the pointer), Horizontal (the row slides sideways while the reader scrolls) or Grid. |
| Studio | The page with the slug about: feature image, title and excerpt. |
| Journal | Your latest posts without #project. |
# (type #picks in the Tags field of a post). Readers never see them and they have no public page; the theme uses them to pick content.Reveal effects
Reveal effect: Slide, Fade, Zoom, Curtain or None. A page can use another one with an internal tag: #effect-slide, #effect-fade, #effect-zoom, #effect-curtain or #effect-none. Every animation stops for readers who ask their system for less motion.
Show every layout, like the demo
Create a page and pick the template Home - wall, Home - index, Home - horizontal or Home - grid: it shows the homepage in that layout.
Bar and menu
- The bar shows your first primary links (four on large screens). A label starting with a dash, like
-Index, becomes an entry of the dropdown of the link above it. - The menu button opens a full-screen panel with your secondary navigation, numbered, and a picture that changes as you hover. On phones it shows both navigations; with fewer than three secondary links, the primary ones are added.
- The footer opens with a large link: Footer heading, pointing to Button link.
All settings
| Setting | Tab | Default | What it does |
|---|---|---|---|
| Color scheme | Site-wide | Light | Default color scheme. Readers can still switch it in the menu. |
| Logo for dark mode | Site-wide | — | Optional logo used when the dark scheme is active |
| Reveal effect | Site-wide | Slide | How projects and images appear as the reader scrolls down |
| Footer heading | Site-wide | Start a project | Large link at the top of the footer, pointing to the button link below |
| Footer text | Site-wide | An independent creative studio. | Short line in the footer |
| Other social links | Site-wide | — | Extra social profile URLs, comma-separated (Pinterest, Behance, Dribbble...) |
| Show newsletter | Site-wide | Off | Newsletter sign-up above the footer (needs members enabled) |
| Homepage layout | Homepage | Tilted wall | Tilted wall, Index (large titles), Horizontal (projects slide sideways) or Grid |
| Hero title | Homepage | We make campaigns, editorials and *identities*. | Main heading. Words between *asterisks* take the accent colour. |
| Hero text | Homepage | An independent creative studio for art direction, photography and print. | Short text next to the heading |
| Button label | Homepage | Start a project | Button in the header and the homepage. Leave empty to hide it. |
| Button link | Homepage | /contact/ | Where the button and the large footer link go |
| Show cover | Homepage | On | Wide image under the heading: the Publication cover from Settings > Design |
| Show work | Homepage | On | Projects: posts with the internal tag #project (all posts if there is none) |
| Show studio | Homepage | On | Studio: image, title and excerpt of the page with the slug about |
| Show journal | Homepage | On | Journal: your latest posts that are not projects |
| Table of contents | Post | On | Table of contents on journal posts with three or more headings |
Posts per page: 12 (set by the theme). Settings are in Settings → Design & branding → Customize, in the Site-wide, Homepage and Post tabs.
Navigation & social links
- Dropdowns: in Settings → Navigation, start a label with a dash (
-About) to put it in a dropdown under the item above. That parent item only opens the dropdown; its URL is not used. - Social accounts: X, Facebook, LinkedIn, Bluesky, Threads, Mastodon, TikTok, YouTube and Instagram come from Settings → General → Social accounts. Add any other profile in the Other social links setting (comma-separated URLs): Pinterest, WhatsApp, Telegram, Discord, GitHub, Dribbble, Behance, Spotify, Twitch, Snapchat, Reddit and Medium get their icon, any other URL gets a link icon.
- The RSS icon is added automatically.
Posts & pages
- Table of contents: added automatically to posts with three or more H2 headings (setting Table of contents).
- Full width page template: choose it in the page settings for landing pages.
- The page option Show title and feature image is respected.
- Every editor card is styled, including wide and full-width images, galleries, toggles, callouts, buttons and bookmarks.
Members & newsletter
The subscription block uses Ghost’s native members. It is hidden for signed-in members, and when sign-ups are off or invite-only (Settings → Membership).
Translation
Every text of the theme goes through Ghost’s translation system. Copy locales/en.json inside the theme to locales/fr.json (or your language code), translate the values, zip the theme again and upload it. Then set the language in Settings → General → Publication language.
FAQ
The button and the large footer link lead to a missing page.
They go to Button link (default /contact/). Create a page with that slug, or change the link in the theme settings.
My projects do not lean.
Only the Tilted wall layout leans its projects, on screens at least 900 px wide, and not for readers who ask for less motion.
A section of the homepage does not appear.
Check its switch in Design & branding, then its content: every section hides itself when it has nothing to show (no Featured post, no post with the internal tag, an empty tag…).
Can I change the fonts?
Yes: the fonts chosen in Design & branding → Typography replace the theme’s heading and body fonts.