cargador

Personalización del diseño en el complemento de reserva de Amelia

El diseño de los formularios y entradas de la interfaz de usuario de Amelia se basa en algunos colores y estilos básicos. Hace que la personalización del diseño sea increíblemente fluida y sencilla, por lo que puede ajustar Amelia para que coincida con cualquier marca corporativa y tema de WordPress.

El diseño de los formularios y entradas de la interfaz de usuario de Amelia se basa en algunos colores y estilos básicos. Hace que la personalización del diseño sea increíblemente fluida y sencilla, por lo que puede ajustar Amelia para que coincida con cualquier marca corporativa y tema de WordPress.

Para personalizar el diseño, vaya a su panel de administración de WordPress con una cuenta de administrador y vaya a Amelia » Personalizar. Allí verá el personalizador de estilo WYSIWYG. Hay dos partes de la sección de personalización: el panel del lado izquierdo donde tiene las opciones generales: color primario, degradado primario, color de texto, color de texto en el fondo y fuente, y estas opciones se aplican a todos los formularios de reserva.

En el panel del lado derecho, puede elegir el formulario de reserva, para las licencias Pro/Developer también puede elegir el flujo de formulario de Servicio o Paquete y luego editar los colores y las etiquetas en cada paso de reserva. Para algunos elementos, puede elegir si se mostrarán en el front-end o no, y para algunas selecciones como Ubicaciones o Empleados, puede elegir si serán obligatorios en el proceso de reserva o no. Todos los cambios son visibles en tiempo real, simplemente haga clic en el botón Vista previa y verá cómo se vería el frente con los cambios que realizó.

Opciones de color globales #

Las opciones de color globales que se aplican al formulario de reserva de búsqueda (que no está disponible para personalizar por separado en este momento) y los paneles frontales de empleados y clientes de forma predeterminada son Color primario, Colores de degradado de fondo, Color de texto, Color de texto en el fondo, Fuente y color de la imagen. Estas y las otras opciones disponibles (Color de fondo, Color de entrada, Color de texto de entrada, Color desplegable, Color de texto desplegable) en el menú desplegable Usar colores globales, también se aplican a los otros formularios de reserva si habilita la opción Usar colores globales encima de estos opciones cuando elige uno de los formularios en el panel del lado derecho.

Color primario #

Esta configuración define el color principal utilizado para los controles y partes de la interfaz de usuario comúnmente resaltados: botones, interruptores, etc. Es mejor hacer coincidir este color con el color principal de su marca, como el color principal de su logotipo.

PREDETERMINADO: #1A84EE

Color de texto en el fondo #

Color de texto que se usará en elementos que sí apliquen un degradado o fondo de color primario. Elija un color que contraste lo suficiente con los colores que definió en la configuración anterior.

PREDETERMINADO: #FCFDFF

Color de texto #

Este es el color de texto principal que se usa en etiquetas, menús desplegables, etc. Es mejor hacer coincidir el color con la paleta de su tema, ya que algunos de los elementos del complemento no tienen fondo y lo heredarán del tema.

PREDETERMINADO: #354052

Color de fondo #

Esta configuración define el color de fondo de los formularios.

PREDETERMINADO: #FFFFFF

Color de degradado de fondo 1 y 2 #

Los dos colores de esta configuración definen los degradados en elementos como el calendario o la portada predeterminada de un catálogo de servicios. Juega con la configuración para ver qué se adapta mejor al diseño de tu sitio web.

PREDETERMINADO: #1A84EE y #0454A2

Color de entrada #

Esta configuración define el color de todos los campos de entrada en el formulario.

PREDETERMINADO: #FFFFFF

Color del texto de entrada #

Esta configuración define el color del texto en los campos de entrada del formulario.

PREDETERMINADO: #FFFFFF

Color desplegable #

Esta configuración define el color de las opciones desplegables en los formularios.

PREDETERMINADO: #FFFFFF

Color del texto desplegable #

Esta configuración define el color del texto en los menús desplegables de los formularios.

PREDETERMINADO: #354052

Color de la imagen #

Esta configuración define el color de las imágenes en los formularios de reserva, como el trofeo de Felicitaciones en el último paso de reserva.

PREDETERMINADO: #1A84EE

Fuente #

Esta es la fuente principal que se usará en los controles de la interfaz frontal del complemento. Elija uno que coincida mejor con su tema. Además de las opciones de fuente disponibles en Amelia, también puede usar una fuente personalizada. En las opciones de Fuente, verá la opción Personalizada y, cuando la elija, aparecerán dos campos adicionales: URL de la fuente, donde debe proporcionar la URL de la fuente personalizada que desea usar, y Familia de fuentes, donde debe ingresar alguna etiqueta para la fuente.

PREDETERMINADO: ROBOTO

Opciones de formulario de reserva #

Por el momento, la personalización por formulario de reserva está disponible para la mayoría de los formularios de reserva en Amelia: formularios de reserva paso a paso, catálogo, lista de eventos y calendario. Hay tres partes de esta personalización de los formularios de reserva:

  1. Opciones sobre la vista previa del formulario donde tiene las opciones Formulario, Flujo de formulario, Traducir y Vista previa
  2. La opción de elegir el paso de reserva para el formulario elegido
  3. Y la parte principal donde se muestra el formulario y paso elegido con sus elementos y opciones de edición

Primero debe elegir el formulario de reserva que desea personalizar en la opción Formulario, y para los formularios de reserva de Servicios, si tiene Paquetes, elija el flujo de Formulario, ya sea que desee personalizar el paquete o la reserva del servicio.

Para cada formulario de reserva, hay un número diferente de pasos que puede personalizar, cuando elige el formulario de reserva que desea, verá la lista de pasos además del formulario, y al hacer clic en uno de los pasos allí, ese paso se se mostrará en la vista previa principal.

La vista de cada paso de la reserva tiene los colores del formulario y las opciones de reinicio. Al hacer clic en la opción Colores de formulario, se abrirá un modal con diferentes opciones de color según el paso y el elemento: color de fondo, color de texto, color de entrada, etc. Si hace clic en el botón Restablecer, los colores volverán a los predeterminados para ese elemento

También puede ver los íconos de lápiz de edición junto a cada elemento en ese paso, y cuando haga clic en esos botones de edición, verá las opciones disponibles para esa parte. Podrá editar las etiquetas y elegir si desea mostrar ese elemento en la parte delantera o no. Tenga en cuenta que la opción Mostrar no está disponible para todos los elementos, ya que algunos deben ser obligatorios, como la selección de servicios, el calendario (selección de fecha y hora), etc.

Puede elegir si la selección de Empleado o Ubicación será obligatoria o no en el proceso de reserva, y si la opción Cualquier empleado en la selección de Empleado se mostrará o no.

La opción de traducción #

Si usa su sitio web y Amelia en varios idiomas, también tiene la opción de agregar traducciones para esos idiomas para las etiquetas disponibles. Cuando desee traducir las etiquetas a otro idioma, simplemente haga clic en la opción Idioma y elija uno de los idiomas de la lista desplegable. Los idiomas disponibles en esta lista son los que agregó usando la opción Administrar idiomas en la configuración general de Amelia, y puede leer más sobre la configuración multilingüe en la página de soporte multilingüe. Cuando elige uno de los idiomas, ese será el idioma seleccionado para todas las opciones, por lo que puede revisar cada formulario de reserva y paso y proporcionar traducciones para las etiquetas disponibles.