Structure des Sites Internet Guesty
L'éditeur de site web est composé d'un en-tête, d'un pied de page, de lignes et de colonnes. Chaque widget ajouté est inséré dans l'une de ces sections.
Les widgets occupent souvent toute la taille d'une colonne ou d'une ligne, ce qui rend leur sélection difficile. Pour contourner ce problème, faites un clic droit sur le widget dans la colonne ou la ligne à sélectionner, survolez l'option « Sélectionner un conteneur », puis sélectionnez « Colonne » ou « Ligne ».
Lignes
Les lignes sont les sections horizontales de votre site. Lorsque vous ajoutez des widgets et des colonnes à votre site, ils sont placés dans ces lignes. Pour modifier l'affichage du contenu sur mobile, cliquez sur l'option d'inversion de l'ordre des colonnes dans l'éditeur de lignes. Vous devez modifier les options de conception de la ligne sur mobile pour accéder à l'option d'inversion de l'ordre des colonnes.
Vous pouvez ajouter des lignes à votre site en faisant glisser des widgets. Lorsque vous faites glisser un widget entre des lignes ou dans l'espace où vous souhaitez ajouter une ligne, une nouvelle ligne est créée lorsque vous déposez le widget.
Pour supprimer une ligne, faites un clic droit n'importe où sur la ligne pour ouvrir le menu contextuel, puis cliquez sur « Supprimer ». Vous pouvez également cliquer sur le bouton « Ligne » en haut à gauche de la ligne, puis sur « Supprimer ».
Note :
Pour des informations détaillées sur la modification et l’organisation des lignes, voir Éditeur de lignes.
Colonnes
Chaque ligne contient au moins une colonne. Les colonnes contiennent tous les widgets de votre site et contrôlent leur disposition.
Chaque ligne peut contenir jusqu'à quatre colonnes. Chaque fois que vous ajoutez une nouvelle colonne, elle apparaît à côté de la colonne existante sur cette ligne.
Note :
- Alors que les vues de bureau et de tablette permettent à chaque ligne de contenir jusqu'à quatre colonnes, les Sites Internet mobiles ne peuvent afficher qu'au maximum deux colonnes d'affilée.
- Les colonnes ajoutées dans les vues de bureau ou de tablette occuperont toute la largeur de la page lors du passage à la vue mobile ; pour créer une ligne avec deux colonnes dans la vue mobile, passez d'abord à la vue mobile, puis ajoutez un widget à deux colonnes.
Pour supprimer une colonne, faites un clic droit n'importe où sur la colonne pour ouvrir le menu contextuel, puis cliquez sur « Supprimer ». Vous pouvez également cliquer sur la croix rouge en haut à droite de la colonne.
Vous pouvez placer le widget directement dans les colonnes ou structurer davantage la colonne en ajoutant des lignes intérieures.
Note :
Pour des informations détaillées sur l’édition et l’organisation des colonnes, voir Éditeur de colonnes.
Rangées intérieures
Les lignes intérieures offrent une plus grande flexibilité de conception en permettant d'ajouter des lignes à l'intérieur des colonnes. Elles vous permettent de modifier la disposition des colonnes tout en conservant l'apparence générale de la ligne (par exemple, l'arrière-plan, l'espacement et le fond perdu).
Tout comme les lignes classiques, les lignes intérieures peuvent avoir leur propre arrière-plan et espacement, être divisées en quatre colonnes maximum et leur ordre peut être modifié sur mobile. Les colonnes des lignes intérieures peuvent être alimentées par n'importe quel widget, mais il est impossible d'y ajouter des lignes intérieures.
Pour ajouter une ligne intérieure à une colonne, effectuez l’une des opérations suivantes :
- Faites un clic droit sur la ligne, puis cliquez sur « Ajouter une ligne intérieure ». Si la ligne comporte plusieurs colonnes, choisissez celle à laquelle vous souhaitez ajouter les lignes intérieures.
- Cliquez avec le bouton droit sur la colonne, puis cliquez sur Ajouter une ligne intérieure.
- Cliquez avec le bouton droit sur la ligne intérieure, puis cliquez sur Ajouter une ligne pour placer une ligne intérieure sous la ligne actuelle.
Exemple de rangée intérieure
Pour donner un exemple de la façon d'utiliser la ligne intérieure, examinons deux façons de concevoir une mise en page contenant un titre et 3 boutons :
- Ajoutez deux lignes. Placez le titre sur la ligne 1 avec une colonne. Divisez la ligne 2 en trois 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.
- Ajoutez une ligne. Par défaut, chaque ligne contient une colonne. Ajoutez deux lignes intérieures à la colonne. Placez le titre dans la ligne intérieure 1. Divisez la ligne intérieure 2 en trois colonnes. Placez un bouton dans chaque colonne.
- Ces deux lignes intérieures partageront l'arrière-plan, l'espacement et le fond perdu de la ligne principale.
Quelques considérations importantes lors de 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 inverser l'ordre des widgets et des lignes intérieures, vous devez glisser-déposer manuellement les widgets au-dessus ou en dessous de la ligne intérieure.
- Les widgets à 2, 3 ou 4 colonnes ne peuvent pas être placés dans les lignes intérieures. Pour ajouter une colonne, faites un clic droit sur la ligne et cliquez sur « Ajouter une colonne ».
- Contrairement aux lignes normales, les lignes intérieures ne peuvent pas être copiées-collées.
Widgets
Les widgets contiennent le texte, les images, les boutons et autres contenus de votre site.
Pour ajouter des widgets à votre site :
- Dans le panneau de gauche, cliquez sur Widgets.
- Recherchez le widget que vous souhaitez, puis faites-le glisser et déposez-le sur votre site.
Pour supprimer un widget de votre site, faites un clic droit n'importe où sur le widget pour ouvrir le menu contextuel, puis cliquez sur « Supprimer ». Vous pouvez également cliquer sur la croix rouge en haut à droite du widget.
Pour disposer des widgets côte à côte, faites glisser un widget sur votre site, ajoutez une colonne à la ligne où il a été placé, puis glissez un autre widget dans cette colonne. Vous pouvez également faire glisser le widget à deux colonnes sur votre site, puis glisser-déposer les widgets dans chaque colonne.
Aligner pour aligner
Lors du redimensionnement des widgets d'une même colonne, Guesty Sites Internet tente de les aligner pour qu'ils soient exactement à la même taille. Lors du redimensionnement, Guesty Sites Internet avance ou recule pour s'aligner à l'emplacement souhaité. Cela devrait faciliter l'harmonisation des widgets.
Aligner sur la grille
La fonctionnalité Aligner sur la grille permet d'aligner les widgets sur les pages de votre site avec une précision professionnelle. Ce système permet d'aligner les widgets horizontalement et verticalement dans les colonnes et les lignes. Des règles s'affichent lors du déplacement d'un élément dans sa ligne ou colonne, ou lors du redimensionnement du widget. Les éléments alignés sont indiqués par une bordure colorée. Un widget peut être aligné avec plusieurs autres widgets, selon le cas d'utilisation.
Note :
L'alignement est pris en charge dans les vues des trois appareils différents (ordinateur de bureau, tablette, mobile).
Pour plus d'informations sur l'ajout et la modification de widgets, voir Ajouter des widgets et Modifier des widgets.