Guides_

Maintenant que vous avez créé un compte pour le CMS de votre site et que vous savez comment y accéder, nous allons nous familiariser avec l’interface de notre barre d’outils.

Commençons par les deux onglets de gauche, Pages et Collections. Ce sont les deux onglets par défaut de votre CMS. Vous pourrez ouvrir d’autres onglets, comme vous le verrez plus tard, mais ces deux-là seront toujours là pour vous.

L’onglet Pages - comme vous pouvez l’imaginer - contient une liste des pages de votre site. Il sera divisé en au moins deux sections, mais probablement plus :

1. Pages statiques : ce sont des pages que nous avons construites en dehors de vos Collections. Il peut s’agir de votre page d’accueil, de votre page À propos, de vos services/produits, de votre contact, etc.

2. Pages de collection : ce sont des pages générées à partir de vos Collections, qui peuvent inclure des choses comme un blog, un centre d’aide, de la documentation, et plus. Celles-ci sont listées avec leur nom de collection.

L’onglet Pages vous permet de faire plusieurs choses :

1. Rechercher une page par nom : tapez le nom d’une page dans la barre de recherche pour la trouver. Notez qu’il s’agit d’une recherche par correspondance exacte, et qu’elle ne recherche que le nom de la page, vous devrez donc entrer exactement un ou plusieurs mots qui apparaissent dans le nom de la page.

2. Aller à une page : Cliquez simplement sur le nom de la page dans la liste pour réduire l’onglet Pages et afficher la page. Une fois que vous y êtes, vous pouvez ajouter et modifier du contenu à votre site web comme si vous écriviez dans un éditeur de texte.

3. Gérer les paramètres de page : Lorsque vous placez votre curseur sur une page de la liste, vous verrez apparaître un bouton intitulé «Paramètres». Là, vous pouvez gérer les paramètres de page tels que le méta-titre et la description SEO, le titre et la description OpenGraph, et l’image Open Graph.

Les paramètres de vos pages sont très importants pour le référencement de votre site web. Votre CMS vous permet de personnaliser la balise de titre et la méta-description de chaque page.

SEO signifie «search engine optimization (optimisation pour les moteurs de recherche)». Les sites web doivent être construits et optimisés afin d’améliorer leurs chances d’être trouvés par les moteurs de recherche comme Google, Bing, etc. Dans les paramètres de chaque page, vous pouvez créer et modifier les paramètres SEO spécifiques suivants :

Méta-titre : Le titre d’une page joue un rôle très important dans sa visibilité et sa performance dans les moteurs de recherche, à la fois parce qu’il a) indique aux moteurs de recherche de quoi parle la page et b) est ce sur quoi les utilisateurs des moteurs de recherche vont cliquer pour atteindre votre site internet. Assurez-vous d’inclure les types de mots que les gens utilisent pour décrire votre entreprise dans le titre. Idéalement, le titre d’une page devrait comporter entre 55 et 60 caractères. Exemple : si nous construisions un site web pour une entreprise d’entretien de pelouse de la région de la baie de San Francisco, nous intitulerions probablement la page d’accueil «SF Bay Area Lawn Care». Nou aurions peut-être d’autres pages comme «Berkeley Lawn Care» et «El Cerrito Lawn Care».

Méta-description : La description vous permet d’ajouter un peu plus de détails sur votre page (environ 150 caractères). C’est important pour la recherche, mais pas autant que le titre. La section Aperçu des résultats de recherche vous montre à quoi ressemblera le contenu que vous avez saisi sur une page de résultats de recherche Google. Si une partie de votre texte est coupée dans l’aperçu, vous devriez adapter votre texte.‍

Les paramètres de la balise Open Graph sont très similaires aux paramètres SEO, sauf qu’ils sont utilisés par les réseaux sociaux comme Facebook, Twitter et LinkedIn. Si vous utilisez l’un de ces réseaux sociaux, vous avez vu Open Graph au travail plusieurs fois. Dans la plupart des cas, vous pouvez simplement cocher la case pour utiliser le même contenu que votre titre et description SEO. Mais n’hésitez pas à le personnaliser, si vous le souhaitez. La balise Open Graph vous permet également de spécifier une image à afficher avec votre titre et votre description.

