El editor visual
Haz clic en cualquier parte de la cotización para editarla. Los textos se escriben directo en la página.
Esta función es nueva y puede no estar habilitada todavía en tu cuenta. Si no la ves, escríbenos.
Qué es
El Editor de diseño abre la cotización a pantalla completa, tal como la verá tu cliente, y te deja cambiarla en su lugar. Lo abres de dos maneras:
- Desde Cotizaciones › Diseños, con Editar o Nuevo diseño: cambias un diseño del negocio. Ver Tus diseños.
- Desde la ficha de un borrador, con Diseñar esta cotización, o desde su editor, con Personalizar esta cotización: cambias solo esa cotización. Es del plan Profesional. Ver Diseña una sola cotización.
Usa el editor en una computadora: necesita el ancho de una pantalla de escritorio.
Las partes del editor
- Barra superior: la flecha para volver, el nombre del diseño, su estado de guardado, los botones Escritorio, Tableta y Móvil, Deshacer, Rehacer, Vista previa y Guardar.
- Panel izquierdo, con cinco pestañas: Agregar, Medios, Capas, Tema y Código.
- Al centro, la cotización. En un diseño del negocio lleva datos de ejemplo; en un borrador, los suyos.
- Panel derecho, el inspector: el contenido y el estilo del bloque seleccionado.
Seleccionar, mover y agregar bloques
Al pasar el puntero, cada bloque se marca con su nombre. Haz clic para seleccionarlo: se abre en el inspector y aparece su barra flotante:
| Botón | Qué hace |
|---|---|
| Subir / Bajar | Lo mueve un lugar. |
| Duplicar | Crea una copia debajo. Solo en tus bloques. |
| Ajustes del bloque | Lleva el foco al inspector. Solo en tus bloques. |
| Quitar | Lo quita, con Deshacer en el aviso. No aparece en los bloques que el cliente necesita antes de aprobar. |
Para agregar un bloque:
- El + arriba o abajo del bloque abre Agregar un bloque y lo pone en ese lugar.
- En la pestaña Agregar, un clic agrega el bloque después del seleccionado; sin selección, antes de la aprobación.
- Arrastra una tarjeta de la pestaña Agregar a la página: una línea marca dónde va a quedar.
Un cambio que dejaría a tu cliente sin lo que necesita para aprobar no se hace: el aviso dice por qué, por ejemplo “Este bloque va antes de la aprobación: el cliente lo lee antes de aprobar.”
Escribir en la página
Haz clic en un texto de tus bloques y escribe. Enter termina un texto de una línea y Esc deshace lo que escribiste en él. Un texto obligatorio, como el título de la portada, no puede quedar vacío. Desde el plan Profesional también escribes así los textos propios de los bloques de Cord, como el título de las partidas o la etiqueta del total.
En los textos con formato (el bloque Texto, las columnas y las respuestas de
Preguntas frecuentes), al seleccionar una parte aparece la barra de formato:
Negrita, Cursiva, Título, Subtítulo, Párrafo, Lista, Lista
numerada, Enlace y Variable. Los enlaces solo aceptan direcciones que empiezan
con https://.
Variables
Escríbelas entre llaves en cualquier texto y se cambian por el dato de cada cotización. Sin un bloque seleccionado, el inspector las lista: toca una para copiarla.
| Variable | Se cambia por |
|---|---|
{cliente.nombre} |
Nombre del cliente |
{cliente.empresa} |
Empresa del cliente |
{negocio.nombre} |
Tu negocio |
{folio} |
Folio |
{fecha} |
Fecha |
{vigencia} |
Vigencia |
{total} |
Total, con su divisa |
Las fechas y el total salen en el idioma y el formato del documento. Una variable que Cord no conoce se ve tal cual, y el editor te avisa.
Bloques que puedes agregar
| Grupo | Bloque | Qué lleva |
|---|---|---|
| Portada y texto | Portada | Antetítulo (una línea corta en mayúsculas arriba del título), título, subtítulo y altura (Media o Pantalla completa). |
| Portada y texto | Texto | Párrafos, títulos y listas. |
| Portada y texto | Columnas | De 2 a 3 columnas, cada una con título, texto y una Imagen opcional. |
| Portada y texto | Lienzo | Textos, formas, líneas, flechas, íconos, patrones e imágenes colocados libremente y en capas, en la proporción que elijas. |
| Contenido | Cronograma | Título y de 1 a 20 etapas con fecha y descripción. |
| Contenido | Cifras | Título y de 1 a 6 cifras con su etiqueta. |
| Contenido | Preguntas frecuentes | Título y de 1 a 20 preguntas que se abren al tocar. |
| Contenido | Equipo | Título y de 1 a 12 personas con cargo, biografía y Foto opcional. |
| Confianza | Testimonios | Título y de 1 a 8 citas con autor, cargo y Foto opcional. |
| Confianza | Firma | Un mensaje de cierre con nombre, cargo e Imagen de la firma opcional. |
| Confianza | Logos | Título y de 1 a 24 logos de tu biblioteca, cada uno con su texto alternativo, y la opción En gris. |
| Imágenes y video | Imagen | Una foto o ilustración de tu biblioteca con Texto alternativo, Pie de foto, Proporción (Original, 16:9, 4:3, 1:1 o 3:4) y Ajuste (Llenar o Completa). |
| Imágenes y video | Galería | De 2 a 12 imágenes de tu biblioteca, cada una con su texto alternativo, en 2, 3 o 4 columnas. En el teléfono se ven en 2. |
| Imágenes y video | Video | Título y un video: De tu biblioteca, con un póster que Cord toma del propio video, o de YouTube o Vimeo con su enlace. |
| Estructura | Separador | Línea, Espacio, Puntos, Ondas, Zigzag o Estrellas, en altura Pequeña, Media o Grande y del Color de los bordes del tema o de uno de tu marca. |
Al agregar Imagen, Galería, Video o Logos se abre Elige de tu biblioteca para escoger lo que van a mostrar (una galería lleva al menos dos imágenes). En un video de YouTube o Vimeo, el reproductor del tercero carga solo cuando tu cliente hace clic, y el de YouTube es el de youtube-nocookie.
Cada bloque nuevo trae un texto de ejemplo para que veas cómo queda. Cámbialo antes de usar el diseño.
Biblioteca de medios
Tus fotos, logos y videos viven en la pestaña Medios del panel izquierdo y los puede usar cualquier diseño de tu negocio. Ahí mismo ves el espacio que ocupan, por ejemplo “Usas 12 MB de 100 MB”.
- Subir: pulsa Subir o arrastra los archivos al panel. También subes desde el selector Elige de tu biblioteca.
- Usar: arrastra una foto o un video a la cotización, o elígelo desde un bloque.
- Describir: a cada archivo le pones Nombre y Texto alternativo, la descripción para quien no ve la imagen; se usa al elegirla en un bloque.
- Borrar: con Borrar, después de confirmar.
El selector de la biblioteca aparece al agregar los bloques Imagen, Galería, Video o Logos; en la Foto de Equipo y Testimonios, la Imagen de Columnas y la Imagen de la firma; en el fondo de una sección o de un bloque; en el fondo de la página del tema o de la pestaña Tema, y en la herramienta Imagen del lienzo.
Formatos
| Tipo | Formatos | Peso máximo |
|---|---|---|
| Imagen | JPG, PNG, WebP, AVIF, GIF (se usa su primer cuadro) o SVG | 15 MB |
| Video | MP4 | 6 MB |
- Un SVG se convierte en imagen. Uno que trae scripts o enlaces a otros archivos se rechaza.
- Cada imagen se guarda optimizada en WebP, en hasta cuatro anchos (480, 960, 1600 y 2400 px), y el navegador de tu cliente baja solo el que necesita.
- Cord quita los datos del archivo, como la ubicación guardada en el EXIF, y conserva la orientación de la foto. Del MP4 quita sus metadatos sin volver a codificarlo.
- Nunca se sirve el archivo original.
Espacio por plan
| Plan | Espacio |
|---|---|
| Gratis | 100 MB |
| Starter | 1 GB |
| Profesional | 5 GB |
| Scale | 20 GB |
| Developer | 20 GB |
Cuenta lo que queda guardado, ya optimizado. Al llegar al tope no se sube nada más hasta que borres algo o cambies de plan. La biblioteca y todos sus bloques están en todos los planes, desde Gratis.
Borrar un medio
- Un medio en uso no se borra. Si lo usa un diseño que no está archivado, el diseño propio de una cotización o el fondo de tu tema, la biblioteca te dice dónde se usa para que lo quites de ahí primero.
- Lo que ya recibió tu cliente no cambia. Un medio que solo aparece en cotizaciones ya enviadas sale de la biblioteca, pero esas cotizaciones lo siguen mostrando y sigue ocupando espacio.
- Un diseño solo usa medios de tu biblioteca, nunca una dirección de internet ni un archivo de otro negocio.
- Al eliminar la organización se borra todo. La exportación de datos de la organización incluye la biblioteca: sus datos, no los archivos.
El lienzo
El bloque Lienzo es una mesa de trabajo: colocas textos, formas, líneas, flechas, íconos y patrones donde quieras, uno encima de otro, como en una herramienta de diseño. Nace con un título y una forma de ejemplo.
- Entrar: haz clic en el lienzo. Queda seleccionado lo que está más arriba bajo el puntero, con sus asas; Listo o Esc te regresan al bloque.
- Seleccionar varios: ⇧ clic suma o quita un elemento; arrastra desde un área libre o bloqueada para seleccionar con un recuadro; ⌘A selecciona todo. Un clic en un elemento agrupado elige su grupo y el doble clic, solo ese elemento.
- Mover y cambiar de tamaño: arrastra el elemento o sus asas. Las guías se pegan a los bordes y centros del lienzo y de los demás elementos, y a la misma distancia entre ellos, que se ve con su medida; con ⌘ o Ctrl se mueve libre. Con ⇧ se mueve en línea recta y conserva la proporción, con ⌥ crece desde el centro y ⌥ al arrastrar lo duplica. Las flechas del teclado lo mueven un poco (con ⇧, diez veces más).
- Girar: arrastra el asa redonda de arriba (con ⇧, de 15 en 15 grados) o escribe el Giro.
- Alinear y distribuir: con un elemento se alinea al lienzo; con varios, entre sí (⌥A, ⌥H y ⌥D en horizontal; ⌥W, ⌥V y ⌥S en vertical). Distribuir reparte tres o más con el mismo espacio.
- Agregar: desde Agregar en el inspector, o con el teclado y arrastrando sobre el lienzo: T texto, R rectángulo, O elipse, L línea, ⇧L flecha y V para volver a mover. Imagen abre tu biblioteca y pone la imagen que elijas en el centro del lienzo.
- Escribir: doble clic en un texto, o Enter con el texto seleccionado. Un texto que dejas vacío se quita.
- Capas y grupos: Capas del lienzo lista los elementos de enfrente a fondo: arrástralos para cambiar su orden y bloquea u oculta cada uno (lo oculto no sale en el link). ⌘G agrupa y ⇧⌘G desagrupa; ⌘[ y ⌘] cambian la capa (con ⌥, al fondo o al frente). ⌘D duplica y ⌫ quita.
- Copiar: ⌘C, ⌘X y ⌘V copian, cortan y pegan elementos, también en otro lienzo. Copiar estilo y Pegar estilo (⌥⌘C y ⌥⌘V) llevan colores, bordes y efectos.
- Vista: ⌘’ muestra la cuadrícula, que también atrae lo que mueves, y ⇧R las reglas.
Con el lienzo seleccionado, el inspector tiene su Proporción (16:9, 4:3, 1:1, 3:1, 4:5 o Libre), su Alto, sus Esquinas, su Fondo y una Descripción para lectores de pantalla. Con un elemento seleccionado tiene su Posición y tamaño (el lienzo mide 1000 de ancho) y su Giro; lo propio de cada elemento (estilo, tamaño y fuente de un texto; figura, relleno y borde de una forma; grosor y puntas de una línea; el ícono y qué significa; el texto alternativo de una imagen, o la casilla Decorativa, su ajuste, sus Esquinas y su Borde); sus Efectos (opacidad, sombra, desenfoque y mezcla) y su Capa. Los colores son los del tema, así cambian con él, o uno propio.
Lo que Cord cuida en un lienzo:
- Va entre bloques, nunca encima de uno. Lo que sale de su borde se recorta.
- Cada texto se lee sobre lo que tiene debajo, en claro y en oscuro: el fondo, las formas que cruza, los patrones y las imágenes (contra su píxel menos favorable), con un contraste de 4.5 a 1 (3 a 1 si es grande).
- En el teléfono se ve entero, a escala. Usa textos grandes: el editor avisa cuando uno se vería chico.
Bloques de Cord
Se llenan solos con los datos de cada cotización. Los puedes mover de lugar y de columna y, desde el plan Profesional, personalizar sus textos, cómo se ven y su superficie, pero lo que muestran sale de cada cotización.
| Bloque | Qué muestra | ¿Se puede quitar? |
|---|---|---|
| Encabezado | Tu logo, el folio y la fecha. | No |
| Datos de la cotización | Para quién es, la vigencia y el plazo de pago. | No |
| Total | El total a pagar con sus impuestos. | No |
| Partidas | Los productos y servicios con sus precios. | No |
| Plan de pagos | Los pagos por hitos, si la cotización tiene plan. | No |
| Notas | Las notas que escribes en cada cotización. | No |
| Texto legal | Tus condiciones y el texto legal del negocio. | No |
| Aprobación y pago | Aprobar, firmar y pagar. | No |
| Conversación | El chat con tu cliente. | Sí |
| Contacto | Correo, WhatsApp y teléfono del negocio. | Sí |
| Pie | La firma de Cord al final. | Sí |
Si quitas la conversación, el contacto o el pie, vuelven a aparecer en la pestaña Agregar, en Bloques de Cord, para ponerlos otra vez.
El inspector
Con uno de tus bloques seleccionado, el inspector tiene dos partes:
- Contenido: los campos del bloque. Los que son listas (etapas, personas, preguntas) se agregan, se reordenan con Subir y Bajar y se quitan, dentro de los límites de cada bloque. Los textos con formato se editan en la página con Escribir en la página.
- Estilo:
- Fondo: Ninguno, Marca (principal, secundario, acento, superficie o fondo de la página), Color, Degradado, Imagen o Video. Con una imagen o un video eliges su Posición (el centro, un lado o una esquina), el Tinte (color e intensidad), la Opacidad, el Desenfoque (hasta 40 px), la Mezcla y Texto sobre una tarjeta. El texto encima se pone en blanco o en negro según el tinte; si no alcanza para leerse, va sobre una tarjeta.
- Patrón: Líneas, Retícula, Puntos, Ondas o Grano, detrás del contenido, en un Color del tema, con su Intensidad (hasta 30 %) y su Escala.
- Adorno: una forma en una esquina (Estrella, Destello, Flor, Espiral, Garabato o Círculo), en un Color del tema y en tamaño Chico, Mediano o Grande. Va detrás del texto y se recorta en el borde de su bloque: elige una esquina sin texto para que todo se lea. Los bloques de Cord no llevan patrón ni adorno.
- Espaciado: Sin, Compacto, Normal o Amplio.
- Ancho: Contenido, Amplio o Completo.
- Alineación: Izquierda, Centro o Derecha.
- Animación al aparecer: Ninguna, Aparecer, Subir, Deslizar, Escalar o Desenfoque.
- Se ve en: Todos, Escritorio o Móvil.
Con un bloque de Cord seleccionado, el inspector lo marca como Bloque de Cord, dice qué muestra y ofrece:
- Columna: en qué columna de su sección va, cuando la sección tiene más de una. Está en todos los planes.
- Personalizar: desde el plan Profesional, lo que cambia de cada bloque, en la tabla de abajo. Un texto que dejas vacío muestra El texto de siempre, y los textos aceptan variables.
- Superficie: desde el plan Profesional, Tarjeta (su panel de siempre), Liso (sin panel ni sombra) o Transparente (se lee directo sobre el fondo de la página).
| Bloque | Qué personalizas |
|---|---|
| Encabezado | Alineación: Izquierda o Centro. |
| Total | Etiqueta, Tamaño (Compacto, Normal o Grande) y Alineación (Izquierda, Centro o Derecha). |
| Partidas | Título, Presentación (Tabla, Tarjetas o Compacta) y Columnas que se ven (Cantidad y Precio unitario). El importe de cada línea siempre se ve. |
| Notas, Texto legal, Conversación y Contacto | Título. |
| Aprobación y pago | Texto del botón. |
| Pie | Leyenda: Verificado por Cord o Hecha con Cord. |
La superficie se nota en los diseños de página Documento y Página web. Un bloque transparente necesita que su texto se lea sobre el fondo de la página, en sus dos colores si es un degradado.
Sin el plan Profesional, Personalizar y Superficie se ven apagados, con la insignia Desde Profesional y la nota “Con Profesional cambias sus textos, el tamaño y la alineación del total, cómo se ven las partidas y su superficie. Sin él, tus cotizaciones los muestran como siempre y lo que ya guardaste se conserva.” Los textos de los bloques de Cord tampoco se escriben sobre la página, y la cotización los pinta como siempre. Columna sigue disponible.
Capas
La pestaña Capas lista todos los bloques en orden. Arrastra uno para cambiar su lugar o haz clic para seleccionarlo. Los bloques de Cord llevan la marca De Cord, y uno sin datos en la cotización dice Sin contenido en esta cotización.
Volver al diseño de Cord quita tus bloques y deja el orden de siempre. Te pide confirmar y lo puedes deshacer.
Tema del diseño
La pestaña Tema tiene los mismos controles que Tema y diseño predeterminado: temas listos, diseño de página, colores, fondo, tipografía, forma y movimiento. Parte del tema de tu negocio, y lo que cambies aquí vale solo para este diseño.
El fondo de la página de un diseño es el fondo de todo el link y pisa al del tema. En Código, solo la primera página lleva fondo propio.
Código
La pestaña Código muestra el diseño completo en JSON. Puedes copiarlo con Copiar, editarlo y pulsar Aplicar. Cord lo valida con las mismas reglas que el editor: si el JSON no es válido, lo dice y no se aplica; si está bien, dice Sin errores. Un diseño pesa hasta 64 KB.
La pestaña Código está en todos los planes, pero no salta el plan: sin Profesional, una personalización nueva de los bloques de Cord que pegues ahí no se guarda. El aviso dice “Personalizar los bloques de Cord requiere el plan Profesional o superior.” y el estado, No se pudo guardar. Deshaz el cambio para seguir guardando. Quitar una personalización siempre se puede.
Guardado y puntos por revisar
El editor guarda solo unos segundos después de cada cambio, y también con Guardar o ⌘S / Ctrl+S. Junto al nombre ves el estado: Guardado, Cambios sin guardar, Guardando… o No se pudo guardar. Si sales con cambios sin guardar, el navegador te pregunta antes.
Algunos problemas no impiden el cambio, pero sí el guardado. El botón N por revisar de la barra superior los lista, y mientras queden, el estado dice Revisa los avisos para guardar:
- “El texto no se lee sobre ese fondo. Elige un color con más contraste.” Un color del tema o el fondo de un bloque de Cord no llega al contraste de 4.5 a 1.
- “Un bloque de Cord va sobre un color sólido.” El bloque de Cord está transparente sobre un fondo que no es un color ni un degradado.
- “Un texto del lienzo no se lee sobre lo que tiene debajo. Cambia su color o ponle una forma detrás.” Un texto del lienzo no llega a 4.5 a 1 (3 a 1 si es grande) sobre el fondo, las formas o los patrones que tiene debajo.
- “El texto sobre una imagen necesita un tinte para leerse.” Una sección, un bloque o la página tiene una foto o un video de fondo con texto encima, sin tinte o con un tinte tan ligero que el texto no llega a 4.5 a 1 contra el punto menos favorable de la imagen. Sube la intensidad del Tinte o activa Texto sobre una tarjeta.
- “Solo la primera página lleva fondo propio: es el fondo de todo el link.” En
Código, una página que no es la primera tiene
fondo. Quítaselo; el fondo de todo el link va en la primera página o en la pestaña Tema.
Al guardar, Cord comprueba además que cada imagen y video esté en la biblioteca de tu negocio. Un diseño pegado en Código desde otra cuenta no se guarda así: el estado dice No se pudo guardar hasta que cambias esas imágenes por unas de tu biblioteca o las quitas.
Otros son solo avisos y no frenan nada: una variable que Cord no conoce, un texto de tus bloques que se lee con dificultad sobre su fondo, o el total que se pinta con el color del texto porque tu color principal no se lee.
En un lienzo también avisa cuando un texto se vería muy chico en el teléfono, cuando dos textos quedan uno encima del otro, cuando un elemento quedó fuera del lienzo o cuando una imagen no tiene descripción ni está marcada como Decorativa.
Deshacer y Rehacer recuerdan hasta 100 pasos mientras el editor está abierto.
Vista previa y dispositivos
Escritorio (hasta 1180 px de ancho), Tableta (820 px) y Móvil (390 px) cambian el ancho de la cotización. Vista previa esconde los marcos y las barras para verla como tu cliente; Salir de la vista previa o Esc vuelve a editar. Aprobar o pagar dentro del editor no hace nada real: es una vista de muestra.
Atajos de teclado
| Acción | Mac | Windows |
|---|---|---|
| Deshacer | ⌘Z | Ctrl+Z |
| Rehacer | ⇧⌘Z | Shift+Ctrl+Z o Ctrl+Y |
| Duplicar bloque | ⌘D | Ctrl+D |
| Quitar bloque | ⌫ | Supr o Retroceso |
| Mover bloque | ⌥↑ / ⌥↓ | Alt+↑ / Alt+↓ |
| Bloque anterior o siguiente | ↑ / ↓ | ↑ / ↓ |
| Escribir en el bloque | Enter | Enter |
| Quitar la selección | Esc | Esc |
| Guardar | ⌘S | Ctrl+S |
Problemas comunes
- Un texto del lienzo se ve chico en el celular. El lienzo se ve entero y a escala en el teléfono: agranda el texto, o deja menos texto en el lienzo y más en un bloque Texto.
- No puedo quitar un bloque. Es uno de los que el cliente necesita ver antes de aprobar. Lo puedes mover, siempre antes de Aprobación y pago.
- El estado dice “Revisa los avisos para guardar”. Abre N por revisar y corrige cada punto; el editor guarda en cuanto no queda ninguno.
- “No cabe en tu biblioteca: te quedan … de …” Llegaste al espacio de tu plan. Borra algo en Medios o cambia de plan en Ajustes › Planes y suscripción.
- “Este medio se usa en un diseño. Quítalo de ahí antes de borrarlo.” La biblioteca dice dónde se usa: el nombre del diseño, el folio de la cotización o el fondo de tu tema.
- “Este SVG trae scripts o enlaces a otros archivos y no se puede usar.” Expórtalo como PNG o como un SVG sencillo.
- El video de fondo no se mueve. Quien lo ve pidió a su sistema menos movimiento o tiene activado el ahorro de datos: el video se queda quieto en su póster.
- Mi texto muestra
{algo}tal cual. Esa variable no existe. Usa una de la tabla de variables de esta página. - El bloque no aparece en el celular. Revisa Se ve en en su estilo.
- Personalizar y Superficie dicen Desde Profesional. Personalizar los bloques de Cord es del plan Profesional. Lo que ya guardaste se conserva y vuelve a aplicarse al cambiar de plan en Ajustes › Planes y suscripción.
- “Personalizar los bloques de Cord requiere el plan Profesional o superior.” Tu plan no incluye esa personalización. Deshaz el cambio o quítala en la pestaña Código.