GERER VOTRE SITE WEB

Ce guide vous explique comment vous pouvez gérer votre site web en utilisant les outils intégrés (CMS). 

Le guide est présenté en 3 sections:

  1. Démarrer
    S'identifier et se logger dans votre CMS - et y revenir.
  2. Connaître votre CMS
    Un aperçu des fonctionnalités et sections de votre CMS.
  3. Créer et gérer vos contenus
    Comment créer et éditer le contenu de votre site.

Besoin d'assistance?

Dites-moi ce dont vous avez besoin

Thanks! I'll get back to you ASAP.
Oops! Something went wrong. Try again?

Démarrer

Prendre le contrôle de votre magnifique nouveau site internet commence par accéder au système de gestion du contenu intégré (CMS ou SGC). Ce procédé commence habituellement par un mail de votre webmaster (Le Buro).

Il ressemblera un peu à ceci:

The invitation to edit email
Vous devriez avoir reçu ce mail qui vous invite à votre CMS.

Lorsque vous cliquez sur ce bouton, vous serez emmené sur le CMS de votre site - qui, d'un premier abord, ressemblera à votre nouveau site internet. Sauf que maintenant, vous devriez voir une barre grise au bas de la page, avec un design simple.

The login screen for the Editor
Pour accéder à votre CMS plus tard, simplement entrer votre e-mail et mot de passe que vous aurez défini à la création de votre compte.

Ensuite, remplissez les champs requis pour la création de votre compte et accédez-y.

Once you're logged in, the control panel sits at the bottom of your site
Une fois connecté, vous verrez votre site web, mais avec une nouvelle barre tout en bas, d'où vous pouvez gérer vos Pages et Collections.

Maintenant, votre système de gestion du contenu devrait ressembler à votre site web - sauf qu'il y a une barre grise au bas de la page avec deux onglets appelés Pages et Collections, et une série de pictogrammes. Je vous expliquerai ceci plus bas.

Pour le moment, prenez un instant pour mettre cette page dans vos favoris ainsi vous pourrez facilement y revenir plus tard. Dans la plupart des navigateurs, vous pouvez utiliser le racourci cmd/ctrl + B.

Sinon, vous pouvez toujours retourner à au système de gestion du contenu de votre site en tapant l'URL de votre site et en y ajoutant /?edit à la fin.

Donc si l'URL de votre site est votresite.com, allez simplement à votresite.com/?edit pour vous connecter et commencer à éditer.

Lorsque vous retournerez à votre site plus tard, vous verrez un petit pictogramme d'un crayon en bas à droite, sur lequel vous pouvez cliquer pour aller à votre CMS. Rassurez-vous, seules les personnes ayant accès au CMS ne pourront voir ce pictogramme !

Maintenant que les bases sont posées, sautons à pieds joints dans le vif du sujet CMS.

Qu'est-ce qu'un CMS?

Dans le monde du web design, CMS veut dire content management system, ou en français, système de gestion du contenu (ou SGC), et comme son nom l'indique, c'est un système pour gérer le contenu de votre site internet.

Les CMS ont été inventés pour deux raisons:

  1. Pour permettre au personnes "non-techniques" de faire la maintenance de leur site
  2. Pour permettre chacun de publier du nouveau contenu dans un design prédéfini, n'importe quand

Ce que votre CMS peut faire

Votre CMS vous permet d'éditer presque tout votre contenu existant sur votre site, y compris les textes, images, bouttons, liens, etc.

Il vous permet également de créer de nouvelles pages et blog à travers "Collections"

Ce que votre CMS ne peut pas faire

Si vous avez besoin d'une nouvelle page qui ne correspond pas à vos "Collections", contactez-moi!

Apprendre à connaître votre CMS

Maintenant que vous avez créé un compte pour le CMS de votre site et que vous savez y revenir n'importe quand, je vous emmène dans l'interface.

The Editor panel with tabs for pages, Collections, account settings, help content, and a log out button

