Editor X : À propos de la structure de votre page (éléments parents, enfants et frères)
Temps de lecture : 4 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Lorsque vous structurez des pages sur votre site, vous imbriquez essentiellement des éléments à l'intérieur de conteneurs. Par exemple, en plaçant du texte à l'intérieur d'une boîte conteneur. Cela crée une relation entre les éléments et leur conteneur parent, dérivée des concepts HTML moderne et CSS.
Dans cet article, nous vous en expliquons davantage sur cette relation et comment l'exploiter pour créer un site compatible :
Relations parent-enfant entre les éléments
Lorsqu'un élément est placé à l'intérieur d'un conteneur (par exemple, section, boîte conteneur, structure, etc.), il attache l'élément et crée une relation parent-enfant. Par exemple, si vous attachez votre logo à l'en-tête, il s'ancre automatiquement sur les bords les plus proches et devient « l'enfant » de l'en-tête.
Comme pour le CSS, le design (c'est-à-dire la taille, la position, la marge intérieure, etc.) d'un conteneur parent influence ses éléments enfants. L'ajout de marge intérieure à un conteneur, par exemple, rend les éléments à l'intérieur plus petits afin de s'adapter à la modification.
Remarque :
Lorsque vous empilez des éléments pour contrôler leur ordre vertical, ils sont placés à l'intérieur d'un conteneur flexible qui agit en tant que parent.
Suggestion :
Cliquez ici pour en savoir plus sur la taille des éléments.
Créer la structure de votre page
Lorsque vous planifiez le design de votre site, il est important de commencer par créer une structure à calques. Nous vous recommandons de créer d'abord les conteneurs parents, puis d'ajouter des éléments enfants en les faisant glisser et en les déposant au bon endroit.
Les calques de votre page
Dans l'Editor X, la structure que vous créez est reflétée dans le panneau Calques. Les calques suivants constituent la structure de votre site :
- Page : À partir du panneau Calques, vous pouvez modifier la couleur d'arrière-plan de la page et ajouter un remplissage. Cliquez sur l'icône En voir plus
à côté de Page pour contrôler ces paramètres. - Sections : Chaque page est composée d'au moins une section. Vous pouvez créer autant de sections verticales et horizontales que vous le souhaitez. Vous pouvez également créer des sections Master qui apparaissent sur plusieurs pages.
- Conteneurs : Imbriquez les éléments dans des conteneurs pour créer facilement une structure réactive et vous assurer qu'ils restent en place. Ajoutez une boîte conteneur ou des outils de mise en page intelligents comme des piles, des structures de page ou des répéteurs.
- Éléments : Ce sont les éléments que vous ajoutez à partir du panneau Ajouter (par exemple, Texte, Bouton, Formulaires). Vous pouvez ancrer des éléments uniques ou empiler plusieurs éléments pour vous assurer qu'ils restent dans le même ordre et le même espacement sur toutes les tailles d'écran.
Important :
Bien que les grilles ne fassent pas partie du modèle hiérarchique, elles peuvent tout de même affecter la taille et le positionnement de vos éléments. En savoir plus
Recréer l'arborescence des éléments
Lorsque vous déplacez un élément enfant dans un nouveau conteneur parent, on parle de « re-parentage ». Pour re-parenter un élément, il suffit de le glisser-déposer à l'intérieur du nouveau parent.
Trouver la place d'un élément dans la hiérarchie
Chaque section, conteneur et élément de votre page possède un fil d'Ariane qui indique sa place dans la hiérarchie. Vous pouvez facilement naviguer entre les calques de votre page en cliquant sur le fil d'Ariane.
Structurer les éléments de la fratrie
Les frères sont des éléments partageant le même parent direct. Par exemple, le texte et le bouton à l'intérieur de ce conteneur sont des frères car le conteneur est leur parent :
Si vos éléments frères se trouvent dans des conteneurs flexibles (par exemple, une structure empilée, un répéteur, ils peuvent affecter la taille et la position de l'autre. La conception de cette relation peut être utile pour créer un site réactif, car vous pouvez éviter que les éléments ne se chevauchent sur les écrans de plus petite taille.
Dans l'exemple ci-dessous, vous pouvez voir les marges qui sont automatiquement créées entre les éléments frères :
Modifications structurelles à travers les points de rupture
Le panneau Calques vous permet de voir la relation (c'est-à-dire la hiérarchie) entre les éléments, les conteneurs et les sections de votre page et de les déplacer, si nécessaire.
La hiérarchie des pages fait partie de la structure HTML de votre site, ce qui signifie que les modifications que vous y apportez sont reflétées sur tous les points de rupture. Par exemple, lorsque vous séparez un parent et un enfant (comme du texte et son conteneur), cette séparation s'applique à tous les points de rupture.
Suggestion :
Pour en savoir plus sur la conception à travers les points de rupture, cliquez ici.
Cela vous a-t-il aidé ?
|