Al abrir una plantilla se reúnen su estructura, herramientas de edición y vista previa. Seleccione una parte para editar, luego mire la vista previa para ver el resultado sin salir del editor.
Comience en Structure para seleccionar qué editar, use las pestañas al lado para realizar cambios, luego abra Run para generar un PDF. Las siguientes ilustraciones muestran cada área en contexto.
1. Structure: elige qué editar
Structure está a la izquierda. Muestra las páginas y secciones que componen la plantilla. Al seleccionar un elemento se abren sus opciones de edición en el panel al lado.
- Global contiene configuraciones compartidas en toda la plantilla.
- Página representa una página en el diseño, con sus secciones dentro.
- Sección es un bloque de contenido, como detalles del cliente o una tabla de servicios.
- Encabezado/pie de página contiene contenido del encabezado o pie de página cuando la plantilla lo usa.
Por ejemplo, seleccione Partes de facturación para editar etiquetas en la sección de detalles del cliente. Seleccione Global para configuraciones compartidas como fuentes o el fondo.
2. HTML, CSS, Props y Config
Después de seleccionar un elemento en Structure, el siguiente panel muestra sus pestañas disponibles:
- HTML: el contenido y estructura de la sección.
- CSS: presentación, como colores, tamaños de fuente y espaciado.
- Props: valores guardados con la plantilla, a menudo etiquetas, colores o texto reutilizable.
- Config: configuración para el elemento seleccionado, como márgenes, fondos o saltos de página.
Con una plantilla existente, abra Props para cambiar una etiqueta sin editar HTML/CSS. La siguiente ilustración muestra un puntal heading en la sección seleccionada; su HTML lee el valor a través de {{ props.heading }}.
Las pestañas disponibles dependen de su selección. Global tiene Props y Config, mientras que una sección puede tener HTML, CSS, Props y Config. Una variante que hereda de la base puede ofrecer menos opciones de edición.
3. Diseño y PDF: ver el resultado
La vista previa al lado del panel de edición tiene dos modos: Diseño y PDF.
Diseño te ayuda a ver cómo encajan las secciones mientras trabajas. PDF muestra el documento como páginas, lo que resulta útil para comprobar los márgenes, encabezados, pies de página y el contenido que pasa a la página siguiente.
En Diseño, trabajas con las páginas y secciones de la plantilla. PDF muestra el resultado paginado, incluidas las hojas adicionales creadas cuando el contenido se extiende más allá de una página.
Diseño refleja tus ediciones actuales. PDF muestra el contenido de la plantilla guardada, así que guarde el diseño y regenere la vista previa de PDF después de los cambios. Los parámetros de vista previa provienen de los valores del editor, inicialmente Defaults; Los valores ingresados en Run se aplican solo a los trabajos Run. Una vista previa anterior de PDF no se actualiza automáticamente.
4. Parameters: datos de cada documento
Parameters está a la derecha. Muestra los datos que acepta la plantilla, como el nombre del cliente, el número de factura o la lista de servicios.
Elija Schema para inspeccionar campos, tipos y valores predeterminados. Elija Payload para ver los datos como JSON. Los nombres de los campos deben coincidir con las expresiones utilizadas en el HTML de la plantilla.
Por ejemplo, un campo llamado recipient proporciona la expresión {{ params.recipient }} para su HTML. Su valor predeterminado se encuentra en Schema; Los datos para cada PDF se ingresan en Run.
Consulte Parameters y Props para obtener ayuda para decidir cuál usar.
5. Run y la historia
Después de guardar y publicar la plantilla, abra Run para elegir una clave, versión y variante, e ingrese datos para generar un PDF. Siga Crea tu primer PDF cuando quieras probar ese flujo de trabajo.
Cuando revise su trabajo, use el historial de la plantilla para los cambios de diseño guardados y Renders para los trabajos PDF y sus resultados. Esto le ayuda a encontrar la versión de diseño o el archivo generado que necesita.
{ "recipient": "Tembuilder" }