Guide d'utilisation. Contao CMS

Transcription

1 Guide d'utilisation Contao CMS 1

2 Sommaire 1. Avant propos Se connecter Le panneau d'administration Méthodologie La structure du site Création d'un article Création d'un élément L'explorateur de fichiers La gestion des images

3 Avant propos Typolight CMS est un système de gestion de contenu (SGC ou CMS) qui vous permet de gérer vous même les pages de votre site. Vous avez ainsi la maîtrise du contenu, et de sa présentation. Vous pouvez modifier votre site de n'importe quel endroit, un ordinateur et une connexion Internet suffisent. La gestion de votre site, ne nécessite pas l'ajout d'un logiciel spécifique. Se connecter Pour vous connecter à l'espace privé vous permettant de gérer votre site, rendez vous à l'adresse suivante Une fenêtre d'identification apparaît, entrez votre identifiant et votre mot de passe. 3

4 Le panneau d'administration Le panneau d'administration est divisé en trois zones. Sur la gauche vous trouverez le menu de navigation qui donne accès aux modules du système. La page d'accueil du panneau d'administration montre une liste de toutes les touches de raccourcis permettant une navigation plus rapide. La barre de liens en haut de page vous permet d'ouvrir dans une autre fenêtre/ onglet une prévisualisation de votre site (la partie front-office) ou de vous déconnecter du back-office afin d'empêcher une utilisation non autorisée de votre compte. 4

5 Les icônes L'accès aux fonctionnalités, s'effectue le plus souvent à partir d'icônes de couleur. Une bulle d'aide apparaît sur chaque icône si vous y laissez votre pointeur de souris. Les icônes de navigation changent pour chaque module en cours et selon les permissions utilisateur. 5

6 Méthodologie Les étapes suivantes sont à respecter pour ajouter du contenu dans le site 1 création d'une page dans la structure du site 2 création d'article(s) dans la page 3 création d'élément(s) dans l'article A tout moment il est possible de télécharger des fichiers média (images, vidéos, fichiers de tous types pdf, doc etc.) via l'explorateur de fichier. La structure du site La structure du site est la colonne vertébrale de votre site et est, par exemple, utilisée pour créer le menu de navigation. Les pages sont ordonnées hiérarchiquement. Ouvrez le module «Structure du site» du panneau de navigation. Cliquez sur une icône [+] permet de déplier l'arbre de noeud. Comme vous pouvez le voir, chaque page a un symbole particulier qui vous indique non seulement le type de page mais aussi si elle est visible ou non, si elle est publiée ou si elle est protégée par mot de passe. 6

7 Les différents types de page Le paramètre le plus important de chaque page est son type. Il détermine si une page affiche son contenu, si elle redirige le visiteur vers une autre page ou si elle est le point de départ dans l'arbre de page d'un nouveau site. Page simple Une page simple se comporte comme une page HTML statique et est utilisée pour afficher des articles, du contenu et des modules. Rediriger vers une URL externe Une page de redirection n'affiche aucun contenu mais redirige les visiteurs vers une autre page. (par exemple Aller vers une autre page du site Ce type de page redirige les visiteurs vers une autre page interne. Au contraire d'une page de redirection, les visiteurs sont amenés vers une autre page dans l'arbre de page. 7

8 Création d'une page 1 Cliquez sur "Nouvelle page" Deux nouvelles icônes apparaissent à droite L'icône avec la flèche vers le bas permet d'insérer une page après la page choisie, au même niveau hiérarchique. L'icône avec la flèche horizontale permet d'insérer une page dans la page choisie, à un niveau inférieur. 8

9 2 Cliquez sur l'icône et remplissez le formulaire 3 Sauvegarder Publier une page Une page est seulement affichée dans le front-office si elle a été publiée ou si un utilisateur back-office authentifié la prévisualise. Utilisez cette option afin de cacher les pages incomplètes ou de publier une page pour une période donnée seulement (par exemple un Joyeux Noël en décembre). 9

10 Création d'un article Suite à la création d'une page un premier article est automatiquement créé. Un article va contenir un ou plusieurs éléments (texte, image, vidéos etc...), il dispose de ses propres paramètres de publication, il peut être copié, déplacé, supprimé. Création d'un article : 1 Cliquez sur "Articles" 2 Cliquez sur "Nouvel article" 3 Deux nouvelles icônes apparaissent à droite L'icône avec la flèche vers le bas permet d'insérer un article après l'article choisi. L'icône avec la flèche horizontale permet d'insérer un article en début de page. 10

