Organisation du contenu

Présentation

La façon dont vous organisez le contenu sur votre site Web est très importante. Une bonne organisation du contenu permet aux visiteurs de trouver plus facilement ce qu'ils recherchent, et vous permet de mettre en avant des sections de votre site qui seraient susceptibles de passer à la trappe. Une page bien organisée donne à votre site Web un aspect professionnel et permet d'accroître les ventes en facilitant les recherches des visiteurs sur le site Web.

Guide

Structure du site Web responsive

Votre site Web responsive est créé à partir d'un en-tête, d'un bas de page, de lignes et de colonnes. Chaque widget que vous ajoutez est inséré dans l'une de ces sections.  

Lignes

Les lignes sont les sections horizontales de votre site Web. Lorsque vous ajoutez des widgets et des colonnes sur votre site Web, ils sont placés à l'intérieur de ces lignes. 

Vous pouvez ajouter des lignes sur votre site Web en faisant glisser des widgets. Lorsque vous faites glisser un widget entre des lignes ou vers un emplacement où vous souhaitez qu'il y ait une ligne, une nouvelle ligne est créée lorsque vous déposez le widget.

Il existe deux façons de supprimer des lignes. Vous pouvez effectuer un clic droit n'importe où sur la ligne pour ouvrir le menu contextuel, puis sélectionner Delete (Supprimer). Vous pouvez également cliquer sur le bouton Row (Ligne) dans le coin supérieur gauche de la ligne et sélectionner Delete (Supprimer).

Colonnes

Chaque ligne comporte au moins une colonne. Les colonnes contiennent tous les widgets sur votre site et contrôlent leur agencement.

Chaque ligne contient jusqu'à quatre colonnes. Dès que vous ajoutez une nouvelle colonne, elle apparaît à côté de la colonne existante sur cette ligne. 

Il existe deux façons de supprimer des colonnes. Vous pouvez effectuer un clic droit n'importe où sur la colonne pour ouvrir le menu contextuel, puis sélectionner Delete (Supprimer). Vous pouvez également appuyer sur la croix rouge dans le coin supérieur droit de la colonne.

Vous pouvez placer les widgets directement dans les colonnes ou structurer davantage la colonne en y ajoutant des lignes. 

Lignes intérieures

Les lignes intérieures offrent une plus grande souplesse de conception en vous permettant d'ajouter des lignes à l'intérieur des colonnes. Grâce aux lignes intérieures, vous pouvez varier la disposition des colonnes tout en conservant la structure générale de la ligne (arrière-plan, espacement, fond perdu, etc.).

Tout comme les lignes ordinaires, les lignes intérieures peuvent avoir leur propre arrière-plan et espacement, être divisées en quatre colonnes et voir l'ordre de leurs colonnes modifié sur mobile. N'importe quel widget peut remplir les colonnes des lignes intérieures, mais il est impossible d'ajouter des lignes intérieures à ces colonnes.

Pour ajouter une ligne intérieure à une colonne, effectuez l'une des opérations suivantes :

  1. Faites un clic droit sur la ligne, puis cliquez sur Add Inner Row (Ajouter une ligne intérieure). S'il y a plusieurs colonnes sur la ligne, vous devrez choisir la colonne à laquelle vous souhaitez ajouter les lignes intérieures.
  2. Faites un clic droit sur la colonne, puis cliquez sur Add Inner Row (Ajouter une ligne intérieure).
  3. Faites un clic droit sur la ligne intérieure, puis cliquez sur Add Row (Ajouter une ligne) pour placer une ligne intérieure sous la ligne actuelle.

Pour illustrer l'utilisation de la ligne intérieure, examinons deux manières de concevoir une disposition contenant un titre et trois boutons :

  • Ajoutez deux lignes. Placez le titre sur la ligne 1 avec 1 colonne. Divisez la ligne 2 en 3 colonnes. Placez un bouton dans chaque colonne.
    • Deux lignes distinctes ne peuvent pas partager la même image d'arrière-plan et vous devez définir l'espacement et le style de fond perdu séparément pour chaque ligne.

