← Todos los artículos

Tutoriales

Ajustes de Canva — un editor más grande y menos ruido

18 mayo 2026 · por JustZix Team

Canva es estupendo para gráficos rápidos, pero su interfaz está llena de señuelos para comprar el plan Pro, promociones de plantillas y paneles laterales que le roban sitio al lienzo. Esta guía muestra cómo remodelar canva.com con unas pocas reglas CSS y JS en JustZix — ocultar la venta, agrandar el área de trabajo y calmar la vista del editor.

Qué distrae en Canva

El editor de Canva rodea el lienzo de varias capas: un panel izquierdo de elementos y plantillas, una barra superior, banners de mejora e inserciones de "Prueba Pro" / "Plantillas recomendadas". JustZix se ejecuta localmente dentro de la pestaña — una regla CSS oculta un elemento, una regla JS puede quitarlo del DOM o bajarle el tono a lo ruidoso que es. Nada sale de tu navegador, y cada ajuste está fijado a canva.com y se alterna con un clic.

Oculta los banners de Pro y la venta

Los señuelos para comprar el plan Pro aparecen en la barra superior, al final del panel izquierdo y como tarjetas independientes. Puedes ocultarlos con una regla CSS que apunte a los componentes de mejora:

/* Oculta los banners y botones "Prueba Canva Pro" */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Franja promocional en la parte alta del editor */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

Si el banner aparece solo tras un momento, una regla JS corta lo quita también tras la carga diferida:

// Quita los banners de venta, incluidos los de carga diferida
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 }
);

Corta las promos de plantillas

En el panel izquierdo Canva mezcla tus proyectos con carruseles de "Plantillas recomendadas" y "Populares". Cuando trabajas en un proyecto concreto esas secciones solo estorban:

/* Oculta los carruseles de plantillas promocionadas */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Agranda el lienzo del editor

Por defecto el panel izquierdo ocupa una columna fija y ancha. Estrecharlo le devuelve sitio al lienzo — justo en lo que estás trabajando:

/* Panel izquierdo más estrecho, lienzo más grande */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Deja que el área del lienzo ocupe el espacio liberado */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Modo enfoque — solo el lienzo

Cuando quieres trabajar sin distracciones, una sola regla puede ocultar la barra superior y el panel izquierdo, dejando solo el lienzo con un marco mínimo:

/* Modo enfoque: solo el lienzo */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Centra el lienzo a todo el ancho */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Calma la interfaz y mejora la legibilidad de los paneles

Las etiquetas de los paneles laterales de Canva pueden ser pequeñas y de poco contraste. Una regla CSS puede agrandarlas y reforzarlas, mientras una regla JS baja el tono de los acentos ruidosos:

/* Texto más legible en los paneles */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Baja el tono de las insignias ruidosas y acentos promocionales
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Monta tu propio conjunto

Mantén estos ajustes como reglas separadas y con nombre — "Canva: sin venta", "Canva: lienzo más grande", "Canva: modo enfoque" — cada una fijada a canva.com. Entonces, en unos segundos, adaptas el editor a la tarea.

Las reglas ya hechas para Canva están en el catálogo — mira los ejemplos para canva.com y copia lo que encaje. Instala JustZix y despeja tu editor hoy.