11 Edition d'un article 1 : Cliquez sur "Articles" 2b Cliquez sur l'icône "crayon" pour le modifier 11

12 Création d'un élément Un élément de contenu est un certain type de contenu comme un texte, une image ou une vidéo. Vous pouvez ajouter un nombre illimité d'éléments de contenu (par exemple un texte, une image et un lien hypertexte) à un article. Suite à la création ou à l'édition d'un article la fenêtre suivante apparaît : Un clic sur un des boutons fait apparaitre le formulaire suivant (par défaut l'insertion d'un élément texte) 12

13 La liste déroulante "Type d'élément" permet de sélectionner le type de contenu et conditionne le reste du formulaire. 13

14 Plusieurs éléments sont disponibles : Titre L'élément titre ajoute un titre en entête de l'article. Texte L'élément texte ajoute un texte formaté à un article. Vous pouvez utiliser un éditeur de texte avancé pour appliquer facilement différents formats comme un programme de bureautique. HTML Il est utilisé pour montrer toute sorte de contenu qui ne peut pas être généré avec un élément de contenu existant. Image Cet élément ajoute une image à l'article. Lien hypertexte Cet élément de contenu ajoute un lien hypertexte à un article. Liste Cet élément ajoute une liste à un article. Tableau Cet élément ajoute un tableau à un article en utilisant un assistant. Téléchargement Cet élément ajoute un lien de téléchargement à un article et ouvre automatiquement la boite de dialogue «Enregistrer sous» Galerie d'images Cet élément affiche un nombre d'images donné comme galerie. Accordéon Cet élément de contenu ajoute un bloc contenant un accordéon à un article. Elément de contenu Cet élément est utilisé pour afficher un élément de contenu existant. Donc vous n'avez pas à créer/changer un élément répété plusieurs fois. Lecteur vidéo Cet élément permet d'insérer une vidéo. 14

15 Remarques : les différents éléments d'un article peuvent être déplacés, par un simple glisser/déposer. un élément peut être désactivé temporairement par un simple clic sur l'icône oeil 15

16 L'explorateur de fichiers L'explorateur de fichiers permet de télécharger et d'organiser les fichiers utilisés dans le site (images, fichiers téléchargeables, vidéos...). L'accès se fait via le menu de navigation et le lien "explorateur de fichiers" ou dans le formulaire d'insertion de certain éléments, en cliquant sur l'icône en regard de "Fichier source" voir ci-dessous. A l'ouverture de l'explorateur de fichier, la liste des répertoires et fichiers existants est affichée. 16

17 Création d'un répertoire 1 clic sur "nouveau répertoire" fait apparaitre une icône avec une flèche horizontale. Un clic sur cette icône déclenche l'ouverture d'une fenêtre permettant de nommer le répertoire. Envoyer un fichier 1 clic sur "envoi de fichier" fait apparaitre une icône avec une flèche horizontale, en regard de chaque répertoire. Un clic sur cette icône déclenche l'ouverture d'une fenêtre : "Parcourir les fichiers" : permet de rechercher les fichiers sur votre ordinateur. Il est possible d'envoyer plusieurs fichiers en même temps en répétant l'opération. Il est indispensable de cliquer sur "Lancer le transfert", pour déposer les fichiers dans le répertoire. Remarques : les différents éléments sont classés par ordre alphabétiques la suppression s'effectue simplement par un clic sur l'icône croix rouge, n'oubliez pas de vérifier que votre élément n'est pas utilisé sur le site. Nommage : pour garantir une compatibilité optimale avec l'ensemble des navigateurs, il est primordial de respecter les consignes suivantes, pour le nommage des répertoires et fichiers : écrire en minuscules ne pas mettre d'accents ne pas mettre d'espaces (mettre - ou _ entre les mots) 17

18 La gestion des images Lors de l'insertion d'un élément de type image (image, galerie...) le formulaire contenant les options ci-dessous apparait. Il convient de porter une attention particulière au choix de la largeur et de la hauteur de l'image. Pour obtenir une image optimisée pour le web, il convient d'utiliser l'option "Proportionnel" en indiquant au choix la largeur ou la hauteur voulue. 18