Personalizar as fotos dos convidados na página do evento – Central de Ajuda

Você pode personalizar o tamanho, o formato, o enquadramento, a borda e a sombra das fotos exibidas na área de convidados da página do evento. Os ajustes são feitos por CSS e alteram a apresentação das imagens, sem substituir os arquivos cadastrados.

Antes de começar

Os convidados precisam estar cadastrados e aparecer na área Palestrantes da página. Se precisar cadastrar convidados ou adicionar suas imagens, consulte o artigo Adicionar palestrantes/convidados no meu evento.

O código abaixo utiliza o seletor da área padrão de convidados verificada no evento de demonstração. Ele não altera a logo, a capa ou as demais imagens da página.

Definir o visual das fotos

O exemplo usa imagens de 144 × 144 px, cantos arredondados de 16 px, borda azul de 4 px e uma sombra suave:

/* FOTOS: espaco reservado para cada imagem */
#convidados div.avatar {
  height: 144px !important;
}

/* FOTOS: tamanho, formato e borda */
#convidados img.avatar {
  width: 144px !important;
  max-width: 100% !important;
  height: 144px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 16px !important;
  border: 4px solid #1968AD !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

Aplicar o código na página

No menu Página do Evento, siga os passos abaixo. Se já houver outras personalizações, preserve o conteúdo do campo e adicione somente os blocos que deseja usar.

Depois, clique em Acessar Página e atualize a página pública para conferir a mudança. Verifique também como o resultado aparece no celular.

Como fica na página

Antes da personalização, as imagens do exemplo aparecem com 100 × 100 px e formato circular:

Depois do código, elas ficam maiores, com borda, cantos arredondados e sombra. O evento de demonstração utiliza avatares com iniciais; os mesmos ajustes de apresentação se aplicam às fotos cadastradas:

Personalizar os valores

O que mudar	Como ajustar
Tamanho	Altere `width` e `height` da imagem. Ajuste também o `height` de `#convidados div.avatar` para reservar o espaço correspondente e manter o nome abaixo da foto.
Formato	Use `border-radius: 50% !important;` para fotos circulares, `16px` para cantos arredondados ou `0` para cantos retos. Para um círculo, mantenha a mesma largura e altura.
Enquadramento	`object-fit: cover` preenche a área sem esticar a imagem, podendo recortar suas bordas. `object-position: center` centraliza o recorte; use `center top` para priorizar a parte superior.
Borda	Na propriedade `border`, altere a espessura, o tipo do traço e a cor. Para retirar a borda, use `border: none !important;`.
Sombra	Ajuste `box-shadow`. Para retirar a sombra, use `box-shadow: none !important;`.

O código do exemplo atinge todas as imagens que utilizam o mesmo seletor na área de convidados. Para desfazer, remova os blocos de fotos de CSS personalizado, preserve os demais códigos e clique em Salvar dados.