Éditeur Studio : Paramétrer la taille de vos éléments
Temps de lecture : 10 min
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.
Chaque élément est livré 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.
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.
Pour verrouiller les proportions :
- Sélectionnez l'élément média concerné.
- Cliquez sur la flèche Ouvrir l'inspecteur
en haut à droite.
- Cliquez sur l'icône Verrouiller les proportions
sous Taille.
- 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%).
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.
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 ?
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.
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.
- Toujours afficher le dimensionnement avancé : Le dimensionnement dans l'inspecteur est toujours configuré sur avancé.
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é ?
Cela vous a-t-il aidé ?
|