L’onglet Collections est très similaire à l’onglet Pages, mais il ne liste que le contenu de votre collection - ce que votre webdesigner à crée avec le CMS. Lorsque vous cliquez sur une collection, vous accédez à un nouvel onglet avec une liste de tous les éléments de la collection.

Pour commencer à créer un nouvel élément dans cette collection, cliquez sur le bouton + New Actualité et remplissez les différents champs de l’élément, en portant une attention particulière au texte d’aide et aux autres exigences pour chacun.

Ce que vous voyez à l’intérieur d’un élément de la collection changera en fonction de la structure de la collection à laquelle il appartient, mais vous verrez plusieurs éléments à chaque fois.

1. Bouton Retour : cliquez ici pour revenir à la liste des éléments de votre Collection

2. Bouton Voir élément : ce bouton gris clair réduit le CMS pour vous montrer l’élément que vous êtes en train de visualiser directement sur votre site Web en direct. Si vous le souhaitez, vous pouvez éditer son contenu à cet endroit plutôt que dans ce panneau.

3. Status : affiche l’état actuel de l’élément que vous visualisez. Les statuts comprennent les mentions Published, Unpublished et Draft : cochez cette case si vous n’avez pas fini de créer ou de modifier l’élément en cours. Tout ce qui n’est pas marqué comme brouillon sera publié quand quelqu’un cliquera sur le bouton Publier.

4. Changelog : lorsque vous apportez des modifications à votre CMS, il enregistre le nombre d’éléments et de pages que vous avez modifiés jusqu’à ce que vous cliquiez sur Publish. Vous pouvez cliquer sur le journal des modifications pour voir une liste des éléments et des pages qui ont des modifications non publiées, ainsi que la personne qui les a faites, si vous avez d’autres utilisateurs du CMS.

5. View site : cliquez ici pour voir votre site web. Vous pouvez utiliser n’importe quel lien sur votre site web pour passer d’une page à l’autre dans cette vue. Notez simplement que vous devrez cliquer deux fois sur Publish pour confirmer votre action.

Chaque fois que vous cliquez sur Publish dans votre CMS, l’ensemble de votre site est republié. Si vous savez que d’autres personnes travaillent sur le site lorsque vous êtes prêt à publier, vous pouvez leur demander s’ils sont prêts pour que leurs changements soient mis en ligne.

Votre CMS peut inclure un onglet Formulaires (Forms). Si c’est le cas, vous pourrez consulter certains renseignements de base contenus dans les formulaires que les gens ont envoyés. Vous pourrez notamment consulter les messages reçus sur votre site et les télécharger au format CSV. Dans le fichier CSV téléchargé (un format qui fonctionne avec toutes les principales applications de tableur comme p. ex. Excel), vous pourrez voir toutes les informations soumises sur le site web par vos visiteurs.

‍

Votre CMS vous donne deux façons d’éditer le contenu qui se trouve déjà sur votre site :

1. Directement sur votre page

2. Dans l’onglet de collection (Mis en place sur demande, par impactmedias)

Nous allons vous expliquer les deux façons (extrêmement simples) d’éditer, en commençant par l’édition directe sur la page.

Edition de texte

Lorsque vous vous connectez pour la première fois à votre CMS, vous verrez votre site web avec le panneau CMS (la barre grise) réduit au bas de votre écran. Si vous voyez du texte que vous voulez éditer, passez simplement votre curseur dessus. Si un contour gris clair avec une icône crayon en haut à droite apparaît, vous pouvez modifier ce contenu. Il suffit de cliquer dans la boîte et de commencer à écrire ! L’édition de texte fonctionne comme dans Microsoft Word ou Google Docs, mais le style de votre texte (gras, italique, etc.) fonctionne un peu différemment.

Mettre en forme votre texte

Pour styliser le texte, sélectionnez-le d’abord. Une barre d’outils grise apparaîtra alors, vous donnant les options suivantes : B pour gras I pour mettre en italique Icône de maillon de chaîne pour insérer un lien H1–H6 pour créer les différents niveaux des intitulés. Le chiffre indique le niveau d’importance de chaque rubrique, H1 étant le plus important et H6 le moins important. Notez que la plupart des pages n’ont qu’un seul H1, donc vous ne l’utiliserez probablement pas souvent pour créer une citation en bloc.

