1. Introducción.
Cool Tabs te permite generar una campaña de contenido interactivo con un diseño personalizado y adaptado a tu look & feel.
Desde el editor de tu campaña, vas a poder configurar la apariencia de la misma: títulos, descripción de la landing, imagen principal, imagen de fondo, fuente y colores.
A continuación, te mostramos qué opciones dispones para configurar el diseño de tu campaña.
2. Paso a paso.
Para configurar la apariencia, ve a la sección 'Diseño' del editor de la campaña.
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 como imagen principal en la que incluyas el título.
2.1.2. Descripción de la campaña
En la pestaña 'Datos básicos', también vas a encontrar un editor en el que puedes incluir un texto a modo de descripción. Dale al usuario instrucciones para participar o detallar el premio que se sortea. Debe de ser lo suficientemente explicativo para que los usuarios entiendan el funcionamiento de la campaña.
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 la pestaña 'Imágenes/vídeos', vas a encontrar opciones para personalizar la campaña con imágenes y/o vídeo.
Consulta nuestro tutorial para conocer el tamaño óptimo de tus imágenes.
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 768 px para dispositivos móviles y 1280 px 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 definir los colores de tu campaña y elegir la fuente de los textos.
A la hora de diseñar tu campaña puedes incluir una combinación de colores, conformada por un color primario, secundario, de fondo y del texto.
1. Color primario: es el color que se usará como principal en la campaña. Se aplica a botones/selectores de respuestas (cuando el usuario para por encima del botón, este se convierte en el color del texto), títulos y color de fondo de badges.
2. Color secundario: es el color de fondo del contenedor principal de cada página de 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 si 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 y los 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 help@cool-tabs.com.
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 quizzes, debes solicitarlo a help@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.4. Contenido.
En la pestaña 'Contenido' vas a encontrar otras opciones para personalizar el diseño de tu campaña.
2.4.1. Cabecera para el formulario de participación.
Puedes activar y personalizar una cabecera. 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 se mostrará a modo de cabecera del formulario de registro, debajo de la imagen de cabecera del formulario de participación y encima de los campos del formulario de registro.
Independiente de si decides incluirla o no, la imagen de cabecera del formulario seguirá apareciendo arriba a modo de banner.
A continuación, puedes ver un ejemplo de la página del formulario de registro de una campaña. Se muestra una imagen como cabecera y, debajo, un texto como cebera del formulario de datos.
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.
Además, en campañas marca blanca, configuradas con la aplicación Cool Promo White Label, puedes incluir una mayor personalización de tu diseño con HTML y CSS.
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.
Las opciones de diseño personalizado, que acabas de ver, están incluidas en campañas creadas con las aplicaciones Cool Promo y Cool Promo White Label, incluidas en los planes Gold y Diamond, respectivamente.
Para una personalización más avanzada, consulta el tutorial Cómo configurar la CSS personalizada de una campaña. Encontrarás detalladas reglas CSS para aplicar en tu campaña y mover elementos de sitio u ocultarlos, incluir nuevos o cambiar por completo la línea gráfica de la campaña.
Si tienes alguna duda sobre la configuración del diseño, puedes contactarnos en el email help@cool-tabs.com.
4. Contenido relacionado.
Cómo empezar a crear una campaña: configuraciones básicas.
Cómo configurar la CSS personalizada de una campaña.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.