1. Introducción.
Las campañas creadas con las aplicaciones Cool Promo y Cool Promo White Label, incluidas en los planes Gold y Diamond, respectivamente, permiten la personalización del diseño (imágenes y textos de la landing, colores y fuentes), para que puedas adaptarlas a tu look & feel.
Vas a poder configurar la apariencia desde el apartado 'Diseño' del editor de la campaña.
2. Paso a paso.
2.1. Datos básicos.
2.1.1. Título de la campaña.
En este campo puedes incluir el nombre de tu campaña. El nombre que escribas se mostrará públicamente en la landing.
También puedes optar por incluir el título de la campaña, en vez de en ese apartado, en el de descripción o preparar una creatividad que ya lo incluya.
2.1.2. Descripción de la campaña
Aquí puedes incluir un texto que describa en qué consiste la campaña, darle al usuario instrucciones para participar y anunciar el premio que se sortea. Debe de ser lo suficientemente explicativo para que los usuarios entiendan su funcionamiento.
Por defecto, le daremos estilo a los textos que incluyas, para que queden bien. Pero si lo prefieres, con nuestro editor puedes darle estilos al texto (colores, tamaño de fuente, etc.). Además de texto, puedes añadir imágenes o HTML propio.
2.2. Imágenes y vídeos.
En esta pestaña encontrarás opciones para personalizar la campaña con imágenes y/o vídeo.
2.2.1. Imagen principal de la campaña.
Es la imagen que se visualizará en la landing y que, por lo tanto, será visible para todos los usuarios que acceden a la campaña.
El tamaño óptimo es de 810 px de ancho por altura ilimitada. Ten en cuenta que cuando más alta sea más scroll tendrán que hacer los usuarios.
2.2.2. Imagen de fondo e imagen de fondo en móviles.
Como su nombre indica, es la imagen que se mostrará de fondo de la campaña. Aparecerá en todas las páginas de la campaña.
La imagen se mostrará sin procesar, por lo que recomendamos un máximo de ancho de 768px para dispositivos móviles y 1280px para tamaños de pantalla de mayor tamaño.
Si tu imagen no abarca el ancho de la pantalla, escoge el modo 'Pantalla completa' en el selector 'Posición'.
Por lo general, la imagen que se muestra en mobile, es la misma que la imagen de fondo.
2.2.3. Vídeo de presentación.
Puedes incluir en este campo un vídeo a modo de presentación. Puede ser una URL de YouTube, Vimeo, Flickr, etc.
Este material es opcional, pero si incluyes un vídeo en tu campaña, ten en cuenta que será lo primero que se muestre justo encima de la creatividad principal, a no ser que modifiques su ubicación utilizando tu propia CSS.
2.3. Estilos.
En la pestaña "Estilos" vas a poder establecer los colores de tu campaña y elegir la fuente de los textos.
1) Color primario: es el color que se usará como principal en la campaña. Se aplica para los botones/selectores de respuestas (cuando el usuario para por encima del botón, este se convierte en el color del texto), títulos, color de fondo de badges.
2) Color secundario: es el color de fondo de la sección principal de cada página en la campaña.
- Semitransparencia: en campañas con imagen de fondo, es posible aplicar semitransparencia al color secundario. Para aplicar semitransparencia, pincha en el campo "Color secundario" donde has escrito el código de color que quieres. Se desplegará un selector de color y a su derecha dos barras. La derecha determina el nivel de transparencia que quieres darle al color secundario.
3) Color de fondo: es el color de fondo de la página. Cubre toda la pantalla, por lo que no incluyes una imagen de fondo en tus campañas, puedes añadir un color de fondo liso. También es el color que se aplica a los textos de los botones/selectores de respuestas (cuando el participante pasa por encima de las opciones de respuesta cambia por el color de fondo).
4) Color de texto: es el color de los textos que no son títulos.
5) Fuente: si necesitas incluir una fuente concreta que no está, escríbenos a soporte@cool-tabs.com.
Para una buena combinación de colores recomendamos usar bien un color primario oscuro con colores secundario y de fondo suaves (tenue), y color de texto oscuro. O bien, un color primario suave con colores secundario y de fondo oscuros y color de texto suave (tenue).
En los mensajes de error en un quiz y mensaje de feedback tras responder una pregunta, los colores son fijos. El color del feedback se puede cambiar por CSS con ayuda del tutorial "Cómo cambiar los colores del mensaje del feedback y de respuesta de un quiz por CSS". Para cambiar el color de mensajes de error en los quiz, debes solicitarlo a soporte@cool-tabs.com, indicando #/rgb del color deseado.
A continuación, puedes ver un ejemplo de una campaña con imagen de fondo y transparencia.
2.3.1. Estilos para campañas con opción de diseño clásico (opción disponible solo en campañas antiguas).
1) Color primario: es el color que se usará como principal en la campaña. Se aplica para los botones/selectores de respuestas, títulos y color de fondo de badges.
2) Color secundario: como su nombre indica, es el color que se empleará como secundario. En este diseño, el color secundario se aplica para cosas muy puntuales, por ejemplo, para el color de los steps de preguntas que el participante va respondiendo.
3) Color de fondo: es el color de fondo de la página. Cubre toda la pantalla, por lo que si vas a incluir una imagen de fondo, puedes establecer un color de fondo liso. También es el color que se aplica a los textos de los botones/selectores de respuestas una vez que el participante marca una respuesta al contestar.
- Semitransparencia: en campañas con imagen de fondo, es posible aplicar semitransparencia al color secundario. Para aplicar semitransparencia, pincha en el campo "Color de fondo" donde has escrito el código de color que quieres. Se desplegará un selector de color y a su derecha dos barras. La derecha determina el nivel de transparencia que quieres darle al color de fondo.
5) Fuente: si necesitas incluir una fuente concreta que no está, escríbenos a soporte@cool-tabs.com
A continuación, puedes ver un ejemplo de una campaña con diseño clásico e imagen de fondo en la que el color de fondo tiene configurado semitransparencia.
2.4. Contenido.
2.4.1. Cabecera para el formulario de participación
Puedes activar una cabecera y personalizarla. Esta será la imagen que aparezca en la parte superior del formulario, a modo de banner, y que ocupará todo el ancho de la página. Debe tener una medida de 810 px de ancho.
2.4.2. Cabecera del formulario de datos personales.
Puedes incluir texto, imágenes o vídeo que aporte cierta información a los usuarios sobre lo que deberán rellenar a continuación. Esta imagen aparece debajo de la imagen de cabecera del formulario de participación y encima del formulario. Independiente de si decides incluirla o no, la imagen de cabecera del formulario seguirá apareciendo arriba a modo de banner.
2.4.3. Cabecera del listado de participantes y participante individual.
Puedes incluir un texto, una imagen o un vídeo con HTML para que aparezca en la parte de arriba del formulario de participación o de la página del listado de participantes.
2.4.4. Mostrar creatividad distinta antes de que comience la campaña.
Si publicas la campaña antes de la fecha de inicio de la misma, por defecto aparecerá el mensaje de “No hay promociones activas en este momento”. Este apartado te permite configurar y mostrar un mensaje diferente, que genere cierta expectativa sobre tu campaña.
2.4.5. Mostrar creatividad distinta una vez finalice la campaña.
Una vez finalizada la campaña, si sigue estando publicada, por defecto se muestra una caja con el texto “No hay promociones activas en este momento”. Activando esta campo, se puede sustituir esa caja con la imagen o texto que quieres, por ejemplo, para anunciar la fecha publicarán los ganadores o cuándo se iniciará el siguiente concurso.
2.4.6. Habilitar creatividad en la página de ganadores.
Si decides hacer público el listado de ganadores, puedes incluir una creatividad personalizada en ese apartado. El listado se publicará justo debajo.
2.4.7. Mostrar un pie de página en toda la campaña.
Tienes la opción de configurar un pie de página común en todas las páginas. Puedes incluir texto, imágenes o HTML.
A continuación, puedes ver un ejemplo en el que se ha incluido un logo como pie de página de la campaña.
2.5. Avanzado.
2.5.1. Utilizar HTML completo para la landing (solo White Label).
La página principal de una campaña o concurso y la del formulario de participación contienen varios elementos por defecto que puedes modificar u ocultar.
2.5.2. Utilizar HTML completo para la página de ganadores (solo White Label).
La página de ganadores del concurso, con Cool Promo White Label, también se puede personalizar por completo gracias a nuestra personalización avanzada.
2.5.3. Utilizar HTML completo para el formulario de participación (solo White Label).
3. Otras especificaciones.
Si tienes dudas sobre la configuración del diseño, contáctanos en el email help@cool-tabs.com
4. Contenido relacionado.
Cool Promo White Label: crea tu campaña o concurso en Marca Blanca >>
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.