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 qu'un certain nombre d'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 liste de pages
Le bloc « liste de pages » possède la même logique de fonctionnement que les blocs « actualités », « 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 de pages et que vous n’avez pas créé au préalable de pages... Le bloc sera vide.
Figure 6
Le bloc Liste de pages 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 « Liste de pages », cela a pour effet de créer un bloc de remontées de pages 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 que plusieurs pages ont d’ores et déjà été créés dans l’onglet dédié du menu principal.
Figure 7
Figure 8
La figure 8, se concentre sur l’en-tête du bloc « Liste de pages ». À 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 « Liste de pages ». Il s’agit en fait de filtres par catégorie et/ou par tags. Par défaut, un bloc Liste de pages non paramétré affichera toues les pages créées dans l’onglet dédié de TERRITORIUM-CMS.
Figure 9
3. 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 10
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 10, 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 11, vous pouvez constater que plusieurs événement ont d’ores et déjà été créés dans l’onglet dédié du menu principal.
Figure 11
Figure 12
La figure 12, 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 13 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 13
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.
4. 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 14
Dans la figure 14 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 15, 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 15
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.
5. 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 16
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 16 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 qu'un certain nombre de points d’intérêt ont d’ores et déjà été créés dans l’onglet dédié du menu principal.
Figure 17
Figure 18
La figure 18 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 19 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. Un certain nombre d'autres paramètres peuvent également compléter ces filtres, comme le choix du type de moteur de recherche associé à la carte. Dans la figure 15, un sélecteur permet de choisir le type d'affichage de la remontée : sous forme de carte seule, sous forme de liste seule, sous forme de carte et de liste.
Figure 19
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 », quelle que soit leur catégorie.
6. 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 20
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 20, 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 21.
Figure 21
7. 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 22).
Figure 22
Une fois le fichier sélectionné, le bloc prendra l’état illustré dans la figure 23. En cliquant sur l’en-tête du bloc (cf figure 24), 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. Vous pouvez également modifier le titre du document pour vous assurer de sa cohérence en front office.
Figure 23
Figure 24
8. 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 apparaît 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 25.
En cliquant sur l’en-tête du bloc, vous pouvez sélectionner un formulaire parmi ceux déjà créés. Dans la figure 26, 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 25
Figure 26
9. 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 27.
En cliquant sur l’en-tête du bloc, vous faites apparaître la mention « ajouter une image » (figure 28). 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 29, vous pouvez observer que la galerie créée en exemple comprend 4 images.
Figure 27
Figure 28
Figure 29
10. 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 30.Figure 30
Figure 31
En cliquant sur l’en-tête du bloc vous pouvez, comme illustré dans la figure 31, 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).
11. 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 32).
Figure 32
12. 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 33. Par défaut, le bloc est directement en mode édition.
Figure 33
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 34.
Figure 34
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 35.
Figure 35
Dans la figure 35, vous pouvez observer que le texte est identique à celui de la figure 34 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 matière de référencement et d'accessibilité)
- la seconde, un sous titre (considéré comme une titre de niveau H3 en matière de référencement et d'accessibilité)
- la troisième un texte non mis en forme
- la quatrième, un texte en Gras
- la cinquième, un texte en italique
- les sixième, septième et huitième, sont mises en forme sous forme de liste
- la neuvième, comprend un lien cliquable
- la dernière, enfin, présente une indentation (décalage d'un paragraphe vers la droite souvent associé à une mise en forme spécifique en front office : barre verticale bordant le paragraphe sur la gauche = les exemples du présent document sont mis en forme à l'aide de l'indentation et sont donc bordé d'un filet bleu sur la gauche) .
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.