Le constructeur visuel est l'éditeur par blocs de Giant Context pour la conception de contenu. Il alimente chaque type de contenu de la plateforme : 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 utilisent tous le même constructeur. Une fois que vous avez compris son fonctionnement, vous pouvez tout concevoir. Vous voyez exactement ce que vos visiteurs verront pendant que vous travaillez, et chaque modification est reflétée en temps réel sur le canevas.

Ceci est un aperçu en direct de votre contenu. Ce que vous voyez ici est exactement ce que vos visiteurs verront. Cliquez sur n'importe quel élément pour le sélectionner, faites glisser des blocs pour les réorganiser et observez vos modifications apparaître instantanément. Les éléments sélectionnés sont mis en évidence par un contour bleu et affichent une petite étiquette en haut (telle que « Section », « Colonne » ou le nom spécifique du bloc). Cette étiquette comprend une icône de poignée pour le déplacement et un bouton X pour supprimer l'élément.

Le contenu dans le constructeur suit une hiérarchie à trois niveaux.

Les sections sont les bandes horizontales qui divisent votre contenu de haut en bas. Elles agissent comme des rangées qui s'étendent sur toute la largeur de la page, fournissant une base structurelle à votre mise en page. Chaque section possède ses propres paramètres et styles, vous permettant de contrôler indépendamment les arrière-plans, l'espacement et l'alignement.

Les colonnes se trouvent à l'intérieur des sections et dictent la structure horizontale de votre page. Elles utilisent un système de grille flexible de 12 unités pour gérer la largeur, vous offrant un contrôle précis sur la distribution du contenu. Comme les paramètres de largeur prennent en charge des valeurs réactives, vous pouvez facilement ajuster la taille des colonnes sur différents points de rupture, garantissant ainsi que votre mise en page soit parfaite sur les ordinateurs de bureau, les tablettes et les appareils mobiles.

Le panneau des calques offre une vue arborescente structurelle de votre page. Il affiche chaque section, colonne et bloc dans un plan imbriqué clair, vous donnant une image complète de l'organisation de votre contenu.

Cette vue structurelle est particulièrement utile lorsque :

• Les blocs sont empilés ou imbriqués de manière serrée, ce qui les rend difficiles à sélectionner directement sur le canevas.
• Vous avez besoin de comprendre d'un coup d'œil la mise en page globale et la hiérarchie d'une page complexe.
• Vous souhaitez réorganiser rapidement les sections sur la page, ou faire glisser des colonnes et des blocs pour les repositionner.

Cliquer sur n'importe quel élément dans le panneau des calques le sélectionne instantanément sur le canevas. Vous pouvez développer et réduire les éléments pour explorer la structure de votre page, vous donnant une vue claire de la manière dont tout est imbriqué. Le panneau des calques facilite également la réorganisation de votre mise en page grâce à un système simple de glisser-déposer :

• Faites glisser des blocs entre les colonnes ou réorganisez-les au sein d'une colonne
• Faites glisser des colonnes pour les réorganiser au sein d'une section
• Faites glisser les sections pour les réorganiser sur la page

Vos visiteurs utilisent différents appareils pour naviguer sur votre site web. Quelqu'un pourrait découvrir votre page sur son téléphone, y revenir sur une tablette et l'explorer en détail sur un ordinateur de bureau. Le constructeur visuel fournit des outils pour prévisualiser votre contenu sur ces points de rupture et ajuster les valeurs réactives — comme la marge, la marge intérieure, le rayon de bordure et la largeur — spécifiquement pour les écrans d'ordinateur, de tablette et de mobile.