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 figure 1.
Une fois un premier contenu créé, vous verrez apparaitre deux boutons d'ajout de blocs. Positionnés en haut et en bas de page, ils permettent de créer vos nouveaux blocs en haut, ou en bas de page.
Bouton d'ajout de blocs
Figure 1 : Les différents blocs mobilisables
1. Ajout d’un bloc de texte riche
Le bloc « texte riche » vous permet d’ajouter du contenu textuel à votre page. Au clic, le nouveau bloc de texte riche apparait dans le corps de page comme l’illustre la figure 2. Par défaut, le bloc est directement en mode édition.
Figure 2
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 3.
Figure 3
Mise en forme du texte
Vous pouvez par la suite appliquer une mise en forme à tout ou partie du texte. Pour ce faire, il vous suffit de sélectionner une partie du texte qui apparaît en surbrillance et de lui appliquer un des outils disponibles dans l’en-tête de bloc, comme détaillé dans la figure 4.Figure 4
Dans la figure 4, vous pouvez observer que le texte est identique à celui de la figure 3 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é) (bouton 1)
- la seconde, un sous titre (considéré comme un titre de niveau H3 en matière de référencement et d'accessibilité) (bouton 2)
- la troisième un texte non mis en forme (bouton 3)
- la quatrième, un texte en gras (bouton 7)
- la cinquième, un texte en italique (bouton 8)
- les sixième, septième et huitième, sont mises en forme sous forme de liste (bouton 4)
- la neuvième, comprend un lien cliquable (bouton 9). Pour annuler un lien cliquable, utilisez le bouton 10.
- 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) (bouton 6). Pour annuler ce décalage, utilisez le bouton 5.
2. Ajout d'une image
Le bouton Image permet d'ajouter une image dans votre page. Le clic ouvre directement une fenêtre du navigateur des fichiers de votre ordinateur, vous invitant à sélectionner une image. Sélectionnez votre image et appuyez sur le bouton Transférer. Cette image s’affiche alors dans le bloc image directement sous le dernier bloc créé dans le corps de page.
Figure 5
En cliquant sur l'image, vous pouvez modifier ses paramètres (figure5).
- En premier lieu, vous pouvez ajouter une légende à l'image (bouton 1). Vous pouvez rendre cette légende visible aux utilisateurs ou la masquer (bouton 5). 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 modifier l'image d'un bloc image en cliquant sur le bouton 2. Les paramètres associés à l'image sont conservés (position et taille du bloc, lien de l'image et légende) mais le visuel est modifié.
- Vous pouvez également rendre l’image cliquable en lui associant un lien vers une page (du site ou d’un autre site). Pour cela, utilisez le bouton 3. Le bouton 4 permet de supprimer le lien de l'image.
3. 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...). Par défaut, la galerie nouvellement créée ne comprend aucune image. Cliquez sur la galerie pour pouvoir la paramétrer.
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 6.
Figure 6
En cliquant sur le bloc, vous faites apparaitre la mention « ajouter une image » figure 7. Cliquez sur Ajouter une image, l’arborescence de fichiers de votre ordinateur apparait. 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 8, vous pouvez observer que la galerie créée en exemple comprend 4 images.
Figure 7
Figure 8
4. 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 9).
Figure 9
Une fois le fichier sélectionné, le bloc prendra l’état illustré dans la figure 10. En cliquant sur l’en-tête du bloc (cf figure 11), 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 10
Figure 11
5. 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 12.
En cliquant sur l’en-tête du bloc, vous pouvez sélectionner un formulaire parmi ceux déjà créés. Dans la figure 13 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 12
Figure 13
6. Ajout d’une Sous-page.
Le bloc « sous-pages » permet de faire remonter une ou plusieurs sous-pages sur une page parent.
Pour pouvoir créer une remontée de sous-pages, il faut que les sous-pages soient existantes. Pour cela, créer une nouvelle page, et utiliser le menu Rattacher à, pour choisir la page parente.
La sous-pages doit être publiée pour apparaitre dans les choix de sous-pages à afficher.
La forme de la remontée en front office sera spécifique à la maquette ergonomique et graphique de votre projet.
Dans l'exemple de la figure 14, la page parente est la page Les types de Patrimoines. Sur cette dernière remonte 3 de ses sous-pages qui sont, le Patrimoine immatériel, le Patrimoine bâti, et le Patrimoine naturel.
Figure 14
7. 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 15).
Figure 15
8. 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 15
Dans la figure 15 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. Lors de sa création, l'ancre est par défaut en mode édition et vous invite à renseigner un titre.
Dans la figure 16, 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’à cliquer sur le lien correspondant en haut de page pour que celle-ci défile automatiquement jusqu’à cette rubrique.
Figure 16
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.
9. Ajout d’un bloc code brut
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.
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
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 18, il vous suffit de cliquer sur 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.
Figure 18
À 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 mise en forme du corps de page.