Sur Showit, tout ce que tu places sur un canvas s’appelle un élément. Texte, image, bouton, vidéo, Lottie… chaque brique de contenu est un élément que tu positionnes librement.
Avant de te lancer dans la création de tes pages, voici un tour complet de tous les éléments disponibles et à quoi chacun sert.
Comment ajouter un élément ?
Les éléments s’ajoutent depuis le bouton Add Element dans la Bottom Toolbar, qui ouvre un encart avec trois options :
Text : pour ajouter un texte (Title, Header, Subheading, Paragraph).
Elements : pour accéder à tous les autres types d’éléments (formes, icônes, boutons, vidéos, Lotties, galeries, embed…).
Media : pour ouvrir la Media Library et ajouter une image en un clic.
Tu dois toujours avoir un canvas sélectionné avant d’ajouter un élément. Si aucun canvas n’est sélectionné, le bouton Add Element dans la Bottom Toolbar est inactif.
Les textes
Quand tu cliques sur l’icône Texte, Showit te propose quatre styles correspondant à tes Type Styles définis dans les Design Settings :
Title : pour les titres principaux de tes sections.
Header : pour les sous-titres de section.
Subheading : pour les accroches secondaires.
Paragraph : pour le corps de texte courant.
Chaque style correspond automatiquement à une balise HTML (h1, h2, h3, p…) définie dans tes Design Settings. C’est important pour le SEO : utilise les styles de façon cohérente et hiérarchique sur chaque page.
💡 N’utilise qu’un seul Title (h1) par page. Google s’attend à trouver un seul titre principal par page.
Les images
Ajoute une image via l’option Image dans l’encart Add Element, qui ouvre ta Media Library. L’image s’insère dans un cadre redimensionnable et repositionnable librement.
Une fois placée, tu peux ajuster le recadrage, l’opacité, et renseigner le titre SEO et l’alt text dans le Properties Panel.
Les boutons
Les boutons sont des éléments à part entière sur Showit. Avant d’en ajouter, configure tes styles par défaut dans Design Settings > Buttons. Tu disposes de deux variantes :
Primary : ton bouton principal, souvent plein et bien visible.
Secondary : une variante alternative, souvent en contour ou plus sobre.
Chaque bouton a deux états configurables : Normal (apparence au repos) et Hover (apparence au survol). Un changement de couleur au hover donne un côté très professionnel.
Tu peux aussi personnaliser un bouton individuellement sans toucher aux Design Settings : sélectionne-le, clique sur l’onglet Button Style dans le Properties Panel, puis sur + Customize.
Convertir une forme + texte en bouton
Tu as un bouton « fait maison » (une forme + un texte par-dessus) dans ton template ? Tu peux le convertir en vrai bouton Showit : sélectionne les deux éléments ensemble avec Cmd (Mac) ou Ctrl (PC), puis clique sur Convert to Button dans le Properties Panel. Il adopte automatiquement ton style Primary.
La sélection doit comporter exactement une forme et un texte. Les icônes ne sont pas compatibles avec cette conversion.
💡 Si tu travailles avec un template acheté, utilise Convert to Button pour harmoniser rapidement tous les anciens boutons avec tes propres styles.
Les formes
Rectangles, cercles, formes personnalisées : accessibles via l’option Element dans l’encart Add Element. Elles servent à créer des fonds colorés, séparateurs visuels, encadrés ou éléments décoratifs. Tu peux leur appliquer une couleur, bordure, arrondi, ombre portée et opacité.
Les lignes
L’outil ligne permet d’ajouter des séparateurs horizontaux ou verticaux. Tu configures la couleur, l’épaisseur et le style (pleine, pointillés, tirets).
Les icônes
Showit intègre une bibliothèque d’icônes gratuite accessible via l’option Element dans l’encart Add Element. Parcours les icônes dans l’onglet Icon Chooser et change leur couleur facilement. Tu peux aussi importer tes propres icônes SVG via la Media Library.
💡 Les icônes sont parfaites pour illustrer des listes de services, valeurs ou processus. Elles allègent visuellement une page très textuelle.
Les vidéos
Deux façons d’intégrer une vidéo :
Vidéo en ligne (YouTube, Vimeo) : colle l’URL dans l’élément vidéo.
Vidéo uploadée (MP4 h.264) : depuis ta Media Library, pour les vidéos de fond de canvas par exemple.
Tu configures l’autoplay, le mode muet, la lecture en boucle et les contrôles depuis le Properties Panel.
Les animations Lottie
Les Lotties sont des animations vectorielles légères, bien plus performantes qu’un GIF : elles ne pixelisent pas et sont très légères. Idéales pour des icônes animées, des illustrations en mouvement ou des effets décoratifs.
Tu trouves des Lotties gratuites sur lottiefiles.com/free-animations (compte gratuit requis, 10 téléchargements/mois). Télécharge le fichier au format dotLottie.
Pour l’intégrer sur Showit, trois options :
Glisser-déposer : directement depuis ton ordi sur le canvas.
Via l’option Element > Lottie dans l’encart Add Element : ajoute un placeholder puis sélectionne ton fichier depuis la Media Library.
Via un Asset Link : si tu as copié le lien CDN depuis LottieFiles, colle-le directement dans le Properties Panel.
Les options de personnalisation : Loop (lecture en boucle), Mode (Forward, Reverse, Bounce…), Speed (vitesse de lecture) et + Customize pour opacité, ombre, arrondi.
Les galeries
Showit propose plusieurs types de galeries : grille, masonry, slider, lightbox… Chacun a ses options de configuration (colonnes, espacement, transitions). Idéal pour présenter un portfolio ou des photos de projets sans placer chaque image manuellement.
Le Social Grid Widget
Le Social Grid Widget affiche un flux Instagram directement sur ton site. C’est la méthode officielle recommandée par Showit : évite les widgets tiers qui peuvent poser des problèmes de compatibilité.
L’Embed Code
L’élément Embed Code te permet d’intégrer n’importe quel code HTML : formulaire de contact, outil de prise de rendez-vous (Calendly, Acuity…), player audio, widget boutique…
Tu colles ton code dans le champ Custom Code du Properties Panel. C’est l’un des éléments les plus puissants de Showit pour connecter tes outils tiers.
💡 Calendly, Flodesk, Typeform, ManyChat… tous ces outils fournissent un code embed. Sur Showit, tu peux les intégrer proprement sur n’importe quelle page.
En résumé
Sur Showit, tu disposes de 11 types d’éléments : textes, images, boutons, formes, lignes, icônes, vidéos, Lotties, galeries, Social Grid Widget et embeds. Tous accessibles depuis le bouton Add Element dans la Bottom Toolbar, tous configurables depuis le Properties Panel.
Maintenant que tu connais la palette disponible, tu es prête à passer à la pratique !
Pour continuer à découvrir Showit :
→ Ajouter, déplacer et modifier un élément sur Showit
→ Découvrir l’interface Showit
