Personalizar a área dos Convidados/Palestrantes na página do evento

A área de convidados e palestrantes pode ganhar visuais bem diferentes com CSS. Neste artigo, você encontra três modelos completos, com imagens do resultado e códigos prontos para copiar.

Antes de começar

Os modelos foram preparados para a área padrão de Convidados/Palestrantes da página do evento. Cadastre os convidados e suas fotos antes de aplicar a personalização. Se precisar, veja como adicionar palestrantes/convidados no evento.

Use apenas um dos modelos deste artigo por vez. Antes de aplicar, guarde uma cópia do CSS atual e retire personalizações anteriores que alterem essa mesma área. Preserve os códigos das outras partes da página.

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.

No campo CSS personalizado, cole o código completo de um dos modelos abaixo. Se houver outros códigos, preserve-os e adicione o novo bloco depois do fechamento deles. Clique em Salvar dados.

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

Modelo 1: cartões com retratos circulares

Código:

#convidados > div { margin-top: 24px !important; }
#convidados .row:first-child {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 auto !important;
}
#convidados .row:first-child::before,
#convidados .row:first-child::after { content: none !important; display: none !important; }
#convidados .repeat-item { display: contents !important; }
#convidados .clearfix { display: none !important; }
#convidados [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
#convidados .nome-foto-palestrante {
  box-sizing: border-box !important;
  cursor: pointer;
  margin: 0 !important;
}
#convidados .row:last-child br { display: none !important; }
#convidados .nome-foto-palestrante {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 220px;
  padding: 22px 14px 18px;
  background: #f0f8f6;
  border: 1px solid #d5e8e3;
  border-top: 5px solid #087f8c;
  border-radius: 20px;
}
#convidados div.avatar { width: 112px !important; height: 112px !important; margin: 0 !important; }
#convidados img.avatar {
  width: 112px !important; height: 112px !important;
  max-width: none !important; object-fit: cover;
  border-radius: 50% !important; border: 5px solid #fff;
  box-sizing: border-box; box-shadow: 0 4px 14px #163c421a;
}
#convidados .nome-foto-palestrante p {
  margin: 0 !important; color: #163c42 !important;
  font-size: 16px; font-weight: 700; line-height: 1.35;
}
@media (max-width: 767px) {
  #convidados .row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  #convidados .row:first-child { grid-template-columns: 1fr !important; }
}

Dica Even3: Para adaptar as cores: troque #087f8c para mudar a faixa superior e #f0f8f6 para mudar o fundo dos cartões.

Modelo 2: lista horizontal em duas colunas

Código:

#convidados > div { margin-top: 24px !important; }
#convidados .row:first-child {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 auto !important;
}
#convidados .row:first-child::before,
#convidados .row:first-child::after { content: none !important; display: none !important; }
#convidados .repeat-item { display: contents !important; }
#convidados .clearfix { display: none !important; }
#convidados [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
#convidados .nome-foto-palestrante {
  box-sizing: border-box !important;
  cursor: pointer;
  margin: 0 !important;
}
#convidados .row:last-child br { display: none !important; }
#convidados .row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
#convidados .nome-foto-palestrante {
  display: flex !important; align-items: center;
  gap: 18px; min-height: 124px; padding: 16px;
  text-align: left; background: #fff7ed;
  border: 1px solid #eadccc; border-left: 5px solid #ce633e;
  border-radius: 12px;
}
#convidados div.avatar { width: 88px !important; height: 88px !important; flex: 0 0 88px; margin: 0 !important; }
#convidados img.avatar {
  width: 88px !important; height: 88px !important;
  max-width: none !important; object-fit: cover;
  border-radius: 10px !important; border: 0; box-shadow: none;
}
#convidados .nome-foto-palestrante p {
  margin: 0 !important; text-align: left; min-width: 0; overflow-wrap: anywhere;
  color: #543727 !important; font-size: 17px;
  font-weight: 700; line-height: 1.4;
}
@media (max-width: 640px) {
  #convidados .row:first-child { grid-template-columns: 1fr !important; }
}

Dica Even3: Para adaptar as cores: troque #ce633e para mudar a faixa lateral e #fff7ed para mudar o fundo dos cartões.

Modelo 3: mural de retratos sobre fundo escuro

Código:

#convidados > div { margin-top: 24px !important; }
#convidados .row:first-child {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 auto !important;
}
#convidados .row:first-child::before,
#convidados .row:first-child::after { content: none !important; display: none !important; }
#convidados .repeat-item { display: contents !important; }
#convidados .clearfix { display: none !important; }
#convidados [class*="col-"] {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
#convidados .nome-foto-palestrante {
  box-sizing: border-box !important;
  cursor: pointer;
  margin: 0 !important;
}
#convidados .row:last-child br { display: none !important; }
.conteudo-pagina .tipo-area-3 { background: #101b38 !important; border-color: #101b38 !important; }
.conteudo-pagina .tipo-area-3 h3 { color: #fff !important; }
#convidados .row:first-child { max-width: 672px; gap: 20px !important; justify-items: center; }
#convidados .nome-foto-palestrante {
  position: relative; width: 150px; height: 180px;
  overflow: hidden; border-radius: 16px;
  background: #233356; box-shadow: 0 8px 20px #0003;
}
#convidados div.avatar { width: 150px !important; height: 150px !important; margin: 0 !important; }
#convidados img.avatar {
  display: block; width: 150px !important; height: 150px !important;
  max-width: none !important; object-fit: cover;
  border-radius: 0 !important; border: 0; box-shadow: none;
}
#convidados .nome-foto-palestrante p {
  position: absolute; left: 0; right: 0; bottom: 0;
  box-sizing: border-box; margin: 0 !important;
  padding: 28px 10px 12px; min-height: 74px;
  background: linear-gradient(transparent, #101b38 78%);
  color: #fff !important; font-size: 14px;
  font-weight: 700; line-height: 1.3;
}
@media (max-width: 767px) {
  #convidados .row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  #convidados .row:first-child { grid-template-columns: 1fr !important; }
}

Dica Even3: Para adaptar as cores: troque #101b38 para mudar o fundo da área e a base do degradê. Mantenha contraste suficiente com os nomes em branco.

Trocar de modelo ou voltar ao visual anterior

Para trocar de opção, remova o bloco completo do modelo atual, e cole o código completo do novo modelo. Depois, salve e atualize a página do evento.

Para desfazer a personalização, remova somente o bloco que adicionou para os convidados. Se você já usava outro visual antes, restaure a cópia do CSS que guardou.

Prefira fotos nítidas e com espaço ao redor do rosto. Os modelos recortam as imagens para preencher o espaço sem esticá-las. Confira todos os convidados: nomes mais longos e fotos com enquadramentos diferentes podem precisar de ajustes.

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

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