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
The most important consideration when designing a site is usability.
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.
You can also adjust the height of the header area by dragging the bottom of the header.
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.
Then you can adjust the alignment of the items in the site header. The site header contains your logo and the top navigation.
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
At this point you can customize your selected theme, change some colors, borders, or upload background pictures.
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:
- Background color or style (Solid or gradient). You can choose semi-transparent colors to create see-through areas. For example, you can select a semi-transparent grey or white background color for the module or module body background to make the module area separate from the rest of the page and give enough contrast to your text, while showing your page background image. This technique can be used to create a modern-looking module without borders and boxes
- Background picture that you can upload or select from the gallery
- 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.
- Font, font color and font shadow allow you to set the font for the section.
Usando la pestaña Secciones, debería poder personalizar completamente el diseño de su sitio.
CSS
CSS is a technology used by web designers to design a site. Using CSS, a designer can hide or change the style of every individual item on the page in a very granular or general way.
Since the “Sections” tab of the designer panel give you very good control over the style of the site, it is very unlikely that you need to write any CSS code. Actually, Ticketor discourages using CSS on the site except in very rare cases.
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.
