Cet article couvre les zones de l'éditeur et explique comment ajouter et configurer des sections, des lignes, des colonnes, des lignes intérieures et l'alignement widget.
L'éditeur peut être divisé en plusieurs domaines.
L'éditeur comporte plusieurs sections prédéfinies : la barre de navigation supérieure, le panneau latéral et la zone de contenu centrale (souvent appelée "canevas de l'éditeur"). Ces sections constituent la base de la construction de sites web en fonction de la vision de l'utilisateur.
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
-
Navigation dans les pages : Cliquez sur le menu des pages pour accéder à un menu déroulant affichant toutes les pages disponibles sur votre site. Vous pouvez naviguer entre les pages en les sélectionnant dans ce menu.
-
Passez d'une taille d'écran à l'autre (également appelée point d'arrêt) en cliquant sur les icônes de l'appareil. Cela vous permet de voir comment votre page actuelle s'affiche sur différentes tailles d'écran, de desktop à la tablette en passant par le téléphone portable. Pour en savoir plus, consultez la rubrique Tailles d'écran et appareils.
-
Fonctionnalité de recherche : Cliquez sur l'icône de la loupe pour rechercher ce dont vous avez besoin dans l'éditeur ou accédez au centre d'aide pour obtenir de l'aide.
-
Info et tool: Cliquez sur l'icône d'information pour accéder aux informations suivantes :
-
Site Info. Affiche le nom du site, l'état de publication, la version de l'éditeur et un lien vers le tableau de bord du site.
-
Lien de prévisualisation. Affiche le lien de prévisualisation du site. Pour copier le lien, sélectionnez le type d'appareil et cliquez sur Copier.
-
Stats. Affiche les statistiques de base du site. Pour obtenir plus d'informations, cliquez sur Ouvrir les statistiques. Cette information n'est disponible que pour les sites publiés. Pour plus d'informations, consultez la rubrique Statistiques et analyses du site.
-
Éditeur Langue. Changez la langue de l'éditeur. Cela n'affecte pas la langue du site. Pour changer la langue de l'éditeur, sélectionnez une langue dans le menu déroulant.
-
-
Indicateur de progression de la sauvegarde : L'icône de la coche sert d'indicateur de l'état d'avancement du site et indique si les modifications ont été sauvegardées avec succès.
-
Annuler ou rétablir : vous pouvez utiliser les fonctionnalités d'annulation et de rétablissement représentées par les flèches circulaires vers l'arrière et vers l'avant pour annuler ou réappliquer les actions récentes effectuées dans l'éditeur.
-
Mode développeur : Accédez au mode développeur en cliquant sur l'icône appropriée. Ce mode vous permet d'accéder et de modifier le code HTML et CSS de votre site.
-
Prévisualiser les modifications : Cliquez sur l'icône de l'œil pour prévisualiser votre site, y compris les modifications non publiées, sur toutes les tailles d'écran ou sur des écrans individuels.
-
Publier ou republier : Utilisez le bouton publier ou republier pour publier votre site avec les dernières modifications.
-
Bouton d'accueil : Cliquez sur l'icône d'accueil pour revenir au tableau de bord du site.
Le panneau latéral est une boîte à outils complète permettant de 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.
Vous trouverez ci-dessous les options disponibles dans le panneau latéral :
-
Thème
-
Pages
-
Widgets
-
Contenu
-
Personnaliser
-
Vendre en ligne
-
Abonnement
-
Blog
-
SEO et paramètres
-
Éléments cachés (visibles uniquement si vous avez des éléments cachés; applicable uniquement à l'éditeur classique, dans l'éditeur 2.0 et le mode flex, les éléments cachés peuvent être trouvés dans l'écran des calques).
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.
Remarque
Pour en savoir plus sur les options d'édition du canevas, voir Actions et options du canevas .
Le site Website Builder est constitué d'un en-tête, d'un pied de page, de lignes et de colonnes. Chaque widget tu add est inséré dans l'une de ces sections.
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.
Utilisez l'éditeur de ligne pour modifier l'arrière-plan de la ligne (couleur ou image), ajouter une bordure ou ajuster l'espacement intérieur et extérieur de la ligne. Utilisez les rangées pour organiser et disposer le contenu de votre site.
Pour configurer les lignes :
-
hover en haut à gauche d'une ligne jusqu'à ce qu'un bouton de ligne apparaisse, puis cliquez sur Ligne. Le menu de l'éditeur de lignes s'affiche.
-
Cliquez sur les flèches Déplacer la ligne vers le haut et Déplacer la ligne vers le bas pour déplacer la ligne actuelle vers le haut ou vers le bas.
-
Pour ouvrir l'éditeur de conception des rangées, cliquez sur Modifier la conception. Pour plus d'informations, reportez-vous à la section Éditeur de conception de lignes.L'éditeur de conception de lignes apparaît.
-
Cliquez sur +Ajouter et sélectionnez l'une des options suivantes :
-
Rangée ci-dessus. Ajoutez une nouvelle ligne au-dessus de la ligne actuelle.
-
Rangée inférieure. Ajoutez une nouvelle ligne sous la ligne actuelle.
-
Section. Ajoutez une section à la ligne.
-
Colonne. Ajoutez une colonne à la ligne.
-
Rangée intérieure. Ajouter une ligne dans la ligne actuelle.
-
-
Pour effacer l'espacement intérieur de la ligne, cliquez sur Effacer le remplissage.
-
Pour rétablir l'espacement 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 rangée (par exemple, fondu à partir de la droite, rebond, zoom), cliquez sur Animation d'entrée et sélectionnez une option.
-
Pour enregistrer la ligne en tant que section, cliquez sur Enregistrer en tant que section et choisissez d'enregistrer uniquement la ligne actuelle, plusieurs lignes ou la page entière.
-
Pour masquer la ligne actuelle sur un appareil spécifique (desktop, tablette, mobile), cliquez sur Masquer sur l'appareil et sélectionnez l'appareil.
-
Pour verrouiller la ligne pour l'édition par le client, cliquez sur Verrouiller pour l'édition par le client.
-
Pour copier la ligne, cliquez sur Copier.
-
Pour ancrer la ligne à la page ou supprimer un ancrage existant, cliquez sur Définir comme ancrage ou Modifier l'ancrage.
-
Pour supprimer la ligne, cliquez sur Supprimer.
Pour modifier le style d'arrière-plan ou l'espacement de la ligne :
-
hover en haut à gauche d'une ligne jusqu'à ce qu'un bouton de ligne apparaisse, cliquez sur Ligne, puis sur Modifier la conception.
-
Dans l'onglet Paramètres, vous disposez des options suivantes :
-
Rangée à fond perdu. Pour transformer la rangée en une rangée à fond perdu, qui permet au contenu de s'étendre sur toute la largeur de l'écran, cliquez sur le bouton de basculement de la rangée à fond perdu. Si vous choisissez de ne pas avoir de lignes à fond perdu, la largeur du contenu est limitée à 960px.
-
-
Dans l'onglet Style, sélectionnez une couleur d'arrière-plan, une image ou une vidéo. vous disposez des options suivantes :
-
Couleur
-
Sélectionnez une couleur d'arrière-plan. La couleur du dégradé a la priorité sur l'image, et vice versa.
-
Cliquez sur Bordure pour sélectionner un type de bordure et déplacez le curseur pour définir la largeur de la bordure.
-
Pour ajouter une ombre, cliquez sur la case à cocher Ombre, puis sélectionnez une couleur, un type et une position pour l'ombre.
-
-
Image
-
Pour ajouter une image à l'arrière-plan, cliquez sur + pour ouvrir le sélecteur d'images.
-
Pour créer un curseur d'image d'arrière-plan, sélectionnez plusieurs images dans le sélecteur d'images et consultez la rubrique Curseur d'image d'arrière-plan.
-
Sélectionnez l'affichage de l'image sous forme de couverture, d' image complète, de mosaïque ou d'absence de répétition.
-
Pour activer le défilement parallaxe sur une image d'arrière-plan, cliquez sur la case à cocher Défilement parallaxe. Lorsque cette option est activée, le contenu d'arrière-plan défile plus lentement que le contenu de premier plan.
Remarque
-
Le défilement parallaxe n'est pas une option pour le curseur d'image de fond ou pour les mobiles.
-
L'option permettant de conserver une image d'arrière-plan statique n'est pas disponible pour les tablettes et les mobiles en raison d'une limitation d'iOS.
-
-
Configurez la position, l' incrustation d'arrière-plan, la bordure et l'ombre de l'image.
-
-
Vidéo. Cliquez sur Sélectionner une vidéo pour afficher les vidéos téléchargées ou collez l'URL de la vidéo YouTube, Vimeo ou Dailymotion dans le champ prévu à cet effet. Pour plus d'informations sur les arrière-plans vidéo, reportez-vous à la section Arrière-plans des éléments.
Remarque
Pour plus d'informations sur les arrière-plans, reportez-vous à la section Arrière-plans des éléments.
-
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 widget directement dans les colonnes ou structurer davantage la colonne en ajoutant des lignes intérieures.
Utilisez l'éditeur de colonnes pour modifier l'arrière-plan d'une colonne (couleur ou image), ajouter une bordure ou ajuster l'espacement intérieur et extérieur de la colonne. Les colonnes vous permettent d'organiser et d'agencer le contenu d'une ligne.
Pour configurer une colonne :
-
Cliquez avec le bouton droit sur la colonne. Le menu de l'éditeur de colonnes apparaît.
Remarque
S'il n'y a pas de remplissage sur la colonne, le clic droit ne sera pas directement accessible. Pour accéder à la colonne dans ce cas, cliquez avec le bouton droit de la souris sur un widget qui se trouve dans la colonne (le menu contextuel du widget devrait s'afficher et le nom du widget sera indiqué en haut), cliquez sur Sélectionner le conteneur, puis sur Colonne. Pour vérifier que le menu contextuel de la colonne a bien été modifié, reportez-vous au haut de la page ; la mention Colonne doit maintenant apparaître.
-
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 actuelle vers la gauche ou vers la droite (les flèches seront désactivées s'il n'y a qu'une seule colonne).
-
Pour ouvrir l'éditeur de conception de colonnes, cliquez sur Modifier la conception. Pour plus d'informations, reportez-vous à l'éditeur de design de colonnes. L'éditeur de conception de colonnes s'affiche.
-
Cliquez sur +Ajouter et sélectionnez l'une des options suivantes :
-
Colonne. Ajoutez une nouvelle colonne à la ligne actuelle (un maximum de 4 colonnes peut être ajouté par ligne sur desktop et 2 sur mobile).
-
Rangée intérieure. Ajoute une ligne dans la colonne actuelle.
-
widget ci-dessous. Ajoutez un widget.
-
-
Pour effacer l'espacement intérieur de la colonne, cliquez sur Effacer le remplissage.
-
Pour rétablir l'espacement 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 colonne (par exemple, fondu à partir de la droite, rebond, zoom), cliquez sur Animation d'entrée et sélectionnez une option.
-
Pour masquer la colonne actuelle sur un appareil spécifique (desktop, tablette, mobile), cliquez sur Masquer sur l'appareil et sélectionnez l'appareil.
-
Pour verrouiller la colonne pour l'édition par le client, cliquez sur Verrouiller pour l'édition par le client.
-
Pour copier la colonne, cliquez sur Copier.
-
Pour ancrer la colonne à la page ou supprimer un ancrage existant, cliquez sur Définir comme ancrage ou Modifier l'ancrage.
-
Pour supprimer la colonne, cliquez sur Supprimer.
Pour modifier le style d'arrière-plan ou l'espacement d'une colonne :
-
Cliquez avec le bouton droit de la souris sur la colonne, puis cliquez sur Modifier la conception.
-
Remarque
S'il n'y a pas de remplissage sur la colonne, le clic droit ne sera pas directement accessible. Pour accéder à la colonne dans ce cas, cliquez avec le bouton droit de la souris sur un widget qui se trouve dans la colonne (le menu contextuel du widget devrait s'afficher et le nom du widget sera indiqué en haut), cliquez sur Sélectionner le conteneur, puis sur Colonne. Pour vérifier que le menu contextuel de la colonne a bien été modifié, reportez-vous au haut de la page ; la mention Colonne doit maintenant apparaître.
-
-
Dans l'onglet Style, sélectionnez une couleur d'arrière-plan, une image ou une vidéo. vous disposez des options suivantes :
-
Couleur
-
Sélectionnez une couleur d'arrière-plan. La couleur du dégradé a la priorité sur l'image, et vice versa.
-
Cliquez sur Bordure pour sélectionner un type de bordure et déplacez le curseur pour définir la largeur de la bordure.
-
Pour ajouter une ombre, cliquez sur la case à cocher Ombre, puis sélectionnez une couleur, un type et une position pour l'ombre.
-
-
Image
-
Pour ajouter une image à l'arrière-plan, cliquez sur + pour ouvrir le sélecteur d'images.
-
Pour créer un curseur d'image d'arrière-plan, sélectionnez plusieurs images dans le sélecteur d'images et consultez la rubrique Curseur d'image d'arrière-plan.
-
Sélectionnez l'affichage de l'image sous forme de couverture, d' image complète, de mosaïque ou d'absence de répétition.
-
Configurez la position, l' incrustation d'arrière-plan, la bordure et l'ombre de l'image.
-
-
Vidéo. Cliquez sur Sélectionner une vidéo pour afficher les vidéos téléchargées ou collez l'URL de la vidéo YouTube, Vimeo ou Dailymotion dans le champ prévu à cet effet. Pour plus d'informations sur les arrière-plans vidéo, reportez-vous à la section Arrière-plans des éléments.
Remarque
Pour plus d'informations sur les arrière-plans, reportez-vous à la section Arrière-plans des éléments.
-
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 :
-
Cliquez avec le bouton droit de la souris sur la ligne, puis cliquez sur Ajouter une ligne intérieure. Si la ligne comporte plusieurs colonnes, choisissez la colonne à laquelle vous souhaitez ajouter les lignes intérieures.
-
Cliquez avec le bouton droit de la souris sur la colonne et cliquez sur Ajouter une ligne intérieure.
-
Cliquez avec le bouton droit de la souris sur la ligne intérieure et cliquez sur Ajouter une ligne pour placer une ligne intérieure sous la ligne actuelle.
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é mise en place afin d'offrir une meilleure expérience à l'utilisateur grâce à une variété de sections préfabriquées.
Remarque
-
Les sections n'utilisent pas de CSS personnalisé. Les concepteurs les intègrent à l'éditeur.
-
Les sections n'utilisent pas les paramètres de couleur et de police définis dans les réglages du thème du site. Cependant, vous pouvez toujours réinitialiser le format et appliquer votre design.
-
Les sections ne peuvent pas être utilisées dans l'en-tête. Pour changer la section complète de l'en-tête, ouvrez l'éditeur d'en-tête. Pour plus d'informations, voir En-têtes.
Ajouter des sections
Pour ajouter des sections à widget:
-
hover 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édéfinies est disponible dans le panneau de gauche, regroupées en catégories (Intro, Features, About, Team, Testimonials, etc.).
-
Dans le panneau latéral, cliquez sur une section pour l'afficher sous la forme d'une nouvelle ligne. Vous pouvez ensuite parcourir les sections d'un même groupe à l'aide des touches fléchées ou en sélectionnant une section dans un autre groupe.
-
Pour intégrer la section dans le site, cliquez sur Enregistrer. Vous pouvez également cliquer sur Enregistrer & Ajouter une autre section pour continuer à ajouter des sections à votre site. La section se transforme en ligne et tous les éléments de la section sont modifiables.
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 :