Design mobile sur Showit : adapter son site pour les petits écrans sans tout recasser
Plus de 60% des visites de sites web se font sur mobile. Pourtant, adapter son design mobile dans Showit est souvent la dernière chose faite, et à la va-vite, juste avant la mise en ligne. Résultat, des textes trop petits, des éléments qui se chevauchent, des canvases qui débordent.
Ce guide vous montre comment travailler mobile et desktop en parallèle, personnaliser chaque version indépendamment et récupérer un design mobile sans tout recommencer.
Comment Showit gère mobile et desktop
Dans Showit, mobile et desktop sont deux designs distincts mais liés. Quand vous ajoutez un élément sur desktop, il apparaît aussi sur mobile – mais sa position, sa taille, sa couleur, ses effets peuvent être configurés différemment pour chaque version. Ils sont synchronisés par défaut sur la plupart des réglages, et vous pouvez les délier (splitter) quand vous voulez que mobile et desktop aient des valeurs différentes.
Éditer en vue côte à côte : la bonne méthode
Showit vous permet d’afficher desktop et mobile simultanément dans l’éditeur. C’est la méthode recommandée : vous ajustez les deux en même temps plutôt que de finir votre desktop et de tout rattraper ensuite. Activez cette vue via le bouton en haut de l’éditeur. vous verrez vos deux designs s’afficher côte à côte et se mettre à jour simultanément.
Split et Merge : contrôler chaque version indépendamment
C’est la fonctionnalité clé. La plupart des réglages dans le panneau de droite (couleur, taille de police, fond de canvas, effets…) sont synchronisés entre mobile et desktop. Pour les personnaliser indépendamment, vous devez les splitter.
Splitter un réglage
Dans le panneau de droite, survole le réglage que vous voulez personnaliser (couleur d’un texte, taille d’une police, fond d’un canvas…) → cliquez sur les 3 points qui apparaissent → Split Mobile & Desktop. Deux icônes apparaissent (mobile et desktop) – sélectionnez celle que vous voulez modifier et changez la valeur.
<aside> ⚠️ ⚠️ Splitter un réglage n’affecte que ce réglage spécifique sur cet élément. Si vous voulez que la couleur et la police soient différentes sur mobile, vous devez splitter les deux séparément.
</aside>
Merger : resynchroniser
Si vous voulez remettre mobile et desktop à la même valeur : 3 points → Mergez Using Mobile (applique la valeur mobile aux deux) ou Mergez Using Desktop (applique la valeur desktop aux deux). Faites attention à bien sélectionner la version qui doit être la référence avant de merger.
Vous pouvez splitter/merger ces éléments : textes, formes, lignes, icônes, galeries, images, embeds, effets, Canvas Views, Canvas Backgrounds, fond de page, Design Settings (Type Styles et Global Styles).
Masquer des éléments ou des canvases sur mobile
Masquer un élément individuel
Dans le panneau gauche, clique sur un canvas pour voir la liste de ses éléments. Au survol de chaque élément, deux icônes apparaissent à gauche : un téléphone (mobile) et un écran (desktop). Blanc = visible, gris = masqué. Clique sur l’icône pour basculer.
💡 Cas d’usage concret : une décoration graphique complexe (un shape élaboré, un texte en arrière-plan) qui est belle sur desktop mais qui encombre le mobile. Vous la masquez sur mobile sans la supprimer.
Masquer un canvas entier
Dans le panneau gauche, cliquez sur les 3 points à droite du nom du canvas → décoche Visible On Mobile ou Visible On Desktop. La section disparaît entièrement de la version concernée.
Layout Mobile : l’outil qui récupère un design désoré
vous avez construit tout votre site sur desktop, vous passez sur mobile et c’est le chaos :
Pas besoin de tout refaire manuellement. Sélectionne le canvas concerné → 3 points à côté de son nom → Layout Mobile. Une fenêtre s’ouvre avec plusieurs options.
Les méthodes de mise en page
- Auto – génère automatiquement une version mobile adaptée aux dimensions mobiles
- Scaled – reproduit la mise en page desktop à l’échelle mobile (les tailles de police peuvent être à ajuster)
- Stacked – centre et empile tous les éléments dans l’ordre vertical – idéal comme point de départ à ajuster manuellement
- Do Not Layout – ne touchez pas au layout, utilez si vous voulez uniquement copier les styles sans repositionner les éléments
Les options de styles
- Copy Canvas Styles – copie les réglages du canvas desktop (fond, sticky…) vers le canvas mobile
- Copy Element Styles – copie les réglages des éléments (couleurs, polices, effets) vers la version mobile
<aside> 💡 💡 Layout Mobile est un point de départ, pas un résultat parfait. Le résultat généré automatiquement nécessite toujours des ajustements manuels. Mais il évite de repositionner chaque élément à la main.
</aside>
Bonnes pratiques pour un mobile propre
- Travaillez toujours en vue côte à côte dès le début – 5 minutes d’ajustement au fur et à mesure valent mieux que 3 heures de rattrapage en fin de projet
- Augmentez la taille des polices sur mobile – splitte le réglage de taille et monte d’au moins 2-4px sur mobile. Ce qui est lisible sur un grand écran est souvent trop petit sur téléphone
- Masquez les décorations non essentielles sur mobile – les éléments purement décoratifs (shapes, overlays…) alourdissent souvent le mobile sans apporter de valeur
Ce que vous pouvez faire maintenant
- Activez la vue côte à côte dans l’éditeur et faites un tour rapide de chaque page pour identifier les canvases qui ont besoin d’attention sur mobile
- Sur les canvases problématiques, utilisez Layout Mobile (option Stacked) pour avoir un point de départ, puis ajuste manuellement
- Splittez la taille de police de vos titres principaux pour augmenter leur lisibilité sur mobile