1. Introducción.
La página de ganadores del concurso en la aplicación Cool Promo White Label también 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 }}} -->.
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 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 }}.
Ejemplo:
¡Tenemos ganadores! {{#list_winners}}
* Ganador {{winner_title}}{{#winner_winners}}
- {{ first_name }}-{{ last_name }}-
{{/winner_winners}}
{{/list_winners}}"
Además podemos igualmente iterar y mostrar cada uno de los suplentes o reservas, con la variable {{{#winner_alternates}}}:
Ejemplo:
¡Tenemos suplentes! {{#list_winners}}
*{{#winner_alternates}}
- {{ first_name }}-{{ last_name }}-
{{/winner_alternates}}
{{/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 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 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.