Le panneau de conception s'affiche à droite du mode flexible et contient les propriétés de conception de l'élément sélectionné (section, colonne, widget, boîte flexible ou grille avancée). Chaque élément possède des propriétés différentes, ajustables dans le panneau de conception. Les propriétés de conception varient donc selon l'élément sélectionné. Les propriétés incluent l'alignement, la disposition, l'espacement, le dimensionnement, etc., selon l'élément sélectionné.
Pour ouvrir le panneau de conception, cliquez sur un élément en mode flexible, puis sur Conception . Le panneau de conception s'ouvre à droite du mode flexible afin de ne pas gêner la visualisation et la modification de votre conception. Vous pouvez également cliquer sur l' icône « Modifier la conception » dans le menu flottant. Après avoir fermé le panneau de conception, vous pouvez le rouvrir en cliquant sur l' icône « Modifier la conception » en haut à droite.
Termes de conception
Voici les termes de conception et les abréviations utilisés dans le panneau de conception :
- Px. Le pixel est une unité de mesure qui reste la même quelle que soit la taille de l'appareil. Par exemple, un bouton de 280 px aura la même taille sur mobile que sur tablette ou ordinateur.
- La largeur de la fenêtre d'affichage (Vw) est une unité basée sur la largeur de l'écran (viewport) sur lequel le site est visualisé. Par exemple, 10 Vw signifie que l'élément sera redimensionné pour occuper 10 % de la largeur de l'écran.
- Vh. La hauteur de la fenêtre d'affichage est une unité basée sur la hauteur de l'écran (fenêtre d'affichage) sur lequel le site est visualisé. Par exemple, 25 Vh signifie que l'élément sera redimensionné pour occuper 25 % de la hauteur de l'écran.
- %. Pourcentage du conteneur (section, colonne, boîte flexible ou grille avancée) occupé par l'élément. Par exemple, si la taille d'un élément est de 10 %, il sera redimensionné pour occuper 10 % du conteneur dans lequel il se trouve.
- A. Unité de mesure automatique déterminée par la hauteur du contenu.
Aligner
Disponible pour les éléments individuels à l'intérieur d'une colonne ou d'une flexbox. Avec la mise en page automatique verticale, les éléments individuels à l'intérieur d'une colonne ou d'une flexbox verticale peuvent être alignés à gauche, au centre, à droite ou étirés horizontalement pour s'adapter à 100 % de la largeur du conteneur.
Note :
Les éléments peuvent également être alignés à partir du menu flottant en cliquant sur l'icône Aligner ( 
).
Mise en page
Disponible uniquement pour les sections et modifiable uniquement depuis le point d'arrêt principal du bureau. Activer permet au contenu d'occuper toute la largeur de l'écran. Désactiver permet au contenu d'occuper jusqu'à 1 200 pixels. Par défaut, le fond perdu est désactivé .
Aligner les éléments
Permet d'aligner verticalement plusieurs éléments simultanément dans une colonne ou une boîte flexible. Dans l'éditeur classique, les éléments ne peuvent être alignés qu'individuellement et horizontalement. L'alignement vertical est utile car il maintient la position des éléments cohérente entre tous les points d'arrêt sans ajustement supplémentaire. Pour plus d'informations, consultez
la section « Alignement et espacement flexibles » .
Mise en page automatique
Permet de choisir si les éléments des colonnes et des boîtes flexibles sont automatiquement alignés horizontalement ou verticalement. Par défaut, les éléments sont alignés verticalement. Ils ne peuvent être déplacés que dans le sens de l'alignement automatique. Par exemple, si les éléments sont alignés verticalement, vous ne pouvez les déplacer que verticalement, et non horizontalement. L'alignement automatique garantit que votre conception est optimisée pour correspondre à tout point d'arrêt.
Envelopper
Disponible pour les colonnes et les boîtes flexibles uniquement lorsque l'option Horizontale est sélectionnée pour la mise en page automatique. L'option Envelopper permet aux éléments à l'intérieur de la colonne ou de la boîte flexible de conserver leurs dimensions et de s'envelopper lorsque la largeur de l'écran change.
Aligner les lignes
Disponible pour les colonnes et les boîtes flexibles uniquement lorsque l'option « Renvoi à la ligne » est sélectionnée pour la mise en page automatique. Permet de définir l'alignement des lignes dans une colonne ou une boîte flexible. Ce paramètre n'affecte pas l'alignement des éléments à l'intérieur des lignes, mais uniquement les lignes elles-mêmes.
Espacement
Espace entre les éléments
Permet de définir l'espace entre les colonnes ou les widgets en une seule fois. Cette option s'applique à toutes les colonnes d'une section ou à tous les widgets d'une colonne. Pour les colonnes, si la propriété automatique est définie sur verticale, l'espace entre les widgets est mesuré en pixels. Si la disposition automatique est définie sur horizontale, l'espace entre les widgets est mesuré en pourcentage. Cette propriété ne s'applique pas aux éléments situés dans des boîtes flexibles ou des grilles avancées.
Définir les marges et le remplissage
Les marges sont l'espace entre la bordure de l'élément et le bord de la section, de la colonne, de la flexbox ou de la grille avancée dans laquelle il est contenu.
Le remplissage correspond à l'espace intérieur de l'élément. Cliquez sur la marge ou le numéro de remplissage pour saisir une nouvelle valeur, puis utilisez le menu déroulant pour sélectionner l'unité de mesure (px, %, vh ou vw). Par défaut, l'espacement horizontal est mesuré en pourcentages et l'espacement vertical en pixels.
Par exemple, si vous sélectionnez une colonne et définissez la marge intérieure gauche à 5 px, cela ajoutera 5 px d'espace entre le bord gauche de la colonne et le bord extérieur des éléments à l'intérieur. Si, pour cette même colonne, vous définissez la marge gauche à 5 px, cela ajoutera 5 px d'espace entre le bord de la colonne et le bord de la section qui la contient.
Réinitialiser le remplissage ou la marge
Lorsque vous cliquez dessus dans le panneau de conception ou dans le menu flottant, le remplissage ou les marges de l'élément sélectionné sont réinitialisés à zéro.
Taille
Selon l'élément sélectionné, vous pouvez ajuster la hauteur et la largeur, ainsi que les valeurs maximales et minimales. En mode flexible, la hauteur peut être mesurée en px, vh, pourcentage et A. Cependant, la hauteur des colonnes flexibles et l'espacement entre elles ne peuvent être mesurés qu'en pourcentage.
Note :
Les unités de taille par défaut sont différentes pour chaque élément. Par exemple, les zones de texte ont une largeur de 100 % et les boutons une largeur de 280 px.
Pour les sections, seule la hauteur est modifiable. La largeur de la section est définie par l'appareil, tandis que la largeur du contenu est définie par le paramètre Largeur du contenu dans la conception globale. Pour les colonnes, seule la largeur est modifiable, tandis que la hauteur est définie par la hauteur de la section ou par ses éléments internes. Pour les boîtes flexibles et les widgets, vous pouvez définir la hauteur et la largeur, ainsi que leurs valeurs minimales et maximales. N'importe quelle unité de taille peut être utilisée.
Animation et arrière-plan
Panneau de conception pour les grilles avancées
Les grilles avancées disposent de propriétés de panneau de conception qui ne sont pas disponibles pour les autres types d'éléments, en raison de la possibilité de créer des compositions libres et des éléments superposés. Nous vous recommandons de vérifier votre conception à différents points d'arrêt.
Aligner
Les éléments individuels d'une grille avancée peuvent être alignés et étirés dans n'importe quelle direction car ils ne sont pas limités par la disposition automatique.
Commande
Dans la section Disposition du panneau de conception, cette propriété est utilisable uniquement lorsqu'une grille avancée contient plusieurs éléments. Elle permet de placer un élément sélectionné au premier plan, en avant, en arrière ou à l'arrière. Pour plus d'informations, consultez la section
Créer des éléments superposés dans Flex .
Réorganiser la mise en page
Vous permet de sélectionner la manière dont les colonnes et les lignes sont disposées dans la grille avancée pour créer une mise en page.
Personnaliser la mise en page
Utilisez les menus déroulants pour sélectionner le nombre de colonnes et de lignes de votre grille avancée. Vous pouvez également utiliser le champ « Écart » pour spécifier l'espacement entre les colonnes. L'espacement des colonnes peut être défini en pixels ou en vw, et celui des lignes en pixels ou en vh.
Épingle
Permet de définir la position de l'élément dans la grille. Une fois définie, l'élément restera à la même position même si la taille de la grille est modifiée.
Emplacement de la grille
Disponible pour les éléments des grilles avancées divisées en colonnes et/ou en lignes afin de créer une mise en page. Il indique la position de l'élément sur la grille.
Gardez les proportions
Lorsque cette option est activée, elle garantit que les éléments à l'intérieur d'une grille avancée conservent leurs proportions même lorsque la taille de la grille change.
Note :
Le widget Image contient également une option « Conserver les proportions », qui conserve ses proportions d'origine.