Centre d'assistance Wix
    Accueil
  1. Studio, Partenaires et Enterprise
  2. Wix Studio
  3. Utiliser l'Éditeur Studio
  4. Concevoir des design dans l'Éditeur Studio
    5. Éditeur Studio : Utiliser un conteneur pour créer une section verticale

Éditeur Studio : Utiliser un conteneur pour créer une section verticale

Temps de lecture : 5 min
Les sections verticales ne sont pas disponibles dans l'Éditeur Studio. Cependant, vous pouvez utiliser un conteneur épinglé pour obtenir un effet similaire, en le faisant ressembler à une section de barre latérale.
Exemple du résultat final - une section barre latérale utilisée pour la navigation sur un site en ligne créé sur l'Éditeur Studio

Étape 1 | Ajouter un conteneur et appliquez une grille

Commencez par ajouter un conteneur et définissez sa hauteur sur 100vh pour qu'il occupe toute la hauteur de l'écran. Ensuite, il applique une grille CSS avancée avec la taille de la rangée définie sur Auto.   

Pour ajouter un conteneur et appliquer une grille

  1. Ajouter un conteneur depuis le panneau Ajouter des éléments  dans l'Éditeur Studio.
  2. Modifier la hauteur du conteneur en 100vh :
    1. Cliquez sur la flèche Ouvrir l'inspecteur  en haut à droite de l'Éditeur.
    2. Cliquez sur l'icône Plus d'actions  à côté de Taille.
    3. Activez le curseur Dimensionnement avancé .
    4. Définissez la hauteur sur 100vh.
      Suggestion : Cliquez sur l'unité de mesure actuelle (par exemple %, px) pour le modifier.
  3. Appliquer une grille CSS sur le conteneur :
    1. (Dans l'inspecteur) Faites défiler jusqu'à Mise en page.
    2. Cliquez sur Appliquer à côté de Grille CSS avancée.
    3. Cliquez sur Rangées.
    4. Cliquez sur la mesure de taille actuelle pour la modifier en Auto.
Définir la taille de la rangée de la grille sur Auto dans le panneau Inspecteur

Étape 2 | Joindre le conteneur à l'en-tête

Faites glisser le conteneur sur l'en-tête de la page actuelle pour l'attacher. Cela redimensionne l'en-tête en fonction du conteneur, mais nous modifierons à nouveau la hauteur dans le panneau Inspecteur. 
Ensuite, épinglez l'en-tête pour que le conteneur reste visible lorsque les visiteurs font défiler la page vers le haut et vers le bas.

Pour joindre le conteneur à l’en-tête :

  1. Faites glisser le conteneur pour l'attacher à l'en-tête de la page. 
  2. Redimensionner l'en-tête :
    1. Sélectionnez l'en-tête.
    2. Cliquez sur la flèche Ouvrir l'inspecteur  en haut à droite de l'Éditeur.
    3. Cliquez sur l'icône Plus d'actions  à côté de Taille.
    4. Activez le curseur Dimensionnement avancé .
    5. Définissez la hauteur à la valeur souhaitée en px.
      Suggestion : Cliquez sur l'unité de mesure actuelle (par exemple %, vh) pour le modifier.
  3. Faites défiler jusqu'à Position.
  4. Sélectionnez Épingler dans le menu déroulant Type de position .
Vue côté par côté du panneau Inspecteur et de l'en-tête avec le conteneur attaché

Étape 3 | Aligner le conteneur et ajouter une marge intérieure à la page

Il est maintenant temps de placer le conteneur. En fonction de l'endroit où vous souhaitez qu'il apparaisse, alignez le conteneur en haut et à gauche / dans les coins haut et droit.
L'étape finale consiste à ajouter un remplissage au côté correspondant de la page - cela empêche le conteneur de couvrir le contenu de la page. 

Pour aligner le conteneur et ajouter une marge intérieure :

  1. Sélectionnez le conteneur.
  2. (Dans l'inspecteur) Aligner le conteneur en haut et à gauche/à droite :
    1. Cliquez sur l'icône Aligner en haut .
    2. Cliquez sur l'icône Aligner à gauche  / Aligner à l'icône droite .
  3. Ajoutez un remplissage à la page :
    1. Cliquez sur Page en haut de l'inspecteur.
      Selecting the page in the breadcrumbs at the top of the Inspector panel
    2. Sous Position, définissez la marge intérieure pour qu'elle soit de la même largeur que le conteneur.
      Par exemple, si la largeur du conteneur est de 20 % et située sur le côté gauche de la page, le remplissage de gauche doit également être défini à 20 %.
      Setting the page padding in the Inspector panel

Étape 4 | Personnaliser le conteneur

Le conteneur est maintenant prêt à être utilisé comme section de barre latérale. Ajoutez tous les éléments dont vous avez besoin et personnalisez le design du conteneur à partir du panneau Inspecteur. Cela devrait ressembler à dans l'exemple ci-dessous - attaché à l'en-tête et occupent toute la hauteur de l'écran lorsque vous faites défiler la toile vers le haut et vers le bas. 
Exemple d'un conteneur converti en section barre latérale à l'aide des instructions de l'article

Cela vous a-t-il aidé ?

|

Dans cet article

  • Étape 1 | Ajouter un conteneur et appliquez une grille
  • Étape 2 | Joindre le conteneur à l'en-tête
  • Étape 3 | Aligner le conteneur et ajouter une marge intérieure à la page
  • Étape 4 | Personnaliser le conteneur