Le document est un guide d'utilisation du site colibri-ville.fr, détaillant la gestion de contenus via WordPress, la charte graphique, et les rôles des utilisateurs. Il aborde également la création et la gestion d'articles et d'événements, et fournit des conseils sur l'utilisation du thème Divi et ses fonctionnalités. Enfin, le guide mentionne des ressources pour aider à la compréhension de WordPress et Divi.

1. Guided’utilisation du site internet
Pe2gy LD - Formation CPM-MD Projet 01

2. Sommaire
Guide d’utilisation du site Colibri-ville.fr
1. Présentation générale
2. Charte graphique
3. Rôles et droits
4. Les articles
5. Activités via «événements»
6. Aides & ressources
P. 04
P. 08
P. 10
P. 12
P. 18
P. 22
2

3. 1.PrésentationGénérale
Un systéme de gestion de contenu
Wordpress est un systéme de gestion de contenu. Cette plate-forme permet de construire des sites web du plus
simple au plus complexe. C’est le coeur de votre site, il est indispensable pour le faire fonctionner. Nous y avons
ajouté de nombreuses fonctionnalités (appelé plugin) ; tel que les Galeries d’images, formulaire de contact, gestion
d’événements...
Un Théme & des plugins
Wordpress est un outil simple à utiliser même pour les néophyte, Combiner au théme Divi et à son puissant builder
permettant de contruire votre article / page visuellement. Grâce à cette fonctionnalité crée des articles époustouf-
flant simplement.
Event manager, ce plugin de gestion d’événements vous permettra de créer rapidement et facilement des événe-
ments, accepter les reservations, et gérer la liste des participants.
1.1 Wordpress et ses amis
3

4. 1.PrésentationGénérale
Aller à l’interface de connexion
Pour vous connecter à l’administration de votre site rien de plus simple ! Rendez-vous
sur le site de Colibri ville. En bas de la page d’accueil de votre site se trouve le bouton
connexion.
Il vous suffit de cliquez sur celui-ci pour vous trouver sur la page de connexion à l’administration du
site et d’y rentrer votre login et votre mot de passe (3. Rôle & droits).
Tableau de bord - Administration du site
Une fois connecté vous arrivez sur le tableau de bord de votre site. C’est à cette endroit que vous allez administrer
votre site, créer des contenus...
1.2 Connexion à l’administration
Comme je vous le disais plus haut,
wordpress est trés intuitif et simple d’uti-
lisation.
Vous retrouverez sur la partie gauche de
votre tableau de bord tous les outils ne-
cessaires à la gestion de votre site.
Attention ne vous formalisez pas si la
barre de gauche différe un peu de celle
présentée sur l’image à droite de ce texte.
Vous voyez ici l’interface administrateur.
En fonction de votre rôle cette barre peut
être plus ou moins rempli.
4

5. 1.PrésentationGénérale
Mise à jour
Les Mises à jour sont à faire réguliérement, elles sont neces-
saires à la sécurité et au bon fonctionnement de votre site.
Pour ce faire rien de plus simple cliquez sur Mise à jour ;
la page Mise à jour de votre site s’ouvrira vous n’aurez plus
qu’à faire les mises à jours demandé.
1.3 Mise à jour
Vous pouvez aussi effectuer les mises à jour en passant par Extension
Coché la / les case(s) de(s) extension(s) que
vous voulez mettre à jour puis allez sur le
menu déroulant en haut du tableau des
extensions et cliquez sur mettre à jour.
5

6. 1.PrésentationGénérale
1.4 Les outils
Aller sur le site
Pour vous rendre sur
votre site rien de plus
simple cliquez sur
Colibri ville puis aller
sur le site
Articles
C’est ici que vous re-
trouverez toutes les
«ACTUALITÉS».
Médias
C’est la bibliothéque
de votre site c’est ici
que tous les médias
sont enregistrés.
Photos, dessins, vi-
déos, sons,....
Pages
La colonne vertébrale
de votre site ! Vous y
trouverez le conte-
nu «statique» (qui ne
change pas ou quasi
pas).
Evènements
Dans cette partie
vous allez pouvoir
gérer facilement les
nouvelles activités
proposées par votre
ville.
6

