1. Introducción.
La página de ganadores del concurso de un concurso creado con la aplicación Cool Promo White Label se puede modificar por completo, gracias a nuestra personalización avanzada. En la sección "Diseño de la campaña" encontrarás un campo referente al uso de un html propio para la página de ganadores:
Recuerda que también puedes editar el html de la página de ganadores desde la previsualización, así podrás ir modificando el propio html y la css, guardando y viendo el resultado directamente.
Personaliza el html para la página de ganadores.
Hay dos {{etiquetas de handlebars}} que deberás incluir siempre: <!-- {{{ cool_tabs_head }}} --> entre las etiquetas <head></head> y <!-- {{{ cool_tabs_body_end }}} --> al final del <body>. Sin ellas nuestro html no funcionará. Además de la variable específica relativa a los ganadores: <!-- {{{ winners }}} -->.
Para personalizar la página de ganadores, puedes incluir las siguientes variables:
- {{{ winners_landing_title }}}: título de la página de ganadores.
- {{{ winners_landing_header }}}: creatividad en página de ganadores.
- {{{ winners_landing_image_url }}}: imagen principal en página de ganadores
- {{{ winners_landing_url }}}: URL a página de ganadores
A la hora de elegir ganador, Cool Tabste permite seleccionar grupos de ganadores, para repartir distintos premios. Por ejemplo: Ganadores premio A, Ganadores premio B... Por ello, al personalizar la página de ganadores puedes incluir el iterador {{{ #list_winners }}} sobre esos grupos de ganadores con el que podrás pintar los diferentes grupos de ganadores de tu campaña o concurso.
Además, dentro de {{{ #list_winners }}} puedes utilizar la variable {{{ winner_title }}} para pintar todos los grupos de ganadores con su título correspondiente y el iterador {{{ #winner_winners }}} para incluir cada ganador de cada grupo de ganadores, junto con las variables del nombre y los apellidos de los ganadores: {{{ first_name }} {{{ last_name }}.
No debes confundir {{{ winners_landing_title }}}, el título de la página de ganadores, con {{{ winner_title }}}, que permite pintar el título de cada grupo de ganadores. Así, puedes tener varios winners_tittle y, en cada uno, poner un título y una descripción, con uno o varios ganadores.
Ejemplo:
¡Tenemos ganadores!
{{{#list_winners}}}
<div>{{{winner_title}}}</div>
<ol>
{{{#winner_winners}}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{{/winner_winners}}}
</ol>
{{{/list_winners}}}
Igualmente, puedes iterar y mostrar cada uno de los suplentes o reservas, con la variable {{{#winner_alternates}}}:
Ejemplo:
¡Tenemos suplentes!
{{{#list_winners}}}
<ol>
{{{#winner_alternates}}}
<li> {{{ first_name }}} {{{ last_name }}} </li>
{{{/winner_alternates}}}
</ol>
{{{/list_winners}}}
Además puedes utilizar la variable {{{winners_landing_body}}} para pintar la descripción personalizada de la página de ganadores.
Este sería el HTML:
<!DOCTYPE html>
<html {{{ cool_tabs_html_attributes }}} >
<head>
<!-- {{{cool_tabs_head}}} -->
</head>
<body {{{ cool_tabs_body_attributes }}} >
<div>
{{{winners_landing_body}}}
</div>
<div>
¡Tenemos ganadores!
{{#list_winners}}
<div>{{winner_title}}</div>
<ol>
{{#winner_winners}}
<li> {{ first_name }} {{ last_name }} </li>
{{/winner_winners}}
</ol>
{{/list_winners}}
</div>
<!-- {{{ cool_tabs_body_end }}} -->
</body>
</html>
También puedes incluir otros elementos, como un botón de participar, un enlace a las bases legales, etc. en el caso de que, por ejemplo, hubieses seleccionado ganadores en una primera fase del concurso y este continúe. Estos elementos deben incluir las siguientes clases para su correcto funcionamiento:
- x_cool_tabs_participate_button = Enlace al formulario de participación.
- x_cool_tabs_share_button = Enlace a compartir la campaña.
- x_cool_tabs_participations_link = Enlace al listado público de participantes.
- x_cool_tabs_legal_options_button = Enlace para ver las bases legales.
Ejemplo de página de ganadores personalizada:
Y la CSS personalizada del ejemplo:
.winners_layout{ font-family: 'Helvetica'; color: #fff; width: 100%; height: 810px; background: url('https://d3t4cctm88txy4.cloudfront.net/assets/pictures/c9f7838095cb11e6b604952aab10bb91/content_winners.png') no-repeat; } .winner_0 .x_winner_name{ position: absolute; left: 33%; top: 59%; font-size: 12px; } .winner_1 .x_winner_name{ position: absolute; left: 33%; top: 58%; font-size: 12px; } .x_winner_header{ font-family: 'Helvetica'; color: #fff; } .full_section .action_row{ display: none; } .participate_button span{ color: white!important; font-size: 18px; } .actions_row .m_actions{ display: none; } .wrapper{ text-align: center; margin: 0 auto; width: 810px; background-color: #fff; } .x_winner_avatar img{ width: 59px; height: 59px; border-radius: 50%; } .x_winner_date{ display :none; } .winner_0{ position: absolute; top: 14.5%; left: 33.6%; } .winner_1{ position: absolute; top: 19.6%; left: 33.6%; } .winners_layout{ overflow: hidden; } .x_alternates_header{ z-index: 1; position: absolute; top: 31%; left: 0; right: 0; font-family: 'Helvetica'; color: #fff; } .x_alternate_list{ background-color: darkgoldenrod; overflow: hidden; border: 1px solid #cdcdcd; padding: 15px; position: absolute; width: 560px; top: 31%; left: 25%; padding-top: 40px; right: 0; font-family: 'Helvetica'; color: #fff; } .x_winner_list{ overflow: hidden; padding: 15px; } .x_winner_list li, .x_alternate_list li{ list-style: none; float: left; width: 50%; } .x_winner_avatar{ display: block; margin-bottom: 10px; } .x_alternates_header{ clear: both; }
2. Otras especificaciones.
Si tienes cualquier consulta, no dudes en contactar con nosotros a través de help@cool-tabs.com o a través del chat de nuestra página web.
3. Contenido relacionado.
También puedes modificar con nuestra personalización avanzada:
- La página que aparece tras participar >>
- Los mensajes que se comparten en Facebook y en Twitter >>
- El encabezado del listado de participantes y de la página del participante individual >>
Consulta nuestra Guía de Estilos para crear tu css personalizada >>
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.