Comme vous avez pu le voir (dans la partie traitant des éléments de création basique , lors de la création d’un nouvel élément, le corps de page est totalement dépourvu de contenu ou de champs préformatés.
Seul est présent le bouton d’ajout de blocs. Dans TERRITORIUM-CMS, les «blocs» sont comparables à des briques de contenu que vous pouvez mobiliser, agencer, redimensionner, afin de construire la page qui sert au mieux vos objectifs. En cliquant sur le bouton d’ajout de bloc, vous accédez à un menu dans lequel vous retrouvez tous les contenus mobilisables, comme le montre la capture d’écran ci-dessous :
Figure 1 : Les différents blocs mobilisables
1. Ajout d’un bloc actualités
Le bloc «actualités» possède la même logique de fonctionnement que les blocs «agenda», «points d’intérêt» et «formulaire». C’est à dire qu’ils agissent comme des blocs de remontée d’éléments. Ces derniers doivent être créés au préalable dans les onglets dédiés du menu principal.
La logique est en fait simple : si vous insérez un bloc de remontées d’actualités et que vous n’avez pas créé au préalable d’actualités... Le bloc sera vide.
Figure 2
Le bloc d’actualités prendra une forme spécifique en front-office, en fonction de la maquette graphique et ergonomique. Comme vous le montre la figure 2 ci-contre, lorsque vous cliquez sur le bouton «actualités», cela a pour effet de créer un bloc de remontées d’actualités directement dans le corps de page.
Dans la figure 3, vous pouvez constater que 3 actualités ont d’ores et déjà été créées dans l’onglet dédié du menu principal.
Figure 3
Figure 4
La figure 4, se concentre sur l’en-tête du bloc «actualités». À droite de celui-ci se trouvent le bouton de redimensionnement du bloc (nous verrons cette fonctionnalité plus avant) ainsi que le bouton permettant la suppression du bloc. Il est à noter que pour cette dernière action, une fenêtre de confirmation apparaîtra, afin d’éviter toute suppression non souhaitée. L’en-tête de bloc est une zone cliquable qui vous permet d’accéder aux paramètres de celui-ci.
La figure 5 montre les paramètres applicables au bloc «Actualités». Il s’agit de filtres par catégorie et/ou par tags. Par défaut, un bloc «actualités» non paramétré affichera toutes les actualités créées dans l’onglet dédié de TERRITORIUM-CMS.
Figure 5
Exemple 1 : Si vous le souhaitez, dans le cas d’une page traitant par exemple d’un courant artistique donné, faire remonter uniquement les actualités pertinentes, vous allez donc filtrer ces remontées en utilisant une catégorie (créée au préalable) comme «peinture impressionniste». Si vous souhaitez aller plus loin dans le filtrage et si tant est que vous ayez associé des tags aux actualités que vous avez créées, vous pouvez coupler le tri par catégorie à un tri par tags en ajoutant dans le champ tags : «Claude Monet, Séries». Ce faisant, dans le bloc «actualités» ne remonteront que les actualités étant classées dans la catégorie «peinture impressionniste» et traitant des Séries de Claude Monet (si correctement taguées) .Exemple 2 : Si vous souhaitez, dans le cas d’une page traitant par exemple des actualités globales de votre site, faire remonter toutes les actualités, vous allez donc laisser ce champ dans son état initial : «Toutes les catégories». En revanche, si vous souhaitez par exemple restreindre cette remontée aux seules actualités de votre région en 2017 et si tant est que vous ayez associé des tags aux actualités que vous avez créées, vous pouvez opérer un tri par tags en ajoutant dans le champ tags «Actualité Régionale, 2017». Ce faisant, dans le bloc «actualités» ne remonteront que les actualités étant taguées «Actualité Régionale, 2017», quel que soit leur catégorie.
2. Ajout d’un bloc Agenda
Le bloc «agenda» possède la même logique de fonctionnement que les blocs «actualités», «points d’intérêt» et «formulaire». C’est à dire qu’ils agissent comme des blocs de remontée d’éléments. Ces derniers doivent être créés au préalable dans les onglets dédiés du menu principal.
La logique est simple : si vous insérez un bloc de remontées «agenda» et que vous n’avez pas créé au préalable d’événements... Le bloc sera vide.
Figure 6
Le bloc Agenda prendra une forme spécifique en front-office, en fonction de la maquette graphique et ergonomique.
Comme vous le montre la figure 6, lorsque vous cliquez sur le bouton «agenda», cela a pour effet de créer un bloc de remontées d’événements directement dans le corps de page. Ce bloc vient se positionner directement sous le dernier bloc créé (ici un bloc «actualités»).
Dans la figure 7, vous pouvez constater qu’1 événement à d’ores et déjà été créé dans l’onglet dédié du menu principal.
Figure 7
Figure 8
La figure 8, se concentre sur l’en-tête du bloc «agenda». À droite de celui-ci se trouvent le bouton de redimensionnement du bloc (nous verrons cette fonctionnalité plus avant) ainsi que le bouton permettant la suppression du bloc. Il est à noter que pour cette dernière action, une fenêtre de confirmation apparaîtra afin d’éviter toute suppression non souhaitée. L’en-tête de bloc est une zone cliquable qui vous permet d’accéder aux paramètres de celui-ci.
Ce faisant, la figure 9 montre les paramètres applicables au bloc «agenda». Il s’agit en fait de filtres par catégorie et/ou par tags. Par défaut, un bloc Agenda non paramétré affichera tous les événements créés dans l’onglet dédié de TERRITORIUM-CMS.
Figure 9
Exemple 1 : Si vous souhaitez, dans le cas d’une page traitant par exemple d’un lieu événementiel en particulier, faire remonter uniquement les événements pertinents, il vous faut filtrer ces remontées en utilisant une catégorie (créée au préalable) comme «Opéra de Lyon». Si vous souhaitez aller plus loin dans le filtrage et si tant est que vous ayez associé des tags aux événements que vous avez créés, vous pouvez coupler le tri par catégorie à un tri par tags en ajoutant dans le champ tags : «Création Originale». Ce faisant, dans le bloc «agenda» ne remonteront que les événements classées dans la catégorie «Opéra de Lyon» et traitant d’une Création Originale (si correctement taguées) .Exemple 2 : Si vous souhaitez, dans le cas d’une page «agenda», faire remonter tous les événements, vous allez laisser le champ «Filtrer par catégorie» dans son état initial : «Toutes les catégories». Maintenant, si vous souhaitez par exemple restreindre cette remontée aux seuls événements dédiés à la clientèle familiale et si tant est que vous ayez associé des tags aux événements que vous avez créés, vous pouvez opérer un tri par tags en ajoutant dans le champ tags «Clientèle familiale». Ce faisant, dans le bloc «agenda» ne remonteront que les événements étant tagués «Clientèle familiale», quel que soit leur catégorie.
3. Ajout d’une ancre
Les ancres sont des liens internes à une page. Elles permettent de tirer pleinement parti du format allongé des pages web actuelles. Il est en effet fastidieux pour l’internaute de faire défiler une page très longue pour accéder au contenu. En plaçant une ancre devant un bloc, vous créez en fait en front-office un raccourci qui sera positionné directement en haut de page.
figure 10
Dans la figure 10 ci-dessous, vous pouvez observer que lorsque l’on clique sur le bouton «ancre», celle-ci s’ajoute directement sous le dernier bloc créé dans le corps de page. Le bloc ancre, lors de sa création est par défaut en mode édition et vous invite à renseigner un titre.
Dans la figure 11, ci-contre, l’ancre a été nommée «agenda» et déplacée juste avant le bloc du même nom, afin de faciliter l’accès à l’Agenda pour l’internaute qui n’aura qu’a cliquer sur le lien correspondant en haut de page pour que celle-ci défile automatiquement jusqu’à cette rubrique.
Figure 11
Exemple : Vous souhaitez créer une page longue «Comment venir» dans laquelle l’utilisateur retrouvera toutes les informations pour se rendre dans votre structure, en fonction de son mode de transport (en voiture, en train, en avion...), sous la forme de rubriques dédiées. Il vous suffit de créer votre contenu sous la forme de blocs successifs et ensuite de venir placer une ancre devant chaque titre de rubrique. Pour nommer l’ancre, vous pouvez assez simplement reprendre les titres des rubriques. Ainsi vous aurez une ancre «venir en voiture», une ancre, «venir en train», etc...En front office, en haut de la page «Comment venir», l’internaute aura donc une liste de liens qui pourra prendre la forme suivante : «dans cette page : venir en voiture, venir en train...». En cliquant sur l’un ou l’autre des liens, la page défilera automatiquement jusqu’à l’ancre (invisible en front-office) et sera donc centrée dynamiquement sur la rubrique intéressant l’internaute.
4. Ajout d’un bloc Points d’intérêt
Le bloc «points d’intérêt» possède la même logique de fonctionnement que les blocs «actualités», «agenda» et «formulaire». C’est à dire qu’ils agissent comme des blocs de remontée d’éléments. Ces derniers doivent être créés au préalable dans les onglets dédiés du menu principal.
La logique est en fait simple, si vous insérez un bloc de remontées «points d’intérêt» et que vous n’avez pas créé au préalable de point d’intérêt... Le bloc sera vide.
Figure 12
Le bloc Points d’intérêt prendra une forme spécifique en front-office (généralement cartographique), en fonction de la maquette graphique et ergonomique.
Comme vous le montre la figure 12 ci-contre, lorsque vous cliquez sur le bouton «points d’intérêt», cela a pour effet de créer un bloc de remontées de points d’intérêt directement dans le corps de page. Ce bloc vient se positionner directement sous le dernier bloc créé (ici un bloc agenda).
Dans la figure 13, vous pouvez constater que deux points d’intérêt ont d’ores et déjà été créés dans l’onglet dédié du menu principal.
Figure 13
Figure 14
La figure 14 se concentre sur l’en-tête du bloc «points d’intérêt». À droite de celui-ci se trouvent le bouton de redimensionnement du bloc (nous verrons cette fonctionnalité plus avant) ainsi que le bouton permettant la suppression du bloc. Il est à noter que pour cette dernière action, une fenêtre de confirmation apparaîtra, afin d’éviter toute suppression non souhaitée. L’en-tête de bloc est une zone cliquable qui vous permet d’accéder aux paramètres de celui-ci.
La figure 15 montre les paramètres applicables au bloc Points d’intérêt. Il s’agit en fait de filtres par catégorie et/ou par tags. Par défaut, un bloc «points d’intérêt» non paramétré affichera tous les points d’intérêt créées dans l’onglet dédié de TERRITORIUM-CMS.
Figure 15
Exemple 1 : Si vous souhaitez, dans le cas d’une page traitant par exemple du patrimoine industriel de votre territoire, créer une carte thématique ne comportant que les points d’intérêts pertinents, il vous faut filtrer ces remontées en utilisant la catégorie (créée au préalable) «Patrimoine industriel». Si vous souhaitez aller plus loin dans le filtrage et si tant est que vous ayez associé des tags aux points d’intérêt que vous avez créés, vous pouvez coupler le tri par catégorie à un tri par tags en ajoutant dans le champ tags : «Site en service, ouvert à la visite». Ce faisant, la carte ainsi créée n’affichera que les points d’intérêts étant classées dans la catégorie «Patrimoine industriel» et ayant la particularité d’être des sites toujours en service et accueillant des visiteurs (si correctement tagués) .Exemple 2 : Si vous souhaitez, dans le cas d’une page «carte interactive», faire remonter tous les points d’intérêt, vous allez laisser le champ «Filtrer par catégorie» dans son état initial : «Toutes les catégories». Si vous souhaitez par exemple restreindre cette carte aux seuls sites du département du Rhône et si tant est que vous ayez associé des tags aux points d’intérêt que vous avez créés, vous pouvez opérer un tri par tags en ajoutant dans le champ tags «Rhône». Ce faisant dans la carte interactive ne remonteront que les événements étant tagués «Rhône», quel que soit leur catégorie.
5. Ajout d’un bloc code brut (embed)
Le bloc «code brut» vous permet d’insérer du contenu externe, hébergé sur un autre support, comme une vidéo Youtube, une publication Calaméo ou encore une Google Maps spécifique, directement dans le corps de votre page.
Ce procédé permet notamment l’intégration d’une iframe. L’iframe est en quelque sorte une fenêtre, intégrée directement dans votre page et qui pointe directement vers une ressource externe.
Figure 16
Exemple : Si vous souhaitez intégrer une vidéo hébergée sur Youtube, il faut d’abord trouver son code d’intégration. Comme l’illustre la figure 24, il vous suffit de cliquer le bouton «partager» puis «intégrer» pour obtenir le code suivant : <iframe width=“560“ height=“315“ src=“https://www.youtube.com/embed/Anxxfo7C0N0“ frameborder=“0“ allowfullscreen></iframe>.
Il vous suffit alors de copier ce lien et de le coller dans le bloc «embed» sous TERRITORIUM-CMS. Attention cependant, si vous souhaitez que la vidéo prenne des proportions spécifiques, il faudra modifier deux éléments du code : la propriété «width» et la propriété «height». La propriété «width», correspond à la largeur de l’élément. Pour une meilleur gestion du responsive, nous vous conseillons de la fixer à 100%. Ainsi vous remplacez «width=“560“» par «width=“100%“».
La propriété «height» correspond quant à elle à la hauteur de l’élément. Comme pour la largeur, sa valeur est exprimée par défaut en pixels. N’hésitez pas à la modifier en conservant cette unité pour donner le ratio voulu à votre élément.
Comme pour les autres éléments, lorsque vous cliquez sur le bouton d’ajout d’un code brut, le bloc apparait juste en dessous du dernier bloc créé dans le corps de la page. Une fois le code modifié comme expliqué dans l’exemple ci dessus, vous obtenez donc l’intégration illustrée dans la figure 17.
Figure 17
6. Ajout d’un fichier à télécharger
Avec TERRITORIUM-CMS, vous pouvez intégrer un fichier à télécharger dans n’importe quelle page et ce, à l’emplacement de votre choix. Pour ce faire, il vous suffit de cliquer sur le bouton «fichier à télécharger». Au clic, vous accédez directement à l’arborescence de votre ordinateur pour sélectionner le fichier à mettre en ligne (voir figure 18).
Figure 18
Une fois le fichier sélectionné, le bloc prendra l’état illustré dans la figure 19. En cliquant sur l’en-tête du bloc (cf figure 20), vous pouvez associer une image d’aperçu au document (généralement l’image de couverture). C’est elle qui symbolisera graphiquement le document en front-office.
Figure 19
Figure 20
7. Ajout d’un formulaire
Le bloc «formulaire» vous permet d’intégrer un formulaire déjà créé par l’équipe de développement. Il vous est donc possible de mobiliser un même formulaire dans différentes pages de votre site internet. Au clic, le bloc apparait juste en dessous du dernier bloc créé dans le corps de la page. Par défaut, aucun formulaire ne remonte à l’intérieur comme l’illustre la figure 21.
En cliquant sur l’en-tête du bloc, vous pouvez sélectionner un formulaire parmi ceux déjà créés. Dans la figure 22, vous pouvez voir que seul le formulaire «contact» est disponible. L’adresse qui suit le nom du formulaire entre parenthèses est l’adresse du destinataire du formulaire.
Figure 21
Figure 22
8. Ajout d’une Galerie d’images
Le bloc «galerie d’images» vous permet de créer un bloc accueillant plusieurs images afin de les présenter sous forme de galerie. La forme exacte en front-office sera héritée de la maquette graphique et ergonomique (carrousel, mosaïque...).
Au clic, le bloc apparait juste en dessous du dernier bloc créé dans le corps de la page. Par défaut, aucune image ne remonte à l’intérieur comme l’illustre la figure 23.
En cliquant sur l’en-tête du bloc, vous faites apparaître la mention «ajouter une image» (figure 24). Au clic, apparait l’arborescence de fichiers de votre ordinateur. Vous pouvez alors sélectionner une image à intégrer, et répéter l’opération autant de fois que nécessaire afin d’alimenter votre galerie. Dans la figure 25, vous pouvez observer que la galerie créée en exemple comprend 4 images.
Figure 23
Figure 24
Figure 25
9. Ajout d’une image
Contrairement au bloc «galerie d’images», le clic ouvre directement une fenêtre du navigateur des fichiers de votre ordinateur, vous invitant à sélectionner une image. Cette image s’affiche alors dans le bloc image directement sous le dernier bloc créé dans le corps de page, comme le montre la figure 26.Figure 26
Figure 27
En cliquant sur l’en-tête du bloc vous pouvez, comme illustré dans la figure 26, en modifier la légende (sous l’image) cacher cette légende (puce à cocher au dessus de l’image). Il est impératif, pour des soucis d’accessibilité et de référencement, d’associer systématiquement une légende à une image, qu’elle soit cachée ou non. La légende correspond en effet à la balise alt, essentielle aux lecteurs d’écran et aux robots des moteurs de recherche pour indexer tous les contenus de votre page.
Vous pouvez également rendre l’image cliquable en lui associant un lien vers une page (du site ou d’un autre site).
10. Ajout d’un séparateur
Le bloc «séparateur» a vocation à créer un filet de séparation horizontal afin de structurer visuellement votre page. Au clic, un séparateur (dont la forme en front office sera spécifique à la maquette ergonomique et graphique de votre projet) vient se placer directement sous le dernier bloc créé dans le corps de page (cf figure 28).
Figure 28
Ajout d'un bloc texte riche
11. Ajout d’un bloc de texte riche
Le bloc «texte riche» vous permet concrètement d’ajouter du contenu textuel à votre page. Au clic, le nouveau bloc de texte riche vient se positionner directement sous le dernier bloc créé dans le corps de page comme l’illustre la figure 29. Par défaut, le bloc est directement en mode édition.
Figure 29
Vous pouvez directement taper du texte, sans toucher votre souris, ou bien coller du texte précédemment copié d’une source tierce (logiciel de traitement de texte, bloc note...). Il est à noter que TERRITORIUM-CMS nettoie automatiquement toute mise en forme précédemment appliquée au texte (police, italique, liste, etc...).
Ainsi, lorsque vous écrivez ou collez un texte dans le champ de saisie du bloc «texte riche», vous obtenez un résultat semblable à celui présenté dans la figure 30.
Figure 30
Vous pouvez par la suite appliquer une mise en forme à tout ou partie du texte. Pour ce faire, il vous suffit de mettre une partie du texte en surbrillance et de lui appliquer un des outils disponible dans l’en-tête de bloc, comme détaillé dans la figure 31.
Figure 31
Dans la figure 31, vous pouvez observer que le texte est identique à celui de la figure 30 mais qu’il a été mis en forme grâce aux outils du bloc texte riche :
- la première ligne constitue à présent un titre (considéré comme un titre de niveau H2 en terme de référencement)
- la seconde, un texte non mis en forme
- la troisième, un texte en Gras
- la quatrième, un texte en italique
- les cinquième, sixième et septième, sont mises en forme sous forme de liste
- la dernière, enfin, comprend un lien cliquable.
A présent que nous avons étudié l'ensemble des contenus mobilisables, nous allons pouvoir découvrir la façon de les agencer dans le corps de page dans la partie traitant de ce sujet.