Bienvenue sur la documentation utilisateur de ColdCMS !

ColdCMS est majoritairement basé sur Wagtail. Vous pouvez trouver la plupart des informations sur la création de Page, d’Images, de Documents et sur les paramètres dans la documentation de Wagtail (en anglais). Notez que quelques fonctionnalités de l’admin de Wagtail n’existent pas dans ColdCMS.

Avant de lire la documentation plus spécifique, vous pouvez lire la documentation “Comment s’y retrouver dans Wagtail ?” (en anglais).

Puis vous pouvez parcourir la documentation spécifique à ColdCMS.

Créer de nouvelles pages

Voir la documentation de Wagtail pour créer de nouvelles pages et modifier des pages existantes (en anglais).

Types de page disponibles dans ColdCMS :

Page simple

Une page simple a une structure très basique : un titre, et un champ de texte, dans lequel vous pouvez ajouter des images, vidéos ou documents. En savoir plus sur les Rich Text Fields dans la documentation de Wagtail (en anglais).

Une page simple peut être utilisée pour les mentions légales, ou pour n’importe quel affichage sobre d’information.

Voilà à quoi ressemble une page simple :

Page générique

C’est le type par défaut de la page d’accueil. Il convient aux contenus très visuels, avec beaucoup d’images et peu de texte, comme une page d’accueil, une page de vente, ou de présentation d’un projet par exemple.

Sur ce type de page vous pouvez ajouter 5 types de bloc différents, dans n’importe quel ordre et quantité :


  • Des carousels

    A carousel is a group of big images that can be scrolled through with side arrows

  • Des grands conteneurs

    Big cards consist of blocks of text next to an image For several big cards, the image alternatively appears to the left and the right

  • Des petits conteneurs

    Small cards are blocks with text below an image, aligned by three

  • Des images centrées

    The image is centered on the page, sized about 1/3 of the page width

  • Des blocs de texte centrés

    The text block is centered on the page, sized about 1/3 of the page width

En savoir plus sur l’insertion d’images et l’utilisation de Rich Text Fields (en anglais).

Page de contact

Une page de contact est spécifiquement conçue pour contenir des informations de contact : adresse, numéro de téléphone, adresse email, heures d’ouverture.

En savoir plus sur l’utilisation des Rich Text Fields (en anglais).

Voilà à quoi ressemble une page de contact :

Page de FAQ

Une page de FAQ (Frequently Asked Questions) est conçue pour pouvoir ajouter facilement des catégories de question, et sous chacune, afficher plusieurs questions et leurs réponses. Les réponses apparaissent dans une boîte déroulante sous la question. L’utilisateur peut cliquer sur la flèche à droite de la question pour afficher/masquer la réponse.

Si vous ne voulez pas utiliser de catégorie, vous pouvez créer une seule catégorie, ne pas lui donner de nom, et ajouter toutes vos questions dans cette catégorie.

En savoir plus sur l’utilisation des Rich Text Fields (en anglais).

Voilà à quoi ressemble une page de FAQ :

Page de partenaires

Une page de partenaires est conçue pour lister des partenaires, avec leur logo, nom et site internet.

Vous pouvez répartir les partenaires dans des catégories. Si vous ne souhaitez pas utiliser de catégories, vous pouvez créer une seule catégorie, ne pas la nommer, et ajouter tous vos partenaires dans cette catégorie.

Le logo est affiché au dessus du nom des partenaires. Le logo et le nom sont tous les deux cliquables, et redirigent vers le site internet du partenaire (si le lien du site a été entré).

Voilà à quoi ressemble une page de partenaires :

Page de blog

La première étape pour créer un blog est de lui donner un titre, et éventuellement une introduction. Le titre est celui qui apparaîtra dans la barre de menu.

Une page d’index de blog est créée, elle liste tous les articles du blog (en commençant par celui posté le plus récemment) - ici, on suppose que notre blog a déjà deux articles :

La deuxième étape est d’ajouter des articles à notre blog. Un article de blog est un type de page qui doit être une sous-page d’un blog. De la même façon, un blog ne peut avoir que des articles de blog en tant que sous-pages.

Un article de blog peut avoir un titre, une date de publication, des tags, une introduction, du contenu, et des images.

Plus d’informations sur l’insertion d’images et l’utilisation de Rich Text Fields (en anglais).

Voilà à quoi ressemble un article de blog :

En plus de la page principale d’index du blog, et des articles de blog, des pages supplémentaires existent :

  • Une page par tag, qui liste tous les articles de blog avec ce tag. Dans notre exemple, il y a deux articles avec le tag “tag” :


    Et il y a un article avec le tag “autretag” :


    Une page de tag apparaît lorsqu’on clique sur un tag depuis un article de blog.

  • Une page par auteur, qui liste tous les articles de blog écrits par cet auteur. Dans notre exemple, il y a deux articles écrits par Pauline :


    Une page d’auteur apparaît lorsqu’on clique sur le nom de l’auteur depuis un article de blog.

