Canvas avancés sur Showit : backgrounds, sticky setting, hidden canvas et site canvases
Si tu veux vraiment prendre la main sur Showit – et pas juste modifier un template sans comprendre ce que tu fais – tu dois comprendre les canvases en profondeur. Backgrounds, sticky, hidden canvas, site canvases : ce sont les quatre piliers qui expliquent comment ton site se structure, se comporte et s’affiche. Ce guide te donne tout ce qu’il faut savoir.
Canvas backgrounds : habiller tes sections
Le fond d’un canvas – c’est tout ce qu’il y a derrière les éléments (textes, images, formes). Il n’est pas cliquable directement sur le canvas : tu y accèdes via l’onglet Canvas Background dans le panneau de droite quand le canvas est sélectionné.
Les 4 types de fond
- Couleur unie – réglage par défaut. Tu peux aussi créer un dégradé deux couleurs depuis ce même panneau.
- Image – fond photo plein canvas. Contrôle le recadrage, la position et l’effet de scroll.
- Vidéo – fond vidéo en boucle, sans son. Formats MP4 et WebM, taille recommandée inférieure à 8MB pour ne pas ralentir le chargement.
- Transparent – aucun fond. Utilisé pour les menus flottants ou pour laisser transparaitre le canvas en dessous.
Le fond de canvas peut être splitté entre mobile et desktop (image différente, couleur différente, vidéo désactivée sur mobile) via les 3 points à côté de l’option Media Type ou Fill.
Le sticky setting : fixer des éléments à l’écran
Le sticky setting contrôle si un canvas reste visible en permanence pendant le scroll. Il est accessible dans l’onglet Canvas du panneau de droite quand un canvas est sélectionné.
- Top – collé en haut en permanence dès le chargement
- Top on Scroll – apparaît en haut seulement quand l’utilisatrice commence à scroller (le hero s’affiche entier avant que le menu couvre le haut)
- Bottom / Bottom on Scroll – même logique en bas de l’écran. Idéal pour un CTA fixe ou une barre de cookie.
<aside> ⚠️ ⚠️ Deux règles à toujours respecter avec les canvases sticky : (1) le stacking order doit être plus élevé que les autres canvases sinon le menu passe derrière, (2) si tu utilises Sticky Top, ajoute un canvas tampon vide de la même hauteur juste en dessous pour éviter que le premier canvas de contenu soit caché.
</aside>
Hidden Canvas : interactivité et révélations
Le setting Hidden to Start rend un canvas invisible au chargement de la page. Il n’apparaît que lorsqu’une action le déclenche. C’est la base des pop-ups, menus hamburger, galeries extensibles et autres effets d’interactivité dans Showit.
Activer Hidden to Start
Sélectionne le canvas → onglet Canvas → coche Hidden to Start
Montrer le canvas : deux types de déclencheurs
- Click Action – sur un bouton ou une icône : Show Canvas → sélectionne ton canvas. Le canvas apparaît au clic.
- Scroll Action – sur un canvas de la page : Scroll Actions → Add → Show Canvas. Définit à quel pourcentage de scroll le canvas s’affiche (utile pour les pop-ups automatisés).
<aside> 💡 💡 Une fois affiché, un canvas Hidden reste visible jusqu’à ce qu’une action le cache. N’oublie pas d’ajouter une Click Action Hide Site Canvas → This Site Canvas sur le bouton de fermeture.
</aside>
Site Canvases : modifier partout d’un seul endroit
Un Site Canvas est un canvas partagé à travers plusieurs pages. Quand tu modifies les éléments qu’il contient (textes, images, liens), le changement se propage automatiquement sur toutes les pages où ce canvas est utilisé. Parfait pour les menus, footers, barres d’annonce et navigation mobile.
Les deux couches de réglages d’un Site Canvas
C’est le point le plus souvent incompris de Showit.
- Couche de page (clic simple sur le canvas, sans Edit) – tu modifies ici le stacking order, le sticky et le hidden to start UNIQUEMENT pour cette page. Ces réglages ne se propagent PAS.
- Couche Site Canvas (clic sur le bouton bleu Edit) – tu modifies ici les éléments visuels (textes, images, liens). Ces modifications se propagent sur toutes les pages. C’est aussi ici que tu configures les réglages par défaut du canvas.
Site Canvas Sets : déployer menu + footer en un clic
Un Site Canvas Set est un groupe de Site Canvases (menu + footer, par exemple) que tu peux appliquer à plusieurs pages ou à tout ton site en un clic. Fini l’ajout manuel de chaque canvas page par page.
Créer un Site Canvas Set
- Panneau gauche → Site → fais défiler jusqu’à Site Canvas Sets → clique sur le + pour créer un nouveau set
- Clique sur le Canvas Set → onglet Canvas Set dans le panneau gauche. Le set a une zone Top (menu, header, barre d’annonce) et une zone Bottom (footer).
- Clique sur + à côté de Top ou Bottom → ajoute tes Site Canvases existants
Appliquer le set à tes pages
Dans l’onglet Set Properties du panneau de droite : choisis les pages sur lesquelles appliquer le set (toutes ou une sélection) → Save. Si tu avais déjà des Site Canvases en double sur ces pages, supprime les doublons.
<aside> 💡 💡 Tu peux créer plusieurs Sets différents : un pour tes pages standard (menu + footer), un autre pour tes pages de vente (sans menu = moins de distractions), un pour tes landing pages. Définit un set par défaut pour qu’il s’applique automatiquement à chaque nouvelle page créée.
</aside>
Ce que tu peux faire maintenant
- Vérifie que ton menu et ton footer sont sur des Site Canvases – si tu les as en Page Canvas dupliqués sur chaque page, convertis-les (3 points → Convert to Site Canvas)
- Crée un Site Canvas Set avec ton header (menu desktop + menu mobile) et ton footer → applique-le à toutes tes pages en un clic
- Si tu as un canvas de pop-up ou de promo, vérifie qu’il est en Hidden to Start et qu’il a une action de fermeture configurée