← Wszystkie wpisy

Poradniki

Poprawki Canva — większy edytor i mniej szumu

18 maja 2026 · autor JustZix Team

Canva świetnie sprawdza się do szybkiej grafiki, ale jej interfejs jest pełen zachęt do kupna planu Pro, promocji szablonów i bocznych paneli, które odbierają miejsce płótnu. Ten poradnik pokazuje, jak za pomocą kilku reguł CSS i JS w JustZix przemodelować canva.com — schować upsell, powiększyć obszar roboczy i uspokoić widok edytora.

Co rozprasza w Canvie

Edytor Canva otacza płótno kilkoma warstwami: lewy panel z elementami i szablonami, górny pasek, banery zachęcające do upgrade'u oraz wstawki "Wypróbuj Pro" i "Polecane szablony". JustZix działa lokalnie w karcie — reguła CSS chowa element, reguła JS może go usunąć z DOM albo zmniejszyć jego natarczywość. Nic nie opuszcza przeglądarki, a każda poprawka jest przypięta do canva.com i włączana jednym klikiem.

Ukryj banery Pro i upsell

Zachęty do kupna planu Pro pojawiają się w górnym pasku, na dole lewego panelu i jako osobne karty. Można je ukryć regułą CSS celującą w komponenty upgrade'u:

/* Ukryj banery i przyciski "Wypróbuj Pro" */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Pasek promocyjny u góry edytora */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

Jeżeli baner pojawia się dopiero po chwili, krótka reguła JS usunie go także po doładowaniu:

// Usuń banery upsell, także te doładowane później
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 }
);

Wytnij promocje szablonów

W lewym panelu Canva miesza Twoje projekty z karuzelami "Polecane szablony" i "Popularne". Jeżeli pracujesz nad konkretnym projektem, te sekcje tylko przeszkadzają:

/* Ukryj karuzele promowanych szablonów */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Powiększ płótno edytora

Domyślnie lewy panel zajmuje stałą, szeroką kolumnę. Zwężenie go oddaje miejsce płótnu — właśnie temu, nad czym pracujesz:

/* Węższy lewy panel, większe płótno */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Niech obszar płótna zajmie zwolnione miejsce */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Tryb skupienia — samo płótno

Gdy chcesz pracować bez rozpraszaczy, jedna reguła może schować górny pasek i lewy panel, zostawiając samo płótno z minimalnym obramowaniem:

/* Tryb skupienia: tylko płótno */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Wycentruj płótno na pełnej szerokości */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Uspokój UI i popraw czytelność paneli

Etykiety w bocznych panelach Canva bywają drobne i niskokontrastowe. Reguła CSS może je powiększyć i wzmocnić, a reguła JS — stonować jaskrawe akcenty:

/* Czytelniejszy tekst w panelach */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Stonuj jaskrawe odznaki i akcenty promocyjne
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Zbuduj swój zestaw

Trzymaj te poprawki jako osobne, nazwane reguły — "Canva: bez upsellu", "Canva: większe płótno", "Canva: tryb skupienia" — każda przypięta do canva.com. Dzięki temu w kilka sekund dopasujesz edytor do zadania.

Gotowe reguły dla Canva znajdziesz w katalogu — zajrzyj do przykładów dla canva.com i skopiuj to, co pasuje. Zainstaluj JustZix i odchudź swój edytor jeszcze dziś.