Éditeur Studio : Gérer et personnaliser les flexboxes
Temps de lecture : 5 min
Gérez et personnalisez des flexboxes pour créer une expérience unique pour vos visiteurs. Vous pouvez redimensionner les éléments en fonction de la structure de votre page, ajuster les paramètres d'affichage et ajouter, supprimer et réorganiser les éléments au fur et à mesure.
Dans cet article, apprenez comment :
Gérer les éléments de la flexbox
Gérez les éléments de la flexbox au fur et à mesure pour personnaliser davantage votre contenu, et le maintenir à jour. Vous pouvez masquer des éléments des points de rupture, modifier leur ordre, et plus encore.
Pour gérer vos éléments flexbox à partir de l'Inspecteur :
- Cliquez sur votre flexbox.
- Cliquez sur la flèche Ouvrir l'inspecteur
en haut à droite de l'Éditeur. - (Dans l'Inspecteur) Cliquez sur Gérer à côté du nombre d'éléments.
- Choisissez ce que vous souhaitez faire avec vos éléments :
- Réorganiser :
- Appuyez sur l'icône Réorganiser
à côté de l'élément concerné et faites-le glisser à sa nouvelle position.
- Appuyez sur l'icône Réorganiser
- Gérer :
- Cliquez sur l'icône Plus d'actions
à côté de l'élément concerné. - Gérez les éléments à l'aide des options :
- Dupliquer : Faites une copie d'un élément spécifique.
- Renommer : Donnez à chaque élément un nom que vous pouvez reconnaître.
- Supprimer : Supprimez complètement l'élément.
- Masquer : Masquez cet élément du point de rupture spécifique sur lequel vous travaillez.
- Cliquez sur l'icône Plus d'actions
Personnaliser l'affichage de votre flexbox
Sélectionnez un affichage de la flexbox pour compléter la structure de votre page. En fonction de l'affichage que vous choisissez, vous pouvez davantage personnaliser son apparence en ajustant les paramètres tels que les espaces, la direction et la largeur.
Pour personnaliser l'affichage :
- Cliquez sur votre flexbox.
- Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite de l'Éditeur.
- Sélectionnez l'onglet Design
. - Cliquez sur Mise en page.
- (Facultatif) Cliquez sur Type d'affichage et sélectionnez un type dans le menu déroulant.
- Personnalisez votre flexbox en fonction du type d'affichage que vous sélectionnez :
- Direction : Décidez si vos éléments sont organisés de gauche à droite ou de droite à gauche.
- Proportions de l'élément : Cliquez sur Égaliser pour donner à tous les éléments de la flexbox les mêmes définitions de taille.
- Largeur de l'élément : Sélectionnez la largeur des éléments de la flexbox en pourcentage ou configurez la largeur maximale de tous les éléments.
- Écarts : Saisissez une valeur (en px, vh, vw ou à l'échelle) pour les espaces horizontaux et verticaux entre les éléments de la flexbox. Remarque : Si vous sélectionnez l'affichage Slider ou Diapositives, les options disponibles (horizontal ou vertical) dépendent de la direction que vous sélectionnez.
- Alignement de l'élément : Choisissez la façon dont vos éléments doivent être alignés et positionnés. En fonction de l'aspect que vous souhaitez obtenir, vous pouvez aligner les éléments sur les bords de la flexbox (début ou fin), ou créer un espace entre et autour des éléments.
- Contenu de débordement : Sélectionnez si vous souhaitez masquer ou afficher le contenu de débordement.
- Direction du défilement : Affichez vos éléments sur une barre de défilement horizontale ou verticale.
- Alignement Scroll snap : Cliquez sur le bouton pour l'activer. Lorsque vous faites défiler les diapositives de votre flexbox, celle-ci se « fige » sur chaque élément (diapo) pour que les visiteurs ne le manquent pas.
- Éléments par diapositive : Configurez le nombre d'éléments affichés par action de diapositive.
- Navigation : Ajoutez des flèches, un bouton ou du texte pour aider les visiteurs à naviguer entre les éléments.
- Afficher la barre de défilement : Affichez ou masquez une barre de défilement pour que vos visiteurs puissent faire défiler les éléments.
Remarques :
- Les options de personnalisation affichées dépendent du style d'affichage que vous choisissez.
- Certains navigateurs plus anciens ne prennent pas en charge les écarts (ex. Chrome 76-83, Safari 12-14 et Edge 79-83). Cela signifie que les visiteurs qui accèdent à votre site à partir de ces navigateurs ne voient pas les espaces que vous avez configurés entre les éléments de la flexbox.
Travailler avec des points de rupture :
- Vous pouvez définir une mise en page différente pour chaque point de rupture.
- Nous recommandons la mise en page Colonnes ou Slider sur les petits écrans tels que les appareils mobiles.
Redimensionner les éléments de la flexbox
Vous pouvez redimensionner chaque élément de la flexbox individuellement pour les rendre plus grands ou plus petits que les autres. Utilisez le panneau Inspecteur pour ajuster la largeur et la hauteur de chaque élément, ainsi que les marges horizontales et verticales autour des éléments.
Pour redimensionner un élément :
- Cliquez sur votre flexbox.
- Sélectionnez l'élément que vous souhaitez redimensionner.
- Cliquez sur la flèche Ouvrir l'inspecteur en haut à droite de l'Éditeur.
- Sélectionnez l'onglet Design et sélectionnez la façon dont vous souhaitez ajuster l'élément :
- Taille : Saisissez la taille de votre choix dans le champ et sélectionnez l'unité de mesure.
- Position : Sélectionnez l'option Marges / Remplissage correspondant et saisissez une valeur dans le champ.
Cela vous a-t-il aidé ?
|