Diseño de páginas y componentes de feed reutilizables
El panel Layers usa un único árbol para toda la sección seleccionada. Los elementos de página aparecen en el primer nivel. Al expandir un feed se muestran tres lienzos reutilizables:
- Feed container contiene el contenido que aparece antes del bucle de términos y entradas.
- Term container diseña los encabezados de categorías y subcategorías.
- Loop item diseña cada tarjeta o fila de entrada.
Añadir y organizar elementos
- Abre PDF designs y edita un diseño.
- Abre Layers.
- Selecciona una página, un feed, un componente o una capa hija existente.
- Selecciona Add element junto al elemento principal previsto.
- Elige texto, imagen, rectángulo, elipse, campo dinámico, feed, icono o iconos de alérgenos según estén disponibles para ese contexto.
- Arrastra el nuevo elemento a cualquier lugar de su lienzo.
- Usa el controlador de esquina para redimensionarlo y el controlador superior para rotarlo.
- Usa los controles de flecha del árbol para cambiar su orden de capa.
El componente Feed container, el Term container y el Loop item tienen cada uno su propia altura. Elige Fixed para un valor explícito o Auto height para medir la distancia entre el borde superior del primer hijo renderizado y el borde inferior del último hijo renderizado. Esta medición se realiza de forma independiente para cada término o entrada. Una imagen o campo dinámico cuyo valor esté vacío y cuya cadena de alternativas también esté vacía no crea una caja ni reserva altura para ese registro. Su anchura efectiva se hereda del marco del feed y de sus columnas calculadas. Sus hijos usan posicionamiento libre, de modo que un elemento de bucle puede colocar una imagen a la izquierda, el título y la descripción a la derecha, un título con puntos que conduce hacia un precio y los iconos de alérgenos debajo. Editar ese lienzo compartido del elemento de bucle actualiza cada instancia del elemento en todas las páginas de vista previa.
Cuando un componente se aísla para editarlo, cada valor contextual es un marcador de posición representativo; nunca toma prestado un término o una entrada reales. Por tanto, el texto, las imágenes, las imágenes de taxonomía, los precios y los iconos permanecen visibles sin que el diseño dependa del contenido actual. El Loop item aislado tiene la misma anchura calculada que cada elemento tiene en el feed completo, de modo que el redimensionado no cambia su significado al volver a la vista previa de la página.
El texto fijo puede combinarse con campos dinámicos. Por ejemplo, añade texto explicativo fijo entre un título y una descripción dinámicos, o añade una imagen fija encima de un encabezado de término.
Los elementos de texto incluyen controles en línea de negrita, cursiva, enlace y quitar enlace. Los componentes y sus cajas hijas también pueden recibir un color de fondo explícito.
Cuando una página usa una cabecera o un pie de página, ambos aparecen como ramas de componente expandibles en Layers. Abre cualquiera de las ramas para aislar su lienzo de coordenadas de página completa y luego añade imágenes fijas, texto, iconos o campos dinámicos de contexto de página como el logotipo del sitio, la fecha y el número de página.
Repetición y jerarquía
Los elementos del contenedor del feed pueden aparecer solo en la primera página del feed o repetirse en cada página del feed. Los elementos de término pueden aparecer una vez por término o en cada fragmento de continuación. Los elementos de término también pueden dirigirse a una profundidad de jerarquía concreta, de modo que los términos de nivel superior, los subtérminos y los términos más profundos usen espaciados y estilos diferentes.
Selecciona el propio Term container para activar Each new term starts on a new page de forma independiente para los términos de primer, segundo, tercer y cuarto nivel.
Espaciado
Cada elemento hijo tiene controles de margen y relleno en los cuatro bordes en el inspector. Un espaciado vertical grande aumenta la altura medida del componente reutilizable y puede desplazar el contenido siguiente a la página siguiente. Verifica el espaciado deliberadamente grande tanto en el PDF generado como en la vista previa del editor.
Zoom del lienzo
Usa el selector Zoom de la barra de herramientas superior para elegir una escala exacta del lienzo. Pulsa Command + Plus o Command + Minus en macOS, o Control + Plus y Control + Minus en otros sistemas, para desplazarte por esos mismos niveles de zoom. Mantener pulsado Command o Control mientras te desplazas hacia arriba o hacia abajo también cambia el zoom del editor. Estos atajos afectan al lienzo del PDF y dejan el zoom del navegador sin cambios.
Selectores CSS
El inspector enumera los selectores del elemento actual. Activa Show selectors on canvas para mostrarlos sobre la vista previa. La salida del feed expone clases estables de feed, profundidad de término, elemento destacado, alérgeno, bloque y campo. Introduce reglas en Custom CSS (live) justo debajo de los selectores, o en el panel CSS de la izquierda. Ambos campos editan la misma hoja de estilos del documento, que se aplica al lienzo en vivo y al PDF generado.