Editor X : Utiliser des mises en page

Temps de lecture : 7 min
Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio
Organisez votre contenu dans une structure ; un outil de mise en page intelligent composé de conteneurs réactifs. Grâce à la technologie Flex, les conteneurs s'adaptent automatiquement à la taille de l'écran de votre visiteur. 
Vous pouvez choisir un type d'affichage pour votre structure (par exemple colonnes, briques, diapositives), ajoutez ou supprimez des éléments selon vos besoins et modifiez des paramètres tels que les marges et la directionnalité.
Dans cet article, découvrez comment :

Ajouter une structure

Ouvrez le panneau Ajouter pour sélectionner une structure prédéfinie et faites-la glisser sur votre page. Vous pouvez choisir parmi de nombreux designs en fonction du type de contenu que vous souhaitez afficher (par exemple images uniquement, images et texte, etc.)

Pour ajouter un layoute r:

  1. Cliquez sur Ajouter en haut de l'Editor X.
  2. Cliquez sur Outils de mise en page.
  3. Cliquez sur Mises en page.
  4. Faites glisser un layouter sur votre page.
Découvrez comment cela fonctionne :
Faites glisser les poignées sur votre toile pour voir comment le contenu du layouter se réorganise de manière transparente entre les points de rupture.

Ajouter et gérer les éléments de la structure

Une structure est composée de plusieurs éléments qui représentent des conteneurs réactifs. Si vous modifiez le nombre d'éléments dans une structure, les éléments seront automatiquement redimensionnés pour s'ajuster à l'espace disponible. 
Pour ajouter un nouvel élément, vous pouvez cliquer sur Ajouter un élément ou utiliser le panneau Gérer les éléments dans l'inspecteur. 

Pour gérer les éléments de votre structure à partir de l'inspecteur :

  1. Cliquez sur votre structure.
  2. Cliquez sur l'icône Inspecteur  en haut de l'Editor X.
  3. (Dans l'inspecteur) Cliquez sur Gérer à côté du nombre d'éléments.
  4. Cliquez sur l'icône Plus d'actions à côté d'un élément pour effectuer l'une des actions suivantes :
    • Dupliquer : Faire 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.
    • Ne pas afficher : Masquez cet élément des breakpoints spécifiques sur lequel vous travaillez.
A screenshot of the Manage Items panel in the Inspector
Vous avez besoin de commander à nouveau les articles ?
Maintenez l'icône Réorganiser à côté de l'élément concerné et faites-le glisser vers sa nouvelle position. 

Personnaliser l'affichage d'une structure

Modifiez l'affichage de votre structure en un clic. Vous pouvez choisir la manière dont vous souhaitez présenter votre contenu : en colonnes, en rangées, en mosaïque, en diaporama ou en diaporama.Les éléments se réorganisent automatiquement pour vous.
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 des colonnes ou des slider sur les petits écrans tels que les appareils mobiles.

Pour personnaliser davantage l'affichage :

  1. Cliquez sur votre structure.
  2. Cliquez sur le panneau Inspecteur  en haut à droite de l'Editor X.
  3. (Facultatif) Sous Affichage, sélectionnez un Type d'affichage.
  4. Personnalisez votre structure en fonction du type d'affichage sélectionné :

Redimensionner les éléments de la structure

Les éléments de votre structure n'ont pas besoin d'être de taille égale. Vous pouvez redimensionner les éléments individuellement pour les rendre plus grands ou plus petits que les autres. Depuis le panneau inspecteur, ajustez la largeur et la hauteur de chaque élément en utilisant les mesures de votre choix.Vous pouvez également ajuster les marges horizontales et verticales autour des éléments.

Réorganiser les éléments de la structure

Réorganisez le contenu à l'intérieur de votre structure en modifiant l'ordre des éléments. En utilisant le menu contextuel, vous pouvez déplacer les éléments d'avant en arrière - le layouter s'ajuste automatiquement pour s'adapter à vos modifications.

Pour réorganiser les éléments de la structure:

  1. Cliquez avec le bouton droit de la souris sur l'élément que vous souhaitez déplacer.
  2. Survolez Changer l'ordre .
  3. Sélectionnez Avec l'élément suivant / Avec l'élément précédent .

Cela vous a-t-il aidé ?

|