Présentation de l'éditeur

Cet article présente les différentes zones de l'éditeur et explique comment ajouter et configurer des sections, des lignes, des colonnes et des lignes internes, ainsi que comment aligner les widgets.

Présentation de l'interface de l'éditeur

L'éditeur se divise en plusieurs zones prédéfinies : la barre de navigation supérieure, le panneau latéral et la zone de contenu centrale (souvent appelée editor canvas). Ces zones constituent la base sur laquelle vous construisez vos sites selon votre vision.

Barre de navigation supérieure

La barre de navigation supérieure de l'éditeur regroupe des raccourcis pratiques vers différentes actions du site.

Voici ce qu'elle vous permet de faire :

• Menu hamburger. Ouvrez le menu hamburger, à gauche de la barre de navigation supérieure, pour accéder au Tableau de bord du projet, à la langue de la plateforme et à divers outils de création de site et ressources d'aide.
• Navigation entre les pages. Cliquez sur le menu déroulant des pages pour afficher la liste des pages de votre site. Vous accédez à une page en la sélectionnant dans ce menu.
• Icônes d'appareil. Cliquez sur les icônes d'appareil pour passer d'un format d'écran à l'autre (aussi appelés breakpoints). Vous prévisualisez ainsi votre page sur différents formats, de l'ordinateur à la tablette et au mobile. Pour en savoir plus, voir « Screen Sizes and Devices ».
• Annuler et rétablir. Cliquez sur les boutons Annuler ou Rétablir selon vos besoins pendant que vous travaillez dans l'éditeur.
• Indicateur de sauvegarde. L'icône en forme de coche indique l'état d'avancement de votre site et si vos changements ont bien été enregistrés.
• Aperçu des changements. Cliquez pour prévisualiser votre site, y compris les changements non publiés, sur tous les formats d'écran ou sur un seul.
• Publier ou republier. Utilisez le bouton de publication ou de republication pour publier votre site avec les derniers changements.
• Bouton d'accueil. Cliquez sur l'icône d'accueil pour revenir à votre Tableau de bord du projet.

Panneau latéral

Le panneau latéral est une boîte à outils complète pour gérer les différents aspects du design et du fonctionnement de votre site.

Voici les options disponibles par défaut dans le panneau latéral :

• Ajouter. Depuis cet élément, vous faites glisser facilement des widgets, des médias et du texte de site sur le canvas.
• Pages. Ajoutez, consultez et gérez les pages et les pop-ups.
• Thème. Définissez les styles et réglages par défaut de tous les textes, couleurs, boutons, images, arrière-plans, lignes et colonnes, ainsi que la mise en page, la largeur et l'espacement de votre site.
• CMS. Gérez les collections et le contenu collecté.
• SEO/AEO. Gérez les réglages de référencement des pages, des images, des liens internes et externes, et plus encore.
• Plus. Donne accès à Personnalisation, Paramètres et au Tableau de bord du projet.

Zone de contenu / Canvas

La zone de contenu (ou canvas) est l'endroit où vous déplacez ou ajoutez nos fonctionnalités, et où vous cliquez pour les modifier. Elle vous permet de changer les images et les textes, de modifier ou de supprimer des boutons, et bien plus encore.

Structure du Créateur de sites Web

Le Créateur de sites Web repose sur un header, un footer, des lignes, des sections et des colonnes. Chaque widget que vous ajoutez s'insère dans l'une de ces zones.

Lignes

Les lignes sont les bandes horizontales de votre site. Les widgets et les colonnes que vous ajoutez se placent à l'intérieur de ces lignes. Pour modifier l'affichage du contenu en vue mobile, activez l'option d'inversion de l'ordre des colonnes dans l'éditeur de ligne.

Vous ajoutez des lignes en faisant glisser des widgets dans le site. Lorsque vous déposez un widget entre deux lignes, ou à un endroit où vous voulez une nouvelle ligne, celle-ci se crée au moment où vous relâchez 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 aussi cliquer sur le bouton Row, dans le coin supérieur gauche de la ligne, puis sur Supprimer.