Structure générale :

  • Page simple

  • Page générique

  • Page de contact

  • Page de FAQ

  • Page de partenaires

  • Page de blog


Gérer le menu

Par défaut, la barre de menu apparaît tout en haut de chaque page. Elle contient des liens vers les différentes pages du site web, ainsi que des éventuels liens externes.

Quelques options sont disponibles pour modifier ce menu :

Afficher/Masquer la barre de menu

Par défaut, chaque page créée et publiée apparaît dans la barre de menu.

Si vous souhaitez qu’une page n’apparaisse pas dans la barre de menu :

  • Lorsque vous éditez la page, allez dans l’onglet “Paramètres”, décochez la case “Faire apparaître dans les menus” (cochée par défaut), et publiez la page.

Si vous souhaitez masquer le menu entier :

  • Allez dans le menu “Paramètres” puis “Options du menu”.

  • Cochez la case “Masquer le menu” (décochée par défaut), et sauvegardez.

Exemple d’une page avec une barre de menu :

La même page sans la barre de menu :

Créer un menu déroulant

Un menu déroulant peut uniquement être créé comme sous-page d’une page générique (qui est par défaut le type de la page d’accueil).

Dropdown editing interface has a title and a 'Show in menus' checkbox

Une fois que vous avez créé un menu déroulant, vous pouvez ajouter autant de sous-pages que vous souhaitez, elles seront listées dans le menu. Chaque élément du menu est un lien vers la sous-page en question. Un élément peut également être un lien interne ou externe.

Voilà à quoi ressemble un menu déroulant :

When clicking on a dropdown menu, a list of links appears under it

Ajouter des logos de réseaux sociaux

Dans la barre de menu, vous pouvez ajouter des liens vers vos réseaux sociaux en tant que logos (voir dans la section Ajouter un pied de page pour les ajouter dans le pied de page).

Allez dans le menu “Paramètres”, puis “Options du menu”. Cliquez sur “Icône de réseau social” pour en ajouter un. Vous pouvez en ajouter autant que vous le souhaitez, mais ColdCMS prévoit pour le moment 9 logos (liste ci-après).

Remplissez le type d’icône, le lien vers votre réseau social, et le texte que vous souhaitez voir apparaître en tant que lien à côté de l’icône du réseau social.

Les logos de réseaux sociaux disponibles sont :

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

Voilà à quoi ressemble un logo de réseau social dans la barre de menu :

Et dans la version mobile :

Vous pouvez décider d’ajouter le logo seulement, sans aucun texte, mais attention, certaines entreprises de réseau social exigent la présence de ce texte à côté de leur logo. Renseignez-vous sur leur site de branding.

Il n’est pas conseillé d’utiliser beaucoup de logos avec du long texte dans la barre de menu. À la place, vous pouvez ajouter ces logos dans le pied de page. Voir pour cela la section Ajouter un pied de page.

Voilà à quoi ressemble une barre de menu avec les logos sans texte :

Et dans la version mobile :

Générer des pages

ColdCMS génère des sites web statiques. Cela signifie que les pages ne sont pas générées dynamiquement, afin de réduire le travail du serveur. En conséquence, vous aurez parfois besoin de demander explicitement au serveur de re-générer les pages, pour vous assurer que toutes vos modifications ont été prises en compte sur le site client.

Cependant, la plupart du temps, les pages sont re-générées automatiquement lorsque vous sauvegardez ou publiez vos modifications.

Parfois, il est aussi possible que votre navigateur garde une page en cache. Si vous ne voyez pas votre nouvelle page immédiatement, essayez de faire Ctrl + Maj + R.

Pour re-générer une page, cliquez sur le bouton “Plus”, puis “Re-générer la page”, en bas du menu déroulant.

  • Depuis une page parente :
Button more on parent page, at the right of the menu

Button re-build Page on parent page, at the bottom of the menu
  • Depuis une sous-page :
Button more on child page, at the right of the menu

Button re-build Page on child page, at the bottom of the menu

La page prendra quelques secondes à se re-générer. Si vous ne voyez pas vos modifications immédiatement sur votre site client, attendez un peu, puis actualisez la page.

Personnaliser le CSS

Si vous maîtrisez le CSS, vous pouvez personnaliser vous-même l’apparence de votre site web, en ajoutant une feuille de style. Pour cela, allez dans le menu “Paramètres”, puis “Feuille de style CSS”.

Puis chargez le fichier CSS que vous souhaitez utiliser, et sauvegardez. En savoir plus sur le téléchargement de documents sur la documentation de Wagtail (en anglais).

Par exemple, voilà à quoi ressemble la barre de menu par défaut :

Après avoir ajouté cette feuille de style :

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

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

Les éléments du menu ont des couleurs différentes :