Fontes personalizadas no Construtor de Sites

Construtor de Funil

Siga estas etapas para saber como personalizar a fonte em seu funil ou site, usando alguns métodos diferentes.

Há fontes personalizadas disponíveis por padrão em um funil. Basta clicar no parágrafo, clicar em configurações de tipografia e, em seguida, selecionar uma família de fontes para fazer isso.

Fontes personalizadas padrão disponíveis em sites

Há quatro elementos que você pode usar em funis para texto com estilos diferentes.

  • Navegue até Sites e edite a página desejada.

  • Adicionar seções, linhas e elementos à sua preferência

  • Clique em um elemento para realçá-lo e modificar o texto com o menu na parte superior

  • Navegue até o botão "Configurações" na parte superior do construtor.

  • Clique em Tipografia.

  • Escolha as fontes nativas de Título e Conteúdo que serão usadas em todo o funil.

  • Clique em um elemento específico para modificar a tipografia do texto.

  • Escolher uma família de fontes

  • Escolha uma fonte do Google

Fontes personalizadas no Construtor de Sites usando CSS

Se você tiver a experiência, o uso de CSS personalizado permite que você personalize completamente o funil / site além das opções padrão. CSS, ou Cascading Style Sheets, é a tecnologia usada pela maioria dos sites para criar páginas da Web visualmente envolventes, incluindo aspectos como layout, cores e fontes.

Observação: talvez seja necessário entrar em contato com um desenvolvedor para obter assistência se não tiver a experiência.

Método 1: Adicionar código

  • Navegue até o construtor de funis e edite o funil.

  • Clique em Configurações > Código de acompanhamento e use um código semelhante a este método:

Método 2: Usando o seletor CSS

Você pode modificar exclusivamente um elemento específico usando o seletor CSS em vez disso

Método 3: Importando com CSS/HTML

Você pode usar a regra de @import CSS ou a tag HTML <link>.

Para fazer uso de HTML no Construtor de Sites use o elemento HTML

Primeiro, explicaremos como importar a fonte desejada. O Google Fonts pode gerar o código automaticamente com base na fonte que você deseja adicionar à sua página da Web. Abra o Google Fonts e siga estas etapas:

  1. Encontre a fonte e clique nela (um cartão com a fonte) e, em seguida, clique em "+ Selecionar este estilo".

  1. No lado direito, você verá um contêiner com o nome "Família selecionada".

  1. Clique em "Incorporar" e escolha <link> ou @import dependendo de onde você precisa adicionar a fonte (em HTML ou CSS).

  1. Copie/cole os códigos que você precisa.

  • Importe as fontes do Google "Muli" e "Quicksand" para as <body> e <h1>, respectivamente.

  • Especifique a família de fontes para cada um dos elementos (<body> e <h1>).

  • Estilize os dois elementos separadamente usando as seguintes propriedades: cor, espessura da fonte, estilo da fonte, tamanho da fonte, altura da linha, espaçamento entre letras e outras propriedades.

Aqui está um exemplo de como isso seria:

.CSS

url @import('https://fonts.googleapis.com/c... ');

url @import('https://fonts.googleapis.com/c... ');

corpo {

família de fontes: 'Muli', sans-serif;

cor: rgba(0, 0, 0, 0,8);

fonte-peso: 400;

altura da linha: 1,58;

espaçamento entre letras: -.003em;

tamanho da fonte: 20px;

preenchimento: 70px;

}

h1 {

família de fontes: 'Quicksand', sans-serif;

peso da fonte: 700;

estilo de fonte: normal;

tamanho da fonte: 38px;

altura da linha: 1,15;

espaçamento entre letras: -.02em;

cor: rgba(0, 0, 0, 0,8);

-webkit-font-smoothing: suavizado;

.HTML

Também é possível importar o Google Fonts usando a tag HTML <link>. Você deve adicioná-lo ao cabeçalho.

Use <h1> como uma tag de título e escreva o conteúdo em uma tag <p>.

Last updated