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:

• 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: