Introduction

This guide is designed to be a ‘living document’ and will be updated/amended as and when necessary to keep the information up to date.

Dashboard

When you first sign into the control panel, the first thing you’ll see is the Dashboard.

We recommend setting up the dashboard to view the following Widgets:

  • Recent Entries
  • Documentation

You can set up these widgets by:

  1. Click the gear at the top right of the dashboard and delete any unnecessary widgets.
  2. Click New Widget and select the widgets above to display.

You can change the settings for each widget by hovering over the block and clicking the gear that appears in the top right.

Entries

The Entries area of the control panel is where you’ll be spending most of your time when adding/editing content on the website. In Craft CMS, the word Entry is used to describe a single element of the website, whether that’s a page or a project, blog etc.

Entries are divided up into 3 different types:

  • Singles
  • Channels
  • Structures

Singles

Singles represent one-off unique pages on the website (e.g. Home page) or Settings.

If the entry has a url you'll be able to edit the content that exists only on that page. These are pages which have no children, depend on other content on the site or have hard coded elements (such as employer login).

The Global Settings contains fields that are used across your site in multiple places, such as logo.

Channels

Channels is where you’ll find any entries that are, by default, sorted by date.

E.g. The Journals entries will be found here since, on the front end of the website, these entries are ordered from most recent to oldest.

Structures

Structures is where you’ll find any entries which have children attached to them. These entries can be sorted into a manual order. To drag an entry into a new position, simply click on the ‘4 dots’ icon, hold down the mouse button and drag the item into the new position in the stack.

Assets

The Assets area of the control panel is where you’ll find any uploaded images, documents etc. It’s essentially a repository for all files that have been uploaded elsewhere in the control panel.

Assets can be uploaded directly from this area, but in general you’ll be uploading images/documents as and when you’re adding/editing entries. When you add an image/document to an entry, it will automatically appear in the relevant group in the Assets section.

There are also various other actions that you can use in the Assets section. If you check the box next to a specific asset and then click the ‘cog’ menu below the list, you will see a list of actions you can apply to that asset (see below).

< ADD SCREENSHOT >

Users

Those users that have the relevant permissions will also see a Users option in the control panel sidebar.

From here you’ll be able to add new users, edit/disable existing users, reset passwords and define what permissions a specific user has regarding which areas of the CMS they can access.

You can also add your own profile photo, and update any of your information.

Adding/Editing Entries

Clicking on Entries in the control panel sidebar will take you to a screen where you can view all the current entries on the website. The entries are broken up into different sections, which can see in the light grey secondary sidebar.

Once you are within the Entries area of the control panel, you can click on the red New entry button at the top right of the screen to create a new entry.

If you currently have All Entries or Singles selected in the secondary sidebar, clicking on the button will display a dropdown where you can choose the type of entry you want to create.

If you have one of the other entry sections selected in the secondary sidebar (e.g. Pages), then clicking on the button will take you to the relevant screen to create a new entry of that type (although you can still select one of the other entry sections by clicking the arrow icon on the button to see the dropdown options).

To edit an existing entry, simply click on its title from the list.

Assets Field

Assets fields allow you to upload/choose assets from the Assets area of the control panel. When you click on an Assets field, a popup window will appear displaying all the existing assets in that assets group (see image below). From this popup window you can either choose one (or more, depending on the entry type) of the existing assets, or upload a new one by clicking the grey Upload files button in the bottom left corner of the popup window.

Once you’ve chosen the relevant asset, click the red Select button at the bottom right of the popup window (see screenshot below).

< ADD IMAGE >

A thumbnail image of the selected asset will now appear in place of the button in the Assets field. To choose a different asset, click the grey ‘cross’ icon next to the thumbnail and repeat the process.

< ADD IMAGE >

Alt Text

When adding an image, you should also add 'Alternative Text' to help with your sites accessibility. To do this, you need to double click on the asset which will open a popup to the side of your screen.

Here you will see an Alt Text field which you can fill in with a description of each image.

< ADD IMAGE >

Focal Points

Each Image can be given a focal point, which means if the image is cropped to work with the design, you can choose the centre of the crop.

To do this you need to click on the image once, and this will open a popup of the image with an Enable Focal Point button in the top right. Once clicked you will see a small circle appear on the image which you can drag to the main focal area. Once happy, you can click off from the image and save the entry to see your changes.

< ADD IMAGE >

Scaling

When you upload an image, the website will automatically create a variety of images of different sizes from this original image. The correct size image is then displayed on the website depending on the screen size of the device. This keeps the website loading times down and ensures that the end user isn’t downloading more data than they actually need.

Entry Picker Field

The Entry Picker field allows you to choose one (or multiple, depending on the entry section) existing entries from the CMS. These fields are generally used to display other entries within that page.

Matrix Field

A Matrix field allows you to create a series of sequential ‘blocks’ that represent different content types. Each content type contains its own fields. The CMS leverages this functionality to allow the user to build up a set of content using these blocks.

To explain the benefits of using matrix fields, we'll first illustrate where other CMS’s fall down:

When adding a page, most CMS’s offer a single large field (often referred to as a WYSIWYG editor) where all the content for that page is added. There are usually buttons to alter text formatting and sizes, to insert images, videos, tables, etc.

Whilst it may seem more convenient from a user’s point of view to add all this content into one field, from a web developer’s point of view it is an absolute nightmare! Giving the user this much control over spacing/formatting almost invariably leads to content that looks messy and off-brand with the rest of the website.

Matrix fields help to eradicate this problem by breaking each type of content into its own ‘block’.

When you click on one of the available content type options, a block appears containing the relevant fields for that content type.

For example if I click on the Image type within the Rich Content matrix field, a block appears containing the following fields:

  • Image (an asset field)
  • Image Caption (plain text field, add a caption to display underneath the image)

Further blocks can be added by clicking the relevant content type buttons. In this way, the user builds up a set of content for the entry organised into convenient chunks, which already have the correct styles defined for them.

Blocks can be dragged into new positions by clicking on the ‘4 dots’ icon at the top right of the block.

Blocks can also be disabled or deleted by clicking the ‘cog’ icon at the top right on the block.