Editor de contenidos web (ECM): guía de uso

ÍNDICE DE CONTENIDOS:
• ¿Qué es el editor de contenidos web?
• Objetos compatibles
• Cómo acceder al editor
• Selector de idiomas
• Campos generales del contenido
• Bloques de contenido disponibles
• Texto enriquecido
• Cabecera
• Lista
• Imagen
• Imagen y texto
• Columnas
• Slider
• Tabla
• Separador
• Aviso / Alerta
• Listado de documentos
• Gestión de imágenes
• Colores corporativos
• SEO
• URLs y slugs
• Historial de versiones
• Caché y rendimiento

¿Qué es el editor de contenidos web?

El editor de contenidos web es la herramienta de Yunbit que te permite crear y gestionar el contenido que se muestra en la web para cada artículo, categoría o página genérica. Funciona de forma similar a WordPress: defines bloques de contenido (textos, imágenes, sliders, tablas…) y el sistema genera automáticamente la URL, el SEO y la caché correspondientes.

Antes de este sistema, era necesario rellenar campos de texto por idioma directamente en la ficha del artículo o la categoría. Ahora todo el contenido web vive en un único lugar, vinculado al objeto, con soporte multiidioma desde el primer momento.

Objetos compatibles

Actualmente el editor de contenidos está disponible para tres tipos de objetos:

Desde Administrador Logística

• Artículos: editor completo con todos los bloques disponibles.
• Categorías: permite editar el texto introductorio superior y el SEO. Los bloques dinámicos (subcategorías, novedades) se gestionarán en una fase posterior.

Desde Administrador ECM

• Páginas genéricas (web pages): editor completo. Equivalente al sistema anterior pero unificado.

Cómo acceder al editor

1. Abre la ficha del artículo, categoría o página genérica en el gestor.
2. Ve a la pestaña Frontend o Editor de contenido.
3. Haz clic en el botón del editor de contenidos (en el caso de las fichas de artículo o categoría).

Si estás navegando por la web como usuario administrador, verás un botón «Editar contenido» directamente en la página. Al pulsarlo accedes al editor del contenido correspondiente sin tener que buscarlo en el gestor.

Requisito: para ver el botón «Editar contenido» en el sitio web, el contacto debe tener marcado Usuario web y Administrador en la pestaña Frontend de su ficha.

Selector de idiomas

En la parte superior del editor verás una pestaña por cada idioma configurado en tu web. Cada idioma es un contenido independiente (título, bloques y SEO propios).

• Punto verde: ese idioma tiene contenido.
• Sin punto: todavía no hay contenido para ese idioma.
• Estrella: idioma por defecto del sitio.

Campos generales del contenido

En el panel lateral derecho del editor encontrarás, para cada idioma:

• Título: título específico para el contenido web. No afecta al título del artículo en el ERP.
• Slug (URL amigable): generado automáticamente según el patrón configurado en ECM > Tipos de entidades CMS. Puedes sobrescribirlo manualmente para ese objeto concreto.
• Descripción corta: resumen utilizado en el SEO.
• Imagen principal: imagen destacada que algunos diseños muestran en la cabecera de la página.
• Estado: Borrador, Publicado, Archivado o Borrado.

Bloques de contenido disponibles

El editor funciona por bloques. Añade, ordena y elimina bloques según las necesidades de cada página. A continuación se describen todos los bloques disponibles.

Texto enriquecido

• Bloque de párrafo libre.
• Al seleccionar texto aparece la barra de formato: negrita, cursiva, subrayado, enlace, color de texto y color de celda. En el panel lateral puedes ajustar la alineación, añadir borde, color de fondo del bloque, espaciado interior (padding), margen y clases CSS adicionales para estilos personalizados.

Cabecera

• Título de sección. Puedes elegir el nivel jerárquico: H1, H2, H3, H4 o H5.

Lista

• Lista ordenada (numerada) o con viñetas.
• Tipos de marcador: punto, círculo, cuadrado.
• Crea subniveles con Tab y vuelve al nivel anterior con Mayús + Tab, igual que en Word o WordPress.

Imagen

Inserta una imagen del repositorio o de los documentos del objeto. Opciones disponibles:

