Le gestionnaire de mise en page offre la possibilité de créer une mise en page flexible à partir de la collection d'éléments disponibles.
Une mise en page se compose de sections, de grilles et d’éléments qui peuvent être facilement gérés avec la fonctionnalité de glisser-déposer intégrée. It permet la personnalisation de chaque section avec les paramètres de conception, Paramètres responsives, paramètres d'animation et autres.
Structure de mise en page
-
La mise en page basée sur les positions des modules inclut un système de grille responsive qui s’adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille du périphérique ou de la fenêtre d'affichage augmente. Vous pouvez sélectionner le nombre de colonnes désiré dans la grille des colonnes prédéfinies ou créer votre propre disposition de grille personnalisée.
-
L'icône avec des flèches vous permet de modifier la position des lignes en les déplaçant vers le haut ou le bas. Utilisez l'icône plus pour ajouter une nouvelle ligne, puis sélectionnez la structure de colonne et insérez les positions de module en conséquence.
-
Les sections, les lignes et les éléments peuvent être ajoutés, modifiés, copiés et supprimés directement dans le gestionnaire de mise en page.
Gérer la mise en page
Dans la mise en page, une section peut être éditée glissée-déposée, copiée, une nouvelle section peut être ajoutée et une nouvelle ligne peut également être ajoutée dans la section. Nous pouvons également éditer, supprimer et copier une colonne en particulier.
-
Glisser déposer: Cliquez sur l'icône Glisser pour glisser-déposer des rangées / colonnes afin d'organiser votre mise en page.
-
Modifier: cliquez sur l'icône en forme de crayon pour modifier les sections et les rangées.
-
Copier: cliquez sur l'icône Copier pour dupliquer une section, une ligne ou un élément.
-
Supprimer: cliquez sur l'icône poubelle pour supprimer une section, une ligne ou un élément.
-
Nouvelle ligne: Cliquez sur Nouvelle ligne pour ajouter une nouvelle ligne.
-
Nouvelle section: Cliquez sur Nouvelle section pour ajouter une nouvelle section en-dessous de la section ciblée.
Element
Vous pouvez créer de nouveaux éléments en cliquant sur l'icône Ajouter qui apparaît en bas au centre lors du survol de l'élément.
Voici les éléments de cette section:
-
Position de module
-
Zone de composant
-
Messages
-
Bannière
Si vous avez
déjà ajouté une zone de composant ou
de messages auparavant
alors vous
ne serez
pas en mesure de les ajouter à nouveau.
Ajoutez
un élément de message pour afficher les erreurs, les avertissements
et les avis. Si vous ne l'ajoutez pas, vous ne pourrez pas voir les
messages de notification.
Section
Nous pouvons ajouter une nouvelle section en cliquant sur l'option Ajouter une nouvelle section indiquée dans les options au niveau de la ligne ou nous pouvons également ajouter une nouvelle section en cliquant sur le bouton Ajouter une section en bas de la mise en page.
Options d'édition de l'élément et de la section
Les éléments et la section ont les mêmes options d'édition, à savoir Paramètres généraux, Paramètres de design et Paramètres responsive.
-
Paramètres généraux: les paramètres généraux disposent d'options permettant de définir la position du module, le titre, la classe personnalisée et l'ID personnalisé d'un élément.
-
Paramètres de design: dans cet onglet nous avons des options d'animation et de fond personnalisé. Pour activer les options d'arrière-plan, nous devons activer l'option d'arrière-plan personnalisé.
Voici les options pour l'arrière-plan dans les paramètres de design:
|
Option |
Par défaut |
Description |
|---|---|---|
|
Couleur d'arrière-plan |
Aucune |
Définir la couleur d'arrière-plan pour la colonne ciblée |
|
Image d'arrière-plan |
Aucune |
Définir l'image d'arrière-plan pour la colonne ciblée |
|
Répétition de l'arrière-plan |
Héritage |
Définir l'image d'arrière-plan de la colonne ciblée |
|
Sélectionnez une taille pour l'arrière-plan |
Héritage |
Réglez l'affichage de l'image d'arrière-plan. Vous pouvez sélectionner l'une des valeurs suivantes: |
|
Sélectionnez l'attachement d'arrière-plan |
Héritage |
Définir le style d'attachement d'image d'arrière-plan: |
|
Sélectionnez une position d'arrière-plan |
Héritage |
Choisissez la position de l'image d'arrière-plan dans la liste Déroulante. |
|
Vidéo d'arrière-plan |
Aucune |
Définir la vidéo d'arrière-plan pour la colonne ciblée |
-
Paramètres d'animation: Ici vous obtiendrez différentes options d'animation qui permettent d'animer une colonne, une section et un élément particuliers. Vous pouvez définir le délai d'animation qui indiquera un délai pour le début d'une animation.
-
Paramètres responsive: Cela vous permet de contrôler la visibilité des colonnes. Vous pouvez utiliser des points d'arrêt pour définir des dispositions de contenu différentes en fonction de la largeur du périphérique, vous pouvez définir la taille de la colonne sur la disposition de contenu pour vous assurer que votre mise en page est responsive. Et vous pouvez aussi masquer les composants pour les mises en page de périphériques spécifiques.
Voici les options pour Paramètres responsive:
|
Option |
Description |
|---|---|
|
Masquer sur périphériques très petits (Extra-Small) |
Activer pour masquer cette section sur les très petits appareils. |
|
Masquer sur de petits périphériques (Small) |
Activer pour masquer cette section sur les petits appareils. |
|
Activer pour masquer cette section sur les périphériques de taille moyenne (Medium). |
Activer pour masquer cette section sur les périphériques de taille moyenne. |
|
Masquer sur les périphériques larges (Large) |
Activer pour masquer cette section sur les larges périphériques. |
|
Cacher sur des périphériques extra-larges (Extra-large) |
Activer pour masquer cette section sur les appareils très larges. |
