Personalizar a área de Inscrição na página do evento

Transforme a apresentação das entradas na página e deixe essa área com a cara do seu evento com CSS. Neste artigo, você encontra três modelos completos, com imagens do resultado e códigos prontos para copiar.

Antes de começar

Cadastre as entradas no menu Inscrições e mantenha a área Inscrições visível na Página do Evento. Os modelos foram preparados para a área padrão de inscrições, com nome da entrada, preço, prazo e seletor de quantidade. Se precisar, veja como cadastrar entradas para a inscrição no meu evento.

Use um modelo por vez nesta área. Guarde uma cópia do CSS atual antes de editar. Remova personalizações anteriores que alterem esta mesma área e preserve os códigos das outras partes da página.

O CSS altera a aparência. Valores, lotes, disponibilidade, cupons e regras de compra continuam definidos nas configurações de Inscrições.

Dica Even3: Utilize o site HTML Color Code para encontrar o código das cores ou o site24x7 caso você queira identificar o código de uma cor específica.

Aplicar o modelo escolhido

No menu lateral, clique em Página do Evento. Clique em Avançado.

Em CSS personalizado, cole o código completo de um dos modelos abaixo. Se já houver códigos de outras áreas, mantenha-os e adicione o novo bloco depois do fechamento deles. Clique em Salvar dados.

Depois, clique em Acessar Página e atualize a página pública para conferir o resultado.

Modelo 1: bilhetes com faixa lateral

Código:

/* Inscrição: bilhetes com faixa lateral */
#inscricoes .entrada .panel { background:#fffaf0; border:1px solid #ecd8b5; border-left:8px solid #b56022; border-radius:4px 18px 18px 4px; box-shadow:0 5px 16px #75431612; margin-bottom:16px; }
#inscricoes .panel h2 { color:#623716; font-size:21px; }
#inscricoes .preco { color:#874312; font-weight:700; }
#inscricoes .panel-qtd-ingressos { border-left:2px dashed #d8bd95; padding:14px; }
#inscricoes #btn-inscricao-sitebasico { border-radius:8px; }
@media(max-width:767px){ #inscricoes .panel-qtd-ingressos { border-left:0; border-top:2px dashed #d8bd95; } }

Dica Even3: Troque #b56022 para mudar a faixa lateral e #fffaf0 para mudar o fundo dos bilhetes.

Modelo 2: vitrine de cartões

Código:

/* Inscrição: vitrine de cartões */
#inscricoes .entrada { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
#inscricoes .entrada > div { min-width:0; }
#inscricoes .entrada .panel { height:100%; margin:0; background:#f2f5ff; border:1px solid #cbd5f4; border-top:5px solid #4a55b5; border-radius:18px; box-shadow:0 8px 22px #303a7312; }
#inscricoes .panel > .row { margin:0; display:flex; flex-direction:column; }
#inscricoes .panel .vcenter { display:block; float:none; width:100%; padding:0; }
#inscricoes .panel-body { padding:22px; }
#inscricoes .panel h2 { color:#293366; font-size:22px; }
#inscricoes .preco { color:#414ba8; font-size:27px; }
#inscricoes .panel-qtd-ingressos { padding:0 22px 22px; }
#inscricoes #btn-inscricao-sitebasico { border-radius:30px; }
@media(max-width:640px){ #inscricoes .entrada { grid-template-columns:1fr; } }

Dica Even3: Troque #4a55b5 para mudar a faixa superior e #f2f5ff para mudar o fundo dos cartões.

Modelo 3: lista escura com destaque no preço

Código:

/* Inscrição: lista escura com destaque no preço */
#inscricoes .entrada .panel { background:#172538; border:1px solid #33465c; border-radius:0; box-shadow:none; margin-bottom:2px; }
#inscricoes .panel h2 { color:#fff; font-size:20px; }
#inscricoes .panel small, #inscricoes .panel .text-muted, #inscricoes .panel .validade { color:#d2dfed !important; }
#inscricoes .preco { color:#91edcf; font-size:26px; font-weight:700; }
#inscricoes .panel.side-blue { border-left:5px solid #91edcf; }
#inscricoes .panel-qtd-ingressos { padding:12px; }
#inscricoes #btn-inscricao-sitebasico { border-radius:0; }
#inscricoes .panel:focus-within { outline:3px solid #91edcf; outline-offset:2px; }

Dica Even3: Troque #172538 para mudar o fundo e #91edcf para mudar o destaque do preço. Preserve o contraste com os textos.

Trocar de modelo ou voltar ao visual anterior

Para trocar o visual, remova o bloco completo do modelo atual desta área e cole o código completo da nova opção. Salve e atualize a página do evento.

Para desfazer, remova somente o bloco adicionado para esta área. Se você já usava uma personalização, restaure a cópia que guardou. Preserve o CSS das demais áreas.

E agora? Veja como adicionar, combinar e remover códigos CSS na página do evento para organizar suas personalizações.

Treinamento Gratuito Ao Vivo - Even3 Talks: Toda 3ª Quarta-Feira do mês no YouTube da Even3. Confira as edições anteriores clicando aqui.