Nuestro nuevo creador de páginas introduce una experiencia moderna de edición de contenido basada en bloques en Workvivo. Permite a los administradores crear Páginas profesionales y móviles utilizando una interfaz de arrastrar y soltar con bloques de contenido flexibles, diseños estructurados y vista previa en tiempo real.
Esta mejora mejora significativamente la usabilidad, flexibilidad y escalabilidad de las Páginas para administradores y creadores de contenido.
Veamos los nuevos componentes que permitirán crear Pages con una facilidad visualmente atractiva. Echaremos un vistazo tanto a los bloques de componentes como al editor de Markdown.
Guía de bloques de componentes
Estos bloques se colocan en la barra lateral izquierda y aparecen cuando haces clic en la opción Componentes y se usan para dar más control de diseño o un diseño avanzado.
📐 Distribución
- 2 columnas: Divide el contenido en dos columnas verticales
- 3 columnas: Divide el contenido en tres columnas verticales
📝 Contenido básico
- Párrafo: Bloque estándar de texto del cuerpo
- Encabezado 1: Encabezado de sección principal
- Rumbo 2: Encabezado de subsección
- Encabezado 3: Encabezado de sección anidado
- Encabezado 4: Encabezado de subsección menor
- Lista (numerada): Lista ordenada con números
- Lista de viñetas: Lista no ordenada con viñetas
🧱 Componentes estructurados y visuales
| Componente | Detalle | Caso de uso |
|---|---|---|
| Embed | Incrusta contenido externo (documentos, paneles, Figma, formularios) | Uso al referenciar recursos en directo o interactivos |
| Carta | Muestra contenido en formato de tarjeta visual | Uso para la navegación o para resaltar recursos clave |
| Callout | Bloque de contenido resaltado para enfatizar | Bloque de contenido resaltado para enfatizar |
| Tabla | Filas y columnas estructuradas para datos organizados | Uso para comparaciones o información estructurada |
| Imagen | Inserta una imagen en la página | Uso para apoyo visual o ejemplos |
| Acordeón | Sección de contenido expandible/plegable | Sección de contenido expandible/plegable |
| Video | Incrusta o sube un vídeo | Línea horizontal que separa secciones |
| Botón | Elemento de acción clicable | Uso para CTA o para vincular flujos de trabajo clave |
| Divisor | Línea horizontal que separa secciones | Úsalo para descomponer visualmente secciones en páginas largas y mejorar la legibilidad |
Guía del editor Markdown
Este editor ofrece una forma sencilla y eficaz de escribir y editar texto. Existen algunas opciones de formato tanto en el Editor de Markdown como en los bloques de componentes
🔄 Edición
- Deshacer: Revierte el cambio más reciente
- Rehacer: Restaura el cambio más reciente que no se ha hecho
🧾 Menú desplegable de estilo de texto (Menú de texto normal)
- Título grande: Encabezado de sección principal
- Título pequeño: Encabezado de subsección
- Viñetas: Lista no ordenada con viñetas
- Lista numerada: Lista ordenada con números
- Cita: Cita en sangría o bloque de texto resaltado (Usado para señalar notas importantes o texto referenciado)
- Bloque de código: Bloque formateado para mostrar código o texto técnico (Uso para fragmentos de código o contenido técnico estructurado)
✍️ Formato de texto
- Negrita: Enfatiza el texto con mayor peso
- Cursiva: Añade un énfasis sutil al texto
- Tachados: Muestra el texto como eliminado o completado
- Código en línea (</>): Formatea el texto como código en línea (Úsalo al referenciar comandos, variables, nombres de archivo o breves fragmentos técnicos dentro de una frase)
📐 Alineación e hendidura
- Alinear izquierda / centro / derecha: Alinea el texto a la izquierda / horizontal / derecha
- Justifica: Alinea el texto de forma uniforme a lo largo de la línea.
- Sangría a la derecha: Sangría para crear jerarquía.
- Sangría a la izquierda: Devuelve el contenido sanglado a su alineación predeterminada.
➕ Insertos y extras
- Insertar (+): Abre la biblioteca de componentes
- Enlace: Añade un hipervínculo al texto seleccionado (Usarlo para recursos externos o navegación interna)
- Emoji: Inserta emojis en el contenido (Usarlo para señales visuales o tono)
- Traducir: Traduce contenido a otro idioma (Uso para contenido global o multilingüe)
- Vista previa para móviles: Muestra cómo aparece el contenido en móvil (úsalo para confirmar la legibilidad y el diseño móvil)
- <->: Proporciona opciones para ajustar el ancho de la página de Predeterminado a Medio o Ancho completo.