Diseñar el sitio significa seleccionar temas y colores para su sitio en general, cargar un logotipo y determinar el diseño que afectará todo su sitio y todas las páginas.
Con la herramienta de diseño de Ticketor, puede crear casi cualquier diseño o sitio que pueda imaginar o puede combinar el sitio para que tenga el mismo aspecto que otro sitio o su sitio oficial.
Incluso si está integrando o incrustando la emisión de boletos en un sitio existente, aún debe usar la herramienta de diseño para hacer que el sitio tenga la misma sensación y apariencia que su otro sitio y cargue sus logotipos e imágenes de fondo.
Puede iniciar la herramienta de diseño desde Panel de control > Cuenta y configuración > Diseño. Puede seguir el asistente para la configuración básica u omitir el Asistente para ir al panel principal.
El panel principal se abre en su página para que pueda ver inmediatamente el efecto de los cambios que realiza en la página. Puede navegar a otras páginas para ver el efecto en todas las páginas.
Todos los cambios en este panel se guardan y aplican automáticamente y no es necesario guardarlos. Puede usar Ctrl+Z para deshacer.
Nota importante: la usabilidad es más importante que la apariencia
La consideración más importante al diseñar un sitio es la usabilidad.
No querrás sacrificar nunca la usabilidad por el diseño o la belleza de tu sitio. Aquí hay algunos puntos a los que desea prestar especial atención:
- Contraste de color: el color del texto y el color de fondo deben tener suficiente contraste para ser fácilmente legibles, no solo por un ojo sano, sino también por usuarios discapacitados.
- Amabilidad móvil. Considere siempre los casos de uso de dispositivos móviles y pantallas pequeñas cuando diseñe el sitio. Trate de evitar grandes rellenos y márgenes alrededor de la página que harán que el área para el contenido principal sea tan pequeña. También intente evitar los diseños de 2 o varias columnas, ya que es posible que no quepan en pantallas pequeñas como espera.
Con eso en mente, comencemos a diseñar el sitio:
Selecciona un tema
Comience seleccionando un tema. El tema dicta el color general del sitio. Seleccione el tema que mejor se adapte a su logotipo y marca. Puede cambiar los colores, fondos, bordes y otras configuraciones para diferentes áreas más adelante. Así que no te preocupes si no encuentras un tema perfecto. Simplemente seleccione uno que use los colores más parecidos a su marca o gusto.
Asegúrese de elegir un tema con color de texto claro si planea diseñar un sitio de color oscuro y elija un tema con color de texto oscuro si planea hacer un sitio con fondo claro.
Cargue su logotipo
A continuación, vaya al panel del logotipo del sitio y cargue su logotipo. Si no tiene un logotipo, puede usar el logotipo de texto en su lugar.
El logotipo y la navegación del sitio son los 2 elementos que residen en el área del encabezado del sitio.
Puede cambiar el tamaño del logotipo y la navegación superior arrastrando el controlador en la esquina inferior derecha de ellos y puede mover el logotipo y la navegación superior a cualquier lugar del área del encabezado.
También puede ajustar la altura del área del encabezado arrastrando la parte inferior del encabezado.
Seleccionar configuración de diseño y encabezado
A continuación, seleccione su diseño. Tenga en cuenta las pantallas muy grandes y las pantallas móviles muy pequeñas al seleccionar el diseño. El diseño de ancho completo puede no verse bien en pantallas anchas. El diseño de ancho fijo (centro) puede desperdiciar una gran cantidad de área de pantalla en monitores grandes.
Me gustaría ir con "Ancho completo con contenido en el centro". Usan todo el ancho de la pantalla en pantallas pequeñas y se ven bien en una pantalla ancha.
Dependiendo de si desea que los colores de fondo del encabezado y del módulo, que ajustaremos en los siguientes pasos, cubran todo el ancho de la pantalla o solo el centro, debe seleccionar uno de los diseños que mantienen el contenido en el centro.
Además, puedes elegir el diseño de la navegación superior. Puede elegir enlaces simples o diferentes estilos de cajas.
Luego puede ajustar la alineación de los elementos en el encabezado del sitio. El encabezado del sitio contiene su logotipo y la navegación superior.
Puede arrastrar y soltar el logotipo o la barra de navegación superior para moverlos a cualquier parte del área del encabezado. Puede cambiar el tamaño del logotipo o del menú de navegación usando el controlador en la parte inferior derecha. Si el menú de navegación es demasiado estrecho, los elementos de la navegación se ajustarán a una segunda línea.
También puede ajustar la altura del área del encabezado arrastrando el borde inferior.
Cambie el tamaño de su navegador para asegurarse de que el área del encabezado se vea bien en todos los tamaños y anchos de pantalla y no cause desplazamiento.
Cargar logotipo de ticket
A continuación, cargue el logotipo de su billete electrónico. Ese es el logo que se imprime en sus boletos. Recuerde que los boletos se imprimen en papel blanco, por lo que el logotipo del boleto electrónico debe contrastar con el blanco.
Cuando crea un evento, puede obtener una vista previa de las entradas y el logotipo de la entrada electrónica que carga aquí.
Subir encabezado y pie de página de correo electrónico
Todos los correos electrónicos salientes del sistema, incluidos los correos electrónicos de bienvenida, los correos electrónicos de confirmación y cualquier boletín informativo que envíe, se enviarán con el encabezado y el pie de página del correo electrónico que cargue aquí.
Nota: También puede agregar una firma de correo electrónico desde Panel de control > Cuenta y configuración > Editar correos electrónicos y confirmaciones > Firma de correo electrónico
Personalice temas y colores para cada sección de página
En este punto, puede personalizar el tema seleccionado, cambiar algunos colores, bordes o cargar imágenes de fondo.
Vaya a la pestaña "Secciones". Esta pestaña incluye múltiples paneles, para diferentes secciones de la página. El contenido de los paneles es bastante similar para cada sección y le permite personalizar esa sección.
Cada página de su sitio consta de las siguientes secciones:
- Página: Es la página general. Puede usar esta sección para establecer una imagen de fondo o un color para la página y realizar otras configuraciones
- Encabezado de página: el encabezado de la página donde se encuentra su logotipo y navegación superior. Puede usar esta sección para cambiar el color de la navegación superior o cambiar el fondo del encabezado de la página
- Pie de página: controla el color y el diseño del pie de página del sitio. El pie de página del sitio normalmente contiene los logotipos de tarjetas de crédito y un enlace a sus términos y puede agregar cualquier contenido al pie de página del sitio desde Panel de control > Cuenta y configuración > Editar contenido > Pie de página del sitio.
- Módulo: Módulo es el área donde se ubica el contenido principal de la página. Por ejemplo, el área "Buscar boletos", el área "Carrito de compras", el área "Lista de eventos", el área "Contáctenos" son todos módulos. Cada página puede contener uno o más módulos. Un módulo consta de un encabezado y un cuerpo. El encabezado contiene el título del módulo y el cuerpo contiene el contenido principal del módulo. El ancho del módulo puede ser el ancho completo de la pantalla o puede estar limitado al área central según el diseño que elija. Si desea tener una imagen de fondo para los módulos que cubren todo el ancho de la pantalla o si desea que el encabezado del módulo llegue hasta los bordes de la pantalla, elija el diseño "Ancho completo: contenido del módulo en el centro". ” por lo que solo el contenido del módulo (cuerpo) se limita al centro, mientras que el encabezado y el módulo ocupan todo el ancho. De lo contrario, si desea que el encabezado del módulo se limite al área central, elija "Ancho completo: módulo en el centro" o "Ancho completo: todo el contenido en el centro" para limitar el encabezado del sitio al centro también.
- Cuerpo del Módulo: Es la parte del módulo con el contenido principal, excluyendo el encabezado del módulo (título)
- Encabezado del módulo: es el área superior del módulo con el título del módulo. Puede ajustar la altura del encabezado del módulo arrastrando el borde inferior y puede ajustar el tamaño de fuente del título del módulo o el color y el color de fondo.
- Contenido: No es un área o sección específica de la página, sino que se refiere al contenido general de la página. Puede cambiar el color del contenido principal y el color "Destacados y cumplidos" que se utiliza como color secundario para títulos o resaltados del texto.
- Clickables: aquí puede establecer los colores y la configuración de las áreas de la página en las que se puede hacer clic, incluidos enlaces, botones, pestañas y encabezados de paneles. Puede configurar el "Estado predeterminado" o cómo se ven normalmente los clicables, "Estado de desplazamiento" cuando pasa el mouse sobre un área en la que se puede hacer clic, "Estado activo", como la pestaña activa en un panel, "Botón principal" y "Utilidad". Button” colores y estilos utilizados en todo el sitio.
En cada panel puede establecer o sobrescribir las siguientes configuraciones:
- Color o estilo de fondo (Sólido o degradado). Puede elegir colores semitransparentes para crear áreas transparentes. Por ejemplo, puede seleccionar un color de fondo gris o blanco semitransparente para el módulo o el fondo del cuerpo del módulo para separar el área del módulo del resto de la página y dar suficiente contraste a su texto, mientras muestra la imagen de fondo de su página. Esta técnica se puede utilizar para crear un módulo de aspecto moderno sin bordes ni cuadros.
- Imagen de fondo que puedes subir o seleccionar de la galería
- Ancho de borde y color que se puede configurar para cada lado de la sección: superior, inferior, izquierda y derecha. Para eliminar el borde de un área que viene predeterminada con un borde, simplemente establezca el ancho del borde en cero para los 4 lados.
- El relleno es el espacio interior en blanco del área, entre el contenido de un cuadro y el borde del cuadro. Se puede configurar para cada lado de la caja de forma independiente.
- Margen, que es el espacio exterior del cuadro, desde el borde del cuadro hasta el siguiente cuadro de la página. Se puede configurar para los 4 lados de la caja de forma independiente.
- El color y el tamaño de la sombra pueden establecer la sombra de la caja. Si su tema viene con una sombra y desea eliminarla, simplemente establezca el tamaño en cero.
- El radio de la esquina se puede configurar para crear cajas con esquinas redondeadas. El radio de la esquina se puede establecer para cada esquina de forma independiente. Puede usar un gran radio en algunas esquinas para crear cajas irregulares.
- La fuente, el color de la fuente y la sombra de la fuente le permiten configurar la fuente para la sección.
Usando la pestaña Secciones, debería poder personalizar completamente el diseño de su sitio.
CSS
CSS es una tecnología utilizada por los diseñadores web para diseñar un sitio. Usando CSS, un diseñador puede ocultar o cambiar el estilo de cada elemento individual en la página de una manera muy granular o general.
Dado que la pestaña "Secciones" del panel de diseño le brinda un muy buen control sobre el estilo del sitio, es muy poco probable que necesite escribir código CSS. En realidad, Ticketor desaconseja el uso de CSS en el sitio excepto en casos muy raros.
Si es un desarrollador web y decide usar la sección CSS para agregar estilo al sitio, asegúrese de limitar cuidadosamente sus selectores al elemento específico al que se dirige y no use selectores genéricos para evitar consecuencias inesperadas que puedan afectar el sitio. funcionalidad.
