Introduction
The band at the top of your homepage: five layouts, four portrait shapes, an optional signup field, and what each editor field becomes.
The introduction is the first thing a reader meets: who you are, what you write about, and a field to subscribe. It is always at the top of the homepage, whatever its publish date, so you cannot bury it by accident.
Create it
#home-introGo to Pages → New page.
Write the title, the excerpt and the body (see the table below for what each becomes).
Set a Feature image: this is your portrait.
Under Tags, add #home-intro.
Publish.
The introduction band in Ghost admin
The default introduction band
What each field becomes
| Field | On the page |
|---|---|
| Title | The large heading, and your homepage's main heading for search engines |
| Excerpt | One small line above the heading, for a role or a location |
| Body | The prose under the heading, with your article typography |
| Meta description | The hint under the signup field |
| Feature image | Your portrait |
The title is doing double duty
Because this heading is the homepage's main heading, write it as a sentence about your work rather than as the word "Introduction". The demo site uses the whole opening line as the title.
Choosing a layout
The default is centred: a round portrait above the words. Four alternative layouts move the portrait beside them. Add one tag to the same page, alongside #home-intro.
No tag. Remove any layout tag to get back here.
Best for: a short opening line and a headshot. It works at any window width without thought.
A round portrait, centred, with the heading and prose beneath it. The quietest of the five.
#intro-split-left
Best for: a longer opening line, and a portrait that suits a tall crop.
A portrait card on the left, words on the right, both inside the page's usual column. The portrait is 4:5 with softly rounded corners by default; both can be changed with the shape tags below.
#intro-split-right
Best for: the same as split left, when the portrait's subject faces left and should look into the words.
The mirror: words on the left, portrait card on the right.
#intro-panel-left
Best for: a strong photograph you want to lead with, on a site where the homepage is the front door.
The portrait runs to the left edge of the screen at the full height of the band, like a magazine opening spread. Words fill the other half.
#intro-panel-right
Best for: the same as panel left, with the words leading.
The mirror: words left, full-height portrait panel right.
The side in the tag name is the side the portrait sits on.
Every portrait layout needs a feature image
The portrait is the page's feature image. Without one, the band falls back to the centred, text-only layout rather than leaving a gap where the picture should be, whatever layout tag the page carries. That is also the tidy way to try words alone for a while: remove the feature image, leave the tags alone, and put it back when you want the portrait again. There is no theme setting for this.
Shaping the portrait
Four shapes and two corner styles, for the split layouts only.
| Tag | Portrait shape |
|---|---|
| (no tag) | 4:5, slightly taller than wide |
#intro-ratio-square | Square |
#intro-ratio-3x4 | A little wider than the default |
#intro-ratio-2x3 | Taller |
#intro-ratio-9x16 | Tallest, phone-photo shaped |
| Tag | Corners |
|---|---|
| (no tag) | Softly rounded |
#intro-sharp | Square |
#intro-round | A circle |
Default: 4:5, softly rounded corners
#intro-round on the default 2:3 shape: an oval
Three details worth knowing
These six tags do nothing on the two panel layouts, because a panel's height comes from the band and its edges meet the screen: there is no ratio to set and no corner to round. #intro-round on a non-square portrait gives you an oval, so pair it with #intro-ratio-square. And if a page somehow carries both corner tags, sharp wins.
The signup field
If memberships are switched on in Ghost, the introduction includes an email field, and the meta description becomes the small line of reassurance under it. Signups from here are labelled in Settings → Members so you can tell where a reader came from.
To remove it, add this tag to the same page:
#intro-no-formThat works in all five layouts, and it is the right choice if you would rather send readers to a dedicated newsletter page.
Nudging the portrait's crop
The portrait is cropped to fill its shape, from the centre. If a face sits near the top of your photograph, one line of CSS in Settings → Code injection → Site header moves the crop up:
<style>
[data-layout^="split"] img[data-part="image"],
[data-layout^="panel"] img[data-part="image"] {
object-position: top;
}
</style>More of this kind of thing: Common snippets.