Un nouveau document Sparkle commence par une page blanche où vous pouvez ajouter les éléments dans la mise en page de votre site Web.

La façon la plus directe d'ajouter des éléments au canevas est d'utiliser les boutons correspondants de la barre d'outils ou d'ouvrir la fenêtre contextuelle « Ajouter ». Vous pouvez utiliser la personnalisation de la barre d'outils du système pour ajouter ou retirer différents éléments de la barre d'outils.

Chaque type de contenu est expliqué plus en détail dans cette documentation :

• • Texte : ajoute un bloc de texte
• • Carte : ajoute une carte Google map
• • Vidéo : ajoute un élément vidéo
• • Image : ajoute une image
• • Galerie d’images : ajoute une galerie d'images
• • Audio : ajoute un élément audio
• • Animation Lottie : ajoute une animation
• • Étiquettes de blog : ajoute les étiquettes de blog à une page de blog
• • Boîte : ajoute une boîte décorative
• • Boîte large : ajoute une boîte, prédéfinie pour être aussi large que la fenêtre du navigateur.
• • Fenêtre contextuelle : ajoute une fenêtre contextuelle
• • Bloc Disposition : ajoute un bloc Disposition
• • Menu : ajoute un menu
• • Bouton, Saisie de texte, Case à cocher, Bouton radio, Sélection du menu déroulant et Pièce jointe : ajoutent des éléments de formulaire ou des boutons d’action (voir Boutons et Formulaires)
• • Formulaire de connexion : ajoute un formulaire de connexion pour l’accès au contenu protégé par mot de passe
• • Paiement : ajoute un bouton de paiement ou un panier d’achats
• • Réservation de logement : ajoute un widget de réservation de logement
• • Calendrier : ajoute un widget de calendrier
• • Unité publicitaire : ajoute une publicité
• • Réservation de table : ajoute un widget de réservation de table
• • Twitter : ajoute un tweet, un fil twitter ou un lien d’un profil twitter
• • Facebook : ajoute des boutons Facebook (J’aime, Partager, etc.) ou un lien vers un profil Facebook
• • Intégré : ajoute le code fourni par un site Web tiers
• • Position du défilement : ajoute une position sur la page où le navigateur peut défiler après un clic
• • Recherche sur le site : ajoute un champ de recherche et une page de résultats de recherche

Des détails sur la position, la taille et le calque de l’élément sont disponibles dans la page de documentation inspecteur Disposition documentation page.

En plus du positionnement de la forme libre par glisser-déposer ou sur l’inspecteur, le canevas de Sparkle comporte une grille de mise en page, sur laquelle les éléments s’alignent de façon magnétique.

Les paramètres de la grille peuvent être modifiés à l'aide du bouton Grille de la barre d'outils. Sparkle propose par défaut une grille de 12 colonnes.

Les guides automatiques basés sur les limites des éléments constituent une alternative à l’alignement sur la grille. Par exemple, ici, le haut du texte s’aligne sur le bas de l’image :

Lorsque vous utilisez l’alignement magnétique, vous pouvez empêcher l’alignement en maintenant la touche Ctrl enfoncée pendant que vous faites glisser un élément.

Si vous souhaitez positionner un élément plus bas ou plus haut sur la page, dans une zone actuellement invisible, vous pouvez le faire glisser près du bord du canevas et la page défilera automatiquement.