Como economizar espaço no cabeçalho usando ícones de alternância com Divi

A maneira como você projeta seu cabeçalho define o tom para o resto do seu site. É por isso que é importante pensar na maneira como você adiciona elementos e interações. Obviamente, você desejará incluir o básico, como um logotipo e itens de menu, mas há grandes chances de incluir outras frases de chamariz também. No entanto, quanto mais itens você adicionar ao seu cabeçalho, mais complicado ele se tornará. Se você está procurando uma maneira limpa e interativa de exibir diferentes frases de chamariz em seu cabeçalho, você vai adorar este tutorial. Hoje, estamos mostrando como economizar espaço em seu cabeçalho usando ícones de alternância. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo de cabeçalho global GRATUITAMENTE

Para colocar suas mãos no template de cabeçalho global gratuito, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

1. Construir estrutura de cabeçalho

Criar novo modelo de cabeçalho global

Comece acessando o Divi Theme Builder e comece a construir um novo cabeçalho global ou personalizado.

Adicionar Seção # 1

Fundo Gradiente

Uma vez dentro do editor de template, você notará uma seção. Abra as configurações dessa seção e aplique um fundo gradiente.

• Cor 1: #ffffff
• Cor 2: #eaeaea
• Tipo de gradiente: Linear
• Direção do gradiente: 90 graus
• Posição inicial: 50%
• Posição final: 50%

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

Adicione uma sombra de caixa também.

• Cor da sombra: rgba (0,0,0,0,06)

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%
• Alinhamento de linha: centro

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

CSS do elemento principal

Em seguida, vá para a guia avançada e aplique algumas linhas de código CSS personalizadas do elemento principal em diferentes tamanhos de tela. Este código nos ajudará a centralizar verticalmente os itens na área de trabalho.

Área de Trabalho:

display: flex;
place-items: center;

Tablet e telefone:

display: block;

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e aplique algum preenchimento esquerdo e direito.

• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Elemento Principal

Estamos mudando o tamanho de nossa coluna no desktop e trazendo-a de volta para “100%” no tablet e telefone, aplicando algum CSS personalizado ao elemento principal da coluna.

Área de Trabalho:

width: 88% !important

Tablet e telefone:

width: 100% !important;

Configurações da coluna 2

Cor de fundo

A seguir, abriremos as configurações da coluna 2 e alteraremos a cor de fundo para branco.

• Cor de fundo: #FFFFFF

Espaçamento

Adicionaremos alguns valores de preenchimento responsivo às configurações de espaçamento desta coluna também.

• Enchimento superior:
  • Desktop: 50px
  • Tablet e telefone: 20px
• Padding Inferior
  • Desktop: 50px
  • Tablet e telefone: 20px
• Preenchimento esquerdo: 1%
• Preenchimento direito: 1%

CSS do elemento principal

Modificaremos o tamanho da segunda coluna na área de trabalho também. Estamos trazendo isso de volta para “100%” em tamanhos de tela menores.

Área de Trabalho:

display: flex;
place-items: center;
width: 12% !important;

Tablet e telefone:

width: 100% !important;

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

É hora de adicionar módulos, começando com um Módulo de Menu na coluna 1. Selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo a seguir.

Remover cor de fundo

Em seguida, remova a cor de fundo padrão.

Configurações de texto do menu

Vá para a guia de design do módulo e altere as configurações de texto do menu de acordo:

• Fonte do menu: Playfair Display
• Fonte do texto do menu: Playfair Display
• Cor do texto do menu: # 000000
• Tamanho do texto do menu: 19px
• Altura da linha do menu: 1,4em
• Alinhamento de Texto: Direito

Configurações do menu suspenso

Em seguida, altere a cor da linha do menu suspenso.

• Cor da linha do menu suspenso: #ffffff

Configurações de ícones

Altere também as cores dos ícones nas configurações dos ícones.

• Cor do ícone do carrinho de compras: # 000000
• Cor do ícone de pesquisa: # 000000
• Cor do ícone do menu de hambúrguer: # 000000

Dimensionamento

E conclua as configurações do módulo, alterando as configurações de dimensionamento da seguinte forma:

• Largura máxima do logotipo: 200 px
• Largura: 100%
• Alinhamento do Módulo: Centro

Adicione o Módulo Blurb nº 1 à Coluna 2

Deixe a caixa de conteúdo vazia

Para a segunda coluna. Para criar os ícones de alternância, usaremos os Módulos Blurb sem o título e o conteúdo. Começaremos criando o primeiro ícone de alternância e, em seguida, reutilizaremos o módulo para adicionar os outros dois ícones de alternância. Depois de adicionar o Módulo Blurb, certifique-se de que o título e a caixa de conteúdo estejam vazios.

Selecione o ícone

Em seguida, selecione um ícone de sua escolha.

Configurações de ícone

Vá para a guia de design do módulo e altere as configurações do ícone da seguinte forma:

• Cor do ícone
  • Padrão: #dbdbdb
  • Hover: # 000000
• Posicionamento do ícone: topo
• Alinhamento do ícone: Centro
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 200%

Dimensionamento

Modifique as configurações de dimensionamento também.

• Largura do conteúdo: 100%
• Largura: 32%

Elemento principal e CSS da imagem do Blurb

E conclua as configurações do módulo adicionando duas linhas de código CSS às opções CSS personalizadas na guia avançada do Módulo Blurb.

Elemento Principal:

display: inline-block;

Imagem do Blurb:

margin-bottom: 0px !important

Clonar módulo do Blurb duas vezes

