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 aide à mettre en avant des sections de votre site qui seraient susceptibles d'être oubliées. 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.
Structure du créateur de site Web
L'éditeur de site est constitué d'un en-tête, d'un bas de page, de lignes et de colonnes. Chaque que vous ajoutez est inséré dans l'une de ces sections.
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 dans la colonne ou la ligne que vous souhaitez sélectionner, placez le curseur sur l'option Sélectionnez un conteneur, puis sélectionnez Colonne ou Ligne.
Lignes
Les lignes sont les sections horizontales de votre site Web. Lorsque vous ajoutez des et des colonnes sur votre site Web, ils sont placés à l'intérieur de ces lignes. Pour modifier la façon dont le contenu est affiché sur mobile, cliquez sur le bouton Inverser l'ordre des colonnes dans l'éditeur des lignes.
Vous pouvez ajouter des lignes à votre site Web en déplaçant des . En faisant glisser un entre des lignes ou en le plaçant là où vous souhaitez ajouter une ligne, vous créerez une nouvelle ligne lorsque vous déposerez le .
Pour supprimer une ligne, effectuez un clic droit n'importe où sur la ligne pour ouvrir le menu contextuel, puis sélectionnez Supprimer. Vous pouvez également cliquer sur le bouton Ligne dans le coin supérieur gauche de la ligne, puis sur Supprimer.
Colonnes
Chaque ligne comporte au moins une colonne. Les colonnes contiennent tous les de votre site et contrôlent leur agencement.
Chaque ligne peut contenir jusqu'à quatre colonnes. Dès que vous ajoutez une nouvelle colonne, elle apparaît à côté de la colonne existante sur cette ligne.
- S'il est possible de faire tenir jusqu'à quatre colonnes par ligne sur ordinateur et tablette, 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.
Pour supprimer une colonne, effectuez un clic droit n'importe où sur la colonne pour ouvrir le menu contextuel, puis sélectionnez Supprimer. Vous pouvez également cliquer sur la croix rouge dans le coin supérieur droit de la colonne.
Vous pouvez placer les 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 structurelle, car elles permettent d'ajouter des lignes à l'intérieur des colonnes. Grâce aux lignes intérieures, vous pouvez varier la mise en page des colonnes tout en conservant la structure générale de la ligne (par exemple, fond, espacement, fond perdu).
Tout comme les lignes ordinaires, les lignes intérieures peuvent avoir leur fond et leur espacement, être divisées en quatre colonnes et voir l'ordre de leurs colonnes modifié sur mobile. N'importe quel 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 :
- Effectuez un clic droit sur la ligne, puis sélectionnez Ajouter une ligne intérieure. S'il y a plusieurs colonnes dans la ligne, choisissez la colonne à laquelle vous souhaitez ajouter les lignes intérieures.
- Effectuez un clic droit sur la colonne, puis cliquez sur Ajouter une ligne intérieure.
- Effectuez un clic droit sur la ligne intérieure, puis sélectionnez Ajouter une ligne pour placer une ligne intérieure sous la ligne actuelle.
Exemple de ligne intérieure
Pour illustrer l'utilisation de la ligne intérieure, voici deux manières de créer une mise en page 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.
- 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.
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 éléments de votre site Web.
Pour ajouter des à votre site :
- Dans le panneau de gauche, cliquez sur Widgets.
- Recherchez le désiré, puis faites-le glisser pour le déposer sur votre site.
Pour supprimer un de votre site, effectuez un clic droit n'importe où sur le pour ouvrir le menu contextuel, puis cliquez sur Supprimer. Vous pouvez également cliquer sur la croix rouge dans le coin supérieur droit du .
Pour positionner les côte à côte, faites glisser un sur votre site, ajoutez une colonne à la ligne du , puis déplacez un autre dans cette colonne. Vous pouvez également faire glisser le Deux colonnes sur votre site, puis placer les dans chaque colonne.
Alignement dynamique
Lorsque vous redimensionnez des dans une même colonne, IONOS tentera de les aligner pour qu'ils soient exactement de la même taille. IONOS adaptera les widgets au fur et à mesure que vous les redimensionnez pour les aligner. Vous pourrez ainsi créer des de même taille plus facilement.
Alignement en grille
La fonction d'alignement en grille permet de placer des sur les pages de votre site avec une précision professionnelle. Ce système vous permet d'aligner les horizontalement et verticalement dans les colonnes et les lignes. Des règles s'afficheront automatiquement lorsque vous déplacez un élément dans sa ligne ou sa colonne, ou lorsque vous redimensionnez le . Les éléments qui ont été alignés sont dotés d'une bordure colorée. Un peut être aligné avec plusieurs autres , selon le cas d'utilisation.
La fonction d'alignement est disponible sur ordinateur, tablette et mobile.
Pour plus d'informations sur l'ajout et la modification de , consultez les articles Ajout de widgets et Modification de widgets.