Présentation de l'éditeur

La barre de navigation supérieure contient des raccourcis utiles pour les différentes actions du site.

La barre de navigation supérieure vous permet de

Le panneau latéral sert de boîte à outils complète pour gérer divers aspects de la conception et de la fonctionnalité de votre site. Vous pouvez apporter des modifications importantes à la conception et à la fonctionnalité de votre site. Ces onglets vous permettent de personnaliser l'apparence de votre site, d'ajouter de nouvelles fonctionnalités et widget, de configurer les paramètres des pages, de gérer le contenu, de vendre des produits en ligne, de publier des articles de blog, d'installer des applications et d'optimiser votre site pour les moteurs de recherche.

Si vous êtes dans l'Éditeur classique en mode flex ou dans l'Éditeur 2.0, vous aurez accès au panneau des calques. Le panneau des calques offre une vue hiérarchique des éléments de la page de votre site, ce qui vous permet de naviguer facilement et de gérer des structures complexes. Ici, vous pouvez rapidement identifier la disposition des widget, des colonnes et des sections, ce qui simplifie le processus de localisation et d'ajustement d'éléments spécifiques. Dans le panneau Calques, vous pouvez effectuer diverses actions telles que l'ajout de nouveaux éléments, la sélection d'éléments, la réorganisation d'éléments, le changement de nom d'éléments et la modification de la visibilité d'éléments sur des points d'arrêt spécifiques.

Vous trouverez ci-dessous les options disponibles dans le panneau latéral :

C'est dans la zone de contenu / Canvas que vous pouvez déplacer ou ajouter l'une de nos fonctionnalités, ou cliquer et modifier pour les changer. La zone de contenu vous permet de modifier les images et le texte, d'éditer et de supprimer les boutons, etc.

Le panneau de conception offre une gamme de paramètres de conception pour les éléments sélectionnés, permettant une personnalisation précise. Que vous souhaitiez modifier l'alignement du contenu de la mise en page, l'espacement entre les éléments, l'animation et l'arrière-plan, le panneau de conception offre un ensemble complet d'outils pour améliorer l'attrait visuel de votre site web. Les options de conception comprennent des ajustements de la mise en page, des configurations de taille, des paramètres d'alignement et bien plus encore, adaptés à l'élément sélectionné.

Lorsque vous réglez des paramètres tels que le remplissage et les marges après avoir sélectionné un élément, le remplissage fait référence à l'espace intérieur entre le contenu et la bordure d'une boîte, tandis que les marges définissent l'espace extérieur entourant la boîte. Cela signifie que les réglages de remplissage peuvent affecter la taille de l'élément et déterminer la quantité de couleur d'arrière-plan ou d'image visible à l'intérieur de la boîte. En revanche, le réglage des marges détermine la manière dont l'élément interagit avec les éléments adjacents ou les bords de l'écran, en définissant son positionnement par rapport aux autres éléments de la page, à l'instar des barrières invisibles.

Pour en savoir plus sur le panneau de conception et ses sections, voir Panneau de conception.

Les rangées sont les sections horizontales de votre site. Lorsque vous ajoutez widget et des colonnes à votre site, elles sont placées à l'intérieur de ces lignes. Pour modifier l'affichage du contenu dans la vue mobile, cliquez sur le bouton d'inversion de l'ordre des colonnes dans l'éditeur de ligne.

Vous pouvez ajouter des rangées à votre site en faisant glisser widget dans le site. Lorsque vous faites glisser un site widget entre deux lignes ou dans un espace où vous souhaitez ajouter une ligne, une nouvelle ligne est créée lorsque vous déposez le site widget.

Pour supprimer une ligne, cliquez avec le bouton droit de la souris n'importe où sur la ligne pour ouvrir le menu contextuel, puis cliquez sur Supprimer. Vous pouvez également cliquer sur le bouton Rangée dans le coin supérieur gauche de la rangée et cliquer sur Supprimer.

Pour plus d'informations sur la modification et l'organisation des lignes, voir l'éditeur de lignes.

Chaque ligne contient au moins une colonne. Les colonnes contiennent tous les sites widget et contrôlent leur disposition. Chaque fois que vous ajoutez une nouvelle colonne, elle apparaît à côté de la colonne existante dans 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, cliquez avec le bouton droit de la souris n'importe où dans la colonne pour ouvrir le menu contextuel, puis cliquez sur Supprimer. Vous pouvez également cliquer sur le X 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 ajoutant des lignes intérieures.

Les curseurs d'images d'arrière-plan peuvent être utilisés pour définir des images d'arrière-plan pour les lignes ou les colonnes.

Après avoir sélectionné plusieurs images dans le sélecteur d'images, cliquez sur Terminé. Une fois le curseur créé, sélectionnez une transition de diapositive dans le menu déroulant et déplacez le curseur pour sélectionner la vitesse de la diapositive (en secondes).

Les autres options d'images d'arrière plan, comme la superposition en arrière-plan, le positionnement et le style d'affichage, peuvent être appliquées au slider.

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, arrière-plan, espacement, fond perdu).

Tout comme les lignes normales, les lignes intérieures peuvent avoir leur propre arrière-plan et leur propre espacement, être divisées en quatre colonnes au maximum et voir l'ordre de leurs colonnes modifié sur mobile. Les colonnes des lignes intérieures peuvent être remplies par n'importe quel widget, mais les lignes intérieures ne peuvent pas être ajoutées à ces colonnes.

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

Exemple de rangée 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 :

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

Exemple 2 : Ajouter une ligne. Par défaut, chaque ligne contient une colonne. Ajoutez 2 lignes intérieures à la colonne. Placez le titre dans la rangée intérieure 1. Divisez la rangée intérieure 2 en 3 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.

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.

• 2 colonnes, 3 colonnes, 4 colonnes widget ne peut pas être placé dans les rangées intérieures. Pour ajouter une colonne, cliquez avec le bouton droit de la souris sur la ligne et cliquez sur Ajouter une colonne.

• Contrairement aux lignes ordinaires, les lignes intérieures ne peuvent pas être copiées-collées.

Les sections sont des rangées d'éléments préconstruits que les utilisateurs peuvent ajouter à leurs sites réactifs. Les sections permettent aux utilisateurs de créer rapidement des sites attrayants en gagnant du temps lors du processus de conception. L'infrastructure a été construite afin d'offrir une meilleure expérience à l'utilisateur grâce à une variété de sections préfabriquées.

Lorsque vous alignez widget dans la même colonne, Website Builder tente de les aligner de manière à ce qu'ils aient exactement la même taille. Au fur et à mesure que vous redimensionnez, le constructeur saute en avant ou en arrière pour s'adapter à l'emplacement. Cela devrait faciliter la réalisation de widget à la même taille.

Il existe également une fonction d'alignement sur la grille. La fonction " Snap to Grid" permet d'insérer widget dans les pages de votre site avec une précision professionnelle. Ce système vous permet d'aligner widget horizontalement et verticalement dans les colonnes et les lignes. Des règles sont affichées lorsque vous déplacez un élément dans sa ligne ou sa colonne, ou lorsque vous redimensionnez le widget. Les éléments alignés sont marqués d'une bordure colorée. Un widget peut être aligné sur plus d'un autre widget, en fonction du cas d'utilisation spécifique.

La fonction d'alignement est disponible sur ordinateur, tablette et mobile.

Pour plus d'informations sur la configuration des en-têtes et des pieds de page, voir :