Alterar tamanho, cor e fonte das letras na página do evento

Avatar
Alana M
  • Criado em
Seguir

Você pode ajustar o tamanho, a cor e a família das letras da página do evento. Para fazer essas alterações, você precisará utilizar um código CSS. Neste artigo, vamos te explicar o passo a passo necessário.

Escolhendo o que será personalizado

Seletor Onde atua
.wrapper-title-and-time h1 Título principal do evento no cabeçalho da página.
.with-subtitle Títulos das áreas da página, como Sobre o evento, Inscrições e Palestrantes.
.subtitle Subtítulos das áreas, quando preenchidos e exibidos.
.wrapper-title-and-time .info-adicionais-evento Textos de data, horário, local e formato abaixo do título, no cabeçalho do exemplo.

Use apenas os blocos das partes que deseja modificar. Se quiser alterar todas as partes listadas, copie o conjunto completo:

exclamation-mark__1_.png

Onde está marcado de vermelho, você irá substituir pela informação necessária. 

 
/* LETRAS: titulo principal */
.wrapper-title-and-time h1 {
  color: #[CÓDIGO DA COR] !important;
  font-family: [FONTES] !important;
  font-size: [NUMERAÇÃO]px !important;
}

/* LETRAS: titulos das areas */
.with-subtitle {
  color: #[CÓDIGO DA COR] !important;
  font-family: [FONTES] !important;
  font-size: [NUMERAÇÃO]px !important;
}

/* LETRAS: subtitulos */
.subtitle {
  color: #[CÓDIGO DA COR] !important;
  font-family: [FONTES] !important;
  font-size: [NUMERAÇÃO]px !important;
}

/* LETRAS: datas e local no cabecalho */
.wrapper-title-and-time .info-adicionais-evento {
  color: #[CÓDIGO DA COR] !important;
  font-family: [FONTES] !important;
  font-size: [NUMERAÇÃO]px !important;
}
checked__1_.png

Dica Even3: Utilize o site HTML Color Code para encontrar o código das cores.

Ajustando os valores

Propriedade Como usar
color Define a cor das letras. Troque [CÓDIGO DA COR] pelo código da cor desejada, mantendo o #.
font-family Define a fonte. Você pode colocar mais de uma separadas por vírgula. Exemplo: Arial, Helvetica, sans-serif: se a primeira não estiver disponível, o navegador tenta a seguinte. Para nomes com espaços, use aspas, exemplo: 'Trebuchet MS', Arial, sans-serif. Nem todas as fontes estarão disponíveis.
font-size Define o tamanho. Substitua o número, como 30px ou 18px.

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.

avancado-menu.png
  1. Clique em Avançado.
letras-editor.png
  1. No campo CSS personalizado, cole o código escolhido e ajuste os valores indicados no artigo.
  2. Clique em Salvar dados.

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

No exemplo abaixo, o título principal utiliza Arial, tamanho de 32 px e azul escuro. Os textos de data e local utilizam tamanho de 16 px.

letras-cabecalho.png

Outros ajustes de texto

Se precisar, acrescente uma das propriedades abaixo dentro do bloco da parte que deseja personalizar, antes da chave }:

Ajuste Exemplo de propriedade
Negrito font-weight: 700 !important;
Itálico font-style: italic !important;
Espaçamento entre linhas line-height: 1.5 !important;
Alinhamento text-align: center !important; ou text-align: left !important;
play.png E agora? Aprenda a combinar esses códigos com outras personalizações da página.
marketing-de-video.png Treinamento Gratuito Ao Vivo - Even3 Talks: Toda 3ª Quarta-Feira do mês no YouTube da Even3. Confira as edições anteriores clicando aqui. 

Artigos relacionados

Comentários

0 comentário

Artigo fechado para comentários.