Tema y diseño predeterminado
Los colores, el fondo y las tipografías de todos tus links, y el diseño con que salen tus cotizaciones.
Esta función es nueva y puede no estar habilitada todavía en tu cuenta. Si no la ves, escríbenos.
Qué es
La pantalla Diseño de la cotización reúne dos decisiones del negocio:
- El tema: cómo se ve el link de todas tus cotizaciones. Parte de tu marca de Identidad (logo, colores y tipografía) y te deja ir más lejos: diseño de página, fondo, tipografías de un catálogo de 20 familias, esquinas, sombra y movimiento.
- El diseño predeterminado: con qué diseño salen las cotizaciones que no tienen uno propio ni otro elegido en su editor.
Requisitos
- El permiso Ajustes en tu rol.
- Cord Studio habilitado en tu cuenta.
Abrir el diseño de la cotización
- Abre Ajustes › Marca y apariencia › Identidad.
- Al final de la página, pulsa Diseñar la cotización: página web, documento o tarjeta.
- Ajusta el tema a la izquierda. La vista previa de la derecha, Así la ve tu cliente, es tu cotización con cada cambio, en Escritorio o Móvil.
- Pulsa Guardar cambios (o ⌘S / Ctrl+S). Hasta que guardas, tus links no cambian.
Temas listos
Un punto de partida; después ajusta lo que quieras. Elegir uno cambia de golpe el diseño de página, los colores, el fondo, las tipografías y la forma.
| Tema | Cómo se ve |
|---|---|
| Editorial | Documento amplio sobre fondo crema, títulos Fraunces y texto Lora. |
| Estudio | Página web amplia con degradado lila, Plus Jakarta Sans y botones redondos. |
| Boutique | Tarjeta mediana con degradado radial, títulos Cormorant Garamond y texto DM Sans. |
| Minimal | Tarjeta blanca sin sombra ni movimiento, todo en Inter. |
| Técnico | Documento sobre gris azulado, títulos Space Grotesk y texto IBM Plex Mono. |
| Bosque | Página web con degradado verde, títulos Instrument Serif y texto Figtree. |
| Tu marca | Vuelve a tu marca de Identidad, sin nada de lo anterior. |
Diseño de página y ancho
- Tarjeta: la cotización en una tarjeta centrada, como siempre.
- Documento: una hoja con márgenes de página y esquinas casi rectas, con el encabezado a todo lo ancho sobre tu color principal.
- Página web: sin tarjeta. El encabezado es una portada a todo lo ancho sobre tu color principal y cada sección es un panel sobre el fondo de la página.
En Documento y Página web, sobre el color va tu logo para fondo oscuro. Si subiste un logo pero no el de fondo oscuro, el encabezado se pinta con un tono claro de tu marca para que tu logo se lea. El Ancho puede ser Angosto, Medio, Amplio o Completo.
Colores y fondo
- Colores: Principal, Acento, Superficie (el fondo de la cotización) y Texto.
- Fondo de la página: Liso, con un color; Degradado, con sus colores Desde y Hasta, forma Lineal o Radial y su Ángulo, o Imagen o Video, con Elegir de tu biblioteca.
El total se pinta con tu color principal. Si ese color no se lee sobre la superficie, Cord lo pinta con el color del texto.
Fondo con imagen o video
La imagen o el video salen de tu biblioteca de medios, que se llena desde el editor visual o desde el mismo selector. Con uno elegido ajustas:
- Posición: el centro, arriba, abajo, a la izquierda, a la derecha o una de las cuatro esquinas.
- Tinte e Intensidad del tinte: un color encima de la imagen.
- Opacidad y Desenfoque (hasta 40 px).
- El texto encima va sobre una tarjeta.
Lo que Cord cuida:
- El texto siempre se lee. El texto que va directo sobre la imagen se pone en blanco o en negro según el tinte, con un contraste de al menos 4.5 a 1 medido contra el píxel menos favorable de cualquier foto. Si el tinte no alcanza, el editor visual lo marca por revisar y, en el link, Cord pone ese texto sobre una tarjeta.
- Los bloques de Cord nunca van sobre la foto. El total, las partidas, la aprobación y los demás se leen siempre sobre su superficie sólida.
- El video va sin sonido y en bucle, y empieza cuando se ve. Si quien lee pidió a su sistema menos movimiento o tiene activado el ahorro de datos, se queda quieto en su póster. Al imprimir, el video no se ve.
- Un diseño puede llevar su propio fondo, desde la pestaña Tema del editor: es el fondo de todo el link y pisa al del tema.
Tipografía
Elige una familia para Títulos e importes y otra para Texto, y el Grosor de los títulos (de 400 a 800). El catálogo tiene 20 familias, agrupadas en Sin serifa, Con serifa y Monoespaciada:
- Sin serifa: Inter, Manrope, DM Sans, Plus Jakarta Sans, Space Grotesk, Sora, Outfit, Figtree, Bricolage Grotesque y Archivo.
- Con serifa: Fraunces, Playfair Display, Cormorant Garamond, Lora, EB Garamond, Instrument Serif, DM Serif Display y Young Serif.
- Monoespaciada: JetBrains Mono e IBM Plex Mono.
Cord sirve estas fuentes desde sus propios servidores: tu cliente no descarga nada de un tercero.
Forma y movimiento
- Esquinas (de 0 a 40 px) y Botones (de 0 a 48 px): qué tan redondeados son.
- Espaciado: Compacto, Cómodo o Amplio.
- Sombra: Sin sombra, Suave, Media o Marcada.
- Movimiento: Ninguno, Sutil o Expresivo. Quien pidió a su sistema menos movimiento ve la cotización quieta.
Diseño predeterminado
Arriba de la pantalla, Diseño predeterminado elige con qué diseño salen las cotizaciones que no tienen uno propio ni otro elegido en su editor:
- Tarjeta de Cord: el diseño de siempre, sin bloques propios.
- Uno de tus diseños: la lista muestra los que creaste en Tus diseños.
El cambio se guarda al momento y dice Guardado; no necesita Guardar cambios. Ver tus diseños abre Cotizaciones › Diseños.
A qué links se aplica
- El tema se aplica a todos tus links de cotización, también a los ya enviados, en cuanto lo guardas. Un diseño puede cambiarlo para él solo desde la pestaña Tema del editor.
- El diseño predeterminado se aplica a las cotizaciones que envíes desde ahora. Las que ya enviaste conservan el diseño con que salieron. Con el plan Profesional, una cotización puede salir con otro diseño, elegido en su editor o propio: ver Diseña una sola cotización.
- El tema también llega a tu página de pago, tus facturas, el portal del cliente, los embeds, los correos y los PDF. Lo explica la sección siguiente.
Dónde más se ve el tema
El tema viste también lo que tu cliente recibe después de la cotización. Ahí se aplican tus colores, el fondo, las tipografías y la forma, pero no el diseño de página ni los bloques: cada documento conserva su orden.
| Dónde | Qué toma del tema |
|---|---|
| Página de pago de la cotización | Tipografía, esquinas y colores, también en el formulario de la tarjeta. |
| Factura y portal del cliente | Colores, fondo de la página, tipografías, esquinas, espaciado, ancho y movimiento. |
| Cotizador y factura embebidos en tu sitio | Colores, tipografías y forma. Lo que tu sitio defina con la apariencia de Cord Elements manda sobre el tema. |
| Correo de la cotización y de la factura | Colores y la tipografía de correo más cercana a la tuya, porque los programas de correo no cargan fuentes propias. |
| PDF de la factura y cotización impresa | Colores sobre hoja blanca y la fuente estándar más cercana: sin serifa, con serifa o monoespaciada. |
- Lo fiscal no se mueve. El folio, los impuestos, los sellos, la leyenda de factura proforma y los datos del emisor y del receptor conservan su lugar. Si un color de texto no se lee sobre tu superficie, Cord lo oscurece o lo aclara lo necesario.
- Al imprimir, la hoja sale clara aunque tu tema sea oscuro.
- En la factura electrónica Factur-X, una tipografía monoespaciada sale sin serifa.
Mensajes de tus facturas
Al final de la pantalla, Facturas y portal guarda dos textos de hasta 280 caracteres:
- Mensaje de encabezado: se ve bajo tu marca en la factura y en el portal.
- Mensaje de agradecimiento: se ve al pie de la factura y del portal.
Se guardan con Guardar cambios. Si dejas uno vacío, no se muestra nada.
Problemas comunes
- No veo el enlace Diseñar la cotización. Cord Studio todavía no está habilitado en tu cuenta, o tu rol no tiene el permiso Ajustes.
- “No se pudo guardar el diseño: revisa los valores e inténtalo de nuevo.” Un valor quedó fuera de lo permitido. Vuelve a elegirlo y guarda otra vez.
- Cambié el tema y una cotización no cambió. Su diseño cambió el tema para él solo. Ábrelo en el editor, pestaña Tema.
- El total no sale con mi color. Tu color principal no se lee sobre la superficie. Oscurécelo o cambia la superficie.
- El texto de mi factura no tiene el color que elegí. Cord lo ajusta para que el folio, los impuestos y los datos fiscales se lean sobre tu superficie. Elige un color de texto con más contraste.