Tipografia

O Campo tipografia dá a um widget personalizado exatamente o mesmo painel de tipografia Os widgets principais do Elementor usam: família de fontes com Google Fonts, tamanho, peso, transformação, estilo, decoração, altura de linha, espaçamento entre letras e espaçamento entre palavras, tudo responsivo por dispositivo Dentro dos Master Addons Construtor de widgets, você adiciona o campo uma vez, aponta-o para um seletor CSS, e qualquer pessoa que edite o widget no Elementor pode reestilizar o texto sem tocar no código.

Como todo controle do Widget Builder, o Typography suporta Condições, para que você possa mantê-lo oculto até que uma alternância de estilo personalizado esteja ativada. A saída do token no construtor é executada no Mecanismo de modelo de sintaxe dupla; ambos os guias cobrem os detalhes e limitações.

Ao contrário dos campos de texto ou de cores, o campo Tipografia não usa um shortcode no seu CSS Você diz ao campo qual seletor ele controla, e Elementor escreve os estilos de tipografia para esse seletor por conta própria Um campo, um seletor, feito.

O que o campo Tipografia faz #

Um campo Tipografia renderiza o controle de grupo tipográfico do Elementor no painel de opções do seu widget Quando alguém seleciona o widget e clica no ícone de lápis ao lado do rótulo do campo, um popover abre com o conjunto completo de controles de texto:

• Família de fontes: um menu suspenso pesquisável com fontes do sistema, fontes do Google e quaisquer fontes personalizadas registradas no site.
• Tamanho da fonte: um controle deslizante e entrada com unidades px, em, rem e vw, responsivas por dispositivo.
• Peso da fonte: 100 a 900 mais Normal e Negrito.
• Transformar, Estilo e Decoração: maiúsculas e minúsculas, itálico e oblíquo, sublinhado e linear.
• Altura da linha, espaçamento entre letras e espaçamento entre palavras: cada um com sua própria entrada responsiva.

O ícone do globo também está lá, então o widget pode seguir o site Fontes globais predefinições em vez de um estilo único Isto segue o mesmo padrão dos outros campos do Widget Builder: largue o campo, nomeie-o, conecte-o A única diferença é como ele se conecta, através de um seletor em vez de um shortcode Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget herói restaurante com um <h1 class="bfh-title"> título e a <p class="bfh-lede"> parágrafo de introdução em seu HTML.

Como adicionar um campo Tipografia #

No editor Widget Builder, role o painel de campos à esquerda até encontrar o Tipografia campo, listado com os outros campos de grupo de estilo.

Arraste o campo Tipografia para uma seção abaixo do Conteúdo, Estilo, ou Avançado aba. O estilo é a casa natural para ele, embora funcione em qualquer lugar Uma vez que ele pousa, as opções do campo abrem à esquerda.

Opções de campo tipográfico explicadas #

Selecione o campo Tipografia para abrir suas configurações.

• Etiqueta: o texto mostrado ao lado do controle em Elementor, “Typography” por padrão Com vários campos de tipografia em um widget, use nomes como “Title Typography” e “Button Typography”.
• Nome: o identificador único para o campo Deve conter apenas letras, números, e sublinhados, por exemplo title_typography.
• Descrição: texto auxiliar opcional mostrado abaixo do controle.
• Seletor: o seletor CSS ao qual os estilos de tipografia se aplicam Esta é a única configuração que faz o campo funcionar, abordada na próxima seção.
• Valor padrão: opcionalmente, vincule o campo das predefinições de fontes globais do Elementor a uma das predefinições Primário, Secundário, Texto, O widget começa com essa predefinição aplicada e segue-a se as fontes globais do site mudarem.
• Mostrar etiqueta e Separador: a exibição padrão alterna, além de Condições mais abaixo para mostrar o campo somente quando outro controle tiver um determinado valor.

Aponte o campo no seu seletor #

Aqui está a parte que faz as pessoas se estiverem acostumadas com outras áreas: o campo Tipografia não tem {{shortcode}} para o seu CSS. Um valor de tipografia é um pacote inteiro de propriedades, não um único valor, portanto, não pode imprimir em uma declaração CSS Em vez disso, você preenche o Seletor opção e Elementor gera os estilos para você.

