La página de ganadores del concurso en la aplicación Cool Promo White Label también se puede personalizar por completo gracias a nuestro sistema de plantillas. En la sección "Diseño" de la promoción encontrarás un campo referente al uso de un html propio para la página de ganadores:


personalizacion-pagina-ganadores.jpg


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.



Plantilla con 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 }}} -->.


A la hora de elegir ganador, Cool Tabs te permite seleccionar grupos de ganadores (Ej. 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 pintarás los diferentes grupos de ganadores de tu promoción 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 }}.


Ejemplo:


¡Tenemos ganadores! {{#list_winners}}
* Ganador {{winner_title}}{{#winner_winners}}
- {{ first_name }}-{{ last_name }}-
{{/winner_winners}}
{{/list_winners}}"



También puedes incluir otros elementos que quieras en esa página, Como un botón de participar, un enlace a las bases legales, etc. en el el caso de que por ejemplo hubieses seleccionado ganadores en una primera fase del concurso y éste 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 promoción
  • 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: 


Ejemplo-pagina-ganadores.png



Aquí tienes la plantilla con html para la página de ganadores:

  


HTML


<html> 
<head> 
<!-- {{{cool_tabs_head}}} --> 
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes"/> 
</head> 
</html> 
<body> 
<div class="wrapper winners_layout">   
<!-- {{{winners}}} --> 
</div> 
<!-- {{{ cool_tabs_body_end }}} --> 
</body>

  

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;
}

  



También puedes personalizar con nuestro sistema de plantillas:


Consulta nuestra Guía de Estilos para crear tu css personalizada >>