Le dimensionnement des Blocs
Il est possible de modifier les dimensions d’un bloc Section, Ligne, colonne, ou Module, de manière visuelle par glisser déplacer, ou en en éditant les Paramètres du Bloc.
Dimensionnement des marges par glisser déplacer
Pour ajuster la marge supérieure, inférieure, gauche ou droite d’un bloc, passez la souris vers l’un des bords afin de permettre au pointeur de se transformer en icône déplacer
- Déplacez légèrement la flèche à l’extérieur du Bloc, de manière à augmenter ou réduire les Marges externes d’une Section, d’une Ligne ou d’un Module.
- Déplacez légèrement la flèche à l’intérieur du Bloc de manière à augmenter ou réduire les Marges internes d’une Section, d’une Ligne ou d’un Module.
Dimensionnement des marges depuis les Paramètres du Bloc
Depuis l’onglet Style des Paramètres du Bloc :
- Cliquez sur le volet Espacement
- Ajuster les différentes marges en saisissant une valeur dans les champs appropriés.
- Ou ajuster les différentes marges en déplaçant les flèches vers la droite ou vers la gauche.
Modification de la taille d’un Bloc par glisser déplacer
Pour augmenter ou diminuer la taille d’un Bloc, passez la souris vers l’un des bords, afin de permettre au pointeur de se transformer en icône flèche double barre
Attention, il est important de noter avant toute modification, que tout agrandissement ou rétrécissement d’un bloc parent entraine l’agrandissement ou le rétrécissement du bloc enfant. (Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.)
- Déplacez la flèche double barre de manière à agrandir ou diminuer la taille d’une Section, d’une Ligne ou d’un Module.
Modification de la taille d’un Bloc depuis les Paramètres
Depuis l’onglet Style des Paramètres du Bloc, il est possible de modifier la largeur ou la hauteur d’un Bloc :
- Cliquez sur le volet Dimensionnement
- Modifiez la taille en saisissant une valeur dans les champs Largeur ou/et Hauteur, ou en utilisant les curseurs.
- La Largeur (maximale) ou Hauteur correspond à la largeur ou hauteur du bloc.
- La largeur maximale ou Hauteur minimum, maximum correspond à la largeur ou hauteur que le bloc ne pourra pas dépasser en fonction de la taille et la résolution de l’écran.
Dimensionnement des colonnes
Un bloc ligne peut être composé d’une ou plusieurs colonnes. Il est possible de redimensionner les colonnes depuis la fenêtre des propriétés.
Espacement des colonnes d’une Ligne
Depuis la fenêtre des Paramètres de la Ligne, de l’onglet Style, volet Dimensionnement, il est possible de :
Personnaliser la largeur de la gouttière :
- Dans Utilisation Personnalisée de Gouttière, cliquez sur Oui
- Dans Espacement des colonnes, cliquez sur les flèches ou utilisez le curseur pour choisir la valeur d’espacement souhaitée, de 1 à 4.
Harmoniser les hauteurs de colonnes.
3. Dans Harmoniser les hauteurs de colonnes, cliquez sur Oui.
Redimensionner une colonne
Depuis la fenêtre des Paramètres de la Ligne :
- Dans l’onglet Contenu, cliquez sur l’icône engrenage pour afficher les Paramètres de la colonne à redimensionner
- Cliquez sur sur l’onglet Avancé.
- Cliquez sur le volet Personnaliser CSS.
- Dans Élément principal saisissez la lageur/ hauteur souhaitée.
Le positionnement Fixe, Absolu et Relatif
Le positionnement des Blocs est une fonction disponible pour tous types de Blocs dans une Page : Section, Ligne, Colonne et Module. Il existe quatre types de positionnement :
- Défaut
- Relatif
- Absolu
- Fixe
Cette propriété est accessible depuis les Paramètres de tout type de Bloc.
- Cliquez sur l’onglet Avancé
- Cliquez sur le volet Poste
- Dans Poste, cliquez sur la liste déroulante et sélectionnez le type de positionnement souhaité.
Le positionnement Défaut
La position Défaut permet au Bloc d’avoir la position telle que définie avec l’Editeur visuel. Le Bloc gardera cette position tout au long du défilement de la Page.
Le positionnement Fixe
Le Bloc avec une position Fixed sera toujours affiché au même endroit dans le navigateur, lors du défilement de la Page. Le type de positionnement Fixed permet, par exemple, d’afficher un Menu.
- Sélectionnez le type de positionnement Fixed
- Dans Location, choisissez l’emplacement de départ du Bloc, haut, milieu, droite ou gauche.
À l’aide des curseurs ou en saisissant une valeur dans les champs :
3. Vertical Offset permet de déplacer le Bloc à la verticale.
4. Horizontal Offset permet de déplacer le Bloc à l’horizontale.
5. La propriété Z Index gère la profondeur. Elle permet de gérer la superposition des Blocs.
Le positionnement Relatif
La position Relative permet de décaler le Bloc par rapport à lui même.
- Sélectionnez le type de positionnement Relative
- Offset Origin permet de choisir à partir de quel coin le Bloc est décalé. Les ajustements de décalage vertical et horizontal seront affectés en fonction de l’origine du décalage de l’élément.
- Vertical Offset permet de déplacer le Bloc à la verticale.
- Horizontal Offset permet de déplacer le Bloc à l’horizontale.
Le positionnement Absolu
La position Absolute permet de définir un décalage par rapport au conteneur du Bloc. Le Bloc est décalé par rapport à sa position d’origine et défile avec la Page.
- Le conteneur d’un Module est une Colonne
- Le conteneur d’une Colonne est une Ligne
- Le conteneur d’une Ligne est une Section
- Le conteneur d’une Section est une Page
L’élément absolument positionné flottera à l’intérieur de ses éléments parents.
- Sélectionnez le type de positionnement Absolute
- Dans Location, choisissez l’emplacement de départ du Bloc, haut, milieu, droite ou gauche.
- Vertical Offset permet de déplacer le Bloc à la verticale.
- Horizontal Offset permet de déplacer le Bloc à l’horizontale.
- La propriété Z Index gère la profondeur. Elle permet de gérer la superposition des Blocs.
- L’icône Drag permet de déplacer le bloc sans éditer ses paramètres.