Designing Siwa: From First Visit to Newsletter
Before you reach the stories on the Siwa demo, you meet the publication. A large introduction sits beside a portrait video, with enough room for a few paragraphs and a direct invitation to subscribe. Below it, selected stories lead into the latest writing. Farther down, the newsletter has its own introduction and choices.
A personal publication needs room to introduce its writer, but visitors may arrive ready to read or subscribe. Siwa gives the introduction space while keeping those other routes visible. The same balance continues through its story layouts and newsletter section.
Siwa is a Ghost theme I make at Aspire Themes. The examples here use its sample publication, rather than a customer site.
Give the Introduction Room to Speak
The homepage opens with words before it opens with a collection of posts. The heading, short introduction and longer body have distinct roles: identify the publication, explain what it offers, and give the writer space to say more.
The media column is narrower than the text column. A portrait can accompany the writing without pushing it into a small caption. On a smaller screen, the columns stack; with no image or supported introduction video, the text takes a single column.
This flexibility also shapes how the section is edited. Its content comes from a Ghost page, so the publisher can use the editor for paragraphs, links and buttons. The introduction can grow or become shorter as the publication changes. It is not limited to a fixed sentence in a theme setting.
Video uses the same space as the portrait. A Play control opens it with sound in a lightbox, leaving the visitor to choose when to watch. The introduction can establish a voice in writing or let the visitor hear it, while preserving the same overall composition.
Make Room for the Reader’s Voice
The introduction tells visitors what the publication offers. Reader quotes can add another perspective before the stories begin. Siwa places them between the introduction and Featured, where the publisher’s words give way to someone else’s account of reading the work.
The rounded cards have a small speech-bubble tail, making a quote visually different from a story card. Each carries its own attribution and optional role. These are sample endorsements in the demo; a publisher would supply their own reader quotes.
The row shows two cards on wider screens and one on mobile. Longer quotes determine their own height rather than disappearing into a fixed text box. When there are more quotes, scrolling and position dots let visitors continue through them. With no quotes added, the homepage moves directly to Featured.
Move From the Publisher to the Work
Once the introduction has established the publication, the next question is which story to open. Featured gives selected posts more space than the latest grid: a large image or video sits beside the title and excerpt, with text and media alternating sides across the cards.
That difference in scale separates an editorial selection from a chronological feed. Featured holds up to three posts marked Featured in Ghost. The latest stories follow, excluding those selections so the homepage does not immediately repeat them.
The composition changes with the content. A Featured story without an image or supported video becomes a full-width text card. On mobile, media comes before text. The selected story keeps its place in the sequence even when the wide desktop arrangement no longer fits.
The latest grid then gives visitors a broader choice. Someone who came for a particular subject can move beyond the first selection without reading the whole homepage as one long introduction.
Let Navigation Carry a Glimpse of the Story
A small homepage selection cannot show everything a publication contains. Navigation gives readers a route to the rest, and its desktop previews add a glimpse of the destination before they leave the page.
The image sits beside the links inside the same panel. A reader can move through the titles and see the associated media without opening each page. For supported video stories, that slot can show muted movement.
The menu remains a list of usable links. A missing image, an external destination or unavailable preview data does not prevent navigation. On mobile, a drawer keeps the grouped links without the preview panel. The destination stays the same while the amount of surrounding information changes with the available space.
Give Older Stories a Place to Be Found
A preview helps when the reader is deciding what looks interesting. Finding a particular older piece calls for another view. Siwa’s Archive keeps titles and dates together in a compact list, giving the words more weight than the photographs.
This gives a returning reader a way to scan for a title they remember. On devices with hover support, or when a row receives keyboard focus, an available feature image can appear beside it. A story without an image still has a complete title and date; pictures help recognition without becoming a requirement for the list.
Latest offers the more visual alternative, while tag and author pages let readers follow a subject or a person. These views lead to the same stories through different clues. A publication can give its photographs room on the homepage and still offer a compact route into its earlier writing.
Choose the Opening That Fits the Story
Finding a story leads to another design decision: what should the reader encounter first? A title, a photograph or a video can each provide the opening, and they ask for different arrangements.
Siwa’s Default layout centers the article opening. Hero places the title over the image, Fullscreen gives the cover more of the first screen, and Split puts the photograph beside the title and introduction. Post Video reserves the opening media area for playback.
In Split, the image and words arrive together. The reader can see the subject while reading the title. A fullscreen photograph establishes a different balance, giving the image more of the opening experience. The layout choice changes that first encounter while keeping the article within the same publication.
Video support connects these openings to the rest of the site. Native Ghost video, YouTube and Vimeo use a shared system for the introduction, story cards, navigation previews and video articles. A publisher selects Post Video when the first supported video in the content should become the primary media. Video can also remain within an ordinary article when it belongs later in the piece.
There is a distinction between a glimpse and a viewing session. Eligible card and navigation previews stay muted; primary playback begins with an explicit Play action. Reduced-motion preferences keep previews static. Movement can help a reader recognize a story without requiring every visitor to watch it.
Leave the Reading Pace to the Reader
Once a reader opens a story, the next choice is how to read it. Siwa puts text size and Listen in a small action bar, alongside comments and sharing. The controls stay close to the article instead of sending the reader to another page.
A reader can enlarge the text, and the browser remembers their choice. For a longer article, the table of contents offers a route back to a particular section. It appears only when there are headings to navigate.
Listen uses the browser’s text-to-speech support to read the story aloud. Its voice depends on the browser and device, and the control is removed when native speech is unavailable. This is a reading option, rather than a recorded audio edition supplied by the publisher.
The same approach extends to photographs and conversation. Unlinked images and galleries open in a fullscreen viewer; linked images keep their destinations. Available comments open beside the article in a side panel. A reader can look closer or respond while keeping their place in the story.
Separate the Publication’s Colors From a Story’s Colors
These different openings still need to feel like parts of one site. Siwa separates the overall page palette from the surfaces used for individual stories and sections.
The examples below keep the same stories and layout while changing the page palette: light Cloud Dancer, olive Kombu Green and burgundy Port Royale. That makes the two layers of color visible.
The surrounding page changes while the colored story cards remain recognizable. Publishers can give a story or section its own background, with a contrasting text color. The introduction, reader quotes and newsletter use that same approach.
This gives color two jobs. The page palette establishes the setting for the publication. A section or story color creates emphasis within it. A mint introduction and a peach Featured card can share a dark site without every element taking on the same accent.
Smaller surfaces also follow the page palette, so a panel does not carry a fixed light background into a dark scheme. The Siwa color guide covers the available palettes and custom settings.
Give the Newsletter Its Own Introduction
By the time a visitor reaches the lower part of the page, they have met the publisher, found routes into the work and seen how a story can unfold. The newsletter section can now explain what arriving in the reader’s inbox would mean.
Its title, description and optional image come from a Ghost page. The choices come from the publication’s actual Ghost newsletters. Each can have a description, so a visitor can distinguish a weekly collection from occasional notes before selecting what to receive. The sample publication shows several choices; a publisher can configure their own offer.
The presentation accommodates that offer. With an image, the section splits media and content on desktop and stacks them on smaller screens. Without an image, the copy and form use a centered column. The newsletter remains a complete invitation in either arrangement.
This is one shared section across the homepage, archives and article layouts. A Split article and a video article can have different openings and arrive at the same newsletter presentation. Signed-in members do not see the repeated signup section. For signed-out visitors, it appears when Ghost Members is enabled and the newsletter page exists. The Siwa setup guide covers those requirements.
The theme shapes this invitation on the website; Ghost’s newsletter settings shape the email itself. That boundary leaves the site free to introduce the publication through large images, video and colored sections while the email has its own design.
Siwa leaves a subscription link in the header for visitors who are already ready. The larger invitation remains available farther down, with room to explain each newsletter. After a reader has spent time with a story, that description gives them something specific to say yes to.
