Cet article couvre les différentes zones de l’éditeur ainsi que la manière d’ajouter et de configurer des sections, des lignes, des colonnes, des lignes internes et l’alignement des widgets.
Aperçu de l’interface de l’éditeur
L’éditeur peut être divisé en plusieurs zones.
Dans l’éditeur, il existe plusieurs sections prédéfinies : la barre de navigation supérieure, le panneau latéral, la zone de contenu centrale (souvent appelée canevas de l’éditeur) et le panneau de conception sur le côté. Ces sections constituent la base de la création de sites web selon la vision de l’utilisateur.
Barre de navigation supérieure
La barre de navigation supérieure dans l’éditeur contient des raccourcis utiles pour différentes actions du site.
La barre de navigation supérieure vous permet de :
- Menu hamburger. Ouvrez le menu hamburger situé à gauche de la barre de navigation supérieure pour accéder au mode développeur, au tableau de bord du site, à la langue de la plateforme et à diverses ressources de création et d’assistance.
- Navigation entre les pages. Cliquez sur la liste déroulante des pages pour afficher la liste des pages de votre site. Vous pouvez accéder à une page en la sélectionnant dans ce menu.
- Icônes d’appareils. Passez d’un affichage de taille d’écran à un autre (également appelé breakpoints) en cliquant sur les icônes d’appareils. Cela vous permet de prévisualiser l’apparence de votre page actuelle sur différentes tailles d’écran, du bureau à la tablette puis au mobile.
- Annuler et rétablir. Cliquez sur les boutons Annuler ou Rétablir selon vos besoins lorsque vous travaillez dans l’éditeur.
- Indicateur de sauvegarde de progression. L’icône en forme de coche sert d’indicateur de l’état actuel de votre site et du bon enregistrement des modifications.
- Commentaires du site. Cliquez pour ouvrir le panneau des commentaires du site. S’il y a un nouveau commentaire, un point rouge apparaît sur le bouton des commentaires dans la barre supérieure.
- Partager. Cliquez sur Partager pour accéder au lien d’aperçu de votre site par taille d’écran, au domaine du site, au nom du site et à la gestion du client.
- Aperçu des modifications. Cliquez pour prévisualiser votre site, y compris les modifications non publiées, sur toutes les tailles d’écran ou sur des tailles spécifiques.
- Publier ou republier. Utilisez le bouton Publier ou Republier pour mettre votre site en ligne avec les dernières modifications.
- Bouton Accueil. Cliquez sur l’icône d’accueil pour revenir au tableau de bord de votre site.
Panneau latéral
Le panneau latéral sert de boîte à outils complète pour gérer différents aspects de la conception et des fonctionnalités de votre site.
Voici les options par défaut disponibles dans le panneau latéral :
- Ajouter. À partir de cet élément, vous pouvez facilement glisser-déposer des widgets, des médias et du texte du site sur le canevas.
- Pages. Ajoutez, affichez et gérez les pages et les fenêtres contextuelles.
- Thème. Définissez les styles et paramètres par défaut pour l’ensemble du texte, des couleurs, des boutons, des images, des arrière-plans, des lignes, des colonnes, de la mise en page, de la largeur et de l’espacement de votre site.
- CMS. Gérez les collections et le contenu collecté auprès des clients.
- SEO/AEO. Gérez les paramètres SEO des pages, des images, des liens internes et externes, et plus encore.
- Plus. Donne accès au Blog, à la Boutique, aux Réservations, à la Personnalisation, aux Paramètres et au Tableau de bord du site.
Notez qu’après l’installation de Blog, Réservations ou Boutique, ces éléments sont ajoutés à votre panneau latéral pour un accès simple et rapide.
Zone de contenu / Canevas
La zone de contenu / le canevas est l’endroit où vous pouvez déplacer ou ajouter n’importe laquelle de nos fonctionnalités, ou cliquer et les modifier. La zone de contenu vous permet de modifier les images, le texte, d’éditer et de supprimer des boutons, et bien plus encore.
Pour apprendre à ajouter et configurer des éléments sur le canevas, consultez Concevoir avec Flex.
Pour en savoir plus sur les options d’édition du canevas, consultez Actions et options du canevas.
Panneau de conception
Le panneau de conception offre un ensemble de paramètres de design pour les éléments sélectionnés, permettant une personnalisation précise. Que vous ajustiez l’alignement du contenu, l’espacement entre les éléments, l’animation ou l’arrière-plan, le panneau de conception fournit un ensemble complet d’outils pour améliorer l’attrait visuel de votre site web. Les options de conception incluent des ajustements de mise en page, des configurations de taille, des paramètres d’alignement et bien plus, adaptés à l’élément sélectionné.
Pour en savoir plus sur le panneau de conception et ses sections, consultez Panneau de conception.
Structure du créateur de site web
Le créateur de site web est construit à partir d’un en-tête, d’un pied de page, de lignes, de sections 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. Lorsque vous ajoutez des widgets et des colonnes à votre site, ils sont placés dans ces lignes. Pour modifier la façon dont le contenu s’affiche en vue mobile, cliquez sur l’option inverser l’ordre des colonnes dans l’éditeur de ligne.
Vous pouvez ajouter des lignes à votre site en y faisant glisser des widgets. Lorsque vous faites glisser un widget entre des lignes ou vers un espace où vous souhaitez ajouter une ligne, une nouvelle ligne sera créée lorsque vous relâcherez 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 Ligne en haut à gauche de la ligne, puis cliquer sur Supprimer.
Pour des informations détaillées sur la modification et l’organisation des lignes, consultez Éditeur de ligne.
Curseur d’image d’arrière-plan
Les curseurs d’image d’arrière-plan peuvent être utilisés pour définir des images d’arrière-plan pour des lignes ou des 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, puis déplacez le curseur pour choisir une vitesse de diapositive (secondes).
Toutes les autres options d’image d’arrière-plan, telles que Superposition d’arrière-plan, Positionnement et style d’affichage, peuvent être appliquées au curseur.
Sections conçues (modèles de sections préconçus)
Les sections sont des lignes d’éléments préconstruites que les utilisateurs peuvent ajouter à leurs sites responsifs. Les sections permettent aux utilisateurs de créer rapidement des sites esthétiques en gagnant du temps pendant le processus de conception. L’infrastructure a été développée afin d’offrir une meilleure expérience utilisateur grâce à une variété de sections prêtes à l’emploi.
Remarque
- Les sections n’utilisent aucun CSS personnalisé et sont entièrement construites dans l’éditeur par des designers.
- Les sections n’utilisent pas les paramètres de couleur ni de police de texte définis dans le thème du site. Cependant, vous pouvez toujours effacer le formatage et appliquer votre propre design.
Ajouter des sections
Pour ajouter des sections de widgets :
- Survolez l’espace entre les lignes, puis cliquez sur Ajouter une section.
- Sélectionnez Conçu. Les sections s’affichent dans le panneau latéral.
- En Mode Section, une galerie de sections préconçues est disponible dans le panneau de gauche, regroupée par catégories (Introduction, Fonctionnalités, À propos, Équipe, Témoignages, etc.).
- Dans le panneau latéral, cliquez sur une section pour l’afficher comme une nouvelle ligne. Vous pouvez ensuite parcourir les sections du même groupe à l’aide des touches fléchées ou en sélectionnant une section d’un autre groupe.
- Pour intégrer la section au site, cliquez sur Enregistrer. Vous pouvez également cliquer sur Enregistrer et en ajouter une autre pour continuer à ajouter des sections à votre site. La section est alors convertie en ligne, et tous les éléments qu’elle contient deviennent modifiables.
Alignement des widgets
Lors de l’alignement des widgets dans une même colonne, le créateur de site essaie de les aligner pour qu’ils aient la même taille. Lors du redimensionnement, l’outil saute en avant ou en arrière pour s’aligner à l’emplacement. Cela facilite l’obtention de widgets de même taille.
Il existe également une fonctionnalité Aligner sur la grille. Cette fonctionnalité aide à positionner les widgets sur les pages de votre site avec une précision professionnelle. Ce système vous permet d’aligner les widgets horizontalement et verticalement dans les colonnes et les lignes. Des règles apparaissent 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 par une bordure colorée. Un widget peut être aligné avec plusieurs autres widgets, selon le cas d’usage.
L’alignement est pris en charge dans les vues des trois types d’appareils différents (bureau, tablette, mobile).
En-tête et pied de page
Pour plus d’informations sur la configuration des en-têtes et des pieds de page, consultez :
- En-têtes
- Pieds de page