Usually, a header by default will appear at the top of the participants public list page, as well as in each personal data page. There, you can see the campaign's main image and the campaign's description, besides the "Share" and "Participate" buttons and details on the time zone and the promotion start and end dates. 



You can include a custom header by clicking on the field that is included in the "Promotion design" section (Enable custom header for the participants' list page): 




If you click on that field, all the elements by default that showed up previously won't do it anymore. We can use html to include what we need. If we want the "Share" and "Participate" buttons to remain, we must include the following css classes: 

  • x_cool_tabs_share_button =>Share

  • x_cool_tabs_participate_button => Participate

Example: 


The html included in our header is a map image linked to "Share" and "Participate" when you click on that text:


<div id="canvas" style="position: relative; width: 579px; margin: 0px auto; height: 174px;"><img id="bgImage" style="display: block; position: relative; z-index: 1;" src="https://d1gfwauryv0c0u.cloudfront.net/assets/pictures/e4e118b0c99711e58a08fb0cd9262203/content_encabezado-votos.png"><a style="position: absolute; width: 81px; height: 33px; display: block; z-index: 10; top: 114px; left: 42px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_share_button" target="_blank"></a><a style="position: absolute; width: 84px; height: 25px; display: block; z-index: 10; top: 147px; left: 39px; text-indent: -9999em; border: none; background: url("https://cooltabs.github.io/image-mapify/images/transparent.gif");" href="#" class="x_cool_tabs_participate_button" target="_blank"></a></div>