Editor X : Paramétrer la taille de votre élément
Temps de lecture : 5 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Editor X vous permet de créer des éléments réactifs qui s'adaptent parfaitement à toutes les zones d'affichage et qui ne se superposent jamais. À l'aide des options de dimensionnement dans le panneau inspecteur, définissez des valeurs de largeur et de hauteur fixes pour votre élément ou rendez-le fluide afin qu'il s'adapte parfaitement à n'importe quelle taille d'écran. Vous pouvez définir différentes options de dimensionnement pour vos éléments à chaque point de rupture.
En savoir plus sur :
Vous voulez en savoir plus ?
Consultez notre cours sur le dimensionnement (en anglais) dans l'académie de l'Editor X.
Structurer un site réactif
Avant d'ajouter du contenu à votre site, il est important de créer une structure et de construire vos calques selon cette logique. Vos calques sont organisés dans le modèle parent, ce qui signifie que le calque supérieur agit comme le parent du calque inférieur.
Découvrez un exemple
La taille d'un élément parent peut affecter ses éléments enfants car ces derniers se redimensionnent par rapport à l'élément parent. Pour vous assurer que votre design reste réactif, définissez le dimensionnement et le positionnement de vos calques de haut en bas.
Dimensionnement fixe ou fluide
Lors du dimensionnement d'un élément, vous pouvez choisir d'utiliser un dimensionnement fixe ou fluide à partir du panneau Inspecteur :
- Fixe : Cette option permet de conserver la même largeur de l'élément dans toutes les zones d'affichage. Elle ne se réduit pas et ne s'agrandit pas en fonction de la taille de l'écran.
- Fluide : Cette option ajuste la largeur - et parfois la hauteur - des éléments en fonction de la taille de l'écran.
- Mettre à l'échelle proportionnellement : Cochez cette case pour que la hauteur et la largeur de votre élément conservent un rapport lorsqu'il est redimensionné. Lorsque cette option n'est pas sélectionnée, cela signifie que la largeur de votre élément est ajustée en fonction de la taille de l'écran tandis que sa hauteur reste la même.
Suggestion :
Vous pouvez également faire glisser les poignées autour de votre élément pour modifier ses dimensions.
Unités de mesure
Dans l'Editor X, vous pouvez utiliser différentes [unités de mesure] CSS (data-composite="true" href="https://support.wix.com/fr/article/editor-x-units-of-measure" target="") pour dimensionner vos éléments. Le type de mesures que vous souhaitez utiliser dépend de la manière dont vous souhaitez que les éléments se redimensionnent lorsque la largeur de la zone d'affichage change.
Cliquez ci-dessous pour en savoir plus sur chaque unité de mesure et savoir quand l'utiliser :
Automatique
Pixels (px)
Pourcentage (%)
Largeur de la zone (vw)
Hauteur de la zone (vh)
Valeurs min. et max.
Max-content (max-c)
Étirer un élément
Étirez votre élément pour couvrir tout l'arrière-plan de son conteneur parent. Lorsque vous utilisez des grilles, vous pouvez étirer l'élément pour couvrir une cellule spécifique ou toute la zone de la grille.
Étirer un élément définit sa largeur et sa hauteur sur Auto afin que l'élément et son conteneur se redimensionnent en fonction de la zone d'affichage. Comme l'élément est étiré, ses valeurs de largeur et de hauteur seront identiques à celles de son conteneur parent.
En savoir plus :
En savoir plus sur la création d'un site réactif à l'aide des outils de l'Editor X :
Cela vous a-t-il aidé ?
|