Prismic Guide

At The Juniper Studio, we hand-make every client site using Prismic CMS from a curated set of components that we've created. Whilst no-two sites we set up will be the same, the fundamentals of how to use your Juniper/Prismic CMS will be the same.

This documentation has been written assuming that the admin/back end work has been done to set up your CMS and that your local and production sites are correctly set up - if not contact us for further support. 

We intentionally tried to keep your setup in Prismic as simple as possible.  There are a few key things to understand early on.

There are 3 quick links accessed on the left-hand side.

• Documents
• Custom Types
• Media Library

Document Dashboard

Your document dashboard is where you will be able to control the pages within your site.  There are two types of pages; 

• single-type (Navigation/Configuration) 
• repeatable-type (Pages/Blog)

Media Library

Your Media Library contains all your images and PDFs.

Custom Types

Warning: Do not make changes to the files in here, this can have a detrimental effect on the website.

Creating a new Page

Click Create New on the top-right and your Writing Room will open a blank page. You can add a title, and then you have a range of slices you can utilise.

You will need to add a Page Title, as well as optional Page Image, Page Text, Button Text, and Button Link in the Main section and add the Meta Title, Keywords, and Description on the Meta tab as a minimum for a page to be publishable.

Editing an existing Page

If you click a page name, you can view the settings and content within that.  You’ll notice that when you do start editing the bar changes to amber to indicate that it’s in edit mode.  If you start editing you can close without saving or save at any time, but only Publishing the page will update your site. 

Main

In here you have the option of building your page out with the building blocks called Slices.  The following Slices available to use:

1. Text - Purely used to create blocks of Text* with the option to add a linked Button to the bottom. 
2. Banner With Caption - This is a block that allows you to have 1 featured Image with Text* and a linked Button 
3. Hero - Should be the first component used if you want to create a featured image.  Includes Image, Title, Text and a linked Button.
4. Quote - Allows you to create a snippet of Text, and attribute an Author (Their Image, Name, and Company/Position)
5. Card Deck - This is similar to Banner with Caption and is perfect if you want to create a collection of tiles in a row that link to other pages.  Contains an Image with Text* and a linked Button 
6. Image Gallery - A slideshow of Images allowing you to add an optional Title above, and Caption. If a single image is loaded, the slideshow controls do not display.
7. Video - Embeds a YouTube video 
8. FAQ - Allows you to add a Title, Text, and adds a repeatable list of Questions and Answers
9. Map - Allows you to add a Google Map URL to embed a map  
10. Contact - Developer controlled contact form that can be added into any page.

If you cannot see these Slices in your current setup, let us know and we can enable them for your site.

* Text fields set up with additional formatting like:

1. Lead text
2. Bold text
3. Italic text
4. Heading types
5. Numbered and Bullet Lists  
6. Links

Hint: If you aren’t sure which slice to use go to the /components on the live site where an example of each has been added. You can then compare with the page in Prismic.

Banner with Caption

This is a block that allows you to have 1 featured Image with Text* and a linked Button.

Text & Text with Button 

This is the main content on the rest of the page.  Within here you can add the content you need.  There are a few restrictions but you have the freedom to ensure the display of your pages adheres to your branding but you do have the ability to format a lot of the copy.  Selecting on the content will show a toolbar (similar to MS Word/Google Docs) at the top of the screen that helps you to add formatting:

Buttons will need a working link.  Also, you can add links to content to ensure that your users can navigate to the parts of the site that they will find useful

Select the text you want users to click on and hit the link icon which brings up the Select a link panel.  

In the dropdown, select

• Link To The Web is for External Links -  paste your URL in 
• Link to Document is for Internal Links - to other pages set up within your Prismic site.
• Link to Media Item is for PDF Links - to PDF documents added to your Prismic media library.

You can also utilise the Mailto and Tel types - this will allow you to make links that either send an email or prefill a phone with a number.

To do this select the text and click to add an external link; but instead of pasting a URL, add the content as follows:

• For email, enter mailto:{paste the email address}
• For phone, enter tel:{enter the phone number}

If you've done it correctly the button below should ask you to confirm that you want to add that Tel or Mail link.

Hero

Here you can add an Image, Title, & Text. If you want to link it somewhere then you can also add Button Text (what the button displays) and Button Link (where the button links to (see Links section for more information)).  

Image Gallery

The image gallery allows you to upload multiple images and the site will display them a slideshow.  You can add a caption in at the bottom of each image, and the main title above the gallery, both of which are optional.

Uploading only 1 image to the Image Gallery will remove Slideshow controls.

Changing the images 

Clicking within an image field shows 3 options.  If you select the left Select Image option your Media Library will open where you can select a different image.  

Selecting a new image will return you back to your page or you can click the arrow in the top left corner will return without changes.

Order of images

The order of the items in the Carousel can be controlled by dragging the block using the = icon top-right (next to the bin) in each block.  

Quote 

A small snippet of text that contains a quote/testimonial from a client/customer.  You can add their Image, Name, Position and/or Company 

Card deck

Similar to the Banner with Caption, this allows you to show more items as a small row of repeatable cards to link to different pages. 

Video 

This is set up to link to a YouTube video.   Paste a YouTube URL in the Video field. If the format of the URL isn't correct Prismic will flag a warning.

Navigation

Controlling the main navigation (the Header & Footer) within the site is also something within your control.  

Header and Footer Links

There is a Navigation type within your dashboard.  The Header and Footer tabs allow you to add page links as required.  

Company Information

The Company Info tab allows you to add your company name, contact address, and phone number.

Social Media

Within Social Media, you can add any social media channels to the footer that you may have.  These will add the icon and the link, which opens in a new browser tab to ensure that your clients still have your site available.  We’ve included the most popular:

• Facebook
• LinkedIn
• YouTube
• Twitter
• Instagram

Open Graph

These images are used for display when links from the site are shared across social platforms. If you're not sure how this looks, check out www.opengraph.xyz

Preview allows you to view your changes before they are customer-facing. Avoiding the need to publish your changes and view them on the live version of your site.

The preview is simple. Once you have made a change to a page (putting it in Edit mode with the amber top bar), click Save once (and the option changes from Save to Publish) and to the right, the Preview button (The Eye) should activate.

On click, you'll be sent to the preview of your website. Simple as that. You can then see how your change will look when it goes live, check the links and generally review it safely before it is customer-facing.

You can then close the tab and continue on to Publish as normal.

When you are finished with changes you need to select Save, and the option to Publish becomes available.  Once clicked, you can then select Publish within the panel that appears.  The site should update within a couple of minutes. 

Scheduling releases allows you to create a version of one page or many pages to publish at a set date, if you would like further information on how to set that up please contact us.