Docs: Creating pages

We have three different page templates built into Blueprint to make it as quick and easy as possible for you to design and create pages that look consistent:

1. A basic Blueprint page - with styled header and footer as default, and which sits within the root folder.
   

2. An FAQ - the basic Blueprint page but with additional features as default such as a search bar and ‘chips’ showing the different categories your FAQ is tagged as. FAQs will sit within the faqs folder of the project (which sits within the Help & FAQs folder) and the URL will have the 'faqs' slug followed by that individual FAQ’s slug.
   

3. A blog post - the basic Blueprint page but has an additional section at the bottom as default which shows last updated and author information and image. Blog posts will sit within the blog folder of the project and the URL will have the 'blog' slug followed by the blog post name' slug.
   

You’ll first need to create your page, and then you can start adding Blocks to it - Blocks are basically different chunks of content and structure for the page which we have coded and styled consistently for your site.

We have already developed most of the Blocks you will need for your site, using Coral’s styled components. You can modify the style on some of these Blocks (for example, the width of a button or different variants of a component such as the colour theme of a card) but to ensure consistency and promote ease, most of the styling is pre-defined.

We recommend navigating to the ‘coral components’ page in Storyblok’s content screen, in the root folder, to see all of the Coral components you can use and a preview of what they will look like.

Creating pages

• Navigate to the Blueprint space in Storyblok.

• Go to ‘content’ in the left pane to see all of the pages on the site.

• Hit the ‘Create New’ button in the top right and select ‘Story’ (a story is basically a page - a collection of content within a series of Blocks) and give your page a name, and a slug.

• For basic pages with the Blueprint header and footer, create your story in the root directory and select 'page' as the content type.

• For FAQ pages, create your story in the faqs folder, inside the Help & FAQs folder, and select ‘FAQ’ as the content type. You will then see a default FAQ page and can add content to this, as you would a generic page. Make sure you also add a Category for this FAQ in the right hand pane so it is searchable.

• For blog posts, create your story in the blog folder, and select ‘post’ as the content type. You will see a default blog page template and can add content to this, as you would a generic page.

• If you are creating a new series of related pages (such as for a new campaign), create a new folder first to house these in (click on ‘Create new’ and select ‘folder’ to create this and its slug for this new pathway in the project).

Adding Bloks to your page

• Once you have created a new page, you will see you now have a blank page in the preview, with the Blueprint header and footer pre-loaded in the template as well as other default content if you created an FAQ or blog post.

• You can start adding Blocks to your page in the right hand pane - you will see a list of all the Block types we have custom built and can hover over the content Blocks to see a preview.

• First start with a container Blok, to achieve the correct margins for your page. Then create your page layout nested within this Block: The blue icons in the Block list are for configuring the layout of the page, and the green icons are for the different types of content that sit within that layout.

• Use the Blocks to add the content you desire, in the format you desire.

• Make sure you click save in the top right of the screen as you make changes, to ensure you always backup your work.

• You can copy and paste different Blocks if you want to duplicate any content by hovering on the block and hitting the copy icon, and then hovering your mouse where you would like to paste this block and clicking the icon next to the plus sign.

• When you are happy with your page layout and content, click publish in the top right.

If you need a coral Block which does not exist in StoryBlok, you will need to speak with your developers - they will need to create a new Dynamic Block component in the code [see developer documentation for more info]