Como customizar um sorteio no seu site utilizando CSS

Hoje vamos apresentar um breve tutorial de como você pode utilizar CSS para customizar seus sorteios e interagir facilmente com seu website.

CSS significa Cascading Style Sheets, isso define como o site (ou app de sorteios) está sendo exibido em HTML. Os aplicativos da Wishpond permitem você criar seu próprio CSS para deixar sua campanha mais parecida com sua marca/empresa ou até mesmo seu público – Você decide!

No exemplo abaixo nós utilizamos a marca Alessando’s. Eles decidiram executar um sorteioexclusivo em seu site.

Veja como ficou o sorteio com o padrão CSS:

image

O sorteio em si não parece que é legal, nós estamos fazendo algumas mudanças então podemos ter um visual legal no site do Alessandros.

Você precisa saber um pouco sobre HTML, já que o CSS é controlado pela base de tags HTML.

O primeiro ponto é você ter o Google Chrome (se não o tiver, recomendamos baixá-lo). O Google Chrome possui a funcionalidade ‘Inpecionar Elemento’, a qual permite você modificar o CSS original no navegador.

Por meio de um clique você pode ver todos os efeitos de um site. Por exemplo, se você clicar com o botão direito do mouse sobre o título da campanha para fazer o teste ( <h1 > tag), você vai poder ver o código CSS:

.social_campaign h1 {font-size: 30px;line-height: 35px;color: #1c2a47;margin-bottom: 20px;word-wrap: break-word;}

A primeira coisa que nós precisamos fazer é mudar a tag <h1>, como a página já possui título, nós vamos esconder o título do concurso:

.social_campaign h1 {font-size: 30px;line-height: 35px;color: #1c2a47;margin-bottom: 20px;word-wrap: break-word;}

Isso ainda não parece muito bom, agora vamos fazer um truque legal! Nós faremos o sorteio inteiro transparente e a fonte branca:

html body {background-color: transparent; color:white;}

Está ficando ainda melhor. Nós apenas precisamos ajustar alguns detalhes.

image

Nós podemos mudar a posição de rodapé e tamanho com o seguinte código:

A tag “Position” faz a posição relativa ao canto do sorteio, de modo que vai ser px 280 para a direita e 270 px para o topo.

.footer {width: 520px;position: absolute;right: 280px;top: 270px;}

image

Precisamos dar a caixa um pouco de estilo. O primeiro passo é deixar o fundo transparente também. Nós já mostramos como fazer isso, mas aqui está o código novamente:

.social_campaign .controls{color:black;background-color: transparent;}#subscribe_box {visibility:hidden;}

Também escondemos a caixa de inscrição, veja abaixo o resultado:

image

.social_campaign .controls .action{background-color: transparent;}.social_campaign .controls .disclaimer {visibility:hidden;}

image

Oh não! O botão sumiu agora! Não tem problema, nós apenas precisamos adicionar um pouco mais de CSS e pronto, terminamos!

.social_campaign .controls .timer {color:white;}

Aqui está o resultado:

image

Definitivamente melhor!

Se você deseja criar um sorteio para o seu site, você pode começar agoramesmo e com 14 dias de graça!

Além disso, se você já estiver executando um sorteio, e gostaria de auxílio para modificar o código CSS, envie um e-mail para suporte@wishpond.comque nós te ajudaremos prontamente!

Agora você já sabe como deixar o sorteio com a cara da sua marca!