Depois de concluir o primeiro ícone de alternância Módulo do Blurb, você pode cloná-lo duas vezes.

Alterar ícone

Certifique-se de alterar o ícone em cada duplicata.

2. Adicionar itens de alternância

Adicionar Seção # 2

Dimensionamento

Agora que definimos a base de nosso cabeçalho, ainda precisamos incluir os itens de alternância. Para fazer isso, adicionaremos uma nova seção logo abaixo da anterior. Abra as configurações da seção e certifique-se de que a altura desta seção seja “0px”. Isso nos ajudará a evitar que a seção ocupe qualquer espaço em nosso design de cabeçalho. A única razão pela qual precisamos desta seção é para mostrar nossos itens de alternância.

• Altura: 0 px

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Posição

E reposicione toda a linha. Tornar esta linha absoluta nos ajudará a evitar que a linha ocupe qualquer espaço no design.

• Posição: Absoluta
• Localização: canto superior direito

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar número de telefone à caixa de conteúdo

É hora de adicionar os itens de alternância! Primeiro, vamos adicionar o número de telefone. Adicione um novo Módulo de texto à coluna 2 e insira o número de telefone na caixa de conteúdo.

Cor de fundo

Adicione uma cor de fundo preta a seguir.

• Cor de fundo: # 000000

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Playfair Display
• Cor do texto: #ffffff
• Tamanho do texto: 27 px
• Alinhamento de Texto: Centro

Dimensionamento

Certifique-se de que a largura também seja 100%.

• Largura: 100%

Espaçamento

Em seguida, adicione alguns valores de preenchimento personalizados às configurações de espaçamento.

• Enchimento superior: 10%
• Estofamento inferior: 10%
• Preenchimento esquerdo: 2%
• Preenchimento direito: 2%

Clonar Módulo de Texto

Depois de concluir o primeiro item de alternância Módulo de texto, clone-o uma vez.

Alterar conteúdo para endereço de e-mail

Altere o conteúdo na caixa de conteúdo.

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 2

Adicionar redes sociais de escolha

Em seguida, adicione um Módulo de Acompanhamento de Mídia Social à coluna 2. Adicione quantas redes sociais desejar.

Alterar a cor de fundo de cada rede social para branco

Em seguida, altere a cor de fundo para branco para cada rede social individualmente.

• Cor de fundo: #FFFFFF

Cor de fundo

Em seguida, volte às configurações gerais do módulo e use uma cor de fundo preta.

• Cor de fundo: # 000000

Alinhamento

Vá para a guia de design do módulo e altere o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Configurações de ícone

Altere a cor do ícone nas configurações dos ícones também.

• Cor do ícone: # 000000

Dimensionamento

Em seguida, aplique uma largura de “100%” às configurações de dimensionamento.

• Largura: 100%

Espaçamento

Aplique um pouco de preenchimento personalizado na parte superior e inferior também.

• Enchimento superior: 10%
• Estofamento inferior: 10%

Fronteira

E complete as configurações do módulo adicionando alguns cantos arredondados às configurações de borda.

• Todos os cantos: 100px

3. Adicionar funcionalidade

Adicionar CSS IDs consecutivos à primeira seção dos módulos do Blurb

Agora que todos os elementos estão no lugar, podemos começar a adicionar o efeito de alternância. A primeira coisa que você precisa fazer é abrir cada módulo do Blurb individualmente e adicionar um CSS ID consecutivo.

• Blurb 1: header-cta-1
• Blurb 2: header-cta-2
• Blurb 3: header-cta-3

Adicionar CSS IDs consecutivos para alternar itens

Faça o mesmo para os módulos de itens de alternância. O número no final do CSS ID deve corresponder ao CSS ID que você usou para os ícones na etapa anterior.

• Módulo de texto 1: cabeçalho-item-1
• Módulo de texto 2: cabeçalho-item-2
• Módulo de seguimento de mídia social: header-item-3

Adicionar posição absoluta a todos os itens de alternância

E vire cada um dos itens de alternância absolutos um por um. Recomendamos que você vá para o modo wireframe para fazer isso.

• Posição: Absoluta
• Localização: Cima direita

Adicionar Módulo de Código à Primeira Coluna da Seção 1

Agora que todos os IDs CSS estão no lugar, podemos adicionar o código para fazer a função de clique funcionar. Adicione um novo Módulo de Código logo abaixo do Módulo de Menu na coluna 1.

Insira o código CSS

Adicione as seguintes linhas de código CSS entre as tags de estilo, como você pode observar na tela de impressão abaixo :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

Insira o código JQuery

Estamos adicionando algum código JQuery personalizado também. Adicione o código entre as tags de script como você pode observar na tela de impressão abaixo .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Tornar Cabeçalho + Alternar Itens Fixos

Tornar a Seção 1 aderente

Por último, mas não menos importante, você também pode deixar o cabeçalho e alternar os itens fixos. Para criar o resultado desejado, você precisa se certificar de que ambas as seções são fixas e a opção “Offset From Surrounding Sticky Elements” está habilitada. Faça a primeira seção pegajosa.

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: Nenhum
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Tornar a Seção 2 aderente

E faça o mesmo para a seção 2. É isso!

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: Nenhum
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como usar os ícones de alternância dentro do seu cabeçalho. Assim que alguém clica em um ícone, um item de alternância aparece, o que ajuda a economizar muito espaço no design do cabeçalho. Essa abordagem se concentra no comportamento do usuário e ajuda a evitar a necessidade de criar um design de cabeçalho opressor. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver alguma dúvida, sinta-se à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.