Vous pouvez également styliser le texte avec les combinaisons de touches suivantes : touche Ctrl + B pour gras, touche Ctrl + I pour mettre en italique, touche Ctrl + K pour insérer un lien. Pour utiliser une combinaison de touches, il suffit d’appuyer et de maintenir la touche Commande (sur Mac) / Contrôle (sur Windows), puis d’appuyer sur la touche lettre (B, I ou K), puis de relâcher.

Remarque : parfois, un champ de texte vous donnera moins d’options que ceux énumérés ci-dessus. Cela a probablement été fait intentionnellement, mais si vous avez besoin de plus d’options de style, faites-le nous savoir par e-mail ou par téléphone.

Insertion de liens

Lorsque vous allez insérer un lien, la barre d’outils affiche par défaut l’URL à laquelle le lien doit être inséré, mais si vous cliquez sur l’icône de lien sur la gauche, vous pouvez choisir parmi plusieurs autres options :

Externe : redirige un visiteur à une autre page sur le web, souvent sur un autre site, mais vous pouvez aussi l’utiliser pour créer un lien vers une autre page de votre propre site.

Page : redirige un visiteur à une autre page de votre site. Vous verrez une liste déroulante des pages de votre site listées ici.

Section : redirige un visiteur à une autre section de la même page qu’il est en train de consulter. Vous verrez une liste déroulante des sections de votre page listées ici.

E-mail : redirige un visiteur vers son application e-mail par défaut pour qu’il puisse écrire un email à l’adresse que vous spécifiez.

Téléphone : permet à un visiteur de passer un appel au numéro de téléphone que vous spécifiez. Ceci est particulièrement utile pour les personnes qui visitent votre site à partir d’un appareil mobile.

Chaque type de lien offre ses propres options de personnalisation. Cliquez sur l’icône d’engrenage pour voir ce qui est disponible pour votre type de lien actuel.

Plus d’options d’édition de texte

Certaines zones de texte sur votre site Web (généralement des passages plus longs) vous permettront d’ajouter des options supplémentaires.

Lorsque vous appuyez sur Entrée/Retour pour commencer un nouveau paragraphe, vous pouvez voir une petite icône +. Cliquez dessus pour ouvrir la barre d’outils et voir les options suivantes.

• Image : vous permet d’ajouter une image

• Vidéo : permet d’intégrer une vidéo hébergée sur YouTube, Vimeo ou Dailymotion. Vous ne pouvez pas importer une vidéo hébergée sur votre ordinateur.

• Rich media : permet d’intégrer un média via un lien, comme par exemple une carte Google, un GIF ou encore un fichier audio

• Liste à puces : permet d’ajouter une liste à puces

• Liste numérotée : permet d’ajouter une liste numérotée

Edition des boutons

Vous pouvez également éditer des boutons dans le CMS. Passez simplement votre curseur sur le bouton et recherchez l’icône d’un engrenage dans le coin supérieur droit. Cliquez sur cette icône et vous verrez deux options:

1. Modifier les paramètres du lien : vous permet de mettre à jour la page à laquelle le bouton amène les visiteurs.

2. Modifier le texte : vous permet de modifier le texte à l’intérieur du bouton.

‍

Edition des images

Vous pouvez également remplacer les images de votre site avec le CMS. Passez simplement votre curseur sur l’image que vous voulez mettre à jour, puis cliquez sur l’icône de l’image. Cela ouvrira l’explorateur de fichiers de votre ordinateur, où vous pourrez sélectionner n’importe quelle image de votre choix.

Note : Parfois, certains styles visuels s’appliqueront automatiquement à l’image que vous téléchargez, alors ne soyez pas surpris si votre image change soudainement de taille, acquiert une bordure ou une ombre colorée, etc.

Attention: Ne chargez pas des images trop lourdes sur votre site ! Le poids maximum conseillé d’une image est 150 Ko (Pensez aux personnes qui utilisent un smartphone ou un autre appareil mobile).

‍

Gestion des articles de collection en vrac

Parfois, vous voudrez supprimer, archiver ou publier plusieurs éléments en même temps. Dans ces moments-là, vous pouvez cliquer sur le bouton Select (Sélectionner) pour modifier l’état de plusieurs éléments, tout comme dans Gmail. Ceci peut être particulièrement pratique si vous voulez publier plusieurs pièces connectées (comme une série d’articles) en même temps.

Créer du nouveau contenu