Commençons avec les deux onglets sur la gauche, Pages et Collections. Ce sont vos deux onglets par défaut du CMS. Vous pourrez ouvrir d'autres onglets, comme vous le verrez plus tard, mais ceux-ci seront toujours là pour vous.

Onglet Pages

L'onglet Pages, comme vous pouvez l'imaginer, contient la liste des pages de votre site. Il sera composé d'au moins deux sections, mais probablement plus:

  1. Pages Static: celles-ci sont les pages que j'ai construit en-dehors de vos Collections. Elles peuvent être votre page Accueil, Votre entreprise, Contact, etc.
  2. Pages Collection: celles-ci sont des pages générées à partir de vos Collections, et peuvent inclure des éléments comme un blog, de la documentation, une liste de produits, et bien plus. Elles sont listées avec leur nom de Collection, comme ceci : Blog Pages.
The expanded Editor panel

Ce que vous pouvez faire dans l'onglet Pages

L'onglet Pages vous permet de faire plusieurs choses:

  1. Chercher une page par nom: Taper le nom d'une page dans la barre de recherche pour la trouver. Prenez note que c'est une recherche par nom exact et qu'il est donc nécessaire de rentrer un ou plusieurs noms exactement comme ils sont écrits.
  2. Aller à une page: Cliquez simplement le nom de la page dans le menu déroulant. Une fois là, vous pouvez éditer le contenu de votre site internet commet dans un éditeur de texte.
  3. Gérer les paramètre de la page: Lorsque vous passer le curseur sur une page dans la liste, vous verrez un bouton "Settings" ou Paramètres. Là, vous pouvez gérer les paramètres vitaux comme le SEO meta title et description.

Gérer les paramètres de la page

Du fait que les paramètres des pages sont si importantes pour les recherches (référencement) et social, plongeons un peu plus profondément dans la signification de chaque élément, ce qu'ils veulent dire, et comment vous pouvez un profiter pleinement.

Page settings in the Editor

SEO Settings ou Paramètres SEO

SEO veut dire “search engine optimization.” ou "Optimisation pour les moteurs de recherche". C'est le fait de construire et améliorer un site web pour optimiser ses chances d'être trouvé à travers les moteurs de recherches tels que Google, Bing, etc.

Dans chaque paramètre des pages, vous pouvez créer et éditer les paramètres spécifiques suivants:

  1. Meta title ou titre meta: Le titre de vos pages joue un rôle très important dans la visibilité et leur performance dans les moteurs de recherche, parce que, d'une part il indique au moteur de recherche le thème de la page, et d'autre part, c'est ce sur quoi les utilisateurs des moteurs de recherche (donc tout le monde) vont cliquer pour rejoindre votre site. Soyez sûr d'utiliser les mots qu'utiliseront les personnes pour décrire votre activité. Idéalement, le titre d'une page devrait faire 55 à 60 caractères.

    Example Si je construisais un site web pour une entreprise à Neuchâtel d'entretien de jardin, j'appellerais probablement la page d'accueil "Neuch entretien jardin" ensuite il y aurait d'autres pages comme "La Coudre entretien jardin".

  2. Meta description: La description vous permet d'ajouter un peu plus de détails sur votre page (env. 150 caractères). C'est important pour la recherche, mais pas aussi important que le titre.

La section Search Result Preview vous montre à quoi votre contenu va ressembler sur une page de résultat de recherche Google. Si votre texte est coupé, il faut l'ajuster pour qu'il paraisse en entier.

Paramètres Open Graph (OG)

Les paramètres Open Graph sont très similaires aux paramètres SEO, sauf qu'ils sont utilisée par les réseaux sociaux comme Facebook, Twitter et LinkedIn. Si vous utilisez un de ces réseaux sociaux, vous avez vu Open Graph au travail à de nombreuses reprises.

Dans la plupart des cas, vous pouvez simplement cocher la case pour utiliser le même contenu que votre SEO title et description. Mais sentez-vous libre de le personnaliser si vous le souhaitez.

Open Graph vous permet également de spécifier une image d'être affichée avec votre titre et description.

An Open Graph card, showing image, title, description, and page URL
Un exemple d'une image Open Graph, un titre et une description sur Facebook

