Las aplicaciones Cool Promo y Cool Promo White Label permiten la customización de las promociones añadiendo temas personalizados con los que modificar el resultado final añadiendo diferentes colores y estilos. Con estos temas podemos modificar los elementos básicos de nuestras promociones, pero si queremos conseguir una personalización más completa, lo conseguiremos a través de las creatividades o imágenes que vayamos a utilizar. Para conseguirlo, sólo hay que instalar Cool Promo o Cool Promo White Label e ir a la sección “2. Diseño de la promoción” y elegir la opción “empty” (en blanco / vacío) de los temas personalizados.

Te explicamos paso a paso cómo configurar nuestra promoción con el nuevo tema en blanco y sus diferentes opciones de configuración y personalización. Podemos elegir entre:

  • Usar sólo la imagen principal, sin descripción.
  • Usar sólo la descripción de la promoción.
  • Usar la imagen principal y la descripción de la promoción.


1. Elegiremos la primera opción, usar sólo la imagen principal, cuando nuestra creatividad o imagen principal incluya toda la información sobre la mecánica del concurso y no sea necesario añadir información adicional. Al pulsar sobre esta imagen principal, los participantes accederán directamente al formulario de participación de la promoción. Previamente, la propia aplicación comprobará que el usuario es fan de la página, de lo contrario aparecerá una pequeña caja para que el usuario pulse en el “like” de nuestra página.
El diseño final sería el siguiente:

El link para ver las bases legales siempre estará visible al final de la promoción. El botón para participar y los enlaces para ver todas las participaciones así como mi participación también estarán visible por defecto. Sin embargo, más adelante explicaremos cómo ocultarlos o cambiar su aspecto y colocación.

2. Con la segunda opción, usar sólo la descripción de la promoción, no mostraremos ninguna imagen principal en el diseño de nuestra promoción. Por este motivo no es necesario subir ninguna imagen en la opción “Imagen principal de la promoción”. A pesar de esto, en la descripción de la promoción podremos incluir desde el editor imágenes, texto e incluso html y css.

Una vez subida la imagen, elegiremos el tamaño final con el que se mostrará nuestra descripción. El ancho máximo es de 835px y ocupa todo el ancho del diseño de nuestra promo.

El editor html nos permite la opción de maquetar las diferentes imágenes y texto que hayamos elegido para nuestra descripción. De esta forma conseguiremos un mejor resultado en nuestra personalización. Al igual que en el caso anterior, cualquier imagen que añadamos en el cuerpo de nuestra descripción tendrá un enlace para que los usuarios puedan hacer click en cualquiera de ellas y acceder al formulario de participación de nuestra promoción.

3. La última opción es la opción “estándar”, usar la imagen principal y la descripción de la promoción. Primero aparecerá la imagen principal de nuestra promoción y después la descripción de la misma. Como en el caso anterior, podemos elegir entre sólo usar texto en la descripción o añadir alguna imagen extra con el editor.

4. Otra de las opciones que podemos configurar es la elección de una imagen diferente en función del tipo de usuario. Además de poder mostrar una creatividad diferente para fans y no fans también, podemos elegir entre mostrar o no la descripción de la promoción a los usuarios que todavía no son fans de la página. Recomendamos elegir un tamaño de 740px de ancho (lo explicamos detalladamente en este tutorial) el alto queda a nuestra elección.

El resultado final que verían los usuarios que todavía no son fans de nuestra página de Facebook sería el siguiente:

5. También podremos configurar que se muestre un contenido o creatividad diferente para antes y para después de la promoción. En este caso no se vería la caja de “No hay promociones activas” que normalmente se muestra por defecto. Ambos contenidos se configuran con nuestro editor html, con el que podemos añadir imágenes, texto y html.

6. Si queremos personalizar los colores de nuestra promoción lo haremos configurando la sección 2. “Diseño de la promoción”. En esta sección podremos cambiar el color de fondo de la misma o escoger una imagen de fondo.

