Cada Hub es una pila de filas. Cada fila se divide en columnas y cada columna contiene un elemento: un texto, un vídeo, una lista de cursos. Esta estructura mantiene los Hubs legibles en cualquier pantalla y le permite reorganizar una página sin empezar de cero. Este artículo explica cómo construir y cambiar esa estructura en el editor.
Abra un Hub con Editar en la lista de Hubs. El editor muestra su borrador. Todo lo que cambie aquí sigue siendo invisible para los miembros hasta que publique.
Filas y sus diseños
Haga clic en Agregar fila al final de la página o entre dos filas. El diálogo muestra la pestaña Diseño con diez diseños:
- una columna al 100%
- dos columnas al 50% / 50%, 33% / 67%, 67% / 33%, 75% / 25% o 25% / 75%
- tres columnas al 33% / 33% / 33% o 25% / 50% / 25%
- cuatro columnas al 25% cada una
- cinco columnas al 20% cada una
La fila aparece donde hizo clic, con un hueco vacío por columna.
Cada fila tiene una cabecera con un campo Título (Opcional). En la vista previa, una fila sin título no muestra ninguna cabecera. El botón del pincel abre Línea de acento, un interruptor para el acento de color de la fila. En cuanto lo cambia, Aplicar a todas las filas lleva esa elección a todas las filas del Hub.
Para cambiar más tarde el diseño de una fila, haga clic en la pequeña vista previa de columnas de la cabecera de la fila, rotulada Diseño. Un diseño aparece en gris cuando no encaja: Algunos elementos necesitan una columna más ancha significa que un elemento quedaría demasiado estrecho, Las últimas columnas todavía contienen elementos significa que perdería columnas que no están vacías. Mueva o elimine primero esos elementos.
Mover y quitar filas
Use los botones de flecha para subir o bajar una fila, o arrástrela por su asa. La cabecera de la fila contiene también Duplicar, que inserta una copia justo debajo, Copiar y Eliminar. Eliminar pide confirmación: «¿Seguro que quieres eliminar toda la fila? ¡Se eliminarán todos los elementos que contiene!»
Copiar filas entre Hubs
Copiar pone una referencia a la fila en su portapapeles. En cualquier Hub de su plataforma, haga clic en Pegar desde el portapapeles junto a Agregar fila, y la fila llega con su título, diseño, línea de acento y todos sus elementos. Si el navegador no permite leer el portapapeles, un aviso le pide que pegue a mano la referencia de la fila.
Añadir elementos
Haga clic en Agregar elemento en una columna vacía. El selector de elementos agrupa los elementos en categorías y tiene una búsqueda que encuentra nombres y descripciones. Cada tarjeta muestra los anchos que admite el elemento. Un elemento que no cabe en la columna se marca con No disponible con este ancho de columna. Los elementos que funcionan con cualquier ancho muestran Todos los tamaños.
Al hacer clic en una tarjeta se abre una vista previa, donde puede alternar entre Contenido de demostración y Estado vacío. Añadir elemento coloca el elemento; permanece desactivado cuando el elemento no cabe en la columna. El elemento nuevo se guarda de inmediato y su configuración se abre a su lado. A partir de entonces, los cambios se guardan automáticamente poco después de que deje de escribir. La cabecera muestra Guardando, Guardado o, si algo salió mal, Error al guardar.
La lista completa de elementos está en Referencia de tipos de elementos.
Cambiar, mover y copiar elementos
La barra de herramientas del elemento contiene la configuración. Según el elemento, también encuentra Diseño para su variante visual y Caja para su marco. El menú del elemento tiene:
- Duplicar elemento, que solo se muestra mientras la fila tenga una columna libre
- Copiar elemento, para pegarlo en una columna vacía con Pegar desde el portapapeles
- Eliminar elemento, que pregunta ¿Eliminar elemento? antes de quitar nada
Para mover un elemento, arrástrelo a otra columna, en la misma fila o en otra. Si lo suelta sobre una fila llena con columnas iguales, esa fila recibe una columna más, hasta cinco. Dos mensajes pueden impedir el movimiento: Este elemento necesita una columna más ancha y No hay columna libre en esta fila.
Comprobar antes de publicar
Alterne entre Editor y Vista Previa en la cabecera. La vista previa oculta los controles de edición, muestra las columnas vacías como espacio en blanco y le permite revisar la página en Escritorio, Tableta y Móvil.
El botón de publicar de la cabecera muestra un número con los elementos añadidos, quitados o cambiados desde la última publicación, más uno si cambió el número de filas. Los cambios de títulos, diseños u orden de las filas no se cuentan, pero también activan el botón.
La publicación se explica en Plantillas y publicación de Hubs.