Onglet Collections

L'onglet Collections est très similaire à l'onglet Pages, mais il liste uniquement vos contenu Collection - les choses que j'ai créées avec le CMS.

Lorsque vous cliquez sur une Collection, vous serez emmené dans un nouvel onglet avec la liste des éléments dans la Collection.

Tab for Collection items
 Comme dans l'onglet Pages, il y a une barre de recherche
que vous pouvez utiliser pour trouver un élément par son nom.

Pour commencer à créer un nouvel élément dans cette collection, cliquez sur le bouton + New et remplissez les champs pour cet élément.  

The Editor's item view, with back button, preview button, and changelog

Ce que vous voyez dans chaque élément individuel d'une Collection va changer suivant la structure de la Collection auquel il appartient, mais vous retrouverez plusieurs éléments à chaque fois: 

  1. Back button ou le retour: Cliquez ici pour retourner à la liste des éléments de la Collection
  2. View item button ou Voir l'élément: Ce bouton gris clair sort du CMS pour vous montrer l'élément que vous regardez actuellement sur votre site web en direct. Si vous le souhaitez, vous pourriez éditer son contenu là au lieu de dans cette fenêtre.
  3. Status: Vous montre le statut actuel de l'élément que vous regardez. Il peut être "Published/Publié", "Not Published/Non Publié" et "Draft/Brouillon".
  4. Draft checkbox ou case à cocher Brouillon: Cochez cette case si vous n'avez pas terminé la création ou l'édition d'un élément. Tous les éléments qui ne sont pas cochés seront publiés dès que quelqu'un cliquera sur le bouton "Publish/Publier".
  5. Changelog ou Suivi des changements: Au fur et à mesure que vous apportez des changements dans votre CMS, il va enregistrer le nombre d'éléments et pages qui ont subi des changements jusqu'à ce que vous cliquiez sur Publish /Publier. Vous pouvez cliquer sur le changelog ou suivi des changements pour voir la liste des éléments et pages qui ont des changements non publiés, avec la personne qui les a effectués, si vous êtes plusieurs à avoir les accès CMS.
  6. View Site ou voir site: Cliquez ici pour voir votre site internet. Vous pouvez utiliser tous les liens pour vous déplacer entre les pages dans ce mode.

Les boutons Save ou enregistrer et Publish ou publier sont relativement clairs. Notez que vous devrez cliquer deux fois sur Publish ou Publier pour confirmer cette action.  

Comment le fait de publier fonctionne dans votre CMS

A chaque fois que vous cliquez Publish ou publier dans votre CMS, tout votre site internet est republié. Si vous savez que d'autres personnes travaillent sur votre site lorsque vous êtes prêts à publier, il serait judicieux de leur demander si leurs propres changements sont prêts à être publiés également.

Onglet Forms ou Formulaires

Votre CMS peut inclure un onglet Forms ou Formulaires. Si c'est le cas, vous pourrez voir des informations de bases des formulaires que vous avez reçus, mais c'est l'endroit où vous pouvez télécharger toutes les données des formulaires. Cliquez sur le bouton Download CSV pour télécharger toutes les informations envoyées.

The forms tab lists submissions by date

Et ces pictogrammes?

Après les onglets Pages et Collections, vous voyez trois pictogrammes. Depuis la gauche, ils sont :

Account ou Compte

Vous montre les informations au sujet de votre compte CMS, y compris votre mail pro, et votre photo, si vous en avez téléchargé une. Si vous ne l'avez pas encore fait, c'est ici que ça se passe.

Help ou Aide

Vous donne des réponses à quelques questions fréquentes au sujet de l'utilisation du CMS.

Log out ou Déconnection

Vous déconnecte de la vue CMS et vous voyez votre site comme le voient vos visiteurs.

Qu'est-ce que le SEO?

