La disposition des Blocs dans les Pages

La disposition des Blocs dans les Pages

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    

    1. 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.
    2. 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.
      1 Marges externes    2 Marges internes
      Dimensionnement des marges depuis les Paramètres du Bloc

      Depuis l’onglet Style des Paramètres du Bloc :

      1.  Cliquez sur le volet Espacement
      2. Ajuster les différentes marges en saisissant une valeur dans les champs appropriés.
      3. 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.)

        1. 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 :

        1. Cliquez sur le volet Dimensionnement
        2. Modifiez la taille en saisissant une valeur dans les champs Largeur ou/et Hauteur, ou en utilisant les curseurs.
        3. La Largeur (maximale) ou Hauteur correspond à la largeur ou hauteur du bloc.
        4. 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 :

        1. Dans Utilisation Personnalisée de Gouttière, cliquez sur Oui 
        2. 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 :

            1. Dans l’onglet Contenu, cliquez sur l’icône engrenage pour afficher les Paramètres de la colonne à redimensionner
            2. Cliquez sur sur l’onglet Avancé.
            3. Cliquez sur le volet Personnaliser CSS.
            4. 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.

                1. Cliquez sur l’onglet Avancé
                2. Cliquez sur le volet Poste
                3. 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.

                  1. Sélectionnez le type de positionnement Fixed
                  2. 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.

                  1. Sélectionnez le type de positionnement Relative
                  2. 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.
                  3. Vertical Offset  permet de déplacer le Bloc à la verticale.
                  4. 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.

                  1. Sélectionnez le type de positionnement Absolute
                  2. Dans Location, choisissez l’emplacement de départ du Bloc, haut, milieu, droite ou gauche.
                  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.
                  6. L’icône Drag     permet de déplacer le bloc sans éditer ses paramètres.