← Tous les articles

Tutoriels

Ajustements Canva — un éditeur plus grand et moins de bruit

18 mai 2026 · par JustZix Team

Canva est excellent pour des graphismes rapides, mais son interface est pleine d'incitations à acheter le plan Pro, de promotions de modèles et de panneaux latéraux qui volent de la place au canevas. Ce guide montre comment remodeler canva.com avec quelques règles CSS et JS dans JustZix — masquez les incitations, agrandissez la zone de travail et apaisez la vue de l'éditeur.

Ce qui distrait dans Canva

L'éditeur Canva entoure le canevas de plusieurs couches : un panneau de gauche d'éléments et de modèles, une barre supérieure, des bannières de mise à niveau et des insertions « Essayer Pro » / « Modèles recommandés ». JustZix s'exécute localement dans l'onglet — une règle CSS masque un élément, une règle JS peut le retirer du DOM ou en atténuer le volume sonore. Rien ne quitte votre navigateur, et chaque ajustement est épinglé à canva.com et basculé d'un clic.

Masquer les bannières Pro et les incitations

Les incitations à acheter le plan Pro apparaissent dans la barre supérieure, en bas du panneau de gauche et sous forme de cartes autonomes. Vous pouvez les masquer avec une règle CSS qui cible les composants de mise à niveau :

/* Masquer les bannières et boutons « Essayer Canva Pro » */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Bande promo en haut de l'éditeur */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

Si la bannière n'apparaît qu'après un instant, une courte règle JS la retire aussi après le chargement paresseux :

// Retirer les bannières d'incitation, y compris celles chargées paresseusement
function dropUpsell() {
  document.querySelectorAll(
    '[data-testid*="upgrade"], div[class*="upsell"]'
  ).forEach(el => el.remove());
}
dropUpsell();
new MutationObserver(dropUpsell).observe(
  document.body, { childList: true, subtree: true }
);

Couper les promotions de modèles

Dans le panneau de gauche, Canva mélange vos projets avec des carrousels « Modèles recommandés » et « Populaires ». Quand vous travaillez sur un projet précis, ces sections ne font que gêner :

/* Masquer les carrousels de modèles promus */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Agrandir le canevas de l'éditeur

Par défaut le panneau de gauche prend une colonne fixe et large. Le rétrécir redonne de la place au canevas — exactement ce sur quoi vous travaillez :

/* Panneau de gauche plus étroit, canevas plus grand */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Laisser la zone du canevas prendre l'espace libéré */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Mode focus — le canevas seulement

Quand vous voulez travailler sans distractions, une seule règle peut masquer la barre supérieure et le panneau de gauche, ne laissant que le canevas avec un cadre minimal :

/* Mode focus : le canevas seulement */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Centrer le canevas en pleine largeur */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Apaiser l'interface et améliorer la lisibilité des panneaux

Les étiquettes des panneaux latéraux de Canva peuvent être petites et peu contrastées. Une règle CSS peut les agrandir et les renforcer, tandis qu'une règle JS atténue les accents trop voyants :

/* Texte plus lisible dans les panneaux */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Atténuer les badges voyants et les accents promo
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Construisez votre propre ensemble

Gardez ces ajustements comme des règles distinctes et nommées — « Canva : sans incitations », « Canva : canevas plus grand », « Canva : mode focus » — chacune épinglée à canva.com. Ensuite, en quelques secondes vous adaptez l'éditeur à la tâche.

Des règles prêtes à l'emploi pour Canva sont dans le catalogue — voyez les exemples pour canva.com et copiez ce qui convient. Installez JustZix et désencombrez votre éditeur dès aujourd'hui.