Como criar um cabeçalho de tema Astra impressionante?

Os cabeçalhos são vitais para qualquer conteúdo da sua página da web, pois atendem não apenas aos leitores, mas também aos mecanismos de pesquisa. Cabeçalhos impressionantes e bem escritos têm o potencial de atrair leitores para sua postagem e aumentar o número de cliques. Os cabeçalhos podem variar de H1 a H6, dependendo da hierarquia do seu conteúdo. O título principal da sua página ou artigo é H1, enquanto H2 são os subtítulos que compõem as seções dos seus documentos. Os cabeçalhos H3 a H6 fornecem subtítulos adicionais em seu documento em H2. Antes de prosseguirmos para como o tema Astra pode ajudá-lo a criar cabeçalhos impressionantes em seu conteúdo, vamos considerar a importância dos cabeçalhos

Tabela de conteúdo:

• Por que os cabeçalhos são importantes para suas páginas da web?
• 1. Identificação do Tópico
• 2. Acessibilidade
• 3. Otimização de mecanismos de pesquisa
• 4. Torna as páginas digitalizáveis
• 5. Usabilidade de dispositivos móveis
• Como criar um cabeçalho impressionante com o tema Astra?
• Prós e contras do uso do tema Astra para cabeçalhos
• Palavras Finais

Por que os cabeçalhos são importantes para suas páginas da web?

Veja por que você deve incluir cabeçalhos em seu texto

1. Identificação do Tópico

Os cabeçalhos desempenham um papel essencial para que os motores de busca e os leitores escolham as palavras-chave que procuram no artigo. O cabeçalho principal do texto ajuda a identificar o tópico do material, e os subtítulos direcionam o leitor para sua área de interesse.

2. Acessibilidade

As pessoas hoje usam principalmente leitores de tela para ler qualquer conteúdo. Os cabeçalhos de qualquer conteúdo são facilmente captados pelos leitores de tela e são essenciais para o uso eficaz dos leitores de tela. Eles também permitem que os leitores pulem de um título para outro para chegar ao tópico desejado.

3. Otimização de mecanismos de pesquisa

Quando os cabeçalhos tornam seu tópico identificável, os mecanismos de pesquisa classificam sua página para consultas de pesquisa. Quanto mais você deixar seus cabeçalhos bem elaborados e preenchidos com palavras-chave apropriadas, mais os mecanismos de busca aumentarão sua classificação.

Aqui está um guia sobre como usar os recursos gratuitos do tema Astra para criar cabeçalhos impressionantes para suas páginas. Siga o procedimento para fazer um cabeçalho de sua escolha.

4. Torna as páginas digitalizáveis

Ao usar cabeçalhos, você torna as páginas o mais digitalizáveis ​​possível. É do conhecimento geral que ninguém lê o artigo inteiro – especialmente linha por linha. É por isso que é importante que as páginas tenham cabeçalhos. De todos os cabeçalhos, o cabeçalho mais importante é o primeiro, pois dá o tom para toda a postagem ou página.

Em seguida vem o subtítulo, pois divide o conteúdo em partes mais adequadas para consumo. Além disso, a estrutura do artigo é mostrada pelos cabeçalhos e subcabeçalhos. Resumindo, o conjunto certo de cabeçalhos significa que você pode atrair o público com seu conteúdo envolvente.

5. Usabilidade de dispositivos móveis

Com o tempo, os dispositivos móveis estão se tornando mais dominantes do que nunca. Não há dúvida de que os sites receberão mais tráfego de dispositivos móveis do que nunca. Portanto, se você corrigir seu conteúdo, certamente ganhará espectadores tanto em dispositivos móveis quanto em computadores.

Resumindo, os cabeçalhos otimizam a página da web não apenas para os leitores, mas também para os motores de busca.

Como criar um cabeçalho impressionante com o tema Astra?

Primeiramente, para acessar o Astra Header Builder, faça login no painel do WordPress e, na barra lateral esquerda, vá para Aparência > Opções do Astra > Construtor de cabeçalho conforme mostrado na imagem abaixo:

Clique nele e você será direcionado para a seção Header Builder no personalizador do WordPress. A interface deve ser semelhante à que temos aqui:

Como você pode ver, o construtor de cabeçalho é dividido em três seções verticais, uma empilhada sobre a outra. Você tem o “cabeçalho principal” no meio com um “cabeçalho acima” na parte superior e “abaixo do cabeçalho” na parte inferior. 

Cada cabeçalho tem seu próprio conjunto de “configurações de cabeçalho”, que você pode acessar clicando no ícone de engrenagem à esquerda do cabeçalho.

