← Alle Beiträge

Anleitungen

Canva-Anpassungen — ein größerer Editor und weniger Lärm

18 Mai 2026 · von JustZix Team

Canva eignet sich hervorragend für schnelle Grafiken, aber seine Oberfläche ist voller Aufforderungen, den Pro-Plan zu kaufen, Vorlagen-Werbung und Seitenpanels, die der Leinwand Raum stehlen. Diese Anleitung zeigt, wie Sie canva.com mit ein paar CSS- und JS-Regeln in JustZix umgestalten — den Upsell ausblenden, den Arbeitsbereich vergrößern und die Editor-Ansicht beruhigen.

Was in Canva ablenkt

Der Canva-Editor umgibt die Leinwand mit mehreren Schichten: ein linkes Panel mit Elementen und Vorlagen, eine obere Leiste, Upgrade-Banner und „Pro testen“- / „Empfohlene Vorlagen“-Einschübe. JustZix läuft lokal im Tab — eine CSS-Regel blendet ein Element aus, eine JS-Regel kann es aus dem DOM entfernen oder abschwächen, wie laut es ist. Nichts verlässt Ihren Browser, und jede Anpassung ist an canva.com angeheftet und mit einem Klick umschaltbar.

Pro-Banner und Upsell ausblenden

Aufforderungen, den Pro-Plan zu kaufen, erscheinen in der oberen Leiste, am unteren Rand des linken Panels und als eigenständige Karten. Sie können sie mit einer CSS-Regel ausblenden, die auf die Upgrade-Komponenten zielt:

/* "Canva Pro testen"-Banner und -Schaltflächen ausblenden */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Promo-Streifen am oberen Rand des Editors */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

Wenn das Banner erst nach einem Moment erscheint, entfernt eine kurze JS-Regel es auch nach dem Nachladen:

// Upsell-Banner entfernen, auch nachgeladene
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 }
);

Die Vorlagen-Promos entfernen

Im linken Panel mischt Canva Ihre Projekte mit „Empfohlene Vorlagen“- und „Beliebt“-Karussells. Wenn Sie an einem bestimmten Projekt arbeiten, stehen diese Abschnitte nur im Weg:

/* Beworbene Vorlagen-Karussells ausblenden */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Die Editor-Leinwand vergrößern

Standardmäßig nimmt das linke Panel eine feste, breite Spalte ein. Es schmaler zu machen gibt der Leinwand Raum zurück — genau dem, woran Sie arbeiten:

/* Schmaleres linkes Panel, größere Leinwand */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Den Leinwandbereich den freigewordenen Platz übernehmen lassen */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Fokusmodus — nur die Leinwand

Wenn Sie ohne Ablenkung arbeiten wollen, kann eine einzige Regel die obere Leiste und das linke Panel ausblenden und nur die Leinwand mit einem minimalen Rahmen lassen:

/* Fokusmodus: nur die Leinwand */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Die Leinwand in voller Breite zentrieren */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Die UI beruhigen und die Panel-Lesbarkeit verbessern

Beschriftungen in Canva-Seitenpanels können klein und kontrastarm sein. Eine CSS-Regel kann sie vergrößern und verstärken, während eine JS-Regel die lauten Akzente abschwächt:

/* Besser lesbarer Text in den Panels */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Laute Badges und Promo-Akzente abschwächen
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Bauen Sie Ihr eigenes Set

Behalten Sie diese Anpassungen als separate, benannte Regeln — „Canva: kein Upsell“, „Canva: größere Leinwand“, „Canva: Fokusmodus“ — jede an canva.com angeheftet. Dann passen Sie den Editor in wenigen Sekunden an die Aufgabe an.

Fertige Regeln für Canva sind im Katalog — sehen Sie sich die Beispiele für canva.com an und kopieren Sie, was passt. Installieren Sie JustZix und entrümpeln Sie Ihren Editor noch heute.