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


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