← 全部文章

教程

Canva 微调——更大的编辑器,更少的噪音

18 5月 2026 · 作者 JustZix Team

Canva 很适合做快速图形,但它的界面充满了购买 Pro 套餐的提示、模板促销,以及从画布那里偷走空间的侧边面板。本指南展示如何用 JustZix 里的几条 CSS 和 JS 规则改造 canva.com——隐藏推销、放大工作区域、让编辑器视图平静下来。

Canva 里有什么在分散注意力

Canva 编辑器用好几层东西围着画布:一个装着元素和模板的左面板、一条顶栏、升级横幅以及“试用 Pro”/“推荐模板”插入项。JustZix 在标签页里本地运行——一条 CSS 规则隐藏一个元素,一条 JS 规则可以把它从 DOM 里移除或淡化它有多吵闹。没有任何东西离开你的浏览器,而且每个微调都固定到 canva.com,一键切换。

隐藏 Pro 横幅与推销

购买 Pro 套餐的提示出现在顶栏、左面板底部以及作为独立卡片。你可以用一条针对升级组件的 CSS 规则把它们隐藏掉:

/* 隐藏“试用 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;
}

让 UI 平静下来并改善面板可读性

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,今天就清理你的编辑器。