Tout cela devrait être assez intuitif, et les étiquettes et le texte descriptif pour chaque champ devraient aussi vous aider énormément. Mais il y a quelques choses qui valent la peine d’être dites :

Le champ name (nom)

Le champ Nom est un champ par défaut pour toutes les collections, et il joue deux rôles principaux : Il est le titre de l’article sur votre site web et la source de l’URL de l’article sur le web.

Le champ image

Partout où vous voyez «Drag & Drop Image Here», il s’agit d’un champ d’images. Vous pouvez soit faire glisser une image d’une autre application de votre ordinateur vers le CMS, soit cliquer sur le lien «Upload an Image (Télécharger une image)» pour la télécharger dans le système de gestion de fichiers de votre ordinateur.

Notez que le CMS ne peut pas gérer les fichiers images de plus de 4MB. Si votre fichier est plus gros que cela, vous pouvez utiliser Photoshop ou un outil en ligne comme TinyPNG ou Compressor pour obtenir vos fichiers sous ce seuil. Gardez simplement à l’esprit que plus l’image est grande, plus le chargement est long, alors essayez d’obtenir vos images aussi petites que possible sans perdre en qualité. Le poids maximale conseillé pour une image est de 150 Ko. C’est également à vous de vous assurer si vous avez le droit d’utiliser les images souhaitées sur votre site Web.

Le champ de référence

Si vous voyez des champs avec une icône de loupe à droite, votre collection a un champ Référence ou Multi-Référence. Cela vous permet d’importer du contenu d’une collection dans une autre, qui peut être utilisé pour alimenter des choses comme des catégories et des balises (fonctions de blog communes). Pour utiliser un champ Référence, cliquez simplement dans le champ et sélectionnez la bonne référence pour votre nouvel article. Si vous ne trouvez pas la bonne référence pour votre nouvelle page, vous devrez peut-être créer un nouvel élément dans le champ Références de la collection. Vous devriez trouver une explication dans ce dossier, mais si ce n’est pas le cas, contactez-nous pour obtenir de l’aide.

Le champ d’options

Le champ Option fonctionne de la même manière que le champ Références, mais n’est pas connecté à un autre élément de la collection. Il vous suffit donc de cliquer sur le champ et de choisir la bonne option pour le nouveau contenu. Si vous avez besoin d’une nouvelle option pour adapter votre contenu, contactez-nous.

Le champ de vidéo

Le champ vidéo vous permet d’ajouter une vidéo à votre nouveau contenu. Il fonctionne en tirant votre contenu d’un hébergeur vidéo public comme YouTube ou Vimeo, vous ne pouvez donc pas simplement télécharger un fichier vidéo de votre ordinateur.

Si vous avez un fichier vidéo que vous voulez sur votre site, téléchargez-le sur YouTube ou un autre service, puis copiez et collez simplement l’URL dans le champ Vidéo.

Note : vous n’avez pas besoin du code d’intégration généré par des services comme YouTube, seulement de l’URL.

Le champ de commutation

Le champ Switch (Commutation) est un simple interrupteur marche/arrêt, oui/non qui active ou désactive la fonctionnalité sur votre site Web. Si vous n’êtes pas sûr de la façon dont cela fonctionne sur votre site, demandez-nous.

Le champ de couleur

Le champ Color (Couleur) vous permet d’ajouter une touche de couleur à votre contenu d’une manière que le concepteur de votre site définit. Le champ lui-même vous permet de choisir une couleur visuellement, à partir du sélecteur, ou d’entrer ce que l’on appelle un «code hexadécimal» - une représentation numérique de la couleur.

L’utilisation du sélecteur de couleurs peut prendre un peu de temps pour s’y habituer au début, mais vous vous y habituerez rapidement. La barre de gauche représente l’éventail complet des couleurs disponibles - en cliquant ici, vous mettrez à jour l’échantillon de couleurs au milieu pour obtenir une gamme de teintes dans la zone sur laquelle vous avez cliqué. La zone du milieu est l’endroit où vous choisirez la couleur exacte que vous voulez. La barre de droite représente l’opacité de la couleur, qui contrôle la transparence de la couleur.

Si vous travaillez beaucoup avec la couleur sur votre site, vous pouvez utiliser le plugin Chrome / Firefox ColorZilla, qui vous permet essentiellement de copier n’importe quelle couleur que vous voyez sur le web pour ensuite la coller dans le sélecteur de couleur.