Page editor

The page editor is where you build your publication's pages - its home, an About page, a Start Here page - out of blocks: a hero, some text, a gallery, your latest articles, your links. What you see while editing is what your readers get.

Opening a page in the editor

In Studio, open the Website tab and pick a page in its Pages list. The page opens in the editor, as your readers will see it, with your tools added on top.

A page open in the editor.

How a page is built

A page is a stack of rows. A row holds one block, or several side by side: a picture beside some text, three cards in a line. Some blocks take the whole row on their own, like Image or video or a full-image hero; others accept neighbours. On a phone, blocks that sit side by side stack one under the other.

At the top of the page are its title, its description and its cover: type them in place. The title names the page in your site's navigation and in search results, the description and cover are what a link to the page shows when it's shared.

Your page's name and address

Before the blocks, the editor asks for the page's name and its address. The address is the part after your publication's own: next to "yourpublication.peakub.com/" you type, say, "about-us".

• Letters, digits and dashes. What you type is shaped as you go: lowercase, accents dropped, anything else becomes a dash.
• Checked as you type. A spinner, then a green mark when the address is free, or a red one with the reason when it isn't: a page of your site already has it, or the site already uses it for something else. A "Use ..." button then offers the nearest free address. A page can't be left without one ("A page needs an address.").
• Applied when you publish. The new address is saved with the page, but readers keep the old one until you publish: the editor says "Applied when you publish. Until then, readers keep /old-address." The change counts among the ones to publish.
• The old address still works. Once the new one is live, a reader or a search engine arriving on the old address is sent to the new one, so existing links don't break.

When the page's template has a newer layout, a banner above the name offers to switch to it: see Adding a page.

Saving and publishing your changes

Everything you change is saved as you go: there's no Save button. If a change can't be saved (you lost your connection, for example), the editor tells you so.

Saved isn't published: your readers keep seeing the page as it was until you use Publish (Publish changes, for a page that's already live), at the top of the editor.

Adding a block

Use "Add a block here" in the editor's toolbar, at the bottom of the screen, or the add button on a row to put a block beside the ones already there. The add window opens:

• type in "Search blocks" to find one by its name, its description or what it's for ("banner", "video", "links"...)
• or browse: All, Recent (what you added lately), then one tab per kind of block: Editorial, Media, Social, Layout, Publication, Content, Community, Book club, Coverages and Events
• each block shows a small preview of what it looks like, its name and a line about it; a "Blurb" badge marks the blocks whose content is reusable anywhere (see Writing something once and reusing it everywhere)

Click a block to add it. Blocks that can reuse something you already made open a list of those first (see "Reusing what you already made" below).

The add window: search, categories and previews.

Pasting a link or some text

Paste a web address while editing (Cmd+V or Ctrl+V) and it's added as a Link card, showing the site's image, title and description. The link is saved in your Blurbs, and in a Link card you can also pick one of your saved links ("Change the link" shows them) instead of pasting. Paste some text and it becomes an Html block. When there's no room where you are for that block, or no block can take what you pasted, the editor tells you.

A block's controls

Hover a block (or a row) to show its controls:

• the grip, to drag it elsewhere (see below), and the arrows, to move it up or down - or left and right within its row
• the eye, to hide it from readers without deleting it
• duplicate, to add a copy right after it
• remove
• settings, the block's own options (a gallery's layout, a divider's line...) and, for a block alone in its row, its ambiance (below)

The name of the block and its swap control sit on the left, on the same line (see "Knowing which block is which").

Giving a block its own ambiance

A block alone in its row can change how the whole page looks while your reader is on it. In its settings, under Ambiance:

• Background: none, a colour from your theme, or your own colour
• Header: as set, hidden, minimal, or over the page, and whether it only changes once the reader scrolls
• Scrolling: with the page, or sideways, held in view (for a row of cards)
• Starts when it reaches: a quarter in, halfway or three quarters in - how far into the screen the block has to come before its ambiance takes over

"Back to the block's own" undoes your changes. The editor itself keeps its usual look: your readers see the ambiance.

Rearranging the blocks of a page

Hover a block in the page editor to show its controls. Drag the grip handle to move the block anywhere on the page in one go, or use the up and down arrows to move it one place at a time. Blocks that sit side by side can be dragged within their row the same way.

From the keyboard: focus the grip handle, press Space to pick the block up, the arrow keys to move it, and Space again to drop it (Escape puts it back). A block the page's template locks in place has no grip handle, and nothing can be dragged past it. The new order is saved automatically.

Adding a picture, a video or a file by dropping it on the page

Drag a file from your computer onto the page editor. As you move it over the page, the blocks open up around a dashed space showing where it will land: before or after the block under your pointer. Drop it there and the editor picks the block for you:

• an image or a video becomes an Image or video block
• a web address dragged in becomes a Link card, and a text file becomes an Html block
• any other file (a PDF, a spreadsheet, an archive) becomes a File to download block, up to 100 MB

You can swap the block for another one afterwards. When the editor can't place the block you'd expect where you dropped it (the Image or video block never shares a row with another block, for example), it asks you to choose instead, and only offers the blocks that can show that file:

• Hero (image and text) and Hero (full image): an image up to 5 MB or a video up to 50 MB
• Image or video: an image up to 10 MB or a video up to 50 MB
• Gallery: images up to 10 MB or videos up to 50 MB, the first of a new gallery

The new block takes the dashed space, the page scrolls to it, and the file uploads right away.

A block that already holds a picture keeps its own drops: over it, no space opens, and dropping the file there replaces its picture. To add a new block next to it instead, move to the block's top or bottom edge, or onto the block beside it.