Para o parágrafo de introdução do herói, o seletor é

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} significa o próprio contêiner do widget, portanto, os estilos só atingem esse widget e nunca vazam para o resto da página Sempre inicie o seletor com ele.
• .bfh-lede é o elemento dentro do HTML do seu widget que o controle deve estilizar.
• Para conduzir vários elementos com um controle, separe os seletores com vírgulas e dê a cada um o seu próprio {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

Se você deixar o Seletor vazio, o campo volta para todo o contêiner do widget, que estiliza cada pedaço de texto no widget de uma só vez Isso geralmente é mais do que você deseja Defina o seletor e clique em Salvar configurações.

Sua folha de estilo na guia CSS continua funcionando como o visual inicial do widget Seja qual for font-family ou font-size você escreveu lá permanece no lugar até que um usuário escolha algo no painel; os valores do controle então o substituem.

Use o controle Tipografia no Elementor #

Adicione seu widget personalizado a uma página no Elementor ou recarregue o editor se a página já estiver aberta Selecione o widget e o controle Tipografia aparecerá em seu painel com o rótulo definido, um ícone de globo para fontes globais e um ícone de lápis para valores personalizados.

Escolha uma família e tamanho de fonte #

Clique no ícone de lápis para abrir o popover tipografia O Família o sistema de pesquisa suspensa de fontes e a biblioteca completa do Google Fonts conforme você digita. Abaixo dele, Tamanho assume um valor em, em, rem, ou vw, e o ícone do dispositivo permite definir um tamanho diferente por ponto de interrupção. Um título de desktop de 96px pode cair para 48px em telefones com o mesmo controle.

Defina peso, espaçamento e o resto #

O mesmo popover se mantém Peso, Transformar, Estilo, Decoração, Altura da linha, Espaçamento Letras, e Espaçamento Palavras. Cada alteração cai ao vivo na visualização, para que você possa assistir o cabeçalho apertar para cima como você puxa o espaçamento das letras para baixo Se nada parece mudar, verifique se o seu seletor realmente corresponde a um elemento no HTML widget; um erro de digitação no nome da classe falha silenciosamente.

Ou siga as Fontes Globais do site #

Clique no ícone do globo em vez disso e escolha Primário, Secundário, Texto ou Acento O texto do widget agora segue essa predefinição global, e quando um redesenho troca as fontes do site, esse widget segue sem que ninguém o toque Se você definir um Valor Padrão no campo, esse link já está ativo quando o widget é descartado pela primeira vez em uma página.

Em nosso exemplo, o título é trocado por uma face de script em 98px, escolhida diretamente da lista de fontes do Google, e a visualização é redesenhada no momento em que a fonte é carregada.

Casos de uso comum #

• Títulos em widgets de heróis e banners onde cada site deseja sua própria fonte de exibição.
• Botões que precisam corresponder à tipografia de botão existente do site.
• Títulos e excertos de cartas com campos separados para cada um, os títulos e o corpo do texto são dimensionados de forma independente.
• Widgets de depoimento e cotação onde a citação pega uma serifa em itálico e a atribuição permanece na fonte do corpo.
• Widgets voltados para o cliente onde os editores devem reestilizar o texto livremente sem nunca abrir o CSS.

Dicas para trabalhar com o campo Tipografia #

• A opção Seletor é toda a conexão. Não há shortcode tipográfico para colar em seu CSS. Defina o seletor e deixe o Elementor escrever os estilos.
• Sempre inicie o seletor com {{WRAPPER}}. Sem ele os estilos se aplicam a cada partida na página, não apenas ao seu widget Em uma lista separada por vírgulas, cada parte precisa da sua própria {{WRAPPER}}.
• Mantenha seus estilos básicos na guia CSS. Eles são como o widget se parece em uma nova gota; o controle apenas substitui o que o usuário realmente muda.
• Um campo por função de texto. Um campo de título, um campo de corpo e um campo de botão dão aos editores um controle limpo Um campo apontado para todo o widget achata tudo para um único estilo.
• Use padrões de fontes globais para sites clientes. Vincular o campo ao Primário ou Secundário mantém os widgets personalizados em sintonia com o sistema de design do site desde o primeiro dia.

Perguntas frequentes #

Embrulhando #

O campo Tipografia do construtor de widgets entrega aos editores o painel que eles já conhecem dos próprios widgets do Elementor, com o Google Fonts, tamanhos responsivos e predefinições globais, em qualquer elemento do seu widget personalizado Nomeie o campo, defina o Seletor como {{WRAPPER}} além da classe do seu elemento, e cada decisão de fonte sai da sua folha de estilo e entra no painel. Combine-o com o Campo fronteiriço e o Campo texto para construir um painel de widgets que cubra conteúdo e estilo em um só lugar Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.