Éditeur Studio : Paramétrer la taille de vos éléments

Lorsque vous concevez un site, vous devez vous assurer qu'il s'affiche parfaitement sur toutes les tailles d'écran. Dans l'Éditeur Studio, vous configurez le dimensionnement en px* et le comportement responsive s'occupe du reste.

La plupart des éléments sont livrés avec un comportement par défaut (ex. mettre à l'échelle proportionnellement) qui contrôle la façon dont il est redimensionné sur d'autres écrans. Vous pouvez toujours modifier le comportement par défaut pour qu'il réponde mieux à vos besoins.

Le px* est une unité de taille fluide, relative à la taille de modification.

Dans cet article, apprenez comment fonctionne le dimensionnement dans l'Éditeur Studio :

Suggestion :

Vous pouvez définir la taille et le comportement réactif de l'élément par point de rupture.

Redimensionner un élément

Sélectionnez un élément sur la toile et faites glisser les poignées latérales pour le réduire ou l'agrandir. Cela définit l’aspect de l’élément sur le point de rupture actuel.

Dans le panneau Inspecteur, vous pouvez vérifier la largeur et la hauteur exactes de l'élément en pixels. Si nécessaire, vous pouvez saisir vos propres valeurs de largeur / hauteur.

Laissez l'inspecteur calculer pour vous :

Pour votre commodité, vous pouvez utiliser l'ajout ( + ), la soustraire ( - ), la propagation ( * ) et la divise ( / ) lorsque vous saisissez des valeurs de taille. Par exemple, élargissez un élément 3 fois en ajoutant *3 à côté de la largeur actuelle.

Un GIF montrant comment utiliser les poignées de glissement pour redimensionner un élément sur la toile

Vous rencontrez des problèmes avec le redimensionnement ?

Découvrez cette vidéo de dépannage pour savoir comment résoudre les problèmes avec les sections et les conteneurs qui ne sera pas redimensionné.

Redimensionner les éléments médias

Lorsque vous redimensionnez un élément média, comme une image ou une vidéo, vous pouvez verrouiller les proportions afin que la largeur et la hauteur restent toujours proportionnelles l'une à l'autre.

Quels éléments de média incluent cette option ?

Cela signifie que lorsque vous modifiez la largeur, la hauteur s'ajuste automatiquement (et vice versa) pour conserver la forme d'origine de l'élément.

Un GIF montrant comment redimensionner un élément sur la toile lors du verrouillage des proportions

Pour verrouiller les proportions :

Sélectionnez l'élément média concerné.
Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite.

La flèche Ouvrir l'inspecteur vous cliquez dans l'Éditeur Studio pour ouvrir le panneau

Cliquez sur l'icône Verrouiller les proportions sous Taille.

Une capture d'écran de l'icône des proportions verrouillées sur laquelle vous pouvez cliquer dans l'inspecteur pour n'importe quel élément média

Redimensionnez l'élément en :
- Saisir la valeur de la largeur / hauteur dans l'inspecteur (l'autre valeur s'ajuste automatiquement).
- Faites glisser les poignées autour de l'élément sur la toile.

Remarque :

Cette option n'est pas disponible en mode dimensionnement avancé.

Paramétrer la taille en px*

Le px* est une unité de mesure fluide dans l'Éditeur Studio. Cela vous permet de modifier le dimensionnement à l'aide d'une mesure familière (les pixels), tandis que la mesure réelle en coulisses est responsive.

En d'autres termes, vous concevez en pixels qui représentent la taille sur la toile, et l'élément reste réactive. Les valeurs spécifiques et les unités de taille dépendent du comportement responsive que vous choisissez. Survolez px* pour voir le calcul et l'unité de taille responsive qui est utilisée.

Dans l'exemple ci-dessous, la largeur du conteneur sur la toile actuel est de 1000 px*. L'unité réelle est le pourcentage, donc la largeur est relative à chaque écran (79,1%).

Une capture d'écran montrant que survoler px* dans l'inspecteur ouvre une fenêtre pop-up avec le calcul réel

Quelle est la différence entre px* et px ?

Les deux vous permettent de modifier en pixels, cependant:

px* signifie que la taille que vous voyez correspond au point de rupture sur lequel vous travaillez actuellement.
px signifie que la taille est fixe sur les points de rupture.

Choisir le comportement responsive d'un élément

Lorsque vous ajoutez un élément à la page, il est déjà doté d'un comportement responsive intégré. Cela signifie que vous n'avez pas à vous soucier de l'apparence de l'élément sur différents écrans - le comportement responsive garantit qu'il est redimensionné.

Cependant, vous pouvez modifier le comportement responsive si vous en voyez un qui convient mieux à votre design.

Quelle est la différence entre les comportements disponibles ?

Remarque :

Le comportement responsive que vous sélectionnez affecte les unités de taille utilisées. Par exemple, la sélection du comportement responsive fixe, modifie la mesure de px* en px.

Pour choisir un comportement responsive différent :

Sélectionnez le point de rupture correspondant.
Sélectionnez l'élément.
Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.

Sélectionnez une option dans la liste déroulante Comportement responsive réactif.

Un GIF du menu déroulant Comportement responsive lorsqu'il est ouvert, et les options disponibles

Gérer les écarts indésirables sur le site en ligne ?

Consultez cette vidéo de dépannage pour savoir comment le comportement responsive peut affecter, et résoudre ce problème.

Utiliser des mesures de taille avancées

Le dimensionnement avancé permet une personnalisation plus poussée de la taille de l'élément par point de rupture. Au lieu de travailler avec des px* et de choisir un comportement responsive, ce mode vous permet de voir les mesures que nous utilisons en coulisses (ex. px, %, vh) et de les ajuster à vos besoins.

Quelles sont les mesures disponibles ?

Vous pouvez choisir celui(s) que vous préférez en utilisant :

Pixels (px) : Si vous voulez que votre élément reste exactement le même sur toutes les tailles d'écran, vous pouvez simplement définir sa hauteur et sa largeur en valeurs px.
Pourcentage (%) : La valeur de largeur / hauteur de l'élément dépend des dimensions de son parent. Cela garantit que l'élément est redimensionné proportionnellement à son parent.
- Par exemple, vous pouvez ancrer un élément de texte (enfant) à un conteneur (parent) et définir sa largeur sur 50 %. De cette façon, votre texte occupe toujours 50 % de la largeur du conteneur, quelle que soit la taille de l'écran.
Largeur et hauteur de la zone d'affichage(vw et vh) : Ces mesures représentent la largeur et la hauteur d'une zone d'affichage donnée (navigateur).
- Par exemple, 1vw de largeur = 1 % de la largeur du navigateur.
Contenu max. (max-c) : Vous pouvez utiliser cette mesure pour définir la largeur d'un élément et la faire dépendre de la taille de ses éléments enfants, peu importe la taille du contenu ou le nombre de mots qu'il contient. L'élément parent s'ajuste au contenu.
Calcul : En utilisant des principes mathématiques de base, vous pouvez écrire une "formule" qui détermine la largeur ou la hauteur d'un élément. Vous pouvez même combiner différentes mesures dans ce calcul (par exemple, vh et px).
- Par exemple, vous pouvez faire en sorte qu'un en-tête et une section occupent toute la hauteur de la zone d'affichage (100vh). Si la hauteur de l'en-tête est définie sur 100px, le calcul de la hauteur de la section serait : (100vh - 100px). Cela soustrait la hauteur de l'en-tête de la zone d'affichage.

Largeur et hauteur automatiques

Pour certains éléments, la largeur ou la hauteur est déjà définie sur Auto. Cela signifie que le contenu de l'élément détermine la largeur / hauteur, vous permettant d'ajouter ou de supprimer du contenu sans vous soucier du redimensionnement.

L'activation du dimensionnement avancé s'applique à l'élément spécifique que vous sélectionnez, sur tous les points de rupture. Le mode de dimensionnement avancé reste activé pour cet élément, pour un accès facile, mais vous pouvez le désactiver à tout moment.

Pour accéder au dimensionnement avancé et le modifier :

Sélectionnez le point de rupture concerné dans l'éditeur.
Sélectionnez l'élément.
Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite.

Cliquez sur l'icône Plus d'actions à côté de Taille.
Activez le curseur Taille avancée .
Modifiez la taille si nécessaire : Largeur, hauteur et valeurs min et maximum.
Suggestion : Passez à une autre unité (par exemple de px à %) en cliquant dessus dans l'inspecteur. Cela ouvre une liste des mesures disponibles pour l'élément.

GIF montrant la liste de mesures qui s'ouvre lorsque vous cliquez sur une dans l'inspecteur

Configurer la hauteur de la section :

Nous ne recommandons pas de configurer la hauteur en pixels, car cela peut empêcher les éléments de s'afficher comme prévu. Par exemple, ils risquent de déborder ou apparaître rognés.

Paramétrer les préférences de dimensionnement

Choisissez votre préférence de taille pour le site que vous personnalisez. Si vous aimez travailler avec des mesures CSS avancées, vous pouvez activer le dimensionnement avancé dans l'Éditeur. Si vous préférez choisir le mode de dimensionnement par élément, vous pouvez le garder.

Pour paramétrer les préférences de dimensionnement d'un site :

Cliquez sur l'icône Wix Studio en haut à gauche.
Survolez Vue.
Survolez Préférences de dimensionnement .
Choisissez votre préférence :
- Toujours afficher le dimensionnement avancé : Le dimensionnement dans l'inspecteur est toujours configuré sur avancé.
  Remarque : Ce mode désactive l'option permettant de revenir à des éléments spécifiques du dimensionnement avancé.
- Définir par élément : Vous définissez les préférences de dimensionnement pour chaque élément.

Une capture d'écran du menu supérieur de l'Éditeur Studio, où vous pouvez contrôler les préférences de dimensionnement

FAQ

Cliquez sur une question ci-dessous pour en savoir plus sur le dimensionnement.

J'ai configuré une section pour qu'elle soit mise à l'échelle proportionnelle mais les éléments ne sont pas mis à l'échelle. Pourquoi ?

Quand dois-je utiliser le dimensionnement avancé ?

Tous les comportements responsives sont-ils disponibles pour les éléments liés aux applis Wix ?