Pour en savoir plus sur la modification et l'organisation des lignes, voir « Éditeur de ligne » ci-dessous.

Éditeur de ligne

L'éditeur de ligne vous permet de changer l'arrière-plan d'une ligne (couleur ou image), d'ajouter une bordure ou d'ajuster son espacement intérieur et extérieur. Servez-vous des lignes pour organiser et disposer le contenu de votre site.

Pour configurer une ligne, survolez son coin supérieur gauche jusqu'à ce qu'un bouton de ligne apparaisse, puis cliquez sur Row. Le menu de l'éditeur de ligne s'affiche.

Vous disposez des options de configuration suivantes :

• Cliquez sur les flèches Déplacer la ligne vers le haut et Déplacer la ligne vers le bas pour monter ou descendre la ligne en cours.
• Cliquez sur Ajouter et choisissez l'une des options suivantes :
  • Ligne ci-dessus. Ajoute une ligne au-dessus de la ligne en cours.
  • Row below. Ajoute une ligne au-dessous de la ligne en cours.
  • Section. Ajoute une section à la ligne existante.
  • Colonne. Ajoute une colonne à la ligne existante.
  • Ligne intérieure. Ajoute une ligne à l'intérieur de la ligne en cours.
• Pour supprimer l'espacement intérieur de la ligne, cliquez sur Effacer le remplissage.
• Pour rétablir l'espacement que vous avez défini dans l'espacement du thème, cliquez sur Rétablir l'espacement par défaut.
• Pour ajouter une animation d'entrée à la ligne (par exemple apparition depuis la droite, rebond, zoom), cliquez sur Entrance Animation et choisissez une option.
• Pour enregistrer la ligne comme section, cliquez sur Enregistrer en tant que section et choisissez d'enregistrer seulement la ligne en cours, plusieurs lignes ou la page entière.
• Pour masquer la ligne en cours sur un appareil précis (ordinateur, tablette, mobile), cliquez sur l'option pour masquer selon l'appareil et choisissez l'appareil.
• Pour copier la ligne, cliquez sur Copier.
• Pour ancrer la ligne à la page ou supprimer une ancre existante, cliquez sur Définir comme ancre ou Edit Anchor.
• Pour supprimer la ligne, cliquez sur Supprimer.

Éditeur de design de ligne

Pour modifier le style d'arrière-plan ou l'espacement de la ligne :

1. Survolez le coin supérieur gauche d'une ligne jusqu'à ce qu'un bouton de ligne apparaisse, cliquez sur Row, puis sur Modifier le design.
2. Dans l'onglet Paramètres, vous disposez des options suivantes :
   • Pleine largeur. Pour transformer la ligne en ligne pleine largeur, dont le contenu occupe toute la largeur de l'écran, activez l'option Pleine largeur. Si vous n'utilisez pas de ligne pleine largeur, la largeur du contenu est limitée à 960px.
3. Dans l'onglet Style, choisissez une couleur, une image ou une vidéo d'arrière-plan. Vous disposez des options suivantes :
   • Couleur
     • Choisissez une Couleur d'arrière-plan. Une couleur en dégradé remplace l'image, et inversement.
     • Cliquez sur Bordure pour choisir un type de bordure, puis déplacez le curseur pour en régler l'épaisseur.
     • Pour ajouter une ombre, activez l'option Ombre, puis choisissez sa couleur, son type et sa position.
   • Image

     • Pour ajouter une image d'arrière-plan, cliquez sur + pour ouvrir le sélecteur d'images.

     • Pour créer un diaporama d'images d'arrière-plan, sélectionnez plusieurs images dans le sélecteur ; voir « Diaporama d'images d'arrière-plan » ci-dessous.

     • Choisissez d'afficher l'image en mode Couverture, Image complète, Mosaïque ou Pas de répétition.

     • Pour activer le défilement parallaxe sur une image d'arrière-plan, activez l'option Défilement parallaxe. L'arrière-plan défile alors plus lentement que le premier plan.

       Remarque : le défilement parallaxe n'est pas disponible pour le diaporama d'images d'arrière-plan ni sur mobile. L'option de garder une image d'arrière-plan fixe n'est pas disponible sur tablette et mobile en raison d'une limitation d'iOS.

     • Configurez la Position, le Recouvrement du fond, la Bordure et l'Ombre de l'image.

   • Vidéo. Cliquez sur Sélectionner une vidéo pour voir les vidéos importées, ou collez l'URL de la vidéo YouTube, Vimeo ou Dailymotion dans le champ prévu. Pour en savoir plus sur les arrière-plans vidéo, voir « Element Backgrounds ».

Remarque : pour en savoir plus sur les arrière-plans, voir « Element Backgrounds ».

Colonnes

Chaque ligne contient au moins une colonne. Les colonnes accueillent tous les widgets de votre site et déterminent leur disposition. Chaque nouvelle colonne s'ajoute à côté de celle qui existe déjà dans la ligne.

En vue ordinateur et tablette, une ligne peut contenir jusqu'à quatre colonnes ; en mobile, deux au maximum. Les colonnes ajoutées en vue ordinateur ou tablette occupent toute la largeur de la page une fois passées en vue mobile. Pour obtenir une ligne à deux colonnes en mobile, passez d'abord en 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 aussi cliquer sur le X rouge dans le coin supérieur droit de la colonne.

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

Éditeur de colonne

L'éditeur de colonne vous permet de changer l'arrière-plan d'une colonne (couleur ou image), d'ajouter une bordure ou d'ajuster son espacement intérieur et extérieur. Servez-vous des colonnes pour organiser et disposer le contenu d'une ligne.

Pour configurer une colonne :

1. Faites un clic droit sur la colonne. Le menu de l'éditeur de colonne s'affiche.

   Remarque : si la colonne n'a pas de remplissage, le clic droit ne fonctionne pas directement dessus. Dans ce cas, faites un clic droit sur un widget situé dans la colonne (le menu contextuel du widget s'ouvre et son nom apparaît en haut), cliquez sur Select Container, puis sélectionnez Colonne. Pour vérifier que vous êtes bien passé au menu contextuel de la colonne, regardez en haut : il doit maintenant indiquer Colonne.

2. Cliquez sur les flèches Déplacer la colonne vers la gauche et Déplacer la colonne vers la droite pour déplacer la colonne en cours vers la gauche ou la droite (les flèches sont désactivées s'il n'y a qu'une seule colonne).

3. Pour ouvrir l'éditeur de design de colonne, cliquez sur Modifier le design. Pour en savoir plus, voir « Éditeur de design de colonne » ci-dessous. L'éditeur de design de colonne s'affiche.

4. Cliquez sur Ajouter et choisissez l'une des options suivantes :

   • Colonne. Ajoute une colonne à la ligne en cours (4 colonnes maximum par ligne sur ordinateur, 2 sur mobile).
   • Ligne intérieure. Ajoute une ligne à l'intérieur de la colonne en cours.
   • Widget ci-dessous. Ajoute un widget.

5. Pour supprimer l'espacement intérieur de la colonne, cliquez sur Effacer le remplissage.

6. Pour rétablir l'espacement que vous avez défini dans l'espacement du thème, cliquez sur Rétablir l'espacement par défaut.

7. Pour ajouter une animation d'entrée à la colonne (par exemple apparition depuis la droite, rebond, zoom), cliquez sur Entrance Animation et choisissez une option.

8. Pour masquer la colonne en cours sur un appareil précis (ordinateur, tablette, mobile), cliquez sur l'option pour masquer selon l'appareil et choisissez l'appareil.

9. Pour copier la colonne, cliquez sur Copier.

10. Pour ancrer la colonne à la page ou supprimer une ancre existante, cliquez sur Définir comme ancre ou Edit Anchor.

11. Pour supprimer la colonne, cliquez sur Supprimer.

Éditeur de design de colonne

Pour modifier le style d'arrière-plan ou l'espacement d'une colonne :

1. Faites un clic droit sur la colonne, puis cliquez sur Modifier le design.

   Remarque : si la colonne n'a pas de remplissage, le clic droit ne fonctionne pas directement dessus. Dans ce cas, faites un clic droit sur un widget situé dans la colonne (le menu contextuel du widget s'ouvre et son nom apparaît en haut), cliquez sur Select Container, puis sélectionnez Colonne. Pour vérifier que vous êtes bien passé au menu contextuel de la colonne, regardez en haut : il doit maintenant indiquer Colonne.

2. Dans l'onglet Style, choisissez une couleur, une image ou une vidéo d'arrière-plan. Vous disposez des options suivantes :

   • Couleur
     • Choisissez une Couleur d'arrière-plan. Une couleur en dégradé remplace l'image, et inversement.
     • Cliquez sur Bordure pour choisir un type de bordure, puis déplacez le curseur pour en régler l'épaisseur.
     • Pour ajouter une ombre, activez l'option Ombre, puis choisissez sa couleur, son type et sa position.
   • Image
     • Pour ajouter une image d'arrière-plan, cliquez sur + pour ouvrir le sélecteur d'images.
     • Pour créer un diaporama d'images d'arrière-plan, sélectionnez plusieurs images dans le sélecteur ; voir « Diaporama d'images d'arrière-plan » ci-dessous.
     • Choisissez d'afficher l'image en mode Couverture, Image complète, Mosaïque ou Pas de répétition.
     • Configurez la Position, le Recouvrement du fond, la Bordure et l'Ombre de l'image.
   • Vidéo. Cliquez sur Sélectionner une vidéo pour voir les vidéos importées, ou collez l'URL de la vidéo YouTube, Vimeo ou Dailymotion dans le champ prévu. Pour en savoir plus sur les arrière-plans vidéo, voir « Element Backgrounds ».

Remarque : pour en savoir plus sur les arrière-plans, voir « Element Backgrounds ».

Diaporama d'images d'arrière-plan

Les diaporamas d'images d'arrière-plan servent à 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, cliquez sur Terminé. Une fois le diaporama créé, choisissez une transition dans le menu déroulant Transition des diapositives, puis déplacez le curseur pour définir une vitesse de défilement (Vitesse des diapositives (secondes), en secondes).

Vous pouvez appliquer au diaporama les autres options d'image d'arrière-plan, comme le Recouvrement du fond, le positionnement et le style d'affichage.

Lignes internes

Les lignes internes offrent plus de souplesse de design en vous permettant d'ajouter des lignes à l'intérieur des colonnes. Grâce à elles, vous pouvez varier la disposition des colonnes tout en conservant le design général de la ligne (arrière-plan, espacement, pleine largeur, etc.).

Comme les lignes classiques, les lignes internes peuvent avoir leur propre arrière-plan et espacement, se diviser en quatre colonnes maximum et voir l'ordre de leurs colonnes changer sur mobile. Les colonnes des lignes internes acceptent n'importe quel widget, mais vous ne pouvez pas y ajouter d'autres lignes internes.

Pour ajouter une ligne interne à une colonne, procédez de l'une des façons suivantes :

• Faites un clic droit sur la ligne, puis cliquez sur Add Inner Row. Si la ligne comporte plusieurs colonnes, choisissez celle où ajouter la ligne interne.
• Faites un clic droit sur la colonne, puis cliquez sur Add Inner Row.
• Faites un clic droit sur la ligne interne, puis cliquez sur Ajouter une ligne pour placer une ligne interne sous celle en cours.

Exemple de ligne interne

Pour illustrer l'usage des lignes internes, voici deux façons de concevoir une mise en page contenant un titre et 3 boutons :

Exemple 1 : ajoutez deux lignes. Placez le titre dans la ligne 1, avec 1 colonne. 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 régler l'espacement et le style de pleine largeur séparément pour chaque ligne.

Exemple 2 : ajoutez une ligne. Par défaut, chaque ligne contient une colonne. Ajoutez 2 lignes internes à cette colonne. Placez le titre dans la ligne interne 1. Divisez la ligne interne 2 en 3 colonnes. Placez un bouton dans chaque colonne. Ces deux lignes internes partagent l'arrière-plan, l'espacement et la pleine largeur de la ligne principale.

Quelques points importants à retenir pour modifier des lignes internes :

• Les flèches de réorganisation ne changent l'ordre qu'entre lignes internes. Pour intervertir des widgets et des lignes internes, faites glisser manuellement les widgets au-dessus ou en dessous de la ligne interne.
• Les widgets à 2, 3 et 4 colonnes ne peuvent pas être placés dans des lignes internes. Pour ajouter une colonne, faites un clic droit sur la ligne et cliquez sur Ajouter une colonne.
• Contrairement aux lignes classiques, les lignes internes ne peuvent pas être copiées-collées.

Sections prédéfinies (modèles de section prêts à l'emploi)

Les sections sont des lignes d'éléments prêtes à l'emploi que vous pouvez ajouter à vos sites responsifs. Elles vous aident à créer rapidement des sites soignés en vous faisant gagner du temps. Cette infrastructure a été conçue pour offrir une meilleure expérience grâce à une grande variété de sections prêtes à l'emploi.

Remarque :

• Les sections n'utilisent aucun CSS personnalisé ; elles sont toutes créées dans l'éditeur par des designers.
• Les sections ne reprennent ni la couleur ni la police du texte définies dans les réglages du thème du site. Vous pouvez toutefois toujours effacer la mise en forme et appliquer votre propre design.

Ajouter des sections

Pour ajouter des sections de widgets :

1. Survolez l'espace entre deux lignes, puis cliquez sur Ajouter une section.
2. Sélectionnez Conçu. Les sections s'affichent dans le panneau latéral.
3. Dans le mode Section, une galerie de sections prêtes à l'emploi apparaît dans le panneau de gauche, regroupées par catégories (Intro, Features, About, Team, Testimonials, etc.).
4. Dans le panneau latéral, cliquez sur une section pour l'afficher sous forme de nouvelle ligne. Vous pouvez ensuite parcourir les sections d'un même groupe avec les touches fléchées, ou choisir une section d'un autre groupe.
5. Pour intégrer la section au site, cliquez sur Enregistrer. Vous pouvez aussi cliquer sur Enregistrer et ajouter un autre pour continuer d'ajouter des sections. La section se transforme en ligne et tous ses éléments sont modifiables.

Créer une section flex avec l'IA

Pour simplifier la création et gagner en souplesse de design, vous pouvez utiliser l'Assistant IA pour générer le contenu et le design de vos sections flex.

Pour des instructions détaillées sur la création de sections flex avec l'IA, voir « Create a Flex Section with AI ».

Alignement des widgets

Lorsque vous alignez des widgets dans une même colonne, le créateur de sites tente de les ajuster à la même taille grâce à la fonction Snap to Align. À mesure que vous redimensionnez, il avance ou recule pour s'accrocher à la bonne position. Il est ainsi plus facile de donner exactement la même taille à deux widgets.

Il existe aussi une fonction Snap to Grid, qui vous aide à disposer les widgets sur vos pages avec une précision professionnelle. Elle vous permet d'aligner les widgets horizontalement et verticalement dans les colonnes et les lignes. Des repères apparaissent lorsque vous déplacez un élément dans sa ligne ou sa colonne, ou lorsque vous redimensionnez un widget. Les éléments alignés sont signalés par une bordure de couleur. Selon les cas, un widget peut s'aligner avec plusieurs autres à la fois.

L'alignement fonctionne dans les vues des trois types d'appareils (ordinateur, tablette, mobile).