Dropping a file on the page: the blocks part around a dashed space.

Switching a block to another layout

Some blocks show the same content in different layouts. Hero (image and text) and Hero (full image) both hold a picture, a title and a description. Hover one and use its swap control, right after the block's name, to turn it into the other: the picture and the text stay as they are. The swap control only appears on blocks that have another layout to switch to.

Hiding a block from readers

Use the eye on a block's controls to hide it from your readers without deleting it. In the editor it stays in place, dimmed, with a "Hidden from readers" label, so you can bring it back with the same eye. Your readers never see it, on your site or anywhere else.

Finding your way around a long page

On a wide screen, a column of short lines sits in the left margin of a long page, one line per section, the darker one where you are. Point at it to see the list of sections and click one to go there. It's there in the page editor, on your published pages, and on your articles, built from their headings. In the editor, hidden blocks are listed too, in lighter text.

Knowing which block is which

While you edit, hover a block and its name appears in a pill at its top left ("Hero", "Gallery", "File to download"), on the same line as its other controls. If the block can switch to another layout, the swap control sits right after the name. A block that holds a reusable blurb also carries a "Blurb" badge there.

Running a block from edge to edge

By default a block stays within the width of your page. Some blocks can instead reach the full width of the screen: Gallery, Hero (full image), Image or video, and Divider, and, if you choose, Hero (image and text) and Announcement. Open the block's settings and turn on "Edge to edge".

• Gallery, Hero (full image) and Image or video start edge to edge. You can turn it off to bring them back within the page.
• A block reaches the edges only when it sits alone in its row. Put it in a row with other blocks, or inside a column or container, and it stays within the page.

Showing photos in a gallery

The Gallery block holds photos and videos, each with its own caption, under a name and a short description of the gallery. Open its settings to choose a layout:

• Grid, with 2, 3 or 4 columns
• Masonry, where photos keep their proportions in columns
• Justified rows (the default), where each row is filled edge to edge
• Feature, with one large photo and smaller ones around it
• Horizontal row, a single row you scroll sideways
• Showcase, where the gallery stays in view and slides sideways as the reader scrolls down the page
• Carousel, one photo at a time

The Horizontal row and Showcase layouts have a Height setting: Full screen (the default), Large, Medium or Small. In a Showcase, the gallery's name and description stay in place over the photos as they slide.

You can show captions below the photos or over them, or hide them, and show them on hover (the default) or always. The space between photos is yours to set too, down to none.

A click on a photo opens it on the whole screen: the photo grows out of its thumbnail, you move between photos with the arrows, and Escape closes it. The star on a photo, or the gallery's cover control, sets the cover the gallery shows in Studio and in link previews.

A gallery and its layout choices in the block's settings.

Offering a file to download

The File to download block gives readers a PDF, a spreadsheet, an archive or any other file as it is. It shows as a card shaped like a sheet with a folded corner, with the file's name, a caption, its type and size. Readers download it, they don't open it in the page.

You can give the card a cover of your own. Without one, it shows the file's own picture when it's an image, and otherwise a large icon for its kind of file. To add one, drop the file on the page: any file that isn't an image, a video or a text becomes a File to download block.

Anyone who can see the page can download the file. You can't restrict a download to subscribers yet.

Reusing what you already made

When you add a hero, a gallery, an announcement or an Html block, the add window starts with "Start blank", followed by the ones your publication already has. Pick one to start from it instead of from nothing. The article, coverage and zine blocks offer your existing ones in the same way.

What you reuse is a blurb: changing it changes every page, zine and list that uses it, and the blurb's own editor tells you where else it's used.

Separating sections with a divider

The Divider block draws a line across the page. Its styles are Line, Dashes, Dots, Zigzag and Wave. The Wave is a filled band with a slow swell, and it stands still for readers who ask their device for less motion. A divider can also run edge to edge.

Putting your pinned stories on a page

The Pinned stories block shows the articles you pinned on your publication, the first one as tall as the screen and kept in view while the others scroll beside it. See Pins to choose what's pinned.

Showing your publication as a spread

The Publication spread block presents your publication like the double page of a magazine. On the left page, its cover: your banner, icon, name and description, with a way to subscribe. On the right page, who subscribes, what's inside (the features you have turned on: Articles, Book club, Events, Coverages, Zines) and your rubrics. Readers click it to go to your publication.

It takes the width of the page or a bit less, and has no neighbours in its row. You can use it on a page or in a zine. It has no settings: it always shows your own publication.

The blocks you can add

• Editorial: Hero (image and text), Hero (full image), Announcement, Html, Visual, Emphasized text
• Media: Image or video, Gallery, File to download, Link card, and videos (Video, Avatar video, Story, Video full canvas)
• Social: Links (a Linktree-like list), Social (Auto), which recognises the platform from the address you give it, and one block per platform (YouTube, Vimeo, Spotify, SoundCloud, Instagram, TikTok, Bluesky, Mastodon, Threads, Substack and more)
• Layout: Divider, Horizontal showcase
• Content: your articles, zines and visuals: one chosen article or zine, the latest one, a highlight, a grid, a list, the most read, a feed
• Publication: Home news front pages, Pinned stories, Most popular, Top members-only exclusives, Publication excerpt, Contributors and Leaderboard, Recommendations, Socials, Publication spread, Rubric stories (one of your rubrics) and Series parts (one of your series)
• Community: Comments
• Book club, Coverages, Events: the blocks of each (the current book, upcoming and previous books, a coverage, the latest coverage...)