Create pages
Learn how to create and edit pages using Prismic's Page Builder.
Creating pages in Prismic follows this workflow:
- Create a new page from a template (also known as a page type)
- Build your content using customizable sections
- Preview and collaborate with teammates
- Publish when ready to go live
Basic concepts
Your repository
In Prismic, your repository stores all of the content for a project. It contains your project’s pages, media, environments, translations, and settings. Prismic hosts this content in the cloud for you, and you can edit it via the Prismic platform.
The Work tab with access to all pages.
Page Builder
Pages in your repository are created and edited using the Page Builder. The Page Builder is an interactive interface with fields and controls to build pages.
The Page Builder interface where you will create and edit your content.
The Page Builder is divided into three main sections:
- Left sidebar: Live previews of the sections that make up the page.
- Middle section: The fields for your content, including the page’s section.
- Right sidebar: Version and localization information.
The Page Builder’s interface is customized by your website’s developer using fields and reusable website sections called slices.
Create a page
Pages are the main unit of content in the Page Builder. Each page follows a set of fields and slices defined by your website’s developer.
Start creating a page
Click Create a new page in the top-right corner of your page list.
The Create a new page button in the Page Builder.
Choose a page type
Select a page type from the dialog to create a new page. Each page type is like a template: each one has its own purpose and set of content fields.
The list of page type options.
Fill in your content
You will now see the Page Builder with fields specific to your chosen page type.
The Page Builder with an empty page.
Most pages will be created with prebuilt website sections called slices, each with a set of fields. Click Add slice in the left sidebar to see which ones are available.
Learn more about building pages with slices
Some pages have multiple tabs to group related content, such as SEO metadata. Use the tabs at the top of the editor to switch between them.
Save a draft
Click the Save button at any time to save your work as a draft.
The Save button to save a page draft.
Build pages with slices
Slices are sections of a website page — like a block of text, a hero, or a call to action. They are modeled using a collection of fields.
Content writers build website pages using a stack of slices.
A page built with slices. This website has slices like Hero and Company Logos.
Slices are created from scratch by developers. A slice’s fields are modeled by a developer during the content modeling process. A developer then integrates the slice into the website so it displays when the slice is used in a page.
Developers control which slices are available to content writers. For example, a homepage might allow a Hero slice, while a blog post might allow a Quote slice. When needed, slices can be made available to multiple page types.
Choose a slice type
Click the + button or Add slice in the left sidebar to see available slice options. Select the type of slice you want to add.
Selecting a slice in the Page Builder.
Fill in the slice content
Each slice will have its own fields to complete. Add your text, images, links, and other content as needed.
Reorder, duplicate, and delete slices
- Reorder: Drag slices up or down in the left sidebar, or select Move Up/Down in the slice’s options menu.
- Duplicate: Select Copy in the slice’s options menu, then Paste where you want the duplicate to appear. ⌘C and ⌘P works, too.
- Delete: Select Delete in the slice’s options menu.
Slice variations
In some cases, multiple versions of a slice called slice variations are available.
For example, a “Text with Image” slice might have a variation for “Image on Left” and another for “Image on Right.”
Image on Left
Image on Right
Each variation has its own set of fields to account for content differences between variations.
You can select any available slice variation when adding a slice to a page.
Preview a page
You can preview draft pages on your website before publishing it. This enables content review, stakeholder approval, and testing before making changes live.
Prismic supports two types of previews:
- Live previews: Real-time slice thumbnails in the Page Builder’s sidebar.
- Full-website previews: Navigate your entire website with draft content.
Live previews
Live previews show content updates in real-time while editing in the Page Builder. Each slice appears as a live-updating thumbnail, giving content writers immediate visual feedback.
A page with live previews in the Page Builder.
Full-website previews
Full-website previews let content writers navigate your entire website with draft content, exactly as it will appear when published. These previews can be shared with teammates for review.
Open the preview
Click Preview the page in the bottom-right corner of the editor and select one of your previews. You will typically use one named Production.
The Preview the page button to start a page preview.
View your content
A new tab opens showing your content as it will appear live on your website.
Make updates
Make changes in the editor tab, save, and switch back to the preview to see updates.
Exit the preview
When you’re ready to leave the preview, click the Prismic toolbar’s “x” button in the bottom left corner of the page.
Prismic toolbar
The Prismic toolbar automatically appears during preview sessions, providing content writers with:
- A list of pages in the current preview
- Quick links to open pages in the Page builder
- Access to shareable preview links
- A button to exit the preview session
The toolbar appears in the bottom-left corner of a preview.
The Prismic toolbar during a preview.
Share previews
Content writers can generate shareable preview links to collaborate with teammates. These links allow anyone to view draft content without needing access to your Prismic repository.
Generating a shareable link from the toolbar.
To create a shareable link:
- Open a preview session.
- Click Get a shareable link in the toolbar.
- Copy and share the generated URL.
Shareable links are temporary and expire.
Publish a page
When you’re satisfied with your content, click Publish in the top-right corner of the editor to go live.
The Publish button that publishes a new page or an existing page’s changes.
Published content typically appears within seconds, though some websites may take more time to update.
Page history
Prismic keeps a record of all changes so you can track, compare, and restore versions.
View a previous version
To view a list of changes to your page, click the View History link at the top-left corner of the editor, underneath the page’s title.
This will open a new page where you can view the page’s history. The history includes every version of the page, including the published status, the author, and the date of the change.
Compare versions
When you select a previous page version, you will see all of the edits made in that version. This view compares the selected version with the version preceding it, showing differences in text, images, and other content.
When viewing a previous page version, two arrows appear at the top-right corner of the screen, which allows you to click through the individual changes.
Deleted content appears in red, and newly added content appears in green.
For images, a slider is provided that allows you to compare the changes between versions visually. This lets you see if an image was completely replaced or if there were just changes in the cropping or resizing.
Close the history by clicking the X in the top-left corner.
Restore a previous version
To restore a previous version of the page, click Restore on the version you want. This will revert the page to the previous version as an unsaved draft.
You can publish that version by clicking Save and then Publish.