2. Combinación de colores por página de campaña.
2.2. Formulario de participación.
1. Introducción.
A la hora de diseñar tu campaña de contenido interactivo, puedes personalizarla incluyendo una combinación de colores. Esta combinación está conformada por:
Color primario: es el color predominante de la campaña. Se aplica a botones, selectores y títulos.
Color secundario: es el color de fondo del contenedor principal de cada página de la campaña. Además, es posible aplicarle semitransparencia.
Color de fondo: es el color de fondo de la página (si no se incluye imagen de fondo). Se aplica también al texto de los botones y los selectores de respuesta. Cuando el participante pasa por encima de las opciones de respuesta, cambia al color de fondo.
Color del texto: es el color de los textos que no son títulos.
A continuación, te detallamos a qué elementos concretos de la campaña aplica cada tipo de color en las diferentes páginas.
Para definir la combinación de colores de tu campaña, ve a la sección 'Diseño' del editor de la campaña.
2. Combinación de colores por página de campaña.
2.1. Landing.
2.1.1. Color primario.
Se aplica a:
- Color de fondo y borde de botones en reposo: 'PARTICIPA', 'VER PARTICIPACIONES'...
- Texto de los botones e iconos dentro de los botones enfocados (cuando se pasa por encima o selecciona el botón)
- Color del enlace de 'Ver Bases Legales'
Además, se aplica a:
- Cabecera del modal de registro en la campaña, que el participante visualiza cuando se ha configurado registro anónimo y/o social
- Botón de 'CERRAR' las bases legales
2.1.2. Color secundario.
Se aplica a:
- Contenedor general de la campaña, donde se incluye el título, la descripción y los botones de la landing
Como ya hemos mencionado en la introducción, puedes aplicar semitransparencia al color secundario. Para hacerlo, pincha en el campo 'Color secundario'. Se desplegará un selector de color con dos barras a su derecha: la barra derecha determina el nivel de transparencia.
2.1.3. Color de fondo.
Se aplica a:
- Fondo de la página. Cubre todo el fondo. Si no incluyes una imagen de fondo, puedes aplicar un color liso.
- Texto de los botones e iconos dentro de los botones en reposo
- Fondo de los botones enfocados
2.1.4. Color de texto.
Se aplica a:
- Texto del título y de la descripción
Además, se aplica a:
- Texto de las bases legales
Los colores del texto de descripción de la campaña y de las bases legales pueden personalizarse desde el propio editor de texto donde se incluyen.
A continuación, te mostramos con un ejemplo cuál es el color que afecta a cada elemento de la landing.
Landing
Modal registro
Modal bases legales
Aunque para una óptima combinación de colores te recomendamos usar un color primario y de texto que destaquen sobre los colores secundario y de fondo (tenues), la personalización del diseño admite otras combinaciones y configuraciones, como las que te mostramos a continuación.
1) Combinación de colores acromáticos (escala de grises)
2) Aplicar transparencia al color secundario
Ejemplo 1
Ejemplo 2
3) Añadir una imagen de fondo
Ejemplo 1
Ejemplo 2
4) Añadir una imagen de fondo y aplicar semitransparencia al color secundario
Ejemplo 1
Ejemplo 2
2.2. Formulario de participación.
2.2.1. Color primario.
Se aplica a:
- Color de fondo de los botones de acción ('Anterior' y 'Siguiente') en reposo
- Badges o botones de respuesta enfocados o seleccionados
- Texto de los botones de respuesta en reposo
- Número de preguntas del quiz (botones de pasos)
- Botones de número de preguntas cuando el usuario ya ha contestado la pregunta
2.2.2. Color secundario.
Se aplica a:
- Contenedor general del formulario de participación
2.2.3. Color de fondo.
Se aplica a:
- Color de fondo de los badges o botones de respuesta en reposo
- Botones de acción ('Anterior' y 'Siguiente') enfocados
- Texto de los botones de acción en reposo
- Texto de los botones de respuesta enfocados o seleccionados
2.2.4. Color de texto.
Se aplica a:
Texto de pregunta del quiz
2.2.5. Otros colores.
Los colores de los mensajes de error en un quiz, del mensaje de feedback tras responder una pregunta y del input de selección de respuesta 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 quizzes y del input de selección de respuesta, contáctanos en help@cool-tabs.com indicando el código #/RGB del color deseado.
A continuación, te mostramos con ejemplos cuál es el color que afecta a los elementos del formulario de participación.
1) Respuesta a escoger entre varias opciones.
2) Respuesta textual
3) Respuesta calificación con estrellas
4) Respuesta calificación numérica
5) El participante sube un vídeo
6) Imagen de fondo en pregunta
7) Preguntas tipo matriz
8) Pronóstico deportivo
9) Swipe
2.3. Gamificaciones.
2.3.1. Color primario.
Se aplica a:
- Color de fondo de los botones de acción del juego ('Anterior' y 'Siguiente') en reposo
- Color de fondo de los botones del modal de puntuación ('Volver a jugar' y 'Continuar')
- Color de fondo de las casillas que indican el tiempo restante, aciertos y vidas de la pantalla de juego
- Texto del total de puntos obtenidos en el modal de puntuación
2.3.2. Color secundario.
Se aplica a:
- Color de la base del juego
- Color de fondo del modal de puntuación
2.3.3. Color de fondo.
Se aplica a:
- Texto de las casillas que indican el tiempo restante, aciertos y vidas de la pantalla de juego
- Texto de los botones del modal de puntuación ('Volver a jugar' y 'Continuar')
2.3.4. Color de texto.
Se aplica a:
- Textos del desglose de puntos obtenidos en el modal de puntuación
A continuación, te mostramos con ejemplos cuál es el color que afecta a los elementos de la página de juego de distintas mecánicas de gamificación.
1) Matching Cards / Memory Cards
2) Ahorcado
3) Modal de puntuación
2.4. Formulario de datos.
2.4.1. Color secundario.
Se aplica a:
- Contenedor del formulario
2.4.2. Color de texto.
Se aplica a:
Texto (opcional) que incluyas como cabecera del formulario
El color del texto puede personalizarse desde el propio editor de texto donde se incluye.
El resto de colores que aparecen son fijos, tal y como te mostramos a continuación con un ejemplo.
2.5. Página tras participar.
2.5.1. Color primario.
Se aplica a:
- Color de fondo de la cabecera, donde se muestra por defecto el mensaje '¡Muchas gracias por participar!'
- Color de fondo del botón 'COMPARTIR'
- En campañas con puntuación, el texto que indica la puntuación obtenida
2.5.2. Color secundario.
Se aplica a:
- Contenedor donde se muestra el contenido de la pantalla final
2.5.3. Color de fondo.
Se aplica a:
- Texto del mensaje '¡Muchas gracias por participar!'
- Texto del botón 'COMPARTIR'
2.5.4. Color de texto.
Se aplica a:
Texto que incluyas en la pantalla final
El color del texto de la página tras participar puede personalizarse desde el propio editor de texto donde se incluye.
A continuación, te mostramos un ejemplo.
2.6. Página de ganadores.
2.6.1. Color primario.
Se aplica a:
- Color de fondo de la cabecera, donde se muestra el icono de la página de ganadores
- Color de fondo del módulo de la fecha del sorteo
- Texto del título
- Texto del nombre de ganadores y reservas
- Color de fondo del botón de 'BASES LEGALES'
2.6.2. Color secundario.
Se aplica a:
- Contenedor de la página de ganadores
2.6.3. Color de fondo.
Se aplica a:
- Texto con la fecha del sorteo
- Color del contenedor con el nombre de ganadores y reservas
2.6.4. Otros.
El aviso que certifica la realización aleatoria del sorteo con Cool Tabs y con base en los criterios establecidos por el administrador de la promoción, así como el icono de la página de ganadores, se muestran por defecto con colores fijos.
A continuación, te mostramos un ejemplo.
3. Otras especificaciones.
Si tienes dudas o quieres efectuar cualquier otro cambio de colores, contáctanos en help@cool-tabs.com.
Para una personalización más avanzada, consulta el tutorial Cómo configurar la CSS personalizada de una campaña. Encontrarás reglas CSS detalladas para aplicar en tu campaña: mover o ocultar elementos, incluir nuevos o cambiar por completo la línea gráfica.
4. Contenido relacionado.
Cómo configurar el diseño de una campaña.
Cómo configurar la CSS personalizada de una campaña.
Cómo empezar a crear una campaña: configuraciones básicas.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.