Welcome to ColdCMS user documentation!

ColdCMS is mostly based on Wagtail. You can find most of the information on how to create Pages, how to use Images, Documents and site Settings, in Wagtail documentation (Editor’s guide). Keep in mind that some features of Wagtail’s admin don’t exist in ColdCMS.

Before going into more specific documentation, please read Wagtail’s documentation about finding your way around.

Then you can go through ColdCMS-specific documentation:

Creating new pages

See Wagtail documentation about creating new pages and editing existing pages.

Page Types available in ColdCMS:

Simple page

A simple page has a very basic layout: a title, and a text field, in which you can add images, videos or documents. Read more about rich text fields in Wagtail’s documentation.

It can be used for a legal notice, or any simple information display.

A simple page looks like:

Generic page

This is the type of the default home page. It suits very visual content, with many images and few text, like a welcome page, an advertisement page, or a project presentation for example.

On this page you can add 5 different types of blocks, in any order and number:

• Carousels

  

• Big cards

  

• Small cards

  

• Centered images

  

• Centered text blocks

  

Read more about inserting images and using rich text fields.

Contact page

A contact page is specifically designed to contain contact information : address, phone number, email address, and opening hours.

Read more about using rich text fields.

The contact page will look like this:

FAQ page

A FAQ (Frequently Asked Questions) page is designed to easily add question categories, and under each one display several questions with their answers. The answers appear as collapsible content under the questions. The user can click on the arrow to the right of the question to show/hide the answer.

If you don’t want to use categories, you can create only one category, without a name, and put all of your questions in there.

Read more about using rich text fields.

The FAQ page looks like this:

Partners page

A partners page is designed to simply list partners, with their logo, name and website.

You can sort the partners within categories. If you don’t want to use categories, you can create only one category, without a name, and put all of your partners in there.

The logo is displayed above the partner’s name, and they are both clickable, redirecting to the partner’s website (if a website URL has been provided).

The partners page looks like this:

Blog page

The first step to create a blog is to give it a title and eventually an intro. The title is the one that will appear in the menu bar.

A blog index page is then created, listing all the blog posts (starting with the most recently posted) - here we suppose our blog already has two posts:

The second step is to add blog posts to your blog. A blog post is a type of page that can only be the child of a blog. Same way around, a blog can only have blog posts as children pages.

A blog post can have a title, a post date, tags, an intro, a content, and images.

More information about inserting images and using rich text fields.

A blog post looks like this:

Additional pages exist aside from the main blog index page and the blog posts:

• One page per tag, listing all posts with the given tag. E.g. in our example, there are two posts tagged ‘mytag’:

  

  
  

  And there is one post tagged ‘othertag’:

  

  
  

  A tag page appears when clicking on a tag from a blog post.

  

• One page per author, listing all posts written by the given author. E.g. in our example, there are two posts written by Pauline:

  

  
  

  An author page appears when clicking on the author’s name from a blog post.

  

General layout:

• Simple page

  

• Generic Page

  

• Contact Page

  

• FAQ Page

  

• Partners Page

  

• Blog Page

  

  
  

  

Managing the menu

By default, the menu bar appears at the top of each page. It contains links to the different pages of the website, as well as eventual external links.

Some options are available to edit this menu:

Show/Hide the menu bar

By default, each page created appears in the menu bar.

If you want to remove a page from the menu bar:

• When editing the page, go into the ‘Settings’ tab, uncheck the box ‘Show in menus’ (checked by default), and publish the page.

If you want to hide the entire menu bar:

• Go into the menu ‘Settings’ and then ‘Menu options’.

• Check the box ‘Hide menu’ (unchecked by default), and save.

Example of a page with a menu bar:

The same page without the menu bar:

Create a dropdown menu

A dropdown menu can only be created as a child of a generic page (which is the default home page type).

Once you have created a dropdown menu, you can add as many child pages as menu items you want to appear in the dropdown. Each item links to the given child page. An item can also be an external or internal link.

In the end, a dropdown menu will look like this:

Add an internal or external link

Links will appear in the menu bar, and redirect to another page (either internal or external to the website). A link to an internal page will open in the same tab (and replace the current page), a link to an external website will open in a new tab.

The link will look like this:

Add social media icons

In the menu bar, you can add links to your social media as icons (see in section Adding a footer to add them in the footer).

Go to the menu ‘Settings’, then ‘Menu options’. Click on ‘Social media icon’ to add one. You can add as many as you want, although ColdCMS provides icons for 9 social media for now (list below).

Fill in the icon type, the link to your social media, and the text you want to appear as a link next to the social media icon.

The social media icons available are:

• Facebook
• Twitter
• Instagram
• Youtube
• Pinterest
• LinkedIn
• GitLab
• GitHub
• Tumblr

A social media icon in the menu bar looks like this:

And in mobile version:

You can choose to add the icon only, without any text, but be aware that some social media companies require a text beside their logo. You can find information on their respective branding websites.

It is not advised to use many social media icons with long text in the menu bar. Instead, you can also add them in the footer. See in section Adding a footer.

A menu bar with the icons without text looks like this:

And in mobile version:

Building pages

ColdCMS generates static websites. This means the pages aren’t dynamically built, in order to reduce the server’s jobs. Hence you will sometimes need to explicitely ask the server to re-build the pages, to make sure all your modifications have been taken into account on the client website.

Although, most of the time, the pages will re-build automatically when you save or publish your changes.

Sometimes, it is also possible that your browser cached the webpage. If you don’t see the new page right away, try hitting Ctrl + Shift + R.

To re-build a page, click on the button ‘More’, and then ‘Re-build page’ at the bottom of the dropdown menu.

• From a parent page:

• From a child page:

The page will take a few seconds to re-build. If you don’t see your modifications right away on your website, wait a little longer and refresh the page.

Adding a logo

You can add a logo through the menu ‘Settings’ and then ‘Logo’.

Then pick an image to be used as your logo. For further documentation, please read Wagtail documentation about inserting images.

The logo will appear at the left of the menu bar, and in the tab icon. The logo in the menu is clickable, and redirects to the home page.

Adding a footer

To add a footer, go into the menu ‘Settings’, then ‘Footer’.

There you can add several footer columns. Each column contains several links to either internal or external pages. A link to an internal page will open in the same tab (and replace the current page), a link to an external website will open in a new tab.

You can give names to your columns, e.g. to sort the links into categories, or you can just use the columns for display, without naming them.

A footer with 3 columns looks like this:

You can also add social media icons in your footer.

Click on ‘Social media icon’, then fill in the icon type, the link to your social media, and the text you want to appear as a link next to the social media icon.

Social media icons in the footer look like this:

More information on social media icons in Managing the menu / Add social media icons.

Customizing CSS

If you know CSS, you can custom the appearance of your website yourself, by uploading a stylesheet. For that, go into the menu ‘Settings’, then ‘CSS stylesheet’.

Then upload the file you wish to use as CSS, and save. Read more about uploading documents on Wagtail’s documentation.

For example, the default menu bar looks like this:

After adding this CSS stylsheet:

.navbar-item{
    color: #9b5200;
}

a.navbar-item:hover{
    color: #2c25ff;
    background-color: #C1F742;
}

The menu items have different colors: