Éditeur Studio : Paramétrer la taille de vos éléments
Temps de lecture : 9 min
Lorsque vous concevez un site, vous voulez vous assurer que les éléments sont parfaits sur toutes les tailles d'écran. Dans l'éditeur de Studio, vous modifiez la taille en pixels et le comportement réactif 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 ’élément est redimensionné sur d'autres écrans. À partir du panneau Inspecteur, vous pouvez modifier le comportement responsive d'un élément pour qu'il soit plus adapté mieux à vos besoins.
Accédez à notre Académie Wix Studio pour consulter d'autres webinaires, tutoriels et cours Wix Studio.
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*
px* est une unité de mesure dans l'Éditeur Studio. Elle vous permet de modifier le dimensionnement à l'aide d'une mesure familière (les pixels), tandis que la mesure réelle en coulisses est réactive.
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 concerné dans l'éditeur.
- Sélectionnez l'élément.
- Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite.
- 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 approfondie de la taille de l'élément par point de rupture. Lorsque vous activez le dimensionnement avancé pour un élément, vous voyez les mesures que nous utilisons et les ajustons en fonction de vos besoins.
Cela signifie que vous pouvez travailler avec des unités réactives au lieu de pixels, ce qui ouvre un tout nouvel éventail de possibilités.
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.
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 les options avancées : Le dimensionnement dans l'inspecteur est toujours défini sur avancé.
Remarque : Ce mode désactive l'option permettant de faire 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 les options avancées : Le dimensionnement dans l'inspecteur est toujours défini sur avancé.
Cela vous a-t-il aidé ?
|