Dans la partie traitant des contenus mobilisables, nous avons vu que le corps d'une page créée avec TERRITORIUM-CMS pouvait intégrer une multitude de contenus médias et textuels différents.
Dans cette partie, nous procédions simplement en ajoutant un bloc sous l'autre du haut vers le bas.
Il est pourtant possible d'opérer des mises en page complexes et ce qu'il s'agisse d'une page, d'un POI ou d'un événement. Pour ce faire, nous allons utiliser l'outil de redimensionnement des blocs situé en haut à droite et la poignée positionnée en haut à gauche de chaque bloc de contenus, comme illustré dans la figure 1.
Figure 1
1. Redimensionner les blocs varier la mise en page
Figure 2
L'outil de redimensionnement de bloc présenté dans la figure 2 fonctionne avec des pourcentages pour unité. Il s'agit là de pourcentages de largeur de corps de page.
Par défaut, lorsque vous créez un nouveau bloc, celui-ci occupe 100% de la largeur de corps de page et vient se positionner sous le bloc précédemment créé ou tout en haut du corps de page si il s'agit du premier bloc créé.
Pour en saisir le fonctionnement, il faut imaginer que votre page fonctionne avec une logique de quadrillage dont le nombre et la largeur des colonnes sont paramétrés par vous (et par ligne). A contrario, la hauteur des lignes s'adapte automatiquement au contenu du bloc.
Exemple 1 : Si vous créez 3 blocs et laissez la largeur à 100%, votre corps de page sera alors composé de 3 lignes et d'une colonne unique.Exemple 2 : Si vous créez 4 blocs à 50%, votre corps de page sera alors composé de 2 lignes et de deux colonnes.Exemple 3 : Si vous créez 2 blocs à 100% puis 1 bloc à 20% et 1 bloc à 80%, vous commencez à appréhender toutes les possibilités que vous offre TERRITORIUM-CMS : Votre corps de page est composé de trois lignes. Les deux premières s'étendent sur une colonne tandis que la dernière est scidée en deux colonnes (de largeur différente). La pages que vous consultés sur la présente documentation en ligne débute par exemple par cette architecture comme vous le montre la figure 3.
Figure 3
Comme vous pouvez le constater dans la figure 3, les lignes se remplissent intelligemment en fonction de la largeur du bloc précédent. Dans notre exemple, le premier bloc fait 100%, imposant donc au second de venir se placer à la ligne en dessous. Il en est de même pour le troisième bloc (le second adoptant également une largeur de 100%). Ce troisième bloc a cependant été réduit à une largeur de 20%. Cette largeur imposée va permettre de placer le quatrième bloc sur la même ligne que le troisième. Cela est rendu possible par le fait que le troisième bloc n'excède pas une largeur imposée de 80% ( 20% + 80% = 100% = Une ligne, tout simplement).
Figure 4
Figure 5
Ainsi, comme nous le montre la figure 4, si le quatrième bloc avait adopté une largeur de 50%, il aurait même été possible d'en ajouter un cinquième de 25% maximum et les trois blocs se seraient retrouvés côte à côte sur la même ligne (5% seraient alors restés vide en bout de ligne).
A contrario, la figure 5 nous montre que si le quatrième bloc avait été d'une largeur supérieure à 80%, il serait passé à la ligne en laissant un espace vide de 80% à côté du bloc de 20% sur la ligne supérieure (20% + 100% = 120% = 2 lignes).
2. Déplacer les blocs pour agencer votre page.
Les poignées mentionnées plus haut servent en fait à déplacer les blocs au sein du corps de page. Pour ce faire, il vous suffit de cliquer sur la poignée et de maintenir la pression pour effectuer un "glisser-déposer". Lorsque vous vous saisissez d'un bloc par sa poignée, l'ensemble du corps de page effectue un zoom arrière afin de vous faciliter le déplacement en vous offrant une vue plus vaste sur le contenu de votre page. La vidéo ci-dessous illustre cette fonctionnalité et la réaction de l'interface en cas de déplacement d'un bloc.
3. Quelle est l'incidence de de mes choix de mise en page sur le support visible par le visiteur ?
Il faut retenir que quels-que-soient vos choix dans la console d'administration, ceux-ci représentent des intentions de mise en page pour l'affichage de votre site sur un écran d'ordinateur. Ils n'ont pas de valeur absolue et seront toujours conditionnés aux choix opérés lors de la conception de la maquette et de l'interface du front-office.
Figure 6
Figure 7
Figure 8
Il est par ailleurs important de garder en mémoire que les interface front pilotées par TERRITORIUM-CMS sont généralement conçues en responsive. Ce faisant, vos intentions de mise en page ne pourront être respectées quel que soit le format d'écran. Les figures 6, 7 et 8 ci-dessus vous montrent par exemple l'évolution de la mise en page en fonction du support.
- La figure 6 représente la page côté console d'administration
- La figure 7 reprend la même page en front-office sur un écran d'ordinateur (les intentions énoncées par l'auteur ont été majoritairement conservées)
- La figure 8 illustre la même page en front-office mais cette fois-ci sur smartphone (les intentions de l'auteur ne sont plus prises en compte afin d'assurer une lisibilité optimale du contenu sur périphérique mobile).
La présente documentation étant conçue sous TERRITORIUM-CMS, vous pouvez observer un comportement identique si vous redimensionnez la fenêtre de votre navigateur.
Comme vous pouvez le noter sur ces exemples, ne perdez pas de temps à équilibrer les colonnes dans la console d'administration. La vue que vous obtenez dans celle-ci ne reflète pas la réalité puisqu'en front office, le texte est mis en forme avec des polices, des tailles, des casses, des interlignages et des alignements qui ne sont pas ceux du back-office. Si vous souhaitez optimiser l'affichage de votre page pour les écrans d'ordinateur, ouvrez un second onglet avec la page en front office. Cela vous permettra de vous rendre compte de l'aspect final de votre travail.