Content management guide
This page describes the steps necessary to create, update and delete content on Kvalifik's website. All changes are made through Dato CMS, so acquire the login details to the admin panel, before you continue. Head to the [Content] tab to manage content.
Table of contents:
When working with Dato CMS, you can never publish changes to the production server. This makes it safe to play around with the setup, without breaking the live site.
To see your changes, go to the preview: https://kvalifikdk-demo.netlify.com. It might take a little while before your changes are visible, as the server needs to rebuilt the site every time a change occurs.
When you're satisfied with the result, rebuilt the production server (instructions coming soon).
This section briefly describes the menu items found in Dato CMS.
- General: Contains general settings such as logo and IE warning. See more here
- Pages: Collection of modular pages. See more here
- Navigation: Navigation settings such as navigation links. See more here😀
- Footer: Footer settings such as footer links, social media links and instagram feed. See more here
- 404 page: Setup of the 404 page. See more here
- Settings: Favicon and Global SEO settings. See more here
- Work: Collection of work items/pages. See more here
- Collections: Various collections of smaller reusable items. See more here
- HELP!: Leads you to this guide 😀
Under Content > General you will find general settings. These include the logo, glitched logo (404 logo) and the IE warning.
When updating the logo, please upload one that is light (preferably white) and has the dimensions or at least aspect ratio similar to 160x36px.
Similarly, you can update the glitched logo, but be aware that the app expects a dark logo this time (preferably black). It should be 480x180px.
The IE warning is a warning to kindly recommend using something other than Internet Explorer, when you visit from this browser.
You can edit the following fields:
- Enable IE warning: Toggle the warning.
- No IE Headline: The title to show on the dialog.
- No IE Description: A brief text communicating why they should change.
- Recommended Browsers Headline: The title to show above the list of recommended browsers.
- Recommended Browsers: A list of Links to navigate to various browser's download pages.
The IE warning looks like this:
Under Content > Navigation you will find two lists of Links that are shown in the navigation drawer. Main links are bigger primary navigation targets, while Secondary links are secondary navigation targets. See the screenshot below:
Note: Social media links are inherited from Footer settings.
Under Content > Footer you can customize the footer. From here you can edit the following fields:
- Title: Usually the company name.
- Phone number: Phone number to reach Kvalifik. Changing this will not change the phone number on for example the contact page, etc.
- Email address: Email address to reach Kvalifik. Changing this will not change the email address on for example the contact page, etc.
- Links: A list of Links for quick navigation.
- Copyright: Copyright symbol, year and company name. Eg: © 2019 Kvalifik.
- CVR: Kvalifik's CVR number.
- Address: Kvalifik's address.
- Social media header: Small title to show above the social media links.
- Social media links: A list of Links to reference popular social media accounts. Only the link icon if shown.
- Instagram feed title: A small title to show above the instagram feed.
The logo is inherited from Content > General > Logo.
Note: The linked instagram account cannot be changed from CMS.
Most pages in the app are created as a Modular page. This includes the home page, work overview and the story, among others. Below you will find guides on how to create and maintain pages.
To add a new page, go to Content > Pages > [New record].
Enter various SEO settings such as title, description and share image. The title will be used to set the page title, when viewing the new page, while the other fields are used in search results and social media posts.
Enter the url, where the page will be found. This must be unique:
Enter a bg color, if you use blocks that have transparent backgrounds (for example the Slogan Block on the home page).
Lastly, set up the page blocks. You can a as many or as few as you like. A page will automatically include a footer, and usually it starts with a Header Block. Refer to Blocks to learn about each block.
To edit a page, go to Content > Pages > Page name.
Then, edit the same fields as described here: Adding a page.
Note: When saving, your changes might propagate into dev, staging or production environments. Make sure you know what you are doing.
To delete a page, go to Content > Pages > Page name > 
> Delete.
Note: When deleting a page, your changes might propagate into dev, staging or production environments. Make sure you know what you are doing.
Work pages are both responsible for thumbnails used on Case grids and work sub pages, where the entire work case can be read. Work pages work similar to regular modular pages, but they have extra fields that are associated with the thumbnail item.
To add a work page go to Content > Work > [New Record]. You must provide the following fields:
- url: This is the url, where you can find the page. It must be unique. Remember to start the url with /work (or where ever you have the work overview), to make it available on this sub route.
- SEO: Enter various SEO settings such as title, description and share image. The title will be used to set the page title, when viewing the new page, while the other fields are used in search results and social media posts.
- Bg color: Used both to color the work thumb item and the page background.
- Thumb label: Shown vertically on the side of the work thumb item.
- Thumbnail: An image shown on the work thumb item.
- Thumb title: The thumb item title
- Thumb full size: Is the thumb item shown full width or half width? See Case grid for an example.
- Page setup: Works exactly like the page setup. A footer will automatically be included and it is advised to start with a Header block. See Blocks.
To edit a work page, go to Content > Work > Work name.
Then, edit the same fields as described here: Adding a work page.
Note: When saving, your changes might propagate into dev, staging or production environments. Make sure you know what you are doing.
To delete a work page, go to Content > Work > Page name > > Delete.
This will delete both the work thumb item and the associated page. Make sure you know what you are doing.
Note: When deleting a page, your changes might propagate into dev, staging or production environments. Make sure you know what you are doing.
The 404 page must have a title, description and a button to navigate back. Optionally, an image can be shown, in which case the text will be left-aligned. Otherwise content is centered. The glitched logo can be changed through general settings.
The 404 page is not modular, so you can't add custom blocks to this page.
Under Content > Settings you will find settings for the site's favicon (small icon beside the page title) and global/fallback SEO settings. You should keep these up to date, as they will affect search indexing and search results.
A page consists of one or more blocks. All blocks are compatible, but it is preferred to begin with a Header Block.
This block is used on many different pages. It's job is to call to action, by displaying and image, and catchy title and an instructive description, along with a button to take action. Often the action block is used to get people to contact Kvalifik. The action block can also be used without an image, but content remains left-aligned. Colors can also be configured.
Used to display one or more Cases in a grid view. The block itself does not alter each Case or decide which ones should be full width and which should be half width. This done on each Work entry.
When using the case grid block, you may choose to link to a page containing more work entries. Attach this page instance to the More work page field. This will fade to bottom portion of the case grid, and display a button, linking to the expanded page.
Used on work pages to display mixed info about the case. Every component within this block is optional and can easily be toggled with checkboxes that you will find in Dato. However, the order cannot be changed.
1. Button
First there's a button to navigate else where, perhaps to the customers website. This is just a Link component.
2. Process
Second there's a process component that displays exactly 3 process steps (eg. Challenge, Process, Result). Each process step also has a title and a description. The label color is inherited from Accent color.
3. Image grid
Below the process block you have the option of an image grid, which takes N images and displays them in M rows. The actual placement is automatic, you don't need to worry about that.
4. Media
Lastly, there's a Media item, which renders either a video or an image, depending on the type of media given.
If there's a video, it will render a video in the middle of the screen with a border. The border color inherits Accent color.
If there's an image, it will render full width or full height (depending on the screen size) and has no border. Use this to display a preview of an app or similar.
Catchy title, great block! Used on the story page to display a title, description and an image. Optionally, the block's content can be reversed using the Flip toggle. Reversing the content merely switches the text's and the image's placements.
Used as the first block of a page. Includes an icon, a title, a description and a media item (either an image or a video).
Header blocks are displayed under the first overlay slab and thus makes space for a scroll-down-arrow.
The arrow inherits it's color from the header block. If there is no header block, the down arrow will not be displayed.
Used on a work page to display an image with overlaying text.
The text is displayed on a "plate" that takes up the left half of the image. As such, the image should be centered around its right side.
When on mobile device (smaller device) the "plate" expands into the entire size of the image, so the image becomes completely overlapped. Keep this in mind when choosing an image.
Used on the people page to display a short description of the word "Kvalifikker" (similar to a dictionary). Also a list of employees/people can be appended. Keep in mind that each employee must be appended manually.
To add an employee, go to Content > Collections > Employees and choose [New record]. Then, fill out the following fields:
- Name: Employee name
- Job title: Employee's job title
- Phone: Employee's phone number
- Email: Employee's email address
- Color: Background color to use on the employee item
- Image: A nice profile picture of the employee
The block must have a title, a word, and pronunciation (displayed in grey beside the word) and a description. The description supports rich text formatting such as a list of examples (see picture).
Used on a work page to indicate immense progress. The percentage block needs a number (N) and a duration (M) for the animation. The number will ease from 0 to N in M milliseconds, when the user scrolls the block into view. Also a short description is shown next to the number.
Used on a work page to show a customer testimony on top of an image. The quote must have a quote text (obviously) and a quoter/author who will be associated with the quote.
Used on the home page to show small excerpts of the service items and on service page to show full service content. Each service item (Content > Collections > Services) must have the following fields:
- Label: Menu item label
- Icon: Menu item icon
- Title: Service item title
- Description: Service item description
- Related tools: List of related tools shown both in excerpt full block. Usually one-two tools are appended.
- Example cases: List of cases/works shown only in full block. Usually one-two cases are appended.
- Images: At least one image to show beside the service item. If there are multiple images, only the first one will be used in the excerpt.
The services are shown using either a Service Block or a Service Big Block. The former is used to show excerpts, while the latter shows full versions of the services. The Service Big must also have a reference to the toolbox page, otherwise toolbox links wont work.
Used on the home page to show a big punchline.
The visual effect where the text is in front of the fixed slab and the background is behind, is obtained by giving the slogan block a transparent background color and giving the entire page a background color instead.
Rich text formatting is used to show some of the text in an inverted color. Use the bold options for this.
Used on the principles page to show one or more steps.
Use the a step item (Content > Collections > Step) to create the step, and then append the step to the Step block to show it.
Used homepage to show excerpt of tools and on the toolbox page to show full toolbox content.
Each tool is modified and added from Content > Collections > Tools. From here you must provide the following fields:
- Icon: Shown alongside the tool
- Headline: The tool title
- Sub header: A smaller headline shown beneath the title
- Description: A longer description of the tool.
- Image: An image to showcase the tool
- Tool filters: A list of tool filters (Content > Collections > Tool filters) to associate with the tool. Similar to how tags would work in other systems. Furthermore, these filters are used to filter the list of tools on the toolbox page.
- References: A list of links to references
- Examples: A list of links to examples (such as previous work)
The toolbox block should only be used to show the excerpts. It doesn't have to include all available tools. Make sure to also provide a reference to the toolbox page. Otherwise, links won't work.
The toolbox big block also contains a list of available tool filters (Content > Collections > Tool filters) which are used to filter the list of tools. A small description can be shown beside the search bar and above the filters.
This section briefly describe the available collections and their content and usage.
Found under Content > Collections > Links
Far the most used item is the Link item. It is used almost everywhere, where we show a clickable link with a text or an icon. The link can be external or internal. If it's external, it will often be rendered with a small icon indicating that the user is about to open another website.
You should reuse the same link item where you want the same link and the same text.
Note: When changing a link, your changes might have side effects, if the link is used in multiple places. Beware of this.
This item holds an image and optionally a video. It is used in blocks, where you can append both an image and a video. If you append a video, a play button will be shown, and the video will open in a dialog.
Each media item should also be given a name, to make it easier the maintain.
When appending a video, you can do so from Vimeo (YouTube is not supported). We don't want to host the videos ourselves, because bandwidth can be costly. Therefore, you should just paste a link from one of the two providers. The video will be loaded automatically.
Be aware that some video players, such as the Case Info block expects a video, even though it is fed a media item (on which the video is optional). It shouldn't crash, but might behave unexpectedly.
When changing a media item, your changes might have side effects, if the media item is used in multiple places. Beware of this.
Used on the Stepper block to hold the title and description for each step.
Refer to Services block
Used in the Toolbox Big block to hold a filter title.
Refer to Toolbox block