• Pie de imagen.
• Texto alternativo (ALT).
• Tamaño.
• Enlace al hacer clic.
• Tipo de carga: diferida (la imagen se carga al entrar en pantalla, recomendada para imágenes más abajo en la página) o inmediata (para imágenes visibles nada más cargar la página, mejora el rendimiento).

Imagen y texto

• Bloque combinado de imagen + texto en paralelo.
• Puedes ajustar la posición relativa de la imagen respecto al texto.

Columnas

• Muestra de 2 a 4 columnas con imagen y texto cada una.
• Al reducir el número de columnas, el sistema avisa y elimina las columnas de la derecha.

Slider

• Carrusel de imágenes.
• Configura el intervalo de tiempo entre diapositivas, si se muestran flechas de navegación, los indicadores inferiores (bullets) y si el bucle es infinito o tiene fin.
• Las imágenes se toman del gestor de documentos e imágenes del objeto.

Tabla

• Tabla con filas y columnas configurables.
• Puedes marcar la primera fila o la primera columna como cabecera, y personalizar el color de fondo y el color de texto tanto de la cabecera como de las celdas.
• Añade un título opcional en la parte superior.

Separador

• Línea horizontal de separación visual.
• Puedes elegir el grosor y el color.

Aviso / Alerta

• Bloque de aviso destacado.
• Tipos disponibles:
  • Información,
  • Advertencia,
  • Correcto (OK) y
  • Peligro/Error.
• Útil para resaltar notas importantes en la página.

Listado de documentos

• Muestra los documentos públicos adjuntos al objeto (artículo, categoría o página genérica) como una lista de enlaces descargables.
• Los documentos deben estar cargados previamente en la pestaña Documentos e imágenes del objeto con visibilidad pública.

Gestión de imágenes

Al insertar una imagen en cualquier bloque, puedes elegir entre:

• Las imágenes almacenadas en la pestaña Documentos e imágenes del propio objeto.
• El repositorio general de imágenes de la plataforma.

Colores corporativos

• Puedes añadir los colores corporativos de tu marca directamente en el selector de color de cualquier bloque.
• Una vez guardados, estarán disponibles en todos los contenidos del editor, por lo que no tendrás que introducirlos cada vez.

SEO

El panel lateral del editor incluye una sección de SEO completa para cada idioma:

• Título SEO: puede construirse con etiquetas dinámicas (título del artículo, nombre del sitio, etc.).
• Descripción SEO: también admite etiquetas dinámicas.
• Palabras clave (keywords).
• Robot: indica a los rastreadores de buscadores si deben indexar la página y seguir sus enlaces. Opciones: index/noindex, follow/nofollow, noarchive, entre otras. El campo admite texto libre para opciones avanzadas según el estándar.
• URL canónica: especialmente útil cuando un artículo aparece en varias categorías y genera varias URLs. Indica al buscador cuál es la URL principal para evitar penalización por contenido duplicado.
• Redes sociales (Open Graph): imagen de compartición, tipo de contenido (producto, artículo, website) y emisión de microdatos.
• Microdatos JSON-LD: datos estructurados del producto (marca, fabricante, precio…) para que los buscadores puedan mostrar información enriquecida en sus resultados.

URLs y slugs

El sistema genera automáticamente la URL de cada contenido en cada idioma a partir de un patrón definido en ECM > Tipos de entidades CMS. Por ejemplo:

• Artículos: combinación de título, referencia (part number) y condición.
• Categorías y páginas genéricas: solo el título.

Puedes sobrescribir el slug generado para un objeto concreto directamente desde el panel del editor. Este valor manual tiene prioridad sobre el patrón general.

Historial de versiones

Cada vez que guardas cambios, el sistema registra una nueva versión del contenido junto con el usuario que realizó la modificación y la fecha. Esto permite auditar quién cambió qué y, en caso necesario, recuperar una versión anterior.

Caché y rendimiento

El sistema asigna automáticamente una etiqueta de caché (cache-tag) única a cada contenido. Cuando modificas y publicas un contenido, la caché del CDN correspondiente se invalida automáticamente y se regenera con el nuevo contenido.

El tiempo de vida de la caché varía según el tipo de usuario:

• Usuario anónimo: caché pública con TTL de aproximadamente 60 segundos.
• Usuario registrado: caché desactivada para garantizar que ve el contenido actualizado.