← Все статьи

Туториалы

Настройки Canva — больше редактор и меньше шума

18 мая 2026 · автор JustZix Team

Canva отлично подходит для быстрой графики, но её интерфейс полон призывов купить план Pro, промоакций шаблонов и боковых панелей, которые отнимают место у холста. Это руководство показывает, как перекроить canva.com с помощью нескольких правил CSS и JS в JustZix — скрыть апсел, увеличить рабочую область и успокоить вид редактора.

Что отвлекает в Canva

Редактор Canva окружает холст несколькими слоями: левая панель с элементами и шаблонами, верхняя полоса, баннеры обновления и вставки «Попробуйте Pro» / «Рекомендуемые шаблоны». JustZix работает локально внутри вкладки — CSS-правило прячет элемент, JS-правило может удалить его из DOM или приглушить то, насколько он громкий. Ничего не покидает ваш браузер, а каждая настройка привязана к canva.com и переключается одним кликом.

Скройте баннеры Pro и апсел

Призывы купить план Pro появляются в верхней полосе, внизу левой панели и как отдельные карточки. Их можно скрыть CSS-правилом, нацеленным на компоненты обновления:

/* Скрыть баннеры и кнопки "Try Canva Pro" */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Промо-полоса вверху редактора */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

Если баннер появляется только спустя момент, короткое JS-правило удалит его и после ленивой загрузки:

// Удалить баннеры апсела, включая ленивозагруженные
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 }
);

Уберите промо шаблонов

В левой панели Canva смешивает ваши проекты с каруселями «Рекомендуемые шаблоны» и «Популярное». Когда вы работаете над конкретным проектом, эти разделы только мешают:

/* Скрыть карусели продвигаемых шаблонов */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Увеличьте холст редактора

По умолчанию левая панель занимает фиксированную, широкую колонку. Её сужение возвращает место холсту — именно тому, над чем вы работаете:

/* Более узкая левая панель, больше холст */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Пусть область холста займёт освободившееся место */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Режим фокуса — только холст

Когда вы хотите работать без отвлечений, одно правило может скрыть верхнюю полосу и левую панель, оставив только холст с минимальной рамкой:

/* Режим фокуса: только холст */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Отцентровать холст на полной ширине */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Успокойте интерфейс и улучшите читаемость панелей

Подписи в боковых панелях Canva бывают мелкими и низкоконтрастными. CSS-правило может их увеличить и усилить, а JS-правило — приглушить громкие акценты:

/* Более читаемый текст в панелях */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Приглушить громкие бейджи и промо-акценты
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Соберите свой набор

Держите эти настройки отдельными именованными правилами — «Canva: без апсела», «Canva: больше холст», «Canva: режим фокуса» — каждое привязано к canva.com. Тогда за несколько секунд вы подстроите редактор под задачу.

Готовые правила для Canva есть в каталоге — посмотрите примеры для canva.com и скопируйте то, что подходит. Установите JustZix и расчистите свой редактор уже сегодня.