7. 1.PrésentationGénérale 1.4 Les outils
Articles
Gerez depuis cette partie les différentes publications à faire apparaître dans votre rubrique
«actualités». Vous souhaitez modifier un article existant, ajouter, supprimer, publier ou faire un
brouillon c’est ici que tout se passe.
Evénements
C’est dans cette partie que vous allez gérer les événements de la partie « activités du mois».
Afficher la liste de vos articles
Créer un article
Ajouter des catégories d’articles
Créer des étiquettes (Important pour le référencement SEO)
Afficher la liste de vos événements
Créer un événement
Ajouter des catégories d’événement (concert, spectacle...)
Gérer les emplacements, la récurrences,
Gérer les réservations...
Voir les vidéos dans la
partie support vidéo du site
7

8. 8
2.Chartegraphiquedusite
Quels choix ?
1. Thème
Pour votre projet notre choix c’est porté sur DIVI, un thème très abouti proposant de très nombreuses fonctionnalités.
Et notament un builder permettant de construire instantanément un article ou une page comme si on le faisait sur
word. Vous voyez en direct ce que vous créez ! De plus, son nombres impressionnant de modules permet de laisser
libre cours à sa créativité et ainsi proposer des pages différentes en fonction du sujet traité.
2. Couleurs
Nous avons opté pour les couleurs du logo de Colibri ville. Ces couleurs vivent et pétillantent apportent fraicheur, gaité
et dynamisme quoi de plus normal que de les utiliser. Les couleurs sont pré-configuré dans Divi builder mais je vous
remets les différents codes couleurs ici en cas de besoins.
2. Charte graphique du site
#F6217C ou R = 246 V = 33 B = 124
#76D7E6 ou R = 118 V = 215 B = 230
#90A406 ou R = 144 V = 164 B = 06
#6E9103 ou R = 110 V = 145 B = 03
#ECFF03 ou R = 236 V = 255 B = 03
#730C38 ou R = 115 V = 112 B = 56

9. 9
2.Chartegraphiquedusite 2. Charte graphique du site
3. Polices d’écritures
Pour la réalisation de votre site notre choix s’est porté sur la police Open-Sans. Cette typographie fait partie de la fa-
mille des «sans serifs». Cette famille n’a pas été choisi au hasard, il faut savoir que le sans sérif à un réel intéret typo-
graphique et dispose de 3 avantages non dénués d’intérêt pour tout le monde.
Qui dit meilleure lisibilité dit meilleure accéssibilité.
Pour un web universel, il faut savoir qu’aujourd’hui en France environ 6% minimum de la popu-
lation est dyslexique. Les problémes de vue génèrent également des difficultés pour accéder à
l’information. En utilisant cette police d’écriture, vous vous adressez un à public plus large, sans
discimination involontaire.
Moderne et équilibrée
Quand on parle de police sans sérif les designer disent «moderne, lisible et équilibrée», à cause
de son design fluide et facile à lire. Ce style de police correspond parfaitement à l’image de
Colibri ville, alors pourquoi s’en priver ?
Une meilleure lisibilité
L’avénement de l’écran dans notre mode de vie a considérablement boulverser nos usages de
la lecture. La résolution des écrans ne permet pas toujours un bon affichage des écritures avec
empattement (Times New Roman, par exemple) et gêne donc la lecture. Les polices sans sérif sont
en revenche parfaitement adaptées à ce support.
Tous les textes sont pré-réglé dans le théme Divi vous n’avez plus rien à gérer !

10. 10
3.Rôles&droits
​​
3. Rôles & droits
Identifiant : Emilie
Mot de passe : PEsCj64jP9
Pour vous connecter au tableau de bord utilisez votre identifiant et votre mot de passe. Pour modifier le rôle / droits d’un
des profils, vous devrez en faire la demande auprés de l’administrateur. Il est le seul à pouvoir accéder à la partie Utilisateur
de la colone de gauche de l’interface de gestion.
Administrateur
L’ administrateur détient la clé du château WordPress. Il peut effectuer toutes les tâches disponibles dans le tableau
de bord WordPress, y compris modifier les thèmes, les fichiers de base, et l’évolution des rôles des autres utilisateurs.
Les administrateurs ont également un contrôle complet sur l’ensemble du contenu.
Identifiant : Alice
Mot de passe : dIcx3tXV79
Editeur
Le rôle de l’éditeur est un excellent choix pour les utilisateurs qui ont besoin d’accéder à tout le contenu, mais pas aux
thèmes, plugin, ou widgets. Les éditeurs peuvent publier, modifier ou supprimer une page ou un article, y compris ceux
portant la mention « privé ».
Les éditeurs peuvent également modérer les commentaires et gérer les catégories et les liens. En bref, les éditeurs
peuvent faire presque tout avec le contenu, mais ils ne peuvent pas modifier les paramètres.
Identifiant : Eddy
Mot de passe : au4pdr2PV2

11. 11
3.Rôles&droits 3. Rôles & droits
Contributeur
Les contributeurs peuvent écrire, modifier, et supprimer leurs propres messages non publiés, mais leur contenu doit
être examiné et publié par un Administrateur ou Éditeur.
Il est important de noter que les contributeurs ne peuvent accéder à la bibliothèque multimédia, donc si ils veulent
utiliser des images spécifiques, des vidéos ou des fichiers audio de la bibliothèque multimédia, ils doivent demander
l’aide d’un administrateur ou éditeur.
Le rôle de contributeur est une option populaire pour les auteurs invités qui ne soumettent pas de contenu sur une
base régulière.
Identifiant : Charles
Mot de passe : BT0367ztMfM
Identifiant : Maria
Mot de passe : OH2X8aK4nd
Identifiant : Alphonse
Mot de passe : VHE6b5Z4zr

12. 12
4.Articles
4. Articles
Un article ! Pourquoi ?
Les articles de votre site fonctionnent un peu comme les articles d’un blog ! Ils servent à informer vos vi-
siteurs de toutes votre actualité. Ils sont indispensable à la vie de votre site web et au lien que vous créez
avec vos visiteurs. Un contenu de qualité et complet fera toute la différence.
Gestion des articles
Pour accéder à vos articles, cliquez sur «Articles» - «Tous les articles».

13. 13
une page sans menu à gauche,
d’activer la navigation par point (déplacement plus rapide vers un bloc texte / images)
de cacher la barre de navigation si on en a pas besoin
de Masquer le titre de l’article qui fera doublou avec celui généré par DIVI
4.Articles 4. Articles
Titre de l’article
Choix des actions
Auteur
Catégories
Etiquettes Score SEO
Méta description
Etat & date Titre SEO Mot principale
Configuration de la «page» article
Voici la configuration à adopter pour la rédaction de vos articles.
Cette possibilité de configuration apparaitra aprés avoir cliqué sur
Cela permet notament d’avoir :

14. 14
Catégories :
La Catégorie à adopter pour les articles et la catégorie «ACTULITÉS»
Elle correspond à la partie actualités de votre site. Il est important de ne pas se tromper
l’article risque de ne pas apparaître. En cas d’erreur de catégorie il vous suffir de décocher
la case et de cocher la bonne.
Publier :
Etat >> Publié - Brouillon - Programmé
Visibilité >> Public par défaut cependant vous pourrez pas la suite par exemple creer un
nouveau «Rôle» uniquement pour vos salariés et ainsi leurs proposer aprés connection
un contenu privé qui leurs sera réservé.
Révisions >> Les modifications apportés à l’article
Publié le >> Date de publication effective ou date de publication programmée
Duliquer >> Vous permet de faire une copie de votre article pour vous en servir comme
trame de travail pour un nouvel article
Type de publication >> Cette ligne est vraiment un plus car si lors de la rédaction vous
n’avez pas fait attention et avez crée un page par exemple vous pourrez ici transformer
votre page en article. Ce qui vous permet de ne pas le perdre et vous fait gagner du
temps car vous ne devrez pas le refaire.
Lisibilité et SEO >> Score SEO de votre article
Déplacer à la corbeille >> mettre votre article à la poubelle celui-ci ne sera pas suppri-
mé, il vous faudra aller dans la corbeille et le suprimer définitivement si vous le souhaitez.
Bouton >> Publié- Enregistrer- Mettre à jour
4.Articles
4. Articles

15. Voir les vidéos dans la
partie support vidéo du site
15
Etiquettes :
Les étiquettes sont en fait des mots clés on leur donne aussi le nom de «Taxonomies» ou
de tags. Elles permettent de définir le contenu de votre article de manière plus précise.
Cela permet aussi l’utilisateur de trouver ce qu’il recherche plus facilement. Il contribu
aussi au référencement de votre article. Il est important donc de bien les choisir.
Titre de l’article :
Même si je vous ai dit tout à l’heure de ne pas l’afficher
ce n’est pas pour autant qu’il ne faut pas l’écrire. En effet
nous verrons un peu plus tard que Divi (votre thème)
Reprend ce titre dans la création de votre «page» Article.
Yoast SEO :
C’est ici que l’on fera un référencement de base lors de
la création de l’article. N’ayez pas peur c’est assez simple
finalement.
Titre de l’article
Yoast SEO
Adresse de la page
4.Articles 4. Articles

16. 16
Choose a Premade Layout
Cette fonction vous permet de pouvoir choisir
une page prés-construite de Divi.
Commencer à construire
Cette fonction est vraiment faite pour les
personnes se sentant vraiment à l’aise avec
l’utilisation du builder. Vous partez d’une page
blanche et vous laissez libre cours à votre Créa-
tivité. Attention cependant à la charte graphique
et l’harmonie du site !
Choose Page
Cette fonction vous permet de choisir un article
déjà existant et de le dupliquer pour en changer
les éléments que vous souhaitez.
Activons se fameux builder :
C’est le moment de se lancer pour créer votre article !
Cliquez sur le bouton «Utiliser le visual Builder»
Choix de construction : Vous avez 3 choix de construction avec le builder :
Le meilleur choix
4.Articles
4. Articles
Je vous recommande vivement d’utiliser Choose Page. En effet, lors de la création de votre site une attention toute
particuliére à été porté au design, à la lisibilité et fluidité des contenus. Dupliquez un article existant vous permet-
tra de garder une homogénéité du site.

17. 17
Retrouvez les étapes pas à pas dans la vidéo article :
4.Articles 4. Articles
Cliquez sur l’image pour être redirigé sur Youtube ou retrouvez les vidéos dans le support vidéo du site

18. 18
5.Activitésvia«événements»
5. Activités via «événements»
Événements
C’est un plugin qui vous permets de gérer les activités de votre ville. Elle alimente la rubrique «Activités du mois». Elle
permet aux utilisateurs de voir l’agenda des activités proposées à Colibri ville durant le mois. Si une activitée les intéresses
ils pourront s’y inscrire en ligne. Un E-mail vous sera alors automatiquement envoyé.
Gestion des événements
Cliquez sur «Évènements» pour afficher la liste de vos événements. Vous remarquerez que la présenta-
tion de la page ressemble fortement à la page des Articles.
L’ajout, suppression, modification, des événements se fait comme celle d’un article.
A une différence prés ! On n’utilise pas ici le Builder de Divi, Puisque nous sommes dans l’interface
d’un plugin.
Vous souhaitez ajouter un nouvel événement, rien de plus simple dupliquez un des événements et mo-
difié le pour créer le votre.

19. 19
5. Activités via «événements»
Le corps
Un événement est comme un article, il a une réelle importance sur l’inscription des participants, soignez son contenu,
tant dans le texte que dans les médias ajoutés.
5.Activitésvia«événements»
Titre de l’événement
Adresse de la page
Corps du texte
Ajout d’un média

20. 20
5.Activitésvia«événements»
5. Activités via «événements»
Le lieu
Renseignez le lieu de votre événement. Si le lieu
que vous renseigné à déjà été utilisé; les coordon-
nées de celui-ci se compléront automatiquement,
si le lieu à déjà accueillit d’autres événements.
Réservation
Vous pouvez ici permettre la reservation de billet pour l’événement, il vous sera facile de configurer votre / vos billet(s).
Prix, quantité, laps de temps pour la réservation, ...

21. 21
5. Activités via «événements»
5.Activitésvia«événements»
Extrait
L’extrait est important, il ne doit pas être trop long. C’est cet extrait que vous verrez apparaître dans votre tableau
d’événement.
Tableau récapitulatif des évènements page «Activités du mois>
Voici à quoi ressemble récapitulatif du mois que vous trouverez sur la page «Activités du mois» de votre site.
Image mise en avant
Titre de l’événement
Date de l’événement
Extrait
Dirige vers la page
de l’événement

22. Voir les vidéos dans
la partie support vidéo du site
22
6. Aides et ressources
WordPress
WordPress bénéficie d’une communauté riche et dyna-
mique. De nombreuses ressources qont disponilbe sur
internet.
Voici quelques site qui vous permettrons de mieux com-
prendre son fonctionnement.
6.Aidesetressources
Divi
Un thème qui bénéficie d’une grande communauté acti-
vie. Vous pourrez trouver de l’aide sur divers tuto vidéo,
sur les forum et même auprés du créateur du thème
puisque vous en êtes aujourd’hui propriétaire.
Ressources WordPress
• WPmarmite.com Site - Youtube
• OpenClassroom Site
• Youtube Site
Ressources Divi
• Divi Site
• Divi Communauté Site
• Youtube Site
Autres
Retrouvez ici les autres ressources pouvant vous aider
pour votre site.
Autres ressources
• Vidéo Tuto Colibri ville Site
• Compression des images Site
• Yoast SEO Site - WPmarmite
Je reste bien entendu disponible et à votre écoute.