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.