Actualizado por Cool Tabs en 4 mayo, 2015
En Cool Tabs trabajamos para actualizar y mejorar constantemente las funcionalidades de nuestras aplicaciones. En estos momentos hemos incorporado tres features nuevas: Imagen de fondo, Temas personalizados y Activación de CSS personalizadas. Estas nuevas funcionalidades ya se pueden utilizar en las aplicaciones Cool Promo, Buzz Promo y sus versiones de Marca Blanca. Te contamos paso a paso cómo sacarles el máximo partido y aplicarlas en tus promociones.
Una vez que hayas creado una pestaña y elegido la aplicación que quieres usar para tu promoción, te aparecerá el punto 1. «Datos básicos». Complétalo y pasa al punto 2. “Diseño de la promoción”. En este momento comienza el proceso de personalización de tu promoción.
Cuando hayas completado los primeros apartados («video de presentación», «imagen principal de la promoción», «imagen final a mostrar después de participar» y «texto a mostrar después de participar»), verás que aparecen las nuevas funcionalidades. La primera es «Imagen de fondo a mostrar en tu promoción».
1. IMAGEN DE FONDO
Con esta nueva funcionalidad podrás añadir un imagen personalizada en vez del fondo que Cool-Tabs pone por defecto. La imagen se verá en el fondo de todos los pasos de la promoción, es decir, desde la primera ventana donde se invita al usuario a participar hasta el formulario de participación, el listado de participaciones y las votaciones. Para que la incorporación de esta imagen sea lo más óptima posible, recomendamos que tenga un ancho de 810 px. Este es un ejemplo de una promoción que ha usado un fondo personalizado con una imagen bien optimizada sin tener que repetirla.
Respecto a la posición de la imagen de fondo, por defecto aparece seleccionada la opición «no repetir». Esto es lo más adecuado si tienes una imagen que ocupa todo el fondo de la promoción, como en el caso anterior. Cuando la imagen sea más pequeña puedes elegir entre las opciones “repetir horizontalmente”, “verticalmente”, o en “ambos sentidos». De esta manera, la imagen que hemos subido ocupará todo el tamaño del fondo. Incluímos dos ejemplos para veas el resultado.
En este caso la imagen, no es lo suficientemente grande para ocupar todo el fondo. Por eso se ha elegido la opción «repetir ambos», es decir, tanto horizontal como verticalmente. Este es el resultado:
Otro ejemplo sería este otro en el que la imagen sí ocupa todo el ancho de la ventana, pero no todo el largo. En este caso se ha optado por «repetir verticalmente».
2. TEMAS PERSONALIZADOS
La segunda funcionalidad nueva es «Temas personalizados». Con esta funcionalidad podrás optar entre dejar el tema «original», que es el que viene por defecto en todas las aplicaciones Cool-Tabs, o personalizarlo teniendo en cuenta los colores y el estilo del producto y la firma. Así es como se vería una promoción con el tema «original».
Para las promociones en que prefieras personalizar la imagen de tu promoción, podrás elegir entre los temas «minimal», «blue», «red», «black» y «green». Al pinchar en cualquiera de estas cinco opciones te aparecerá la opción «color de fondo». Si quieres un color distinto al pretederminado escríbelo (por ejemplo, si quieres un fondo negro escribe #000000) o ayúdate de la paleta de colores.
Te lo explicamos con ejemplos. Si al pinchar en el tema «minimal» no cambias el color de la imagen de fondo, la promoción se vería con este fondo grisáceo y con los botones en color negro. Pero como hemos explicado anteriormente, tienes la posibilidad de modificar el color de fondo.
Te damos dos ejemplos más. Si pinchas en el tema «red» y no modificas el color de fondo, la promoción te aparecerá de la siguiente manera: con un fondo grisáceo y con detalles destacados en rojo. Estos detalles, los botones y las bandas que destacan el nombre de la promoción y el listado de participantes, varían de color en función del tema que elijas.
Por otro lado, si pinchas en «blue» y cambias el color de fondo por un azul idéntico al que aparece por defecto en este tema, el efecto será el siguiente:
Como puedes comprobar, las opciones son múltiples, sólo tienes que ir probando y adaptar la que mejor se ajuste a tus necesidades.
3. CSS PERSONALIZADAS
La tercera y última funcionalidad nueva que vamos a explicar en este tutorial es «CSS personalizada». Esta feature es perfecta para los casos en que necesites cambiar por completo el aspecto de tu promoción. Las opciones de esta funcionalidad son infinitas. Tendrás la posibilidad de modificar, mover u ocular cualquiera de los elementos que aparecen por defecto en la aplicación.
Para hacer uso de esta funcionalidad pincha en «activar css personalizada». Una vez activada se abrirá una caja donde podrás escribir una css que modifique tanto la apariencia como el diseño de la promoción, adaptándola a tus propias necesidades y a las de tu cliente.
Estos son dos ejemplos de promociones personalizadas con CSS. En ambas se puede observar la adaptación de los colores teniendo en cuenta la imagen corporativa de la marca. Además, en el segundo ejemplo, en la parte de «cómo participar» no sólo se ha modificado el color sino también la tipografía.
Si después de leer este tutorial te has quedado con alguna duda sobre cómo ajustar las nuevas features a tu promoción, no dudes en contactar con nosotros.
Dejar una respuesta