SEO veut dire "search engine optimization" ou "optimisation des moteurs de recherche" (plus communément connu sous le nom de "référencement" et, plus simplement, c'est un groupe d'actions qui sont faits pour que les personnes qui font une recherche sur Google, Bing, etc, trouvent votre site via le contenu.

Votre CMS vous permet de personnaliser les informations "meta title" et "meta description", - deux des éléments les plus important de SEO - pour chaque Page et Collection de votre site web.

Créer et gérer le contenu 

Votre CMS vous offre deux façons d'éditer le contenu qui se trouve déjà dans votre site:

  1. Directement dans votre page web
  2. Dans l'onglet Collection items

Je vais vous emmener à travers les deux procédés (extrêmement simple), en commençant avec l'édition dans la page.

Edition sur la page

Editer directement sur la page est relativement intuitif avec votre CMS, mais il y a quelques points à connaître.

Editer du texte

Editable areas display a pencil icon in the upper right
Si vous voyez le picto du crayon en haut à droite, c'est que vous pouvez éditer cet élément.

Lorsque vous vous connectez dans votre CMS la première fois, vous allez voir votre site web en direct avec une barre grise en bas de votre écran.

Si vous voyez du texte que vous souhaitez éditer, passez simplement le curseur au-dessus. Si un picto gris clair apparaît en haut à droite, vous pouvez éditer ce contenu. Cliquez simplement sur la boîte et écrivez !

Editer du texte fonctionne exactement comme dans Microsoft Word ou Google Docs, mais styliser votre texte - mettre en gras, en italique, etc.- fonctionne un peu différemment.

Select text to show a toolbar with formatting options
Sélectionnez du texte pour révéler toutes les options de formatage.

Pour styliser le texte, tout d'abord, sélectionnez-le. Une barre d'outils va s'ouvrir et vous proposer les options suivantes:

Vous pouvez aussi styliser avec les combinaisons du claviers suivantes:

Pour utiliser une combinaison, appuyez et maintenez simplement la touche Command (sur Mac) / Control (sur Windows), appuyez ensuite sur la touche (B, I, ou K), puis relâchez.

Insérer un lien

Votre CMS vous permet d'ajouter une variété de types de liens pour créer différentes fonctionnalités.

The toolbar for adding and managing links
Ajouter un lien prend quelques cliques, mais vous donne une multitude d'options.

Lorsque vous décidez d'insérer un lien, vous vous retrouvez par défaut dans le champ d'un URL sur lequel créer le lien, mais si vous cliquez à gauche sur le pictogramme de la chaîne, vous accédez à plusieurs options:

  1. External: créé un lien à une autre page sur internet, souvent un autre site. Mais vous pouvez aussi créer un lien sur une autre page de votre propre site.
  2. Page: créé un lien vers une autre page de votre site. Vous y verrez un menu déroulant avec la liste de vos pages.
  3. Section: créé un lien vers une autre section de la même page sur laquelle vous vous trouvez. Un menu déroulant vous proposera toutes les sections disponibles.
  4. Email: créé un lien vers une adresse mail via leur mail par défaut.
  5. Tel: permet au visiteur de téléphoner depuis son portable sans devoir retaper tout le numéro.

Chaque type de lien propose ses propres options de personnalisation. Cliquez sur la roulette pour voir ce qui est disponible pour chaque type de lien.

Plus d'options d'édition de texte

Certaines zones de texte (principalement les longs textes), permettent des options supplémentaires.

Create a new line to show options for inserting images, video, rich media, and lists
Taper Enter et cliquez sur le picto + pour ajouter une image, vidéo, média rique ou un liste.

Lorsque vous appuyez sur Enter pour démarrer un nouveau paragraphe, il est possible que vous voyiez un petit symbole +. Cliquez dessus pour ouvrir une barre d'outils pour voir les options suivantes:

The image icon
Image

Permet de télécharger une image

The video icon
Video

Permet d'insérer une vidéo. Celle-ci doit être hébergée sur une plateforme comme Youtube ou Vimeo - vous ne pouvez pas télécharger des vidéos directement depuis votre ordinateur.

The rich media icon
"Rich media"

Permet d'insérer du media riche via un lien. Il y a toutes sortes d'objets que vous pouvez insérer en utilisant cette fonction, mais voici les plus populaires:

The bulleted list icon
List à puces

Permet d'ajouter une liste à puces.

The numbered list icon
Liste à numéros

Permet d'ajouter une liste à numéros.

Tout ce que vous venez de lire au sujet de l'édition de texte s'applique également lorsque vous vous trouvez dans l'onglet Items / Objets du CMS.

Edition des boutons

To edit a button's text or link, click the gear icon, then the appropriate option
Vous souhaitez éditer le texte d'un bouton ou le lien de destination ?
Passez simplement le curseur dessus et repérez la roulette.

Vous pouvez également éditer les boutons dans le CMS. Passez simplement le curseur sur le bouton et repérez la roulette en haut à droite. Cliquez dessus et vous verrez ces deux options:

  1. Edit link settings ou éditer les paramètres du lien vous permet de mettre à jour la page à laquelle le lien emmène vos visiteurs.
  2. Edit text ou édition du texte vous permet de changer le texte dans le bouton.
Button with options for editing links and text

Edition des images

Editable images show the image icon in the upper right
Remplacer une image fonctionne comme pour les boutons - passez le curseur
dessus et repérez la roulette en haut à droite !

Vous pouvez aussi remplacer les images sur votre site avec le CMS. Passez simplement le curseur sur l'image que vous souhaitez changer, puis cliquez sur l'icône de l'image.

Ceci ouvrira la recherche de fichier de votre ordinateur, d'où vous pourrez sélectionner l'image que vous souhaitez.

Note: Parfois, certains styles visuels s'appliqueront automatiquement à votre image, ne soyez donc pas surpris si votre image change de taille, reçoit une bordure de couleur, une ombre, etc.

Gérer les objets d'une Collection de façon groupée

Click the "Select" button to bulk manage Collection items
Cliquez sur le bouton Select... pour gérer les objets de façon groupée.

Parfois, vous voudrez supprimer, archiver ou publier plusieurs objets en même temps. Dans ces moments-là, cliquez sur le bouton Select... pour changer le statut de plusieurs objets, comme dans Gmail. Ceci est pratique lorsque vous souhaitez par exemple publier plusieurs objets connectés en même temps.

Créer du nouveau contenu

Vous pouvez utiliser votre CMS pour produire du nouveau contenu dans n'importe laquelle de vos Collections, c'est donc super facile de créer un nouveau post pour un blog, un objet, un produit, un service - tout ce que vous permet votre Collection !

Creating a new Collection item

Ceci devrait être relativement intuitif, les en-têtes et les étiquettes descriptives pour chaque champ vont grandement vous aider. Mais voici certains éléments qu'il est bon de savoir:

Champ Nom ou Marque

Le champ Nom ou Marque est présent par défaut pour toutes les Collections, et assure trois fonctions:

  1. Le nom de votre objet sur votre site
  2. La source de l'URL de l'objet sur le web
  3. Le titre de l'objet dans le CMS

Champ Image

Partout où vous verrez "Drag & Drop Image Here" ou "Glissez & Déposez Image Ici", vous êtes dans un champ Image. Vous pouvez soit glisser une image d'une autre application dans le CMS, ou cliquez sur le lien "Upload an Image" ou "Téléchargez une Image" pour la télécharger au travers de le système de gestion des fichiers de votre ordinateur.

Notez que votre CMS ne peut pas gérer des fichiers image au-dessus de 4MB. Si votre fichier est plus lourd, vous pouvez utiliser Photoshop ou un autre outil en ligne comme TinyPNG or Compressor pour l'avoir à la bonne taille. Rappelez-vous que plus l'image est grande, plus elle prendra de temps à charger, essayez donc d'avoir des images aussi petites que possible mais sans perdre en qualité.

Il est aussi de votre responsabilité de vous assurer que les images sont libres de droits d'auteur.

Champ Reference

Si vous voyez un champ avec une loupe sur la droite, votre Collection a un champ de Reference ou Multi-Reference. Ceci vous permet d'importer du contenu d'une Collection à une autre.

Pour utiliser un champ Reference, cliquez simplement sur le champ et sélectionnez la bonne référence pour votre nouvel objet. Si vous ne voyez pas la bonne référence pour vos nouvelles pages, il est possible que vous deviez créer un nouvel objet dans la Collection à laquelle le champ fait référence.

Champ Option

Ce champ fonctionne un peu comme References, mais n'est pas connecté à un autre objet Collection. Vous pouvez donc juste cliquer dans le champ et choisir la bonne option pour le nouveau contenu.

Champ Video

The video field lets you add a video to your new content. It works by pulling your content from a public video host like YouTube or Vimeo, so you can’t just upload a video file. If you have a video file you want on your site, upload it to YouTube or another service, then just copy and paste the URL into the Video field.

Note: you don’t need the embed code generated by services like YouTube, just the URL.

Champ Switch

Le champ Switch est un simple interrupteur on/off, yes/no qui permet d'activer ou de désactiver certaines fonctionnalités de votre site. Si vous n'êtes pas certain de son fonctionnement, n'y touchez pas.

Champ Color

Le champ Color vous permet d'ajouter une touche de couleur à votre contenu, de la façon dont votre webdesigner l'a défini. Le champ lui-même vous permet de choisir une couleur visuellement, depuis l'arc-en-ciel, ou en entrant ce que nous appelons un “hex code” — une représentation numérique de la couleur

The color field

Utiliser l'arc-en-ciel peut prendre un peu de temps pour s'y habituer, mais vous allez vite vous en sortir. La barre à gauche représente le spectre complet des couleurs à disposition - en cliquant, la couleur désignée s'affichera au centre avec toutes les teintes. Le centre est où vous choisirez la couleur que vous souhaitez. La barre à droite représente l'opacité de la couleur, qui désigne la transparence de la couleur.

Si vous allez beaucoup travailler avec des couleurs sur votre site, vous pourriez utiliser le plugin ColorZilla, de Chrome / Firefox qui vous permet essentiellement de copier n'importe quelle couleur qui se trouve sur votre site et de l'intégrer dans l'arc-en-ciel.

Gérer votre workflow éditorial

Si vous êtes l'unique personne qui travaille sur le CMS de votre site internet, vous allez très bien vous en sortir en écrivant, éditant et publiant dans le CMS.

Mais si votre équipe d'écrivains et editeurs est plus grand que un, vous voudrez probablement utiliser d'autre outils d'écriture, de partage et de collaboration sur le contenu.

Pourquoi ? En fait, il y a deux bonnes raisons:

  1. La plupart des outils d'écriture offrent une collaboration plus détaillée et des options d'édition, comme un suivi des changements et des commentaires.
  2. Il est toujours bien d'avoir une sauvegarde de tout ce que vous publiez sur votre site (juste au cas où quelqu'un devait effacer des données par erreur)

Outils d'écriture et d'édition recommandés

Voici quelques outils d'écriture qui offrent une super expérience, une collaboration facile avec vos collègues, qui fonctionne bien avec votre CMS, en ceci que vous ne perdrez pas de formatage quand vous allez copier/coller du contenu d'eux dans le CMS.

Je ne recommande pas d'utiliser Microsoft Word.

Quelques raccourcis de clavier

Ecrire devient beaucoup plus rapide si vous pouvez garder vos doigts sur les touches du clavier. Ces quelques combinaisons vont vous aider dans ce sens:

Utilisez Command sur Macs, et Control (ctrl) sur Windows.

Info pro: écrivez vos longs contenus en-dehors de votre CMS

Pour des petits contenus, vous pouvez écrire et éditer directement dans votre site quand vous le souhaitez.

Mais pour du long contenu qui nécessite plusieurs paires d'yeux, il est généralement mieux d'écrire, de collaborer et éditer dans une application séparée, puis coller votre contenu dans le CMS lorsque vous êtes prêt à publier

Il est temps pour moi de vous confier votre nouveau site internet conçu dans Webflow.

Mais ce n'est pas la fin ! Ce n'est que le début d'une belle et fructueuse collaboration.

Votre Webmaster, Caroline