Elegir un color de fondo con nuestro “selector de color” es muy sencillo e intuitivo. Podemos ver el resultado final en las siguientes imágenes:

 

También podemos cambiar el fondo blanco de la promoción. Esta modificación se puede hacer tanto en la vista de la fan page que sería la primera de las imágenes que os hemos mostrado antes, como en el canvas, que sería la segunda de las imágenes mostradas. Para ello debemos usar la opción “Activar Css personalizada” desde la edición de la promoción. Con esta opción podremos incluir reglas de css para variar y modificar el diseño final de los diferentes elementos. La regla que debemos incluir para cambiar el color de fondo de la parte blanca de la vista de la fan page es:

.main_body {background-color: #B8E3FF}

Hemos usado el mismo código de color hexadecimal (#B8E3FF) que en nuestro selector de color para el fondo de la promoción. En la línea que hemos añadido la parte de ‘#B8E3FF” es el color en código hexadecimal seleccionado. Modificando este código podremos conseguir diferentes colores. Para saber qué código es el color que habéis elegido podéis hacer uso de esta web. Recordad que siempre debe empezar con un ‘#’.

Si también queremos cambiar la parte del canvas de nuestra aplicación, tenemos dos opciones. Con la primera opción conseguimos hacer que una parte del fondo blanco pase a ser azul:

.fbcanvas .wrapper {background-color: #B8E3FF}

Otra opción es poner todas las cajas blancas con el mismo color de fondo o cualquier otro color. Como ya hemos explicado, simplemente tenemos que cambiar el código hexadecimal del color:

.fbcanvas .header_info_container {background-color: #B8E3FF}
.fbcanvas .container {background-color: #B8E3FF}

Todo los detalles sobre personalización de colores e imágenes de fondo están explicados en este tutorial.

7. En el pie de nuestra promoción veremos una serie de enlaces: bases legales, botón de participar, ver mi participación, etc… Si lo deseamos, también los podemos personalizar para que se muestren de una manera diferente.

Para personalizar estos enlaces, seguiremos incluyendo reglas en el campo “Css personalizada” de nuestra promoción. Por ejemplo, si queremos cambiar el color de los enlaces por un tono naranja, podemos añadir lo siguiente en nuestro campo de Css personalizada:

a {color: #FF9933;}

Ahora sólo nos faltaría añadir este color naranja al botón que todavía tiene una tonalidad azul. Para ello podemos usar las siguientes reglas:

p.participate {
background: -webkit-gradient(linear, left top, right bottom, from(#FF9933), to(#FF9933));
background: -moz-linear-gradient(top, #FF9933, #FF9933);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9933', endColorstr='#FF9933');
}

Igual que en caso anterior, lo importante es fijarnos en los códigos de color que empiezan con el ‘#’.

Además, estas reglas están preparadas para darle un efecto degradado al boton. Cada regla lleva dos veces el mismo código de color (#FF9933) y se deben incluir siempre las tres reglas, pues cada una de ellas es para un navegador diferente.

Esto quiere decir que el botón empieza con el color ‘FF9933’ y hace un degradado hasta el mismo color ‘FF9933’. Si queremos conseguir otro efecto podemos, por ejemplo, añadir que acabe en un tono más oscuro de naranja, como el ‘CE5600’:

p.participate {
background: -webkit-gradient(linear, left top, right bottom, from(#FF9933), to(#CE5600));
background: -moz-linear-gradient(top, #FF9933, #CE5600);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9933', endColorstr='#CE5600');
}

8. Como hemos explicado antes, al hacer click sobre cualquier de las imagenes de tu creatividad, ya sea la imagen principal o cualquiera de las imágenes añadidas en la descripción de la promoción, accederás directamente al formulario de participación. Entonces, ¿cómo puedo ocultar estos botones o enlaces de mi promoción? No es recomendable ocultar el enlace de las bases legales, pues debe estar siempre accesible para cualquier usuario que quiera participar en el concurso. Lo que sí explicaremos es cómo ocultar los otros tres botones del pie de tu promoción.

– Se puede ocultar el botón de “enter” de la siguiente manera:

p.participate {display: none;}

– Para ocultar el enlace de “Ver participaciones y votar” se puede hacer así:

.entries_button .vote_button{display: none}

– Para ocultar el enlace de “Ver mi participación” se puede incluir:

.entries_button .my_entry_link{display: none}

– Si queremos ocultar las fechas de inicio y final de participación, debemos incluir:

.register_date{display: none;}

El resultado final con todos los enlaces ocultos será el siguiente:

Otra opción que tenemos es integrar esos enlaces dentro del diseño de nuestra promoción, moviéndolos exactamente donde queramos. Para mover los tres enlaces a la vez podemos incluir la siguiente regla:

#cool_promo_participate {position: absolute; top: 840px; left: 500px}

Para que podáis colocar exactamente los botones en la posición que necesitéis, debéis modificar los valores de top y left que nosotros hemos configurado en 840px y 500px respectivamente. El valor top indica la distancia a la que colocar los elementos desde el principio de la promoción y el valor left indica la posición desde el lado izquierdo. Por lo tanto, jugando con estos dos valores podremos posicionar los enlaces en la posición que deseemos.

Esta opción de color de los enlaces es compatible con la opción anterior de ocultar alguno de ellos. Por ejemplo podremos mostrar sólo el boton de enter y no mostrar los otros dos enlaces con la siguiente regla:

.entries_button .vote_button{display: none}
#cool_promo_participate {position: absolute; top: 840px; left: 500px}
.entries_button .my_entry_link{display: none}

Configuración del formulario de la participación

Ya hemos visto detalladamente como configurar las partes principales de nuestra promoción, pero todavía nos queda una última sección muy importante: el formulario que tendrán que rellenar los usuario para participar.

Al igual que en el caso  anterior, lo primero que podemos hacer es cambiar el color de fondo, para lo que usaremos el mismo selector de color que ya hemos mostrado en la sección anterior. El color de fondo elegido aqui, será comun para todas las pantallas de nuestra promoción.

Cambiando el color de fondo simplemente, el aspecto de nuestro formulario será el siguiente:

Para cambiar también el color de la caja blanca que seguimos viendo, tendremos que usar las siguientes reglas, añadiéndolas como siempre en la sección ‘Css Personalizada’ de nuestra promoción. Como ya hemos explicado, los 6 dígitos precedidos del símbolo ‘#’ son el código de color en hexadecimal.

body .wrapper, .form_container{background-color: #B8E3FF}

Siendo el resultado:

También podemos cambiar los colores de los bordes de los campos de texto a rellenar. Por ejemplo, añadiendo lo siguiente:

input.text, textarea.uniform, input.checkbox, input.file{border: solid 2px #069}

Obtenemos el siguiente formulario:

Para modificar el color y el grosor de los bordes, hay que modificar la parte final:

solid 2px #069

Siendo ‘2px’ el grosor del borde (que se puede cambiar por 1px, 3px, 4px, etc..) y el código #069 es el color como siempre.

Por último en el formulario también podemos modificar la posición del botón de ‘Send’ o ‘Enviar’ de la promoción. Para ello podemos utilizar las siguientes reglas:

form button.participate_button{position: absolute;top: 396px; right: 225px}

Y el botón se presentará de la siguiente manera:

Igual que en la sección anterior explicamos, modificando los valores de ‘top’ y ‘right’ en este caso, el botón se desplazará mas arribo o más a la izquierda según corresponda.

Como habéis podido comprobar, las opciones para personalizar tu promoción y hacerla lo más original y llamativa posible para el usuario son cada vez son más amplias. Si aún después de leer este tutorial hay algún elemento que quieras personalizar en tu promoción y no tengas muy claro cómo hacerlo, no dudes en contactar con nosotros.

Empieza ahora a crear tu Cool Promo personalizada al máximo >>