Um cabeçalho simples é um bloco de texto em um estilo Um cabeçalho duplo divide esse título em duas partes que você pode estilizar por conta própria, de modo que as primeiras palavras e as segundas palavras cada obter a sua própria cor, fundo e tipografia É assim que você construir um título de dois tons como Adições Mestres em uma cor ao lado de Para Elementor em outro, sem tocar em CSS personalizado.
O Título Duplo widget em Complementos Mestres para Elementor embala ambas as partes, um subtítulo opcional e um ícone opcional em um único widget Este guia cobre todas as configurações nas guias Conteúdo e Estilo, usando o mesmo widget que é enviado gratuitamente com os Complementos Mestres.
Aqui está o que você vai acabar com, um título de duas cores com um ícone acima e um subtítulo abaixo:
Antes de começar #
- Elementor instalado e ativo
- Complementos Mestres para Elementor instalados e ativos (guia instalação)
- Uma página ou modelo aberto no editor Elementor
Passo 1: Adicione o widget de cabeçalho duplo #
No editor Elementor, abra o painel de widgets e procure por Título Duplo. Arraste-o para sua página Os widgets Master Addons carregam o emblema “MA”, para que sejam fáceis de localizar na lista Uma vez na página, o editor abre o Editar título duplo painel à esquerda com três guias: Conteúdo, Estilo e Avançado.
Passo 2: Defina o Conteúdo #
O Conteúdo tab é onde você digita o texto e escolhe o layout básico O que cada campo faz:
- Predefinição Estilo escolhe um visual pronto para as duas partes A mudança de predefinições altera a forma como o primeiro e o segundo títulos ficam juntos.
- Alinhamento define todo o bloco para a esquerda, centro ou direita.
- Primeiro Título é a primeira parte do título (por exemplo, “Master Addons”).
- Segundo título é a segunda parte (“For Elementor”).Nessa é geralmente a parte que você destaca com uma cor diferente.
- URL de cabeçalho torna todo o título um link, útil para seções de heróis.
- Subtítulo é a linha de descrição que fica sob o título.
- Habilitar ícone liga um ícone por cima do cabeçalho.
- Etiqueta de título define a tag HTML, H1 até H6. use H1 para o título principal de uma página e H2 para os títulos das seções para que a página mantenha uma estrutura de cabeçalho limpa.
Passo 3: Adicionar um Ícone (Opcional) #
Virar Habilitar ícone para Sim e um Ícone campo aparece. Escolha qualquer ícone da biblioteca ou carregue seu próprio SVG. Pacotes de complementos mestres 8 bibliotecas de ícones premium, portanto, há milhares para escolher sem sair do Elementor O ícone fica acima do título e segue o mesmo alinhamento que você definiu anteriormente.
Etapa 4: Estile o primeiro e o segundo título #
Mudar para o Estilo tab. é aqui que o cabeçalho duplo ganha seu nome Você obtém seções separadas para Primeiro Título e Segundo título, cada um com seus próprios controles:
- Cor do texto para essa parte do título
- Fundo cor por trás dessa parte (é isso que cria o visual em caixa de dois tons)
- Tipografia para família de fontes, tamanho, peso e espaçamento
- Preenchimento e Margem para controlar o espaçamento em torno de cada parte
Como as duas seções são independentes, você pode dar à primeira parte um fundo escuro e à segunda um vermelho, ou combinar exatamente as cores da sua marca Defina o fundo do Segundo Título para um acento de marca e você obterá o efeito de palavra destacada que as pessoas usam nas seções de herói Uma coisa a ser observada: se as duas partes usarem preenchimento diferente, elas podem parecer irregulares, então defina ambos os lados com o mesmo valor quando quiser que as caixas se alinhem.
Etapa 5: Estile o subtítulo #
O Descrição a seção estiliza a linha de subtítulo sob o título Você obtém Cor do texto, Tipografia, e o mesmo Preenchimento e Margem controles. solte a cor para um cinza mais suave para uma legenda normal, ou combine-a com uma das cores de cabeçalho para amarrar o bloco.
Passo 6: Estilo o Ícone #
Se você ativou o ícone, o Estilo Ícone seção controla-o. Defina o Tamanho do ícone em pixels com o controle deslizante e escolha um Cor do ícone para ambos os Normal e Pairar estados. Uma cor de hover separada é um toque agradável quando todo o título é um link.
Quando o título parecer certo, clique Publicar (ou Atualizar) para salvar a página.
Onde o widget de cabeçalho duplo ajuda #
- Secções herói, onde um título de duas cores chama a atenção para a parte que importa.
- Seção títulos isso precisa de uma palavra destacada, como “Our Melhor Trabalho”.
- Páginas de destino, emparelhando um título em negrito com um subtítulo de suporte em um widget.
- Preços ou blocos de recursos, onde o estilo em caixa de dois tons enquadra a manchete.
Perguntas frequentes #
O que é o widget Dual Heading no Elementor?
É um widget Master Addons que divide um cabeçalho em duas partes que você pode estilizar separadamente Cada parte obtém sua própria cor, fundo e tipografia, para que você possa construir um título de duas cores sem escrever nenhum CSS.
Como faço um cabeçalho bicolor no Elementor?
Adicione o widget Master Addons Dual Heading, digite seu texto em Primeiro Título e Segundo Título, em seguida, abra a guia Estilo e defina uma Cor de Texto ou Fundo diferente para cada parte Isso lhe dá um título de duas cores.
Posso adicionar um subtítulo e um ícone ao título?
Sim. O campo Sub Heading adiciona uma linha de descrição sob o título, e a alternância Habilitar ícone coloca um ícone acima dele Ambos têm seus próprios controles de estilo na guia Estilo para cor, tamanho e tipografia.
Qual tag de cabeçalho devo usar?
Defina a Tag de Cabeçalho como H1 para o título principal de uma página e H2 para os títulos das seções A correspondência da tag com a função do cabeçalho mantém sua estrutura de página limpa, o que ajuda tanto os leitores quanto os mecanismos de pesquisa.
Preciso do Elementor Pro para o widget Dual Heading?
No. O widget Dual Heading funciona com a versão gratuita do Elementor, portanto, todas as suas configurações de conteúdo e estilo estão disponíveis sem o Elementor Pro.