A partir daqui, você pode personalizar a altura do cabeçalho, tamanho da borda, plano de fundo, preenchimento e margem.

Além disso, observe como cada cabeçalho é dividido em três seções. Você pode adicionar e remover elementos de cabeçalho dessas seções para torná-las mais funcionais. No momento em que este tutorial foi escrito, você tinha acesso a 12 elementos de cabeçalho:

• Título e logotipo do site
• Menu principal
• Botão 1
• Botão 2 (pro)
• Procurar
• Conta
• HTML1
• HTML2
• Menu Secundário
• Social
• Widget 1
• Widget 2
• Widget 3 (pró)
• Widget 4 (pró)
• Carrinho

Agora, para adicionar um novo elemento de cabeçalho, passe o mouse sobre essa seção e clique no botão “+”. Isso abrirá uma lista de elementos disponíveis. Escolha aquele que deseja usar e ele será adicionado à seção de cabeçalho.

Da mesma forma, basta clicar no botão “x” ao lado do elemento de cabeçalho para remover um elemento de cabeçalho.

Você também pode mover os elementos do cabeçalho entre as seções do cabeçalho simplesmente arrastando e soltando.

Todos os elementos de cabeçalho que você usou aparecerão no menu do lado esquerdo, logo abaixo da guia Geral. Aqui você também encontrará a opção de alterar o tipo de cabeçalho. Os usuários gratuitos só têm a opção “Cabeçalhos transparentes”. No entanto, se estiver usando o Astra Pro, você pode ativar “Sticky Headers”.

A partir daqui, você pode acessar as configurações específicas do elemento de cabeçalho.

Ao lado da aba Geral, temos a aba Design. A partir daqui, você obtém algumas opções básicas de design para alterar a largura e a margem do cabeçalho. Configurações mais avançadas estão disponíveis para usuários do Astra Pro.

O Astra Header Builder também permite ajustar a aparência do cabeçalho do site em diferentes tamanhos de tela, como desktop, celular ou tablet. Para escolher um tamanho de tela diferente e personalizá-lo, use o seletor de dispositivos no canto inferior esquerdo da tela.

Como você pode ver, em uma tela menor, você obtém uma área adicional chamada “Fora da tela”. Isso permite que você economize espaço no cabeçalho e mova algumas coisas para fora da tela que os visitantes podem alternar se e quando necessário.

E isso encerra nosso guia rápido sobre como criar um cabeçalho usando o tema Astra. Quando terminar de adicionar todos os elementos do cabeçalho e fazer as alterações de design necessárias, clique no botão publicar e pronto. 

Seu cabeçalho Astra recém-criado agora está instalado e funcionando em seu site WordPress.

Astra Header Builder: uma rápida visão geral das opções disponíveis

No tutorial acima, criamos um cabeçalho muito básico usando o Astra Header Builder para dar uma ideia de como o recurso funciona. No entanto, existem inúmeras ferramentas e opções no Astra Header Builder para ajudá-lo a criar cabeçalhos mais complexos e impressionantes.

Aqui está uma rápida olhada nas várias opções que você tem à sua disposição:

Cabeçalho Primário

O cabeçalho padrão no Astra é o cabeçalho principal. Ele mostrará um logotipo e também um menu de navegação personalizável com várias configurações de cabeçalho primário no Astra.

Basta instalar o Astra e ir para a seção Cabeçalho para escolher a opção de cabeçalho principal e ir para a personalização. Cabeçalho > Cabeçalho Primário

Você pode usar as seguintes configurações de personalização

Disposição

As configurações de layout gerenciarão a posição do logotipo da sua página. Existem três posições diferentes disponíveis no Astra para o logotipo

Logotipo esquerdo

O logotipo nesta configuração se move para o lado esquerdo do menu de navegação. É um estilo típico de posicionamento de um logotipo.

Logotipo certo

O logotipo nesta configuração se move para o lado direito do menu de navegação.

Logotipo do Centro

O logotipo nesta configuração se move no centro acima do menu de navegação. É uma boa opção no caso de um menu extenso.

Largura

As configurações de largura gerenciam a largura do cabeçalho do texto. Você pode personalizar a largura do cabeçalho como

Largura total

Nas configurações de largura total, seu cabeçalho será esticado em ambas as extremidades e caberá no tamanho da página do navegador.

Largura do conteúdo

Nas configurações de largura do conteúdo, o cabeçalho se ajusta de acordo com a largura do contêiner definida e você pode defini-lo selecionando o seguinte

Global > Contêiner > Largura

Fronteira

Ao selecionar a borda, você pode adicionar uma borda abaixo do cabeçalho e personalizar sua cor e largura.

Cabeçalho móvel

O menu de navegação, em dispositivos responsivos, transforma-se em um hambúrguer. Portanto, o cabeçalho principal desses dispositivos exibirá apenas o menu de hambúrguer e o logotipo. Você pode personalizar o layout do logotipo em relação ao menu nos widgets responsivos.

Pilha

Na opção de pilha, o logotipo ficará acima do menu de hambúrguer. Optar pela pilha pode ser útil se você tiver um logotipo grande.

Em linha

Na opção inline, o logotipo e o menu ficarão alinhados e pode ser uma boa opção no caso de um logotipo pequeno.

Temas de cores

Os cabeçalhos primários podem ser apresentados em várias cores usando o tema Astra. As cores globais estarão disponíveis gratuitamente, mas você precisará usar o plugin addon do Astra Pro para recursos mais avançados. Para usar cores globais no Astra, você precisa ir na guia Aparência, selecionar personalizar, depois global e, por fim, escolher a opção de cores. Aparência > Personalizar > Global > Cores

Tipografia

As configurações de tipografia da página ou site se aplicam automaticamente ao cabeçalho principal com o Astra Theme. Você pode selecionar e personalizar as configurações de tipografia acessando a guia Aparência, em global. 

Aparência > Personalizar > Global > Tipografia

Cabeçalho Transparente

Cabeçalhos transparentes são uma maneira fácil de criar cabeçalhos bonitos e atraentes para sua página. O plano de fundo do cabeçalho principal será definido como transparente e puxará o conteúdo da página para o topo. O conteúdo da página e o cabeçalho principal serão mesclados, o que significa que a parte superior do conteúdo se tornará o plano de fundo do cabeçalho transparente. Por exemplo, se a imagem estiver na seção superior da página, ela subirá e se tornará o plano de fundo do cabeçalho transparente.

Como adicionar um cabeçalho transparente?

O cabeçalho transparente é formulado em duas etapas rápidas para tornar sua página atraente 

Passo 1

Você pode encontrar a opção de cabeçalho transparente no personalizador e depois editá-lo

Aparência > Personalizar > Cabeçalho > Cabeçalho Transparente

Etapa 2

Nas opções de cabeçalho transparente, você pode habilitá-lo para todo o site, escolher a borda na parte inferior, os esquemas de cores e o layout do logotipo

Habilitando no site completo

Se desejar configurações de cabeçalho transparentes para todo o site, você pode ativar esta opção marcando a caixa de seleção. Se você marcar a caixa de seleção, ainda existem algumas regras de exclusão que você pode ativar para postagens ou páginas específicas. Você pode desativar a opção de cabeçalho transparente para as páginas seguintes

Desativar em Arquivos, Pesquisa e em 404

A configuração do cabeçalho transparente pode ser desativada nessas páginas especiais marcando a caixa de seleção.

Desativar na página de índice do blog

A página inicial do seu blog se torna a página de índice do blog se você alterar as configurações da sua página inicial. Para criar uma página de índice de blog, você pode acessar as configurações da página inicial e, na guia “Exibição da sua página inicial”, escolher “Suas últimas postagens”.

Exibição da sua página inicial> Suas últimas postagens

Se você deseja desabilitar as configurações do cabeçalho transparente nesta página de índice do blog, você pode marcar a caixa de seleção para isso.

Desativar nas páginas

Se quiser desabilitar a opção de cabeçalho transparente em todas as páginas, marque a caixa de seleção.

Desativar nas postagens

Se você deseja desabilitar a opção de cabeçalho transparente em todas as postagens, marque a caixa de seleção.

Cores e fundo

Você pode personalizar as configurações de fundo e cor do seu cabeçalho transparente com as seguintes opções disponíveis

• Fundo
• Título do site
• Menu
• Submenu
• Contente

Prós e contras do uso do tema Astra para cabeçalhos

Prós

• A oportunidade para o cabeçalho transparente está disponível
• Os cabeçalhos de largura total e largura do conteúdo estão disponíveis 
• A personalização de cores e tipografia está disponível

Contras

• A opção de cabeçalho fixo não está disponível
• Recursos avançados de cores não estão disponíveis

Palavras Finais

Astra é um dos melhores temas que existem. E, se você estiver usando, então você está no caminho certo para manter seu site.

O tema gratuito do Astra permite criar cabeçalhos bonitos e atraentes para sua página da web. Também estão disponíveis a opção e customização de cabeçalho Transparente, o que pode aprimorar a experiência do visualizador. No geral, muitas opções de personalização de cabeçalho no tema Astra permitem criar um cabeçalho impressionante.