Comprendre Showit en 10 minutes : interface, pages, canvases et Design Settings
Showit est un outil de création de sites web qui fonctionne un peu différemment des autres. Pas de thèmes à installer, pas de blocs à empiler : tu construis visuellement ta page en glissant des éléments où tu veux, exactement comme tu le ferais dans un logiciel de design. C’est sa grande force – et aussi ce qui peut dérouter au début si tu ne connais pas sa logique.
Ce guide te donne les bases pour comprendre comment Showit est organisé, ce que veulent dire ses termes spécifiques, et comment naviguer dans l’éditeur sans te perdre.
L’interface : trois zones à retenir
Quand tu ouvres ton site dans Showit, l’écran se divise en trois zones principales.
Le panneau de gauche : c’est ton arborescence. Tu y vois la liste de toutes tes pages, les sections qui les composent, et les éléments de navigation globaux de ton site. C’est ton plan de travail.
La zone centrale : c’est ta surface de design. Tu y vois ta page telle qu’elle sera, et tu peux y déplacer, redimensionner et modifier chaque élément directement.
Le panneau de droite : c’est le panneau de propriétés. Il s’adapte en fonction de ce que tu as sélectionné. Tu cliques sur un texte → il affiche les réglages de texte. Tu cliques sur une image → il affiche les réglages d’image.
La barre du bas : elle te permet d’ajouter de nouveaux éléments, de basculer entre la vue Desktop et la vue Mobile, et de publier ton site.
💡 Dès que tu ne sais plus où tu en es dans l’interface : gauche = structure, centre = design, droite = réglages de ce que tu as sélectionné.
La logique fondamentale : Site → Page → Canvas
Voilà le concept le plus important à comprendre. Ton site est organisé en trois niveaux imbriqués.
Le Site – c’est l’ensemble de ton site web. Tout ce que tu crées vit à l’intérieur.
La Page – c’est ce que voit une visitrice quand elle arrive sur une adresse de ton site. Accueil, services, contact… Chaque page a sa propre URL. Si tu scrolles de haut en bas, tu vois tout son contenu.
Le Canvas – c’est une section à l’intérieur d’une page. Pense à une page comme un mille-feuilles : chaque couche est un canvas. Ta page d’accueil est composée de plusieurs canvases empilés : le hero en haut, la section présentation, les services, le formulaire… Quand tu scrolles, tu passes d’un canvas à l’autre.
💡 En résumé : une page = plusieurs canvases empilés les uns au-dessus des autres.
Les types de canvases
Tous les canvases ne fonctionnent pas de la même façon. Showit en propose trois types :
Normal : tu fixes la hauteur toi-même en pixels. Ce que tu vois dans l’éditeur = ce qui s’affiche en ligne. C’est le type le plus courant.
Window Height : le canvas s’ajuste automatiquement à la hauteur de la fenêtre du navigateur. Très utilisé pour les hero sections plein écran.
Grow with Content : réservé aux pages de blog. Le canvas grandit automatiquement selon la quantité de texte dans l’article.
Les Site Canvases : les sections qui se répètent partout
Sur ton site, certaines sections apparaissent sur toutes tes pages : ton menu de navigation en haut, ton footer en bas. Si elles étaient des canvases ordinaires, tu devrais les modifier page par page à chaque changement.
C’est là qu’intervient le Site Canvas : une section globale que tu modifies une seule fois, et qui se met à jour automatiquement sur toutes les pages où elle est présente. Tu peux le reconnaître dans l’éditeur à son motif rayé caractéristique.
Utilisations les plus courantes : menu de navigation, footer, barre d’annonce, menu mobile.
<aside> ⚠️ ⚠️ Un Site Canvas a deux niveaux d’édition. Sans cliquer sur « Edit » : tu modifies les réglages propres à cette page uniquement. En cliquant sur le bouton bleu « Edit » : tu modifies le contenu global, mis à jour partout. Vérifie toujours dans quel mode tu te trouves avant d’éditer.
</aside>
Les Canvas Sets : ton header + footer appliqués en un clic
Un Canvas Set, c’est un groupe de Site Canvases que tu peux appliquer à plusieurs pages en une seule action. Tu crées un Canvas Set avec ton menu (en haut) et ton footer (en bas), tu l’appliques à toutes tes pages d’un coup – et chaque nouvelle page le récupère automatiquement.
Les Design Settings : ta charte visuelle globale
Les Design Settings, c’est l’endroit où tu définis l’identité visuelle de base de tout ton site : tes couleurs, tes polices, et les styles typographiques (titre, sous-titre, paragraphe).
La logique : ce que tu définis ici s’applique automatiquement à tous les éléments correspondants sur l’ensemble du site. Tu changes ta couleur principale → elle se met à jour partout où elle est utilisée. C’est pour ça que bien configurer ses Design Settings au départ est l’une des premières choses à faire.
💡 Si une couleur ou une police ne se met pas à jour quand tu modifies tes Design Settings, c’est probablement parce que cet élément a été stylisé manuellement et « sort » de la charte globale.
Desktop et Mobile : deux vues indépendantes
Showit ne génère pas automatiquement une version mobile à partir de ta version desktop. Les deux vues sont designées séparément. Tu bascules entre les deux depuis la barre du bas.
C’est un peu plus de travail qu’un site qui s’adapte automatiquement – mais c’est aussi ce qui te donne un contrôle total sur l’expérience de tes visiteuses, quel que soit leur appareil.
<aside> ⚠️ ⚠️ Pense à toujours vérifier ta vue Mobile après avoir fait des modifications importantes en Desktop. Ce que tu fais d’un côté n’affecte pas l’autre automatiquement.
</aside>
Pour aller plus loin
Maintenant que tu comprends la logique de Showit, tu peux plonger dans les guides détaillés :
- Pages → Comment gérer les pages de son site Showit : création, SEO, organisation
- Texte → Texte sur Showit : le guide complet pour écrire, formater et bien référencer son site
- Liens et CTAs → Comment créer des liens, boutons et CTAs efficaces sur son site Showit
- Raccourcis clavier → Raccourcis clavier Showit : à connaître pour aller 2x plus vite