Configuración general
Configuración de apariencia
Esta página le permite gestionar los elementos de la identidad de su sitio: subir logotipo, fondo y favicon. El objetivo es hacer que el sitio sea más reconocible, fácil de usar y visualmente atractivo.
Pestañas de configuración
Logotipo - se mostrará en el tipo de visualización seleccionado “Imagen (logotipo)” y ayudará a generar reconocimiento de su marca. Se muestra en el lado izquierdo del encabezado del sitio. Se utiliza como el elemento gráfico principal del sitio.
Requisitos de archivo:
Formatos de archivo: SVG, PNG, WEBP, JPG, JPEG
Recomendado: SVG para mejor calidad
Resolución mínima: 120 px de altura
Tamaño máximo de archivo: 2 MB
Subido mediante el botón "Arrastra y suelta o elige un archivo".
Fondo - se mostrará como fondo de las páginas y ayudará a crear un diseño coherente y atractivo. Esto hará que el sitio sea visualmente más agradable y reconocible.
Requisitos de archivo:
Formatos de archivo: PNG, WEBP, JPG, JPEG, SVG, WEBM.
Recomendado: SVG para mejor calidad
Resolución mínima: 1920×1080 px
Tamaño máximo de archivo: 10 MB
Si elige una imagen transparente, podrá ajustar el color de relleno de fondo del sitio a través de la sección “Paleta” en este menú de configuración, en el campo “Fondo predeterminado”; puede obtener más información sobre la configuración de la paleta de colores en la sección 4 de esta página de la documentación. Además de una imagen, puede establecer video como fondo — esto hará que la apariencia del sitio sea más dinámica y moderna.
Favicon - se mostrará en las pestañas del navegador, en la lista de marcadores y al añadir el sitio a la pantalla de inicio del teléfono. Esto ayudará a los usuarios a reconocer su sitio rápidamente entre otras pestañas del navegador, en las listas de tareas, al guardar el sitio en la pantalla de inicio, y hará que su marca sea más visible.
Requisitos de archivo:
Formatos de archivo: PNG, WEBP, JPG, JPEG, SVG
Recomendado: SVG para mejor calidad
Resolución mínima: 200×200 px
Tamaño máximo de archivo: 2 MB
Acciones disponibles
Subir o reemplazar el archivo mediante el Arrastrar y soltar.
Guardar cambios con el botón "Guardar".
En caso de cambios no deseados puede presionar "Cancelar".
Paleta - sección le permite influir en la mayoría de los ajustes de color del sitio, donde puede ajustar el esquema de colores del sitio al estilo de su marca. Aquí se establecen los colores principales para botones, textos, encabezados, notificaciones y fondo. Todos los cambios se reflejan inmediatamente en la apariencia del sitio, por lo que puede elegir tonos que sean convenientes para los usuarios y reconocibles entre los competidores. Las secciones que puede editar se describen a continuación; también puede encontrar descripciones de ellas junto a cada campo pasando el cursor sobre el “?”
Colores primarios
Color primario — el acento principal del sitio. Se utiliza para botones primarios, elementos activos y acentos clave. Por ejemplo, el bloque de moneda en la calculadora de cambio, el contador de alternancias de elementos activos, la ventana de estado del operador
Bloques en color primario — el color del contorno que aparece al pasar el cursor sobre los bloques en la parte superior del sitio (encabezado).
Colores de texto
Texto primario — el texto principal normal en el sitio. Se utiliza en la mayoría de los campos, resaltando títulos de secciones, lista de monedas, texto dentro de las secciones.
Texto secundario — texto auxiliar usado en etiquetas de contacto, nombres de campos para entrada, pistas de entrada al crear un pedido, información auxiliar en descripciones del historial de verificación AML.
Texto de elemento inactivo — color para texto auxiliar cuando ha ocurrido un error relacionado con él. Normalmente un rojo más brillante, utilizado para resaltar texto que no cumple los formatos de entrada, por ejemplo: la cantidad especificada excede el máximo, el cliente no indicó consentimiento para una verificación AML, se produjo un error al generar los detalles de pago durante la creación del pedido.
Texto de marcador de posición — texto gris dentro de los campos de entrada que desaparece al escribir. Por ejemplo: sugerencias sobre el formato de las entradas de los campos que se muestran mayormente atenuadas.
Texto de la sección superior — El color de texto utilizado en el encabezado de la aplicación y elementos de navegación. Se aplica a los elementos del menú, la información del perfil de usuario y otros contenidos textuales relacionados con la sección superior (encabezado) del sitio.
Texto del pie de página — El color de texto utilizado en la sección del pie de página. Se aplica a la información de derechos de autor, enlaces del pie de página, detalles de contacto y otros elementos de texto ubicados en la sección inferior del sitio web.
Texto de acento — texto utilizado en bloques de llamada a la acción, por ejemplo: el botón “Intercambiar”, texto en bloques de grupo de monedas, texto de notificaciones, texto de campos en el menú del encabezado que señalan elementos del menú de reglas, el texto de la sección de reglas en la que se encuentra el cliente, el texto del bloque de autorización.
Texto de la página - Cambiar textos que no pertenecen a secciones o bloques en el sitio. Por ejemplo, títulos de secciones colocados directamente sobre el fondo del sitio fuera de otras secciones, esencialmente como texto sobre papel (fondo del sitio).
Colores de fondo
Fondo de tarjetas/bloques — color de relleno de fondo para tarjetas, noticias, pequeños bloques en páginas, el panel de autorización o paneles de entrada de datos.
Fondo de la parte superior — el color del panel superior del sitio (encabezado).
Fondo de la parte inferior — el color del panel inferior del sitio (pie de página).
Fondo de campos de entrada — el color de fondo de los formularios a completar (donde se ingresan datos). Por ejemplo: campos de inicio de sesión en la cuenta personal, campos de entrada de datos al crear un pedido.
Fondo predeterminado — el fondo general de la página, visible solo si no hay fondo del sitio o si este es transparente.
Colores de estado
Verde — destaca los estados de un evento exitoso: Estado del pedido “Completado”, estado de verificación, estado de la verificación AML
Rojo — destaca los estados de un evento no exitoso: Estado del pedido “Cancelado”, “Error”, “Anulado”, estado de verificación rechazado, estado de la verificación AML.
Naranja — destaca estados con un estado intermedio: Estado del pedido “Comprobando”, “Pago parcial”, estados intermedios de verificación
Azul — para crear un pedido o un nuevo elemento.
Color del divisor
Divisores — líneas finas que separan bloques o filas en tablas, listas de monedas, menús o secciones en la interfaz móvil.
Tipografía
Esta sección está diseñada para cambiar las fuentes del sitio de forma masiva. Las configuraciones realizadas en esta sección se aplican a todos los elementos de texto estándar de la interfaz.
Descripción de la característica
1. Selección de fuente
En la parte superior de la página hay una lista desplegable con las fuentes disponibles (por ejemplo: Ubuntu, Lato, Rubik y otras).
Después de seleccionar una fuente, los cambios se aplican a todos los elementos de texto principales del sitio, incluyendo:
Encabezados (h1, h2, h3, etc.)
Texto principal (cuerpo)
Leyendas
Elementos de la interfaz
Botones
Menús
Formularios
A la derecha se muestra una vista previa (un ejemplo de cómo se ven los encabezados y el texto), que le permite evaluar visualmente la fuente seleccionada antes de guardar.
2. Botón “Guardar”
Aplica la fuente seleccionada a todo el sitio.
Después de guardar:
la fuente se actualiza en todos los componentes estándar de la interfaz;
los cambios se vuelven visibles en la parte pública del sitio.
3. Botón “Restablecer a predeterminado”
Devuelve la fuente del sistema (Rubik predeterminado) que está configurada por defecto en la plantilla.
Se utiliza en caso de que necesite revertir cambios.
Importante
Los ajustes de tipografía se aplican a todos los elementos estándar del sitio.
Los cambios no afectan a los bloques con código HTML personalizado.
Propósito de la sección
La sección permite la gestión centralizada del estilo de fuente del sitio sin necesidad de editar código. Esto facilita adaptar el diseño a la marca y garantiza una estilización unificada.
Radio de borde de forma
Radio de borde de forma es una configuración global del sistema de diseño que permite el control centralizado del radio de redondeo de las esquinas de los elementos en todo el sitio.
La funcionalidad funciona como un coeficiente de escaladoque se aplica al valor base del radio (por ejemplo, 8px).
Fórmula de cálculo:
Ejemplo:
Coeficiente = 1
Valor base = 8px
Resultado: 1 × 8px = 8px
Dónde se aplica
Cambiar el coeficiente afecta a todos los elementos de la interfaz que usan el radio del sistema:
Botones
Campos de entrada
Desplegables
Ventanas modales
Tarjetas
Menús desplegables
Insignias
Otros componentes del sistema de diseño
Parámetros
Radio de borde (coeficiente)
Un valor numérico que se multiplica por el radio base.
Valor mínimo: 0 (esquinas rectas)
Valores >3 crean una interfaz con redondeo máximo
Ejemplos visuales
0
0px
Esquinas rectas (estilo estricto, corporativo)
0.5
4px
Ligero redondeo
1
8px
Equilibrio estándar
2
16px
Estilo moderno y suave
3
24px
Interfaz redondeada
Ejemplo de visualización para coeficiente 0
Ejemplo de visualización para coeficiente 5
Botones de control
Guardar
Guarda el valor establecido y lo aplica a todos los elementos del sitio
Restablecer a predeterminado
Devuelve el valor al coeficiente estándar (4).
Última actualización