Note
Ce contenu est pertinent à la fois pour le mode Flex dans Classic Editor et Editor 2.0. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
La technologie Flexbox (appelée « flex » en abrégé) est un module de mise en page CSS permettant d'organiser les éléments en sections et en colonnes, leur permettant de s'adapter (augmenter ou réduire) et de s'aligner parfaitement dans un conteneur. Cela vous permet de concevoir des sections réactives, parfaites au pixel près, qui s'adaptent à toutes les tailles d'écran.Si vous utilisez l'éditeur classique, vous pouvez passer en mode Flex pour concevoir avec la technologie Flexbox. Si vous utilisez Editor 2.0, vous utilisez la technologie Flexbox par défaut
Astuce
Cours recommandés par la Duda Academy :
-
Principes de conception de base. Découvrez les quatre piliers du design (image de marque, typographie, couleur et médias).
-
Taille et unités. Découvrez les différentes unités de taille dans le panneau de conception et découvrez quand les utiliser.
-
Principes de mise en page. Découvrez les colonnes et les colonnes intérieures et comment aligner et dimensionner les éléments qu'elles contiennent.
-
Mises en page avec grilles avancées. Apprenez à créer des mises en page complexes à l'aide de grilles avancées
Le panneau de conception s'affiche sur le côté droit du mode Flex et contient vos propriétés de conception pour l'élément sélectionné (section, colonne, widget, colonne intérieure ou grille avancée). Chaque élément possède des propriétés différentes qui peuvent être ajustées dans le panneau de conception, ce qui signifie que les propriétés de conception sont différentes en fonction de l'élément sélectionné. Les propriétés de conception incluent l'alignement, la disposition, l'espacement, le dimensionnement, etc., en fonction de l'élément sélectionné
Pour ouvrir le panneau de conception, cliquez sur un élément en mode Flex, puis cliquez sur Modifier le design (vous n'avez besoin d'être en mode Flex que si vous utilisez l'éditeur classique). Le panneau de conception s'ouvre sur le côté droit du mode Flex afin de ne pas gêner votre capacité à visualiser et à modifier votre conception. Après avoir fermé le panneau de conception, vous pouvez l'ouvrir à nouveau en cliquant sur l'icône du panneau de conception dans le coin supérieur droit.
Le panneau de conception comprend 5 sections : Alignement, Mise en page, Espacement, Taille, Animation et arrière-plan. Vous trouverez ci-dessous une description de chaque section et de ce que vous pouvez accomplir.
Disponible pour des éléments individuels à l'intérieur d'une colonne ou d'une colonne intérieure. Les éléments individuels d'une colonne ou d'une colonne intérieure verticale avec disposition automatique verticale peuvent être alignés à gauche, au centre, à droite ou étirés horizontalement pour s'adapter à 100 % de la largeur de leur conteneur.
Les éléments peuvent également être alignés à partir du menu flottant en cliquant sur Aligner icône ().
Préréglages
Choisissez parmi une disposition prédéfinie les éléments d'une section. Les options incluent l'alignement vertical ou horizontal.
Éléments par ligne
Si votre contenu s'étend sur plusieurs lignes, vous pouvez utiliser le menu déroulant pour sélectionner le nombre d'éléments qui apparaissent par ligne.
Les articles conviennent
S'affiche lorsque vous avez des lignes de contenu et vous permet de définir la façon dont les éléments s'insèrent dans les lignes. Cela peut être utile si vous avez un nombre impair d'articles.
Pleine largeur
Auparavant appelée « fond perdu », la pleine largeur n'est disponible que pour les sections et ne peut être modifiée qu'à partir du point d'arrêt principal du bureau. Lorsque vous basculez surSur, il permet au contenu de s'étendre sur toute la largeur de l'écran. Lorsque cette option est désactivée, la largeur du contenu peut atteindre un maximum de 1920 pixels. Par défaut, le paramètre de pleine largeur est réglé sur Désactivé. Pour en savoir plus sur les points d'arrêt, voir Tailles d'écran et appareils.
Alignement du contenu
Vous permet d'aligner verticalement ou horizontalement plusieurs éléments d'une colonne ou d'une colonne intérieure à la fois. Dans l'éditeur classique, les éléments peuvent uniquement être alignés individuellement et horizontalement. Pour plus d'informations, voir Alignement et espacement.
Aligner les lignes
Vous permet de définir l'alignement des lignes au sein d'une colonne ou d'une colonne intérieure. Ce paramètre n'affecte pas l'alignement des éléments à l'intérieur des lignes, mais uniquement les lignes elles-mêmes.
Pour en savoir plus sur l'espacement, regardez la vidéo suivante :
Espace entre les articles
Vous permet de définir l'espace entre les colonnes ou les widgets une seule fois et cela 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 page automatique est définie sur verticale, 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 pourcentages. Cette propriété ne s'applique pas aux éléments contenus dans les colonnes intérieures ou les grilles avancées.
Définir les marges et le rembourrage
Les marges sont l'espace entre la bordure de l'élément et le bord de la section, de la colonne, de la colonne intérieure ou de la grille avancée dans laquelle il se trouve. Par défaut, les valeurs de marge horizontale et de remplissage sont liées. Si vous ajustez la valeur de gauche, la valeur de droite sera automatiquement mise à jour pour correspondre. Si vous ne souhaitez pas que les valeurs soient liées, cliquez sur l'icône du lien.
Notez que les marges en ligne des éléments situés à l'intérieur des colonnes ou des colonnes intérieures peuvent être ajustées directement sur le canevas. Pour en savoir plus, consultez Espacement extérieur et intérieur.
Le rembourrage est l'espace intérieur de l'élément. Cliquez sur le numéro de marge ou de remplissage pour saisir une nouvelle valeur, puis utilisez le menu déroulant pour sélectionner l'unité dans laquelle l'espace est mesuré (px, %, vh, vw ou A). Par défaut, l'espacement horizontal est mesuré en pourcentages et l'espacement vertical est mesuré en pixels.
Par exemple, si vous sélectionnez une colonne et que vous définissez le remplissage gauche sur 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 sur 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 rembourrage ou la marge
Lorsque vous cliquez dans le panneau de conception ou dans le menu flottant, le remplissage ou les marges de l'élément sélectionné sont remis à zéro.
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 flexibles et l'espace entre les colonnes ne peuvent être mesurés qu'en pourcentage. Pour en savoir plus sur les unités de taille, voir Unités de taille.
Les unités de taille par défaut sont différentes pour chaque élément. Par exemple, par défaut, les zones de texte ont une largeur de 100 %, les boutons d'une largeur de 280 pixels
Pour les sections, vous ne pouvez modifier que la hauteur. La largeur de 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 pouvez uniquement modifier la largeur. La hauteur est définie par la hauteur de la section ou par ses éléments internes. Pour les colonnes intérieures et les widgets, vous pouvez définir la hauteur et la largeur, ainsi que les valeurs minimale et maximale pour chacune d'elles. Toutes les unités de taille peuvent être utilisées.
Les propriétés d'animation et d'arrière-plan en mode Flex sont similaires à celles de l'éditeur classique. Pour en savoir plus sur les propriétés d'animation et d'arrière-plan, voirAjouter des animationsetPersonnaliser l'arrière-plan.
Note
La parallaxe est disponible pour tous les widgets et conteneurs et peut être appliquée à toutes les tailles d'écran. Pour activer la parallaxe, cliquez sur l'image, sélectionnez Modifier le design, faites défiler jusqu'à Contexte section du panneau de conception et ouvrez le Position de l'image menu.
L'option permettant de conserver une image d'arrière-plan statique n'est pas disponible pour les tablettes, les appareils mobiles et Mac OS en raison d'une limitation d'iOS.
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 en raison de la possibilité de créer des compositions freestyle et des éléments qui se chevauchent. Nous vous recommandons de revoir votre design à différents moments.
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 mise en page automatique.
Ordre
Dans la section Disposition du panneau de conception, cette propriété ne peut être utilisée que lorsqu'une grille avancée contient plusieurs éléments. Vous permet de placer un élément sélectionné vers l'avant, vers l'avant, vers l'arrière ou vers l'arrière. Pour plus d'informations, voir Création d'éléments superposés.
Réorganiser la mise en page
Vous permet de sélectionner la manière dont les colonnes et les lignes sont organisées dans la grille avancée pour créer une mise en page.
Personnaliser la disposition
Vous permet de sélectionner la manière dont les colonnes et les lignes sont organisées dans la grille avancée pour créer une mise en page.
Épinglette
Permet de définir la position de l'élément dans la grille. Une fois défini, l'élément reste dans la même position même lorsque la taille de la grille change.
Emplacement du réseau
Disponible pour les éléments figurant dans des grilles avancées qui ont été divisées en colonnes et/ou en lignes afin de créer une mise en page. Il indique où se trouve l'élément sur la grille.
Gardez les proportions
Lorsque vous basculez sur Sur, il garantit que les éléments d'une grille avancée conservent leurs proportions même lorsque la taille de la grille change.
Le widget Image contient également un Gardez la proportion bascule, qui conserve ses proportions d'origine.
Note
Ce contenu est pertinent à la fois pour le mode Flex dans Classic Editor et Editor 2.0. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
Il est essentiel de comprendre et d'utiliser efficacement les unités de taille pour créer des mises en page qui soient non seulement visuellement attrayantes, mais également réactives sur différents appareils et tailles d'écran. Le panneau de conception, situé sur le côté droit du canevas de l'éditeur dans Editor 2.0 ou en mode Flex dans l'éditeur classique, sert de centre de contrôle pour les propriétés de conception des éléments sélectionnés, notamment les sections, les colonnes, les widgets, les colonnes intérieures et les grilles avancées. Cet article passe en revue les unités de taille disponibles dans le panneau de conception et propose des exemples pratiques pour leur utilisation.
En outre, Editor 2.0 permet aux utilisateurs de configurer des unités de taille à partir du point d'arrêt principal (bureau), garantissant ainsi une évolutivité sur toutes les tailles d'écran. Les utilisateurs peuvent ajuster les unités de taille sur les points d'arrêt des tablettes et des mobiles sans affecter les autres points d'arrêt. Pour plus d'informations, voirTailles d'écran et appareils.
Astuce
Cours recommandé par la Duda Academy :
-
Unités de taille. Découvrez les différentes unités de taille dans le panneau de conception et découvrez quand les utiliser.
pourcentage (%) est une unité de taille dynamique qui détermine la proportion du conteneur (section, colonne, colonne intérieure ou grille avancée) occupée par l'élément sur différentes tailles d'écran. En règle générale, les largeurs des éléments flexibles sont définies par défaut en pourcentages. Il est conseillé d'utiliser des pourcentages pour maintenir la cohérence de la conception sur toutes les tailles d'écran sans avoir à ajuster manuellement les pixels à chaque point d'arrêt
Par exemple, le réglage des deux colonnes d'une disposition à deux colonnes sur 50 % de largeur garantit qu'elles seront automatiquement redimensionnées à 50 % sur toutes les tailles d'écran.
Les pourcentages sont utiles pour préserver la taille relative des éléments sur les différentes dimensions de l'écran. Cela signifie que les éléments sont redimensionnés proportionnellement à leur conteneur parent (section ou colonne), ce qui garantit l'uniformité de l'apparence de la mise en page
Par exemple, une image réglée sur 50 % de largeur à l'intérieur d'une colonne occupera toujours la moitié de la largeur de la colonne, quelle que soit la taille de l'écran. Par conséquent, même si la colonne et l'image peuvent sembler plus étroites sur les appareils mobiles que sur les ordinateurs de bureau, l'image conserve sa largeur proportionnelle. De même, la définition du remplissage entre les colonnes à 4 % garantit un espacement constant par rapport aux colonnes et aux autres éléments de l'écran, en s'adaptant aux différentes tailles d'écran.
pixels (px) fournissent une unité de mesure fixe qui n'est pas affectée par les variations de taille de l'appareil. Par exemple, un bouton réglé sur 250 pixels conserve sa taille sur les appareils mobiles, tablettes et ordinateurs de bureau
Cependant, le fait de se fier uniquement aux pixels pour le dimensionnement peut nuire à la réactivité, nécessitant des ajustements manuels à chaque point d'arrêt. Par conséquent, bien que les pixels garantissent la cohérence de la taille des éléments, l'utilisation de pourcentages est recommandée pour promouvoir une conception réactive. Cette approche minimise le besoin d'ajustements de pixels individuels aux points d'arrêt, rationalise le processus de conception et améliore la
La largeur de la fenêtre (Vw) ajuste dynamiquement les éléments en fonction de la largeur de l'écran (fenêtre d'affichage), garantissant une mise à l'échelle proportionnelle sur les différents appareils. Par exemple, l'attribution de 50 Vw à un élément alloue la moitié de la largeur de l'écran
La hauteur de la fenêtre (Vh) redimensionne dynamiquement les éléments par rapport à la hauteur de l'écran (fenêtre). Par exemple, la désignation de 25 Vh à un élément réserve un quart de la hauteur de l'écran à cet élément. Cela est particulièrement utile pour les arrière-plans en plein écran (100 % Vh) ou les éléments nécessitant une synchronisation avec la hauteur de l'écran
L'unité automatique s'ajuste dynamiquement en fonction de la hauteur du contenu, ce qui la rend adaptée aux blocs de texte et à la hauteur des colonnes, garantissant leur redimensionnement en fonction de leur contenu. En général, les blocs de texte utilisent par défaut des unités automatiques. Cette fonctionnalité permet aux éléments de s'étendre ou de se contracter de manière fluide, tout en conservant une conception de disposition proportionnelle.
[en] Fill sets an element to take up the space left over in its container, along its width or height. Use Fill when you want an element to adapt to whatever space is left, instead of a set proportion (%) or the size of its content (A).
[en] For example, in a section with two columns, if one column's width is 50% and the other's is Fill, the second column takes the remaining width. An image with its height set to Fill stretches to the height of the column it's in.
[en] Fill is available on the Width and Height settings for some elements, such as column width and image height, but not on minimum or maximum values. Inner column width doesn't offer it.
Le concept parent-enfant régit l'organisation des éléments, les éléments principaux tels que les en-têtes, les corps, les menus et les pieds de page contenant au moins une section. Chaque section, à son tour, contient au moins une colonne, servant de conteneur pour divers éléments tels que du texte, des images ou des widgets tels que les colonnes intérieures et les grilles avancées.
Les éléments parents conservent leurs paramètres de conception, ce qui permet un contrôle centralisé de leur apparence. Toutefois, si une section d'un élément parent possède des paramètres de couleur d'arrière-plan spécifiques, l'arrière-plan de l'élément parent peut ne pas refléter cette personnalisation. Cette structure hiérarchique garantit une approche systématique de l'organisation du site Web, facilitant des flux de conception efficaces et une présentation cohérente du contenu.
La hiérarchie des éléments suit une structure par défaut : les sections contiennent des colonnes et les colonnes contiennent des widgets. Cette disposition hiérarchique garantit que vous ne pouvez pas ajouter un widget directement dans une section sans qu'il soit imbriqué dans une colonne. Il existe plusieurs manières de sélectionner un élément (section, colonne ou widget) :
-
Sélection directe d'objets dans le canevas de l'éditeur : Les utilisateurs peuvent interagir directement avec les éléments du canevas de l'éditeur, ce qui facilite l'identification et la modification de composants spécifiques sans avoir besoin d'une navigation approfondie dans les panneaux ou les menus. Lorsque vous sélectionnez un objet, le panneau de conception contenant toutes les options de conception pertinentes pour cet élément apparaît dans le panneau de conception de droite.
-
Fil d'Ariane du menu flottant : Les utilisateurs peuvent revenir aux conteneurs parents en utilisant le fil d'Ariane dans le menu flottant. Lors de la sélection d'un élément spécifique, les utilisateurs peuvent simplement cliquer sur le fil d'Ariane bleu en haut de l'élément pour revenir à son conteneur parent
-
En haut de la page de navigation du panneau de conception : Le panneau de conception inclut également des options de navigation en haut sous forme de fil d'Ariane. Ces fils d'Ariane permettent aux utilisateurs de passer rapidement d'une section ou d'un élément à l'autre du canevas
-
Panneau des couches : Lorsqu'un élément est sélectionné, le panneau des couches met en surbrillance les couches associées à cet élément. Simultanément, l'éditeur fournit des commentaires visuels, facilitant la navigation dans le canevas
Les sections flexibles sont des lignes comportant deux colonnes flexibles par défaut qui créent une mise en page de base. Une fois que vous avez ajouté une section, vous pouvez ajouter, supprimer ou réorganiser des colonnes supplémentaires, des colonnes intérieures ou des grilles avancées pour créer la mise en page souhaitée. Vous pouvez ensuite ajouter des widgets à cette mise en page.
Pour ajouter une section :
-
Passez la souris entre les lignes, puis cliquez sur +Ajouter une section. Ou cliquez avec le bouton droit de la souris pour ouvrir le menu contextuel, puis cliquez sur Ajouter, puis sélectionnez Section flexible.
-
Dans le panneau latéral, cliquez sur Sections flexibles.
-
Sélectionnez la section flexible souhaitée.
-
Cliquez Enregistrer.
Note
-
L'option permettant de conserver une image d'arrière-plan statique n'est pas disponible pour les tablettes et les mobiles en raison d'une limitation d'iOS.
-
Vous pouvez également créer une section flexible avec l'IA. Pour obtenir des instructions détaillées sur la création de sections flexibles avec l'IA, voirCréez une section flexible avec l'IA.
Pour enregistrer une section :
-
Passez la souris sur la section souhaitée et cliquez sur Section flexible dans le coin supérieur gauche de la section.
-
Cliquez Enregistrer en tant que section, puis cliquez sur Sélectionnez uniquement cette ligne.
-
Tapez le nom d'une section, sélectionnez la catégorie dans laquelle la section sera enregistrée et sélectionnez les autorisations pour cette section.
-
Cliquez Commencez à créer.
-
Cliquez Terminé.
Vous pouvez facilement rétablir l'espacement et les éléments d'une section en fonction de leur style de thème. Les éléments qui peuvent être réinitialisés incluent le texte, les boutons, les images, les arrière-plans, la largeur et l'espacement de la section et de ses colonnes, ainsi que des widgets tels que Advanced Accordion, Advanced Tabs et Dynamic Repeater
Pour réinitialiser l'espacement des sections ou les éléments de section aux styles de thème, cliquez sur la section pour ouvrir la barre flottante. Cliquez sur l'icône à trois points et sélectionnez Réinitialisez au thème du site. À partir de là, vous pouvez soit cliquer sur Rétablir l'espacement des sections ou Réinitialiser le style de tous les éléments de section.
Note
paramètres spécifiques au point d'arrêt (taille de l'écran) sont préservés. Cela signifie que si vous réinitialisez l'espacement des sections ou les éléments en fonction des styles de thème sur ordinateur, les points d'arrêt des appareils mobiles et tablettes ne sont pas affectés
Une fois que vous avez ajouté une section à votre site, vous pouvez ajouter des colonnes pour contenir des widgets au sein de la section. Toutes les sections contiennent des colonnes par défaut, mais vous pouvez toujours en ajouter d'autres.
Notez que le nombre maximum de colonnes est de 8.
Note
Lorsque vous ajoutez un élément à une colonne, sa position est déterminée par les paramètres de mise en page automatique. Pour modifier le sens de mise en page automatique, ouvrez le panneau de conception et, dans la section Disposition, sélectionnez horizontal ou vertical pour la mise en page automatique.
Vous pouvez dupliquer une colonne et elle sera ajoutée à droite de la carte d'origine. Vous ne pouvez pas ajouter de colonnes dépassant 100 % de la largeur.
Pour dupliquer une colonne :
-
Cliquez pour sélectionner une colonne.
-
Dans le menu flottant, cliquez sur Dupliquer icône. Vous pouvez également cliquer avec le bouton droit sur la colonne pour ouvrir le menu contextuel et sélectionner Dupliquer.
Vous pouvez modifier la largeur d'une colonne en faisant glisser son bord sur le canevas ou en la définissant dans le panneau de conception.
Pour redimensionner une colonne :
-
Cliquez pour sélectionner la colonne.
-
Faites glisser l'une des poignées carrées situées sur le bord de la colonne.
Vous pouvez également définir une largeur précise dans la section Taille du panneau de conception.
La poignée arrondie située sur le bord d'une colonne ou d'un widget modifie sa marge (espacement extérieur), et non sa taille. Pour en savoir plus, consultez la section Espacement extérieur et intérieur .
Note
La somme des largeurs des colonnes d'une section ne peut pas dépasser 100 % de la largeur de celle-ci. Si une colonne ne peut pas s'élargir, commencez par réduire la largeur d'une colonne voisine.
Vous pouvez supprimer une colonne pour la retirer de la section. Cependant, chaque section doit contenir au moins une colonne, ce qui signifie que vous ne pouvez pas supprimer la dernière colonne d'une section.
Pour supprimer une colonne :
-
Cliquez pour sélectionner la colonne.
-
Dans le menu flottant, cliquez sur Supprimer icône. Vous pouvez également cliquer avec le bouton droit sur la colonne pour ouvrir le menu contextuel et sélectionner Supprimer.
Vous pouvez ajouter des widgets à des colonnes, à des colonnes intérieures ou à des grilles avancées de différentes manières. Si vous êtes déjà en mode Flex, vous pouvez ajouter des widgets directement depuis le panneau latéral en cliquantWidgets, puis en sélectionnant le widget souhaité.
Note
Si vous utilisez le mode flexible dans l'éditeur classique, vous ne pouvez pas glisser-déposer un widget dans une colonne flexible depuis le panneau latéral.
Pour ajouter un widget :
-
Cliquez sur une colonne, une colonne intérieure ou une grille avancée pour la sélectionner.
-
Cliquez sur l'icône plus au milieu de la colonne, de la colonne intérieure ou de la grille avancée. Vous pouvez également cliquer sur l'icône plus dans le menu flottant.
-
Sélectionnez un widget.
Vous pouvez également ajouter des widgets depuis le panneau des couches.
Pour ajouter un widget depuis le panneau des couches :
-
Cliquez pour sélectionner une colonne.
-
Dans le panneau des couches, passez la souris sur la colonne, la colonne intérieure ou la grille avancée à laquelle vous souhaitez ajouter un widget, puis cliquez sur l'icône plus.
-
Sélectionnez un widget.
L'alignement et l'espacement peuvent être utilisés conjointement pour vous aider à réaliser vos conceptions.
Pour en savoir plus sur l'alignement, regardez la vidéo suivante :
Lorsque vous concevez avec Flex, vous pouvez gagner du temps en alignant simultanément plusieurs éléments au sein de la même section, colonne ou colonne intérieure.
Pour aligner plusieurs éléments :
-
Sélectionnez la section, la colonne ou la colonne intérieure et cliquez sur l'icône d'alignement (
) dans le menu flottant.
-
Sélectionnez l'alignement souhaité.
Le panneau de conception propose des options d'alignement supplémentaires, telles que la modification de la direction de la mise en page automatique, l'étirement, etc.
Pour aligner des éléments depuis le panneau de conception :
-
Cliquez avec le bouton droit sur la section, la colonne ou la colonne intérieure souhaitée et sélectionnez Modifier le design.
-
Dans la section Disposition du panneau de conception, sous Alignement du contenu, sélectionnez l'alignement vertical et horizontal du contenu souhaité.
Lorsque vous alignez du texte à partir du menu flottant ou du panneau de conception, il aligne à la fois le texte et le div étiquette.
Bien qu'il soit possible d'aligner plusieurs éléments à la fois, il suffit parfois de modifier l'alignement d'un élément dans une colonne flexible sans affecter les autres éléments.
Pour aligner un seul élément :
-
Sélectionnez l'élément souhaité.
-
Dans le menu flottant, cliquez sur l'icône d'alignement (
Espace entre les éléments
Vous pouvez définir la quantité d'espace horizontal ou vertical entre les colonnes d'une même section flexible ou les widgets à l'intérieur d'une colonne, d'une colonne intérieure ou d'une grille avancée.
Pour définir l'espacement entre les éléments :
-
Cliquez avec le bouton droit sur la section, la colonne, la colonne intérieure ou la grille avancée souhaitée et sélectionnez Modifier le design.
-
Dans le Espacement section du panneau de conception sous Espacement entre les éléments, tapez ou utilisez le curseur pour définir la valeur en pourcentage de l'espace horizontal ou la valeur en pixels de l'espace vertical que vous souhaitez créer entre les éléments du Espacement entre les articles champ.
Vous pouvez réinitialiser le remplissage des sections et des colonnes en cliquant sur le Réinitialiser le rembourrage icône dans le menu flottant.
Les sections flexibles créent une mise en page et alignent automatiquement les objets, ce qui vous permet de concevoir facilement et rapidement de belles sections. Toutefois, lorsque vous avez un design plus complexe avec des objets qui se chevauchent ou une composition en style libre, vous devez utiliser une grille avancée. Les grilles avancées vous permettent de placer des éléments dans une composition freestyle sans mise en page automatique. Pour cette raison, nous vous recommandons de vérifier votre conception à tous les points d'arrêt
Découvrez comment créer des éléments superposés en visionnant la vidéo suivante ou en suivant les instructions ci-dessous.
Pour créer des éléments qui se chevauchent :
-
Cliquez pour sélectionner une colonne flexible.
-
Dans le menu flottant ou dans la colonne flexible, cliquez sur l'icône plus (
).
-
Dans la section Éléments flexibles, sélectionnez Grille avancée (précédemment appelés conteneurs). Pour vous assurer de suivre les meilleures pratiques, faites glisser les bords de la grille avancée de manière à ce qu'elle couvre toute la largeur de la colonne flexible
-
Dans la section Disposition du panneau de conception, sélectionnez une grille prédéfinie dans Réorganiser la mise en page. Ou si vous souhaitez créer votre propre grille, utilisez Colonneset Lignesmenus déroulants de Personnalisez la disposition pour ajouter des colonnes et/ou des lignes.
-
Dans le menu flottant, cliquez sur l'icône plus, puis sélectionnez les widgets souhaités et organisez-les dans la grille avancée.
-
Cliquez pour sélectionner un élément et, dans la section Disposition du panneau de conception, sélectionnez Mettre au premier plan, Avancer, Envoyer vers l'arrière, ou Envoyer vers retour.
Nous vous recommandons de vérifier votre conception à chaque point d'arrêt lorsque vous utilisez des grilles avancées. Lorsque les éléments se chevauchent, il se peut que vous deviez ajuster le dessin à certains points d'arrêt
Dans la conception Web, le choix du système de mise en page approprié influence de manière significative l'expérience utilisateur, en particulier lors de l'intégration d'éléments de mise en page de widgets tels que la colonne intérieure et la grille avancée dans un site.
Astuce
Cours recommandés par la Duda Academy :
-
Éléments de mise en page. Une introduction de 2 minutes aux colonnes internes et aux grilles avancées, ainsi qu'à la manière dont elles contiennent et organisent d'autres widgets.
-
Principes de mise en page. Découvrez les colonnes et les colonnes intérieures et comment aligner et dimensionner les éléments qu'elles contiennent.
-
Mises en page avec grilles avancées. Apprenez à créer des mises en page complexes à l'aide de grilles avancées
Le widget de colonne intérieure est recommandé pour :
-
Dispositions modulaires : Parfait pour créer des mises en page modulaires où le contenu circule de manière linéaire, ce qui les rend idéales pour les menus de navigation, les cartes ou les mises en page de type liste.
-
Design adaptatif: Excelle dans la création de designs réactifs qui s'adaptent parfaitement à différentes tailles d'écran et à différents appareils, garantissant un alignement et une lisibilité optimaux.
-
Contenu dynamique: Idéal pour gérer du contenu dynamique dont la longueur ou la taille peuvent varier, permettant aux concepteurs de contrôler dynamiquement le comportement et la taille des éléments dans un conteneur.
-
Mises en page imbriquées: Les fonctionnalités d'imbrication des colonnes intérieures les rendent adaptées à la création de mises en page imbriquées complexes. Les concepteurs peuvent imbriquer davantage de colonnes intérieures dans le conteneur extérieur selon les besoins, offrant ainsi flexibilité et adaptabilité dans l'organisation des hiérarchies de contenu. De même, Advanced Grid offre la possibilité d'imbriquer des widgets, des colonnes intérieures et même des grilles avancées supplémentaires dans sa structure de mise en page.
Le widget de grille avancé est recommandé pour :
-
Structures de mise en page complexes: Indispensable pour créer des mises en page complexes avec plusieurs lignes et colonnes, offrant un contrôle précis du placement et du dimensionnement des éléments.
-
Dessins non linéaires: Parfait pour concevoir des mises en page non linéaires où les éléments doivent être positionnés indépendamment de leur ordre source pour des compositions créatives et des arrangements asymétriques. Cela signifie que les éléments peuvent être placés et disposés en fonction des exigences de conception.
-
Conception Web réactive: Tout en nécessitant une planification minutieuse, Advanced Grid fournit des outils robustes pour créer des designs réactifs. Les concepteurs peuvent définir des ajustements de mise en page spécifiques tels que la réorganisation des colonnes, la répartition des éléments et les écarts entre les grilles à différentes tailles de fenêtre, garantissant ainsi une présentation optimale sur différents appareils
Quand dois-je utiliser un widget de colonne interne par rapport à un widget de grille avancé ?
Les colonnes intérieures sont idéales pour les mises en page modulaires, en particulier lorsque vous avez besoin d'un contrôle précis sur les éléments individuels d'une section ou lorsque vous souhaitez une mise en page automatique. Notez toutefois que si les colonnes intérieures préservent l'intégrité des sections, le déplacement des widgets à l'intérieur de celles-ci est moins flexible que les grilles avancées.
Les colonnes intérieures permettent de contrôler les lignes ou les colonnes individuellement, ce qui est idéal pour les mises en page unidimensionnelles. Advanced Grids permet de manipuler simultanément des lignes et des colonnes, offrant ainsi un contrôle complet de l'ensemble de la structure de mise en page, idéal pour les mises en page bidimensionnelles
Advanced Grid (CSS Grid) peut avoir un avantage marginal dans la gestion des mises en page complexes en optimisant la structure DOM, l'efficacité du rendu, le chargement des ressources, la réactivité et en minimisant les requêtes HTTP. Les colonnes intérieures, bien qu'efficaces, peuvent impliquer davantage d'éléments HTML imbriqués, ce qui peut entraîner des temps de rendu légèrement plus lents par rapport aux grilles avancées
Vous pouvez également utiliser à la fois le widget de colonne intérieure et le widget de grille avancé dans la même section et sur l'ensemble du site pour obtenir les conceptions souhaitées. Cela implique de trouver un équilibre entre la structure de mise en page globale et les détails les plus fins de l'organisation du contenu
Comprendre les relations parent-enfant est essentiel pour exploiter efficacement les colonnes intérieures et les grilles avancées. Dans ces systèmes de mise en page, les éléments contenant les colonnes font office de parent, tandis que les éléments qu'elle contient, tels que les widgets supplémentaires, sont considérés comme des enfants. Cette relation dicte la manière dont les éléments sont positionnés et alignés dans la mise en page, garantissant ainsi la cohérence et l'intégrité structurelle de votre conception Web
Il est important de noter qu'il n'est pas toujours nécessaire d'ajouter des colonnes intérieures. Souvent, une seule colonne peut suffire pour de nombreux cas d'utilisation. La colonne intérieure permet de placer facilement les éléments horizontalement ou verticalement. Les exigences comprennent une section servant de conteneur flexible et une colonne pour héberger les colonnes intérieures, les deux types de colonnes servant d'éléments flexibles, représentant respectivement l'élément parent et l'élément enfant.
Advanced Grid permet de placer des éléments dans les directions verticale et horizontale. Les exigences incluent une section servant de conteneur et une grille avancée pour déclarer la disposition de la grille sur l'élément parent ou le conteneur, de sorte que tous ses enfants deviennent des éléments de grille.