inner-rows1-en-US.png

  • Ajoutez une ligne. Par défaut, chaque ligne contient une colonne. Ajoutez 2 lignes intérieures à la colonne. Placez le titre sur la ligne intérieure 1. Divisez la ligne intérieure 2 en 3 colonnes. Placez un bouton dans chaque colonne.
    • Ces deux lignes intérieures partagent l'arrière-plan, l’espacement et le fond perdu de la ligne principale.

inner-rows2-en-US.png

Remarques importantes relatives à la modification des lignes intérieures :

  • Vous ne pouvez utiliser les flèches de changement d'ordre que pour changer l'ordre entre les lignes intérieures. Pour changer l'ordre des widgets et des lignes intérieures, vous devez manuellement faire glisser et déposer les widgets au-dessus ou au-dessous de la ligne intérieure.
  • Les widgets 2 colonnes, 3 colonnes et 4 colonnes ne peuvent pas être placés sur les lignes intérieures. Pour ajouter une colonne, faites un clic droit sur la ligne, puis cliquez sur Add Column (Ajouter une colonne).
  • Contrairement aux lignes ordinaires, les lignes intérieures ne peuvent pas être copiées-collées.  

Widgets

Les widgets contiennent le texte, les images, les boutons et les autres contenus de votre site Web. Pour ajouter des widgets sur votre site, cliquez sur Widgets dans le menu à gauche, recherchez le widget que vous souhaitez, puis faites-le glisser et déposez-le sur votre site. 

arrangingcontent8_en-us.png

Il existe plusieurs moyens de supprimer des widgets de votre site. Vous pouvez effectuer un clic droit n'importe où sur le widget pour ouvrir le menu contextuel, puis sélectionner Delete (Supprimer). Vous pouvez également appuyer sur la croix rouge dans le coin supérieur droit du widget. 

Remarques

Si l'affichage sur ordinateur et tablette permet de faire tenir jusqu'à quatre colonnes par ligne, les sites Web sur mobile peuvent uniquement afficher un maximum de deux colonnes dans une ligne.

Les colonnes ajoutées dans un affichage sur ordinateur ou tablette s'adapteront à la pleine largeur de la page en cas de passage à un affichage sur mobile ; pour créer une ligne avec deux colonnes dans l'affichage sur mobile, passez d'abord à l'affichage mobile, puis ajoutez un widget à deux colonnes.

FAQ

Comment placer des widgets côte à côte ?

Il existe plusieurs façons de disposer des widgets côte à côte. Vous pouvez faire glisser un widget vers votre site Web, ajouter une colonne à la ligne où le widget a été placé, puis faire glisser un autre widget vers cette colonne. Vous pouvez également faire glisser le widget à deux colonnes vers votre site Web, puis faire glisser et déposer le widget dans chaque colonne. 

Comment sélectionner une colonne ou une ligne ?

Les widgets occupent souvent l'intégralité d'une colonne ou d'une ligne, et sont donc difficiles à sélectionner. Pour contourner ce problème, effectuez un clic droit sur le widget dans la colonne ou la ligne que vous souhaitez sélectionner, passez la souris sur l'option Select Container (Sélectionner un conteneur), puis sélectionnez Column (Colonne) ou Row (Ligne).

Comment supprimer la dernière colonne d'une ligne ?

Vous ne pouvez pas ! Une colonne vide ne s'affiche pas sur le site réel. Elle est juste présente au cas où vous voudriez y déposer du contenu. Vous pouvez supprimer la colonne en supprimant la ligne dans laquelle elle est contenue.

Puis-je modifier la façon dont le contenu s'affiche dans la vue mobile ?

Oui ! Vous pouvez activer l'option d'ordre inverse des colonnes dans la conception des lignes de façon à modifier la façon dont les colonnes s'affichent dans la vue mobile de chaque ligne.arrangingcontent14_en-US.png

Ressources