Note
Ce contenu s'applique à la fois au mode Flex dans l'éditeur classique et dans l'éditeur 2.0. Pour identifier la version actuelle de l'éditeur, voir Comment 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 qui permet de disposer les éléments en sections et en colonnes, en leur permettant de s'adapter (grandir/rétrécir) et de s'aligner parfaitement à l'intérieur d'un conteneur. Vous pouvez ainsi 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 l'Éditeur 2.0, vous utilisez la technologie flexbox par défaut.
Conseil
Cours de l'Académie Duda recommandés :
-
Basic Principes de conception. Apprenez à connaître les quatre piliers de la conception (image de marque, typographie, couleur et médias).
-
Taille et unités. Apprenez à connaître les différentes unités de taille dans le panneau de conception et à savoir quand les utiliser.
-
L'essentiel de la mise en page. Découvrez les colonnes et les colonnes intérieures et apprenez à aligner et à dimensionner les éléments qui s'y trouvent.
-
Mises en page avec des 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 les propriétés de conception de 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 la conception sont différentes en fonction de l'élément sélectionné. Les propriétés de conception comprennent l'alignement, la disposition, l'espacement, la taille et bien d'autres choses encore, en fonction de l'élément sélectionné.
Pour ouvrir le panneau de conception, cliquez sur un élément en mode Flex, puis sur Modifier la conception (vous ne devez ê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, de sorte qu'il n'interfère pas avec 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 est composé de 5 sections : Alignement, Disposition, Espacement, Taille, Animation et Arrière-plan. Vous trouverez ci-dessous une description de chaque section et de ce qu'elle peut accomplir.
Disponible pour les éléments uniques à l'intérieur d'une colonne ou d'une colonne intérieure. Les éléments individuels situés dans une colonne ou une colonne intérieure 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.
Les éléments peuvent également être alignés à partir du menu flottant en cliquant sur l'icône Aligner ().
Largeur totale
Précédemment appelée "full bleed", la pleine largeur n'est disponible que pour les sections et ne peut être modifiée qu'à partir du point de rupture principal desktop. Lorsqu'elle est activée, elle 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 "pleine largeur" est désactivé. Pour en savoir plus sur les points d'arrêt, consultez la section Tailles d'écran et périphériques.
Alignement du contenu
Permet d'aligner verticalement ou horizontalement plusieurs éléments d'une colonne ou d'une colonne intérieure en même temps. Dans l'éditeur classique, les éléments ne peuvent être alignés qu'individuellement et horizontalement. Pour plus d'informations, voir Alignement et espacement.
Mise en page
Permet de choisir si les éléments à l'intérieur des colonnes et des colonnes intérieures 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.
Aligner les lignes
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 rangées, mais uniquement les rangées elles-mêmes.
Pour en savoir plus sur l'espacement, regardez la vidéo qui suit :
Espace entre les articles
Permet de définir l'espace entre les colonnes ou widget une seule fois et s'applique à toutes les colonnes d'une section ou à tous les widget d'une colonne. Pour les colonnes, si la propriété de mise en page automatique est définie sur vertical, l'espace entre widget est mesuré en pixels. Si la mise en page automatique est horizontale, l'espace entre widget est mesuré en pourcentage. Cette propriété ne s'applique pas aux éléments situés à l'intérieur des colonnes intérieures 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 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. Si vous ne souhaitez pas que les valeurs soient liées, cliquez sur l'icône de lien.
Notez que les marges en ligne pour les éléments à l'intérieur des colonnes ou des colonnes intérieures peuvent être ajustées directement sur le canevas. Pour en savoir plus, consultez la rubrique Espacement extérieur et intérieur.
Le remplissage est l'espace intérieur de l'élément. Cliquez sur le numéro de la marge ou de l'espacement 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 pourcentage et l'espacement vertical en pixels.
Par exemple, si vous sélectionnez une colonne et que vous définissez l'espacement gauche à 5 px, vous ajouterez 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 fixez la marge gauche à 5 px, vous ajouterez 5 px d'espace entre le bord de la colonne et le bord de la section qui la contient.
Réinitialisation du remplissage ou de 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.
En fonction de l'élément sélectionné, vous pouvez ajuster la hauteur et la largeur, ainsi que les valeurs maximales et minimales. 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, reportez-vous à la section 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 une largeur de 280 px.
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 Site Theme. Pour les colonnes, vous ne pouvez modifier que la largeur, la hauteur étant définie par la hauteur de la section ou par ses éléments internes. Pour les colonnes intérieures et widget, vous pouvez définir la hauteur et la largeur, ainsi que les valeurs minimales et maximales pour chacune d'entre elles. Toutes les tailles d'unités 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 des animations et de l'arrière-plan, consultez les sections Ajouter des animations et Personnaliser l'arrière-plan.
Remarque
La parallaxe est disponible pour tous les sites widget et les conteneurs, et peut être appliquée à toutes les tailles d'écran. Pour activer la parallaxe, cliquez sur l'image, sélectionnez Modifier la conception, faites défiler jusqu'à la section Arrière-plan du panneau de conception et ouvrez le menu Position de l'image.
L'option permettant de conserver une image d'arrière-plan statique n'est pas disponible pour les tablettes, les 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 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.
Commande
Dans la section Arrangement du panneau de conception, cette propriété ne peut être utilisée que lorsqu'il y a plusieurs éléments à l'intérieur d'une grille avancée. Permet d'amener un élément sélectionné à l'avant, à l'avant, à l'arrière ou à l'arrière. Pour plus d'informations, consultez la section Créer des éléments qui se chevauchent.
Réorganiser la mise en page
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 mise en page
Permet de sélectionner la disposition des colonnes et des lignes dans la grille avancée pour créer une mise en page.
Épingle
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.
Garder les proportions
Lorsqu'elle est activée, cette fonction permet de s'assurer que les éléments à l'intérieur d'une grille avancée conservent leurs proportions même lorsque la taille de la grille change.
Le widget Image contient également une option Conserver les proportions, qui permet de conserver les proportions d'origine.
Note
Ce contenu s'applique à la fois au mode Flex dans l'éditeur classique et dans l'éditeur 2.0. Pour identifier la version actuelle de l'éditeur, voir Comment 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 aussi adaptées à différents appareils et tailles d'écran. Le panneau de conception, situé à droite du canevas de l'éditeur dans l'Éditeur 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, widget, les colonnes intérieures et les grilles avancées. Cet article passe en revue les unités de taille disponibles dans le panneau de dessin et propose des exemples pratiques de leur utilisation.
En outre, l'Éditeur 2.0 permet aux utilisateurs de configurer les unités de taille à partir du point de rupture principal (desktop), ce qui garantit l'extensibilité 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, voir Tailles d'écran et appareils.
Conseil
Cours recommandé par la Duda Academy :
-
Unités de taille. Apprenez à connaître les différentes unités de taille dans le panneau de conception et à savoir quand les utiliser.
Le 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 en fonction de la taille de l'écran. En règle générale, les largeurs des éléments flexibles sont définies par défaut en pourcentage. Il est conseillé d'utiliser des pourcentages pour maintenir la cohérence de la conception sur toutes les tailles d'écran sans devoir procéder à des ajustements manuels des pixels à chaque point de rupture.
Par exemple, si vous définissez les deux colonnes d'une mise en page à deux colonnes sur une largeur de 50 %, elles passeront automatiquement à 50 % sur toutes les tailles d'écran.
Les pourcentages sont utiles pour préserver la taille relative des éléments en fonction des différentes dimensions de l'écran. Cela signifie que les éléments sont proportionnellement mis à l'échelle par rapport à leur conteneur parent (section ou colonne), ce qui garantit l'uniformité de la mise en page.
Par exemple, une image dont la largeur est fixée à 50 % à 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, alors que la colonne et l'image peuvent apparaître plus étroites sur les appareils mobiles que sur desktop, l'image conserve sa largeur proportionnelle. De même, le fait de fixer à 4 % l'espacement entre les colonnes garantit un espacement cohérent par rapport aux colonnes et aux autres éléments de l'écran, s'adaptant ainsi aux différentes tailles d'écran.
Les pixels (px) constituent une unité de mesure fixe qui n'est pas affectée par les variations de taille des appareils. Par exemple, un bouton réglé sur 250 px conserve sa taille sur les appareils mobiles, les tablettes et les ordinateurs.
Cependant, le fait de s’appuyer uniquement sur les pixels pour le dimensionnement peut entraver la réactivité, ce qui nécessite des ajustements manuels à chaque point d’interruption. Par conséquent, même si les pixels garantissent la cohérence de la taille des éléments, il est recommandé d’utiliser des pourcentages pour promouvoir une conception réactive. Cette approche minimise la nécessité d'ajuster chaque pixel aux points d'interruption, ce qui rationalise le processus de conception et améliore la réactivité globale.
Largeur de la fenêtre de visualisation (Vw) pour une mise à l'échelle réactive basée sur la largeur de l'écran
La largeur de la fenêtre d'affichage (Vw) ajuste dynamiquement les éléments en fonction de la largeur de l'écran (fenêtre d'affichage), ce qui garantit une mise à l'échelle proportionnelle sur les différents appareils. Par exemple, l'attribution de 50 Vw à un élément correspond à la moitié de la largeur de l'écran.
La hauteur du viewport (Vh) met dynamiquement à l’échelle les éléments en fonction de la hauteur de l’écran (viewport). Par exemple, l'attribution de 25 Vh à un élément réserve un quart de la hauteur de l'écran à cet élément. Cette fonction est particulièrement utile pour les arrière-plans plein écran (100 % Vh) ou les éléments qui nécessitent une synchronisation avec la hauteur de l'écran.
L'unité automatique s'ajuste dynamiquement en fonction de la hauteur du contenu, ce qui lui permet de s'adapter aux blocs de texte et à la hauteur des colonnes, en veillant à ce qu'ils soient redimensionnés en fonction de leur contenu. En règle générale, 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 mise en page proportionnelle.
Le concept parent-enfant régit l'organisation des éléments, les éléments primaires tels que les en-têtes, les corps, les menus et les pieds de page contenant au moins une section. Chaque section abrite à son tour au moins une colonne, qui sert de conteneur à divers éléments tels que du texte, des images ou widget comme Inner Columns et Advanced Grids.
Les éléments parents conservent leurs paramètres de conception, ce qui permet un contrôle centralisé de leur apparence. Toutefois, si une section à l'intérieur d'un élément parent a 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 l'efficacité des processus de conception et la cohérence de la présentation du contenu.
La hiérarchie des éléments suit une structure par défaut : les sections contiennent des colonnes et les colonnes contiennent widget. Cette organisation hiérarchique garantit que vous ne pouvez pas ajouter un site widget directement à une section sans qu'il soit imbriqué dans une colonne. Il existe plusieurs façons 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 qu'il soit nécessaire de naviguer longuement dans des panneaux ou des 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 à droite.
-
Fil d'Ariane du menu flottant : Les utilisateurs peuvent revenir aux conteneurs parents en utilisant les fils d'Ariane du menu flottant. Lorsqu'ils sélectionnent un élément spécifique, les utilisateurs peuvent simplement cliquer sur les fils d'Ariane bleus situés en haut de l'élément pour revenir à son conteneur parent.
-
Mille-pattes en haut du panneau de conception : Le panneau de conception comprend également des options de navigation en haut sous la forme de fils d'Ariane. Ces fils d'Ariane permettent aux utilisateurs de passer rapidement d'une section ou d'un élément à l'autre dans le canevas.
-
Panneau des calques : Lorsqu'un élément est sélectionné, le panneau des calques met en évidence les calques associés à cet élément. Simultanément, l'éditeur fournit un retour d'information visuel qui facilite la navigation dans le canevas.
Les sections flexibles sont des lignes avec 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 de votre choix. Ensuite, vous pouvez ajouter widget à cette mise en page.
Pour ajouter une section :
-
hover entre les lignes et cliquez sur +Ajouter une section. Vous pouvez également cliquer avec le bouton droit de la souris pour ouvrir le menu contextuel, cliquer sur Ajouter, puis sélectionner Section Flex.
-
Dans le panneau latéral, cliquez sur Sections flexibles.
-
Sélectionnez la section Flex souhaitée.
-
Cliquez sur Enregistrer.
Remarque
-
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 AI. Pour obtenir des instructions détaillées sur la création de sections flexibles avec AI, reportez-vous à la section Créer une section flexible avec AI.
Pour enregistrer une section :
-
hover sur la section souhaitée et cliquez sur Flex Section dans le coin supérieur gauche de la section.
-
Cliquez sur Enregistrer en tant que section, puis sur Sélectionner uniquement cette ligne.
-
Saisissez un nom de section, sélectionnez la catégorie dans laquelle la section sera enregistrée et sélectionnez les autorisations pour la section.
-
Cliquez sur Démarrer la création.
-
Cliquez sur Terminé.
Une fois que vous avez ajouté une section à votre site, vous pouvez ajouter des colonnes pour accueillir des widgets au sein de la section. Toutes les sections contiennent des colonnes par défaut, mais vous pouvez toujours en ajouter.
Notez que le nombre maximum de colonnes est de 8.
Remarque
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 la direction de la mise en page automatique, ouvrez le panneau de conception et, dans la section Mise en page, sélectionnez horizontal ou vertical pour la mise en page automatique.
Vous pouvez dupliquer une colonne et elle sera ajoutée à la droite de la carte originale. Vous ne pouvez pas ajouter des colonnes qui dépassent 100 % de la largeur.
Pour dupliquer une colonne :
-
Cliquez pour sélectionner une colonne.
-
Dans le menu flottant, cliquez sur l'icône Dupliquer. Vous pouvez également cliquer avec le bouton droit de la souris sur la colonne pour ouvrir le menu contextuel et sélectionner Dupliquer.
Vous pouvez supprimer une colonne pour la retirer de la section. Chaque section doit toutefois 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 l'icône Supprimer. Vous pouvez également cliquer avec le bouton droit de la souris sur la colonne pour ouvrir le menu contextuel et sélectionner Supprimer.
Vous pouvez ajouter widget aux colonnes, aux colonnes intérieures ou aux grilles avancées de différentes manières. Si vous êtes déjà en mode flexible, vous pouvez ajouter des widgets directement à partir du panneau latéral en cliquant sur Widgets, puis en sélectionnant le widget souhaité.
Remarque
Si vous utilisez le mode flexible dans l'éditeur classique, vous ne pouvez pas glisser-déposer une adresse widget dans une colonne flexible à partir du 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 à partir du panneau de calques.
Pour ajouter un widget à partir du panneau de calques :
-
Cliquez pour sélectionner une colonne.
-
Dans le panneau de calques, survolez 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 projets.
Pour en savoir plus sur l'alignement, consultez la vidéo suivante :
Lors de la conception avec Flex, vous pouvez gagner du temps en alignant simultanément plusieurs éléments au sein d'une même section, d'une même colonne ou d'une même 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 l'orientation de la mise en page automatique, l'étirement, etc.
Pour aligner les éléments du panneau de conception :
-
Cliquez avec le bouton droit de la souris sur la section, la colonne ou la colonne intérieure souhaitée et sélectionnez Modifier la conception.
-
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, vous alignez à la fois le texte et la div tag.
Bien qu'il soit possible d'aligner plusieurs éléments à la fois, vous avez parfois besoin de modifier l'alignement d'un seul élément à l'intérieur d'une colonne Flex sans toucher aux 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 l'espace horizontal ou vertical entre les colonnes dans la même section Flex ou les mêmes 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 de la souris sur la section, la colonne, la colonne intérieure ou la grille avancée souhaitée et sélectionnez Modifier la conception.
-
Dans la section Espacement 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 voir apparaître entre les éléments dans le champ Espacement entre les éléments.
Vous pouvez réinitialiser le remplissage des sections et des colonnes en cliquant sur l'icône Réinitialiser le remplissage dans le menu flottant.
Les sections Flex créent une mise en page et alignent automatiquement les objets, ce qui vous aide à concevoir facilement et rapidement de belles sections. Cependant, lorsque vous avez une conception plus complexe avec des objets superposés ou une composition libre, vous devez utiliser une grille avancée. Les grilles avancées vous permettent de placer des éléments dans une composition libre sans mise en page automatique. Pour cette raison, nous vous recommandons de vérifier votre conception au niveau de tous les points d'interruption.
Apprenez à créer des superpositions d'éléments en regardant la vidéo ou en suivant les instructions ci-dessous.
Pour créer une superposition d'éléments :
-
Cliquez pour sélectionner une colonne Flex.
-
Dans le menu flottant ou dans la colonne flexible, cliquez sur l'icône plus (
).
-
Dans la section des éléments flexibles, sélectionnez Grille avancée (anciennement appelée conteneurs). Pour vous assurer que vous suivez 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 disposition. Si vous souhaitez créer votre propre grille, utilisez les menus déroulants Colonnes et Lignes de la rubrique Personnaliser la mise en page pour ajouter des colonnes 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 Arrangement du panneau de conception, sélectionnez Amener devant, Amener devant, Renvoyer vers l'arrière ou Renvoyer vers l'arrière.
Nous vous recommandons de vérifier votre conception à chaque point d'interruption lorsque vous utilisez des grilles avancées. Avec des éléments superposés, vous devrez peut-être ajuster la conception sur certains points d'interruption.
Dans la conception d'un site web, le choix du système de mise en page approprié influence considérablement l'expérience de l'utilisateur, en particulier lors de l'intégration d'éléments de mise en page widget tels que Inner Column et Advanced Grid dans un site.
Conseil
Cours de l'Académie Duda recommandés :
-
L'essentiel de la mise en page. Découvrez les colonnes et les colonnes intérieures et apprenez à aligner et à dimensionner les éléments qui s'y trouvent.
-
Mises en page avec des grilles avancées. Apprenez à créer des mises en page complexes à l'aide de grilles avancées.
Le widget de la colonne intérieure est recommandé pour:
-
Mises en page modulaires : Parfaites pour créer des mises en page modulaires où le contenu s'écoule 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.
-
Conception réactive: Excellente dans la création de conceptions réactives qui s'adaptent de manière transparente à différentes tailles d'écran et d'appareils, garantissant un alignement et une lisibilité optimaux.
-
Contenu dynamique: Bien adapté à la gestion de contenus dynamiques dont la longueur ou la taille peut varier, il permet aux concepteurs de contrôler dynamiquement le comportement et la taille des éléments dans un conteneur.
-
Mises en page imbriquées: Les capacités d'imbrication des colonnes intérieures permettent de créer des mises en page imbriquées complexes. Les concepteurs peuvent imbriquer davantage de colonnes intérieures dans le conteneur extérieur si nécessaire, ce qui permet d'organiser les hiérarchies de contenu de manière flexible et adaptable. De même, Advanced Grid permet d'imbriquer widget, des colonnes intérieures et même d'autres grilles avancées dans sa structure de présentation.
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, il permet un contrôle précis de l'emplacement et du dimensionnement des éléments.
-
Conceptions 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 d'origine pour des compositions créatives et des arrangements asymétriques. Cela signifie que les éléments peuvent être placés et arrangés en fonction des exigences de la conception.
-
Conception Web réactive: Bien qu'il nécessite une planification minutieuse, Advanced Grid fournit des informations solides sur tool pour créer des conceptions réactives. Les concepteurs peuvent définir des ajustements de mise en page spécifiques, tels que la réorganisation des colonnes, l'espacement des éléments et les écarts entre les grilles en fonction de la taille de l'écran, afin de garantir une présentation optimale sur différents appareils.
Quand dois-je utiliser un widget de colonne intérieure plutôt qu'un widget de grille avancée ?
Les colonnes intérieures conviennent mieux aux 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 conservent l'intégrité de la section, le déplacement de widget à l'intérieur de ces colonnes est moins souple que dans le cas des 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 les lignes et les colonnes, offrant ainsi un contrôle complet sur l'ensemble de la structure de la mise en page, ce qui est idéal pour les mises en page bidimensionnelles.
La grille avancée (grille CSS) 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 la minimisation des requêtes HTTP. Les colonnes intérieures, bien qu'efficaces, peuvent comporter plus d'éléments HTML imbriqués, ce qui peut entraîner des temps de rendu légèrement plus lents que les grilles avancées.
Vous pouvez également utiliser à la fois la colonne intérieure widget et la grille avancée widget dans la même section et dans l'ensemble du site pour obtenir les designs souhaités. Il s'agit de trouver un équilibre entre la structure générale de la présentation et les détails de l'organisation du contenu.
Il est essentiel de comprendre les relations parent-enfant pour exploiter efficacement les colonnes intérieures et les grilles avancées. Dans ces systèmes de mise en page, la colonne abritant les éléments joue le rôle de parent, tandis que les éléments qui s'y trouvent, tels que les éléments supplémentaires widget, 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, assurant ainsi la cohérence et l'intégrité structurelle de la conception de votre site 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 qui sert de conteneur flexible et une colonne qui abrite 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.
La grille avancée permet de placer des éléments à la fois verticalement et horizontalement. Les conditions requises comprennent une section qui sert de conteneur et une grille avancée qui déclare la disposition de la grille sur l'élément parent ou le conteneur, faisant en sorte que tous ses enfants deviennent des éléments de la grille.