Fonte

O campo Fonte adiciona um menu suspenso da família de fontes a um widget personalizado que você cria com os Complementos Mestres Construtor de widgets. Os editores escolhem uma fonte do sistema ou uma fonte do Google no Elementor, e o widget a aplica ao elemento que você escolher. Ele altera apenas o tipo de letra. Tamanho, peso e altura da linha permanecem em seu CSS.

Fonte é um dos campos que você pode usar no Widget Builder da versão gratuita O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Fonte faz #

• Adiciona um dropdown pesquisável ao painel do seu widget no Elementor A lista tem um Padrão opção, a Sistema grupo (Arial, Tahoma e assim por diante) e a Google grupo.
• Salva o nome da família como texto, por exemplo Playfair Display.
• Escreve a font-family regra para os elementos que você lista em Seletores CSS. Quando a escolha é uma fonte do Google, o Elementor carrega essa fonte na página para você.
• Também lhe dá um token, como {{ quote_font }}, que imprime o nome da família.

Novo para o construtor? Leia o Visão geral do Widget Builder primeiro, depois volte com um widget aberto.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalados e ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Pull Quote”: um Textarea nomeado quote_text, um campo de texto nomeado quote_author, e um campo de fonte nomeado quote_font isso define o tipo de letra da cotação.

Como adicionar um campo Fonte #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. Clique no Estilo tab e adicione uma seção, por exemplo “Quote Style”.
3. Tipo font na caixa de pesquisa de campo à esquerda.
4. Arrastar Fonte na secção Clique no lápis no campo para abrir as suas definições.

Estilo é onde os editores esperam encontrar opções de fontes, mas o campo também funciona em uma seção Conteúdo ou Avançado.

Opções do campo de fontes explicadas #

• Etiqueta: o texto acima do dropdown em Elementor, por exemplo “Quote Font”.
• Nome: o ID exclusivo do campo e o nome do seu token Utilize apenas letras, números e sublinhados, por exemplo quote_font.
• Descrição: uma dica mostrada sob a queda no Elementor.
• Valor padrão: a família uma nova cópia do widget começa com. Digite o nome exatamente como aparece na lista do Elementor, por exemplo Playfair Display.

Em Configurações comuns você encontrará Mostrar etiqueta, Bloco Etiqueta, Separador e Condições, que funcionam da mesma forma que em outros campos O cenário que faz esse campo funcionar é Seletores CSS.

Aplique a fonte com os Selectores CSS #

Role para baixo para Seletores CSS e clique Adicionar Item. Cada linha tem duas caixas:

• Seletor CSS: o elemento que obtém a fonte Para a citação pull é .pq-quote. Você não precisa digitar {{WRAPPER}}, porque o construtor adiciona para você e mantém a regra dentro deste widget.
• Propriedades CSS: a regra para escrever. {{VALUE}} é substituído pela família escolhida.

font-family: "{{VALUE}}", Georgia, serif;

Uma nova linha vem preenchida com texto de exemplo, .text-1, .text-2 e color: {{VALUE}};. Substitua ambos. Se você sair color na caixa de propriedades, o nome da fonte acaba como um valor de cor e o tipo de letra não muda.

As citações ao redor {{VALUE}} mantenha nomes com espaços, como Playfair Display, funcionando. Georgia, serif é o fallback enquanto a fonte carrega Para estilizar mais elementos, clique em Adicionar item novamente e adicione outra linha.

Deixa a planície Seletor caixa no fundo vazia Em nossos testes escreveu color: Lora; para este campo, que não define um tipo de letra.

Clique Salvar configurações quando terminar.

Por que não colocar o token no painel CSS? #

O token funciona lá. font-family: "{{ quote_font }}", Georgia, serif; imprime o nome certo O problema é carregar Em nossos testes, uma Fonte do Google usada apenas através do token não foi carregada no front-end, então os visitantes viram a fonte de fallback Uma linha de Seletores CSS dá ao Elementor as informações necessárias para carregar a fonte, e a mesma escolha veio corretamente.

Mantenha o token para locais onde você precisa do nome como texto, como uma classe ou um rótulo no HTML.

Use o controle de fonte no Elementor #

Adicione o widget a uma página ou recarregue o editor se a página já estiver aberta Selecione o widget e abra o Estilo guia. Clique no menu suspenso em seu rótulo e comece a digitar para filtrar a lista Cada nome de família é desenhado em seu próprio tipo de letra, o que facilita a escolha.

Escolha uma família e as atualizações de visualização Na página publicada, o Elementor carrega a Fonte do Google junto com os estilos do widget.

Escolhendo Padrão limpa a escolha O widget, em seguida, cai de volta para qualquer fonte seu painel CSS ou conjuntos de temas para esse elemento, então dê ao elemento uma fonte sensível no painel CSS.

Casos de uso comum #

• Puxe citações e depoimentos onde apenas o texto da citação muda de fonte.
• Exiba títulos em widgets de herói ou banner, com o corpo do texto deixado sozinho.
• Números de preços, crachás ou etiquetas que usam uma fonte de exibição de marca.
• Sites de clientes onde os editores devem escolher uma fonte, mas não tocar em tamanhos e espaçamentos.

Dicas para trabalhar com o campo Fonte #

• Use seletores CSS em vez do token para estilo. É isso que faz o Google Fonts carregar.
• Sempre adicione uma pilha de fallback depois {{VALUE}}, como Georgia, serif ou Arial, sans-serif.
• Coloque o tamanho e o peso no painel CSS. O campo Fonte define apenas a família.
• Precisa de controles de tamanho, peso e espaçamento também? O Campo tipografia é um campo Pro que agrupa todos eles.
• Cada fonte do Google adiciona um download. Duas ou três famílias por página é um limite razoável.

Perguntas frequentes #

Embrulhando #

Adicione o campo Fonte a uma seção Estilo, defina uma família padrão e adicione uma linha de Seletores CSS que aponte font-family: "{{VALUE}}" no seu elemento Os editores obtêm uma lista de fontes pesquisável no Elementor, e o Google Fonts carrega na página sem código extra Para estilo de texto completo, consulte o Campo tipografia, e verifique preços para o que cada plano inclui.