Le panneau Design apparaît sur le côté droit du mode Flex et regroupe toutes vos propriétés de conception pour l'élément sélectionné (section, colonne, widget, Flexbox ou grille avancée). Chaque élément possède des propriétés différentes qui peuvent être ajustées dans le panneau Design, ce qui signifie que les propriétés de conception sont différentes selon l'élément sélectionné. Les propriétés de projet comprennent l'alignement, la mise en page, le dimensionnement, l'espacement, etc., en fonction de l'élément sélectionné.

Pour ouvrir le panneau Design, cliquez sur un élément en mode Flex, puis sur Design. Le panneau Design s'ouvre sur le côté droit du mode Flex afin de ne pas gêner l'affichage et les modifications de votre projet. Vous pouvez également cliquer sur l'icône Modifier le design dans le menu déroulant. Si vous avez fermé le panneau Design, vous pouvez l'ouvrir à nouveau en cliquant sur l'icône Modifier le design dans le coin supérieur droit.

Termes de conception

Voici les termes et les abréviations utilisés dans le panneau Design :

• Px. Le pixel est une unité de mesure qui ne bouge pas quelle que soit la taille de l'appareil. Par exemple, si un bouton est de 280 pixels, il aura la même taille sur mobile que sur tablette ou desktop.

• Vw. La largeur de la fenêtre d'affichage est une unité basée sur la largeur de l'écran (fenêtre d'affichage) sur lequel le site est affiché. Par exemple, 10 Vw signifie que l'élément sera mis à l'échelle pour occuper 10 % de la largeur de l'écran sur lequel il est affiché.
• 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 affiché. Par exemple, 25 Vh signifie que l'élément sera mis à l'échelle pour occuper 25 % de la hauteur de l'écran sur lequel il est affiché.
• %. Pourcentage du conteneur (section, colonne, Flexbox ou grille avancée) que l'élément occupe. Par exemple, si la taille d'un élément est de 10 %, cela signifie que l'élément sera mis à l'échelle pour occuper 10 % du conteneur dans lequel il se trouve.
• R. Unité de mesure automatique qui est déterminée par la hauteur du contenu.

Aligner

Disponible pour les éléments uniques à l'intérieur d'une colonne ou d'une Flexbox. Les éléments individuels situés dans une colonne ou une Flexbox verticale avec mise en page automatique verticale peuvent être alignés à gauche, au centre, à droite ou étirés horizontalement pour s'adapter à 100 % de la largeur de leur conteneur.

Disposition

Fond perdu

Disponible uniquement pour les sections et ne peut être modifié qu'à partir du point d'arrêt principal du bureau. Lorsque c'est activé, cela permet au contenu de s'étendre sur toute la largeur de l'écran. Lorsque c'est désactivé, la largeur du contenu peut atteindre un maximum de 1 200 pixels. Par défaut, le paramètre de fond perdu est défini sur Désactivé.

Pour en savoir plus sur les points d'interruption, consultez l'article Points d'interruption Flex.

Aligner les éléments

Permet d'aligner verticalement plusieurs éléments d'une colonne ou d'une Flexbox à la fois. Dans l'éditeur classique, les éléments ne peuvent être alignés qu'individuellement et horizontalement. L'alignement vertical est utile car il permet de conserver la position des éléments entre tous les points d'interruption sans devoir procéder à des ajustements supplémentaires. Pour plus d'informations, reportez-vous à la rubrique Alignement et espacement dans Flex.

Structure automatique

Permet de choisir si les éléments à l'intérieur des colonnes et des Flexbox sont automatiquement alignés horizontalement ou verticalement. Par défaut, les éléments sont alignés verticalement. Les éléments ne peuvent être déplacés que dans le même sens que l'alignement de la mise en page automatique. Par exemple, si les éléments sont alignés verticalement, vous ne pouvez les déplacer que verticalement et non horizontalement. La mise en page automatique permet de s'assurer que votre projet est optimisé pour correspondre à n'importe quel point d'interruption.

Habiller

Disponible pour les colonnes et les Flexbox uniquement lorsque Horizontal est sélectionné pour la mise en page automatique. Lorsque c'est défini sur Enroulement, cela permet aux éléments situés à l'intérieur de la colonne ou de la flexbox de conserver leurs dimensions et de s'adapter lorsque la taille de l'écran change.

Aligner les lignes

Disponible pour les colonnes et les Flexbox uniquement lorsque l’option Enroulement est sélectionnée pour la mise en page automatique. Permet de définir l'alignement des lignes au sein d'une colonne ou d'une flexbox. Ce paramètre n'affecte pas l'alignement des éléments à l'intérieur des rangées, mais uniquement les rangées elles-mêmes.

Espacement

Espace entre les éléments

Permet de définir l'espace entre les colonnes ou les widgets et et s'applique à toutes les colonnes d'une section ou à tous les widgets d'une colonne. Pour les colonnes, si la propriété de mise en forme automatique est définie sur vertical, l'espace entre les widgets est mesuré en pixels. Si la mise en page automatique est horizontale, l'espace entre les widgets est mesuré en pourcentage. Cette propriété ne s'applique pas aux éléments situés dans des Flexbox 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.

La marge interne est l'espace intérieur de l'élément. Cliquez sur le numéro de marge ou de marge interne pour saisir une nouvelle valeur, puis utilisez le menu déroulant pour sélectionner l'unité avec laquelle l'espace est mesuré (px, %, vh ou vw). Par défaut, l'espacement horizontal est mesuré en pourcentage, et l'espacement vertical en pixels.

Par exemple, si vous sélectionnez une colonne et définissez la marge interne 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 de la colonne. Si, pour cette même colonne, vous définissez la marge de 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 la marge interne ou la marge

Lorsque vous cliquez dans le panneau Design ou sur le menu flottant, la marge interne ou les marges de l'élément sélectionné sont remises à zéro.

Taille

En fonction de l'élément sélectionné, vous pouvez régler la hauteur et la largeur, ainsi que les valeurs maximale et minimale. En mode flex, la hauteur peut être mesurée en px, vh, pourcentage et A. Cependant, la hauteur des colonnes flex et l'espace entre les colonnes ne peuvent être mesurés qu'en pourcentage.

Pour les sections, vous ne pouvez modifier que la hauteur. La largeur de la section est définie par l'appareil, tandis que la largeur du contenu de la section est définie par le paramètre Largeur du contenu dans Thème du site. Pour les colonnes, vous ne pouvez modifier que la largeur, tandis que la hauteur est définie par la hauteur de la section ou par ses éléments internes. Pour les Flexbox et les widgets, vous pouvez définir la hauteur et la largeur, ainsi que les valeurs minimales et maximales pour chacune. Toute unité de taille peut être utilisée.

Animation et arrière-plan

Les propriétés d'animation et d'arrière-plan en mode Flex sont les mêmes que dans l'éditeur classique. Pour en savoir plus sur les propriétés d'animation et d'arrière-plan, reportez-vous aux rubriques Ajouter des animations et Personnaliser l'arrière-plan.

Panneau Design pour grilles avancées

Les grilles avancées possèdent des propriétés de panneau de conception qui ne sont pas disponibles pour les autres types d'éléments car elles réservent la possibilité de créer des compositions libres et des éléments qui se chevauchent. Nous vous recommandons de revoir votre conception à différents points d'interruption.

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 contraints par la mise en page automatique.

Ordre

Dans la section Disposition du panneau Design, cette propriété ne peut être utilisée que lorsqu'il y a plusieurs éléments dans une grille avancée. Permet de mettre un élément sélectionné à l'avant, devant, à l'arrière ou derrière. Pour plus d'informations, reportez-vous à la rubrique Créer une superposition d'éléments dans Flex

Réorganiser la structure

Permet de sélectionner la disposition des colonnes et des lignes dans la grille avancée pour créer une mise en page.

Personnaliser la structure

Utilisez les menus déroulants pour sélectionner le nombre de colonnes et de lignes que vous souhaitez pour votre grille avancée. Vous pouvez également utiliser le champ Intervalle pour spécifier l'espace entre vos colonnes. L'écart entre les colonnes peut être défini en pixels ou en vw et l'écart entre les lignes peut être défini en pixels ou en vh.

ÉPINGLER

Permet de définir la position de l’élément dans la grille. Une fois défini, l'élément restera à la même position même si la taille de la grille change.

Emplacement de la grille

Disponible pour les éléments à l'intérieur des grilles avancées qui ont été divisées en colonnes et/ou en lignes pour créer une mise en page. Cela montre où se trouve l'élément sur la grille.

Conserver les proportions

Lorsque c'est activé, cela 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.