Como adicionar dois botões lado a lado ao cabeçalho global da Divi

Ter frases de chamariz claras em suas páginas é uma necessidade para a maioria dos sites. E que melhor maneira de chamar a atenção para alguns de seus CTAs mais importantes do que colocá-los no cabeçalho? No tutorial de hoje, mostraremos como adicionar dois botões lado a lado ao seu cabeçalho global usando o Divi's Theme Builder. Um dos botões é primário, o outro é secundário. Você também poderá baixar o arquivo JSON do cabeçalho global 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. Vá para Divi Theme Builder e crie um cabeçalho global

Vá para Divi Theme Builder

Comece indo ao Divi Theme Builder e clique em 'Add Global Header'.

Construir Cabeçalho Global

Continue clicando em 'Build Global Header'.

2. Construir Design de Cabeçalho Global

Adicionar nova seção

Espaçamento

Uma vez dentro do editor de template, você notará uma seção. Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.

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

Índice Z

Certifique-se de aumentar o índice z da seção nas configurações de visibilidade também. Isso garantirá que o conteúdo do cabeçalho global apareça no topo de todo o conteúdo da página e da postagem.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Depois de concluir as configurações da seção, adicione uma nova linha à seção usando a seguinte estrutura de colunas:

Dimensionamento

Sem adicionar nenhum módulo, abra as configurações de linha e permita que a linha ocupe toda a largura do contêiner de seção.

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

Espaçamento

Modifique os valores de preenchimento esquerdo e direito da linha também.

• Preenchimento esquerdo: 2vw (desktop), 10vw (tablet e telefone)
• Preenchimento direito: 2vw (desktop), 10vw (tablet e telefone)

Elemento Principal

Para centralizar todo o conteúdo da coluna, adicionaremos essas duas linhas de código CSS ao elemento principal da linha.

display: flex;
align-items: center;

Remova a propriedade de exibição da área de trabalho no tablet e celular.

display: block;

Coluna 1

Fronteira

Continue abrindo as configurações da coluna 1 e adicione uma borda direita apenas na área de trabalho.

• Largura da borda direita: 1 px (desktop), 0 px (tablet e telefone)
• Cor da borda direita: # d8d8d8

Índice Z

Aumente o índice z da coluna também.

• Índice Z: 11

Coluna 2

Elemento Principal

Em seguida, abra as configurações da coluna 2 e adicione as seguintes linhas de código CSS ao elemento principal da coluna para transformá-lo em duas colunas.

display: grid;
grid-template-columns: 50% 50%;

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

É hora de começar a adicionar módulos! Adicione um Módulo de Menu à coluna 1 e selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo a seguir.

Layout

Vá para a guia de design do módulo e certifique-se de que as seguintes configurações de layout sejam aplicadas:

• Estilo: alinhado à esquerda
• Direção do menu suspenso: para baixo

Texto do Menu

Modifique as configurações de texto do menu a seguir.

• Cor do link ativo: # ef6f49
• Fonte do menu: Montserrat
• Peso da fonte do menu: Semi negrito
• Estilo da fonte do menu: maiúscula
• Cor do texto do menu: # 333333 (padrão), # ef6f49 (pairar)
• Tamanho do texto do menu: 0,7vw (desktop), 1,8vw (tablet), 2,5vw (telefone)
• Espaçamento entre letras do menu: 1px

Texto do menu suspenso

Faça algumas alterações nas configurações de texto do menu suspenso também.

• Cor de fundo do menu suspenso: #ffffff
• Cor da linha do menu suspenso: # ef6f49

Ícones

Em seguida, altere a cor do ícone do menu de hambúrguer.

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

Dimensionamento

Adicione também uma largura máxima do logotipo às configurações de dimensionamento.

• Largura máxima do logotipo: 9vw (desktop), 12vw (tablet), 15vw (telefone)

CSS do logotipo do menu

E conclua as configurações do módulo adicionando uma linha de código CSS ao logotipo do menu na guia avançada.

margin-right: 10vw;

Adicionar Módulo de Código à Coluna 1

Adicionar código CSS personalizado ao módulo

O próximo e último módulo de que precisamos na coluna 1 é um Módulo de Código. Adicione as seguintes linhas de código CSS para personalizar o espaço entre os itens de menu:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

Adicionar Módulo de Botão # 1 à Coluna 2

Adicionar cópia

Avance para o próximo módulo! Adicione o primeiro Módulo de Botão e insira uma cópia de sua escolha.

Adicionar Link

Em seguida, adicione um link para o Módulo de botão.

Alinhamento

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

• Alinhamento do Botão: Direito

Configurações de botão

Defina também o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,8 vw (área de trabalho), 1,7 vw (tablet), 2,5 vw (telefone)
• Cor do texto do botão: # 000000
• Cor de fundo do botão: # edeef0 (padrão), # d6d7d8 (pairar)
• Largura da borda do botão: 0 px

• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Montserrat
• Peso da fonte do botão: Semi negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

Conclua as configurações do módulo adicionando alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento direito: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Módulo de botão clone

Depois de concluir o primeiro Módulo de botão, clone-o.

Alterar Link

Abra o Módulo de Botão duplicado e altere o URL.

Alterar Alinhamento

Altere o alinhamento do módulo também.

• Alinhamento do botão: Esquerda

Alterar configurações do botão

Faça algumas alterações nas configurações do botão também.

• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ef6f49 (padrão), # e06945 (pairar)

Escala de Transformação Hover

Conclua as configurações do botão adicionando um efeito de foco de escala de transformação.

• Certo: 110%
• Inferior: 110%

3. Salve as alterações do Theme Builder e o resultado da visualização

Assim que seu cabeçalho global for concluído, salve todas as alterações do construtor de tema e veja o resultado em seu site!

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

Neste tutorial, mostramos como adicionar dois botões lado a lado ao seu cabeçalho global usando o criador de temas Divi. Um dos botões que adicionamos é o principal, o outro é o secundário. Adicionar botões ao seu cabeçalho global ajuda a enfatizar alguns dos CTAs mais importantes do seu site. 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.