Constructeur visuel
Le constructeur visuel est l'éditeur par blocs que vous utilisez pour concevoir du contenu dans Giant Context. Les pages, les articles de blog, les en-têtes, les pieds de page, les e-mails, les formulaires, les articles de la base de connaissances et les mises en page s'y construisent tous, avec les mêmes blocs et les mêmes panneaux de paramètres. L'apprendre une fois couvre tous les types de contenu de la plateforme.
Aperçu en direct
Le canevas affiche votre contenu tel qu'un visiteur le voit. Faites glisser les blocs à leur place et chaque modification apparaît sur le canevas au fur et à mesure.
Les trois zones principales
L'espace de travail du constructeur
La barre latérale gauche contient les outils et les paramètres, le canevas au centre est l'endroit où vous éditez, et la barre d'outils en haut porte les commandes qui s'appliquent à tout le document.
Le canevas
Cliquez sur n'importe quel élément du canevas pour le sélectionner. La sélection reçoit un contour bleu et une petite étiquette au-dessus qui nomme ce que vous avez choisi, comme Section, Colonne ou le type de bloc. L'étiquette porte une icône de poignée pour le déplacement et un bouton X pour la suppression.
La barre latérale gauche
La barre d'outils supérieure
Sections, colonnes et blocs
Le contenu dans le constructeur suit une hiérarchie à trois niveaux.
Sections
Les sections sont les bandes horizontales qui divisent la page de haut en bas. Chacune occupe toute la largeur et contient les colonnes qui s'y trouvent. Une section possède ses propres paramètres et styles, vous réglez donc son arrière-plan, son espacement et son alignement séparément.
Colonnes
Les colonnes se trouvent à l'intérieur des sections et définissent la structure horizontale. La largeur suit une grille de 12 unités, une colonne de demi-largeur vaut donc 6 unités et un tiers en vaut 4. La largeur accepte une valeur distincte par point de rupture, c'est ainsi qu'une colonne peut occuper la moitié de la largeur sur ordinateur et toute la largeur sur un téléphone.
Blocs
Les blocs sont les éléments de contenu eux-mêmes, comme les titres, les paragraphes, les images, les boutons, les champs de formulaire et les vidéos. Chaque bloc dispose d'un panneau de paramètres conçu pour son propre type. Un bloc de titre a des commandes pour le texte, l'alignement et le niveau de titre. Un bloc d'image a le sélecteur de média, le texte alternatif et les options d'affichage.
Travailler avec des blocs
Sélectionner un bloc
Sélectionner un bloc charge ses paramètres dans le panneau Modifier le bloc. Cliquez plutôt sur une section ou une colonne et vous obtenez les paramètres de cet élément.
Le panneau Calques
Le panneau Calques affiche la page sous forme d'arborescence. Chaque section, colonne et bloc y figure, imbriqué comme il l'est sur le canevas, ce qui est le moyen le plus rapide de lire la structure d'une page longue.
Développer l'arborescence
Développez et réduisez n'importe quel élément pour travailler sur une partie de la page à la fois. Cliquer sur un élément de l'arborescence le sélectionne sur le canevas.
Le glisser-déposer dans l'arborescence réorganise la page :
- Déplacer un bloc dans sa colonne ou vers une autre colonne
- Réorganiser les colonnes à l'intérieur d'une section
- Réorganiser les sections sur la page
Blocs très imbriqués. Quand un bloc se trouve loin à l'intérieur d'une colonne et que cliquer sur le canevas sélectionne toujours son parent, sélectionnez-le plutôt dans le panneau Calques.
Styles avancés
Les valeurs se propagent vers le bas. Une valeur définie pour l'ordinateur s'applique à la tablette et au mobile tant que vous n'en définissez pas une autre. Cliquez sur l'icône d'appareil à côté d'un champ pour changer de point de rupture.
Design réactif
Le constructeur prévisualise votre contenu à trois largeurs pour que vous puissiez vérifier la mise en page sur chacune avant de publier. Les valeurs de style qui doivent différer selon la largeur se définissent par point de rupture.
Aperçu par appareil
Les trois boutons font passer le canevas de l'ordinateur à 1440 px à la tablette à 768 px et au mobile à 375 px. Le contenu se réagence à chaque largeur comme il le fera sur l'écran d'un visiteur.
Foire aux questions
Vérifiez le paramètre de visibilité de ce bloc dans le panneau Styles avancés, où un bloc peut être masqué à une largeur donnée. S'il y est visible, passez le canevas en mobile et vérifiez les valeurs de largeur et de marge qu'il a à ce point de rupture.
Divisez une section en colonnes et faites glisser un bloc dans chacune. Réglez la largeur des colonnes sur la grille de 12 unités, par exemple deux colonnes de 6 unités chacune.
Ajoutez d'abord les sections et divisez-les en colonnes, puis déposez les blocs de contenu. Construire la structure avant le contenu évite d'avoir à déplacer des blocs déjà terminés plus tard.