Como incluir a barra de menu principal no design de sua página Divi

A navegação é uma parte vital da experiência do usuário em seu site. É importante certificar-se de que seus visitantes possam navegar perfeitamente em seu site, sem comprometer a estética. Por padrão, a Barra de Menu Principal do WordPress é colocada no topo de cada página e é considerada separada do design de página que você escolheu seguir. Em muitos casos, porém, incluir seu menu no design geral da página pode trazer resultados impressionantes. Isso dará ao seu site uma aparência mais coerente.

Nesta postagem, vamos mostrar como incluir a barra de menu principal no design de sua página Divi. Esta é uma mudança simples, mas dinâmica, na forma como o menu principal é normalmente exibido, trazendo uma aparência única para qualquer projeto Divi.

Vamos lá!

Inscreva-se no nosso canal no Youtube

Antevisão

Vamos começar dando uma olhada no resultado final em diferentes tamanhos de tela:

Configurações do personalizador de tema

Vá para o Customizador de Tema

Antes de começarmos a construir nosso design, vamos começar com algumas mudanças no Customizador de Tema. Vá para o Painel do WordPress> Aparência> Personalizar .

Salvar imagem de fundo

Já que vamos destacar a barra de menu principal do topo, vamos precisar de algo para cobrir o espaço que normalmente ocupa. Usaremos a seguinte imagem de plano de fundo, então vá em frente e salve-a em seu computador:

Carregar imagem de fundo para configurações gerais

Em seguida, vá para Configurações gerais> Plano de fundo e carregue a imagem para o plano de fundo do seu site.

• Imagem de fundo Strech: ativado
• Posição de fundo: fixa

Configurações da barra de menu principal

Também vamos fundir a barra de menu principal pronta com nosso design Divi. Para fazer isso, precisaremos modificar as configurações da barra de menu principal primeiro. Vá para Cabeçalho e navegação> Barra de menu principal e use as seguintes configurações:

• Altura máxima do logotipo: 100
• Tamanho do texto: 18
• Espaçamento entre letras: -1
• Fonte: Poppins
• Cor do texto: # 333333
• Cor do link ativo: # f55c83
• Cor de fundo: rgba (255,255,255,0)
• Cor de fundo do menu suspenso: #FFFFFF

Adicionar uma nova página

CSS personalizado da página

Para fazer a barra de menu principal se sobrepor ao design de nossa página, precisaremos de um pouco de código CSS. Você pode escolher se deseja que a sobreposição se aplique a todo o seu site ou apenas a uma página em particular. Se você optar por adicioná-lo a apenas uma página, adicione o seguinte código CSS às configurações da página:

#main-header {
margin-top: 140px;
}

Adicionar nova seção

Cor de fundo

Vamos começar com o design! Adicione uma nova página, mude para o Visual Builder e adicione sua primeira seção. Abra as configurações da seção a seguir e adicione 'rgba (255,255,255,0,81)' como a cor de fundo. Isso permitirá que a imagem de fundo do nosso site seja exibida.

Espaçamento

Continue acessando as configurações de Espaçamento e adicione a seguinte margem e preenchimento personalizados:

• Margem superior e inferior: 100px
• Margem esquerda e direita: 60px
• Enchimento superior: 135 px
• Preenchimento inferior: 0 px

Cantos arredondados

Adicione '30px' a cada um dos cantos de sua seção também.

Fronteira

Em seguida, adicione uma borda superior à sua seção:

• Largura da borda superior: 35px
• Cor da borda superior: # 333333

Sombra da caixa

Para terminar, adicione uma sombra de caixa muito sutil.

• Força do desfoque de sombra da caixa: 61 px
• Força de propagação da sombra da caixa: -13px

Adicionar linha # 1

Estrutura da Coluna

É hora de começar a adicionar linhas e módulos! Adicione sua primeira linha usando duas colunas de tamanhos iguais.

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento:

• Tornar esta linha com largura total: Sim
• Equalize a altura das colunas: Sim

Espaçamento

Adicione um pouco de preenchimento personalizado a seguir:

• Preenchimento superior: 250 px (desktop), 50 px (tablet e telefone)
• Preenchimento inferior: 200 px (desktop), 100 px (tablet), 50 px (telefone)
• Coluna 1 Preenchimento esquerdo: 50px (desktop), 0px (tablet e telefone)

Adicionar Módulo de Título de Texto à Coluna 1

Configurações de texto H1

Agora podemos começar a adicionar os módulos. Começaremos com a primeira coluna adicionando um novo título Módulo de texto.

• Fonte do título: Poppins
• Peso da fonte do cabeçalho: médio
• Tamanho do texto do cabeçalho: 120 px (desktop), 80 px (tablet), 58 px (telefone)

Adicionar cor diferente à parte da cópia

Você pode alterar facilmente a cor de uma palavra em seu título, alternando para a guia Texto e adicionando uma cor à palavra de sua escolha usando tags span.

Adicionar Módulo de Texto de Descrição à Coluna 1

Configurações de texto

Logo abaixo do Módulo de Texto anterior, vá em frente e adicione uma descrição do Módulo de Texto usando as seguintes configurações de texto:

• Fonte do texto: Poppins
• Peso da fonte do texto: regular
• Tamanho do texto: 20 px (desktop), 15 px (tablet e telefone)
• Altura da linha de texto: 2em

Espaçamento

Precisaremos de alguma margem extra para este Módulo de Texto:

• Margem superior e inferior: 50px

Adicionar Módulo de Botão à Coluna 1

Configurações de botão

O último módulo desta coluna é um Módulo de botão. Depois de adicionar a cópia do CTA, altere os estilos do botão:

• Use estilos personalizados para botão: Sim
• Cor do texto do botão: #FFFFFF
• Gradient Color 1: # f45085
• Gradient Color 2: # f88c7e
• Direção do gradiente: 137 graus
• Largura da borda do botão: 0 px
• Raio da borda do botão: 40px
• Fonte do botão: Poppins
• Peso da fonte do botão: regular
• Estilo da fonte: maiúsculas

Espaçamento

Abra as configurações de espaçamento a seguir e adicione alguma margem e preenchimento ao seu botão:

• Margem inferior: 100 px (desktop), 20 px (tablet e telefone)
• Preenchimento superior e inferior: 15 px
• Preenchimento esquerdo e direito: 50 px

Sombra da caixa

Por último, mas não menos importante, usaremos uma sombra de caixa muito sutil para criar mais profundidade em nossa página:

• Força do desfoque de sombra da caixa: 55 px
• Força de propagação da sombra da caixa: -4px
• Cor da sombra: rgba (84,84,84,0.25)

Adicionar Módulo de Imagem à Coluna 2

Salvar e fazer upload de imagem

A segunda coluna contém apenas um Módulo de imagem. Estamos usando uma maquete que faz parte do Pacote de Layout de Marketing Digital da Divi. Vá em frente e salve a imagem abaixo em seu computador. Depois de fazer isso, adicione-o ao Módulo de imagem em sua segunda coluna.

Adicionar linha # 2

Estrutura da Coluna

É hora de adicionar a segunda linha! Escolha a seguinte estrutura de coluna para ele:

Cor de fundo da coluna 1

Em seguida, abra as configurações de linha e adicione '#FFFFFF' como a Cor de fundo da coluna 1.

Copiar fundo gradiente do botão

Vamos economizar tempo e copiar o gradiente que já usamos para o Módulo de Botão. Para fazer isso, abra o Módulo de Botão, vá até as configurações do botão, clique com o botão direito do mouse no fundo gradiente e copie-o.

Colar fundo gradiente na coluna 2

Em seguida, volte para as configurações de linha e cole o fundo gradiente na segunda coluna.

Cor de fundo da coluna 3

Para a terceira coluna, estamos usando a cor de fundo '#FFFFFF'.

Dimensionamento

Vá para as configurações de dimensionamento a seguir e altere as configurações:

• Usar largura personalizada: Sim
• Largura personalizada: 2600 px
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Precisaremos de algum preenchimento extra também:

• Preenchimento superior e inferior: 0 px
• Preenchimento superior e inferior da coluna: 30 px

Sombra da caixa

Por último, mas não menos importante, usaremos uma sombra de caixa sutil:

• Força do desfoque de sombra da caixa: 61 px
• Força de propagação da sombra da caixa: -20px

Adicionar Módulo Blurb nº 1

Escolha o ícone

Precisaremos de três módulos do Blurb no total. Vamos começar com um e cloná-lo depois para economizar tempo. Vá em frente e adicione um novo Módulo Blurb à primeira coluna. Depois de adicionar seu conteúdo, selecione um ícone de sua escolha.

Configurações de ícone

Altere as configurações do seu ícone de acordo:

• Cor do ícone: # f55c83
• Posicionamento do ícone: Esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 88 px (desktop e tablet), 50 px (telefone)

Configurações de texto do título

Abra as configurações de texto do título a seguir e faça algumas alterações:

• Fonte do título: Poppins
• Peso da fonte do título: médio
• Tamanho do texto do título: 34 px (desktop e tablet), 23 px (telefone)

Configurações do corpo do texto

O corpo do texto também precisa ser modificado:

• Fonte do corpo: Poppins
• Peso da fonte do corpo: regular
• Tamanho do corpo do texto: 16 px (desktop), 14 px (tablet e telefone)
• Altura da linha corporal: 2em

Espaçamento

E para criar um design mais atraente esteticamente, adicione um pouco de preenchimento:

• Acolchoamento superior e inferior: 100 px
• Preenchimento esquerdo e direito: 50 px (desktop e tablet), 10 px (telefone)

Clone o módulo do Blurb duas vezes e coloque nas colunas restantes

Vá em frente e clone seus módulos Blurb duas vezes. Depois de fazer isso, coloque-os nas colunas restantes.

Altere o módulo do Blurb na coluna 2

Mudar a cor do ícone

O terceiro Módulo do Blurb não precisa de nenhuma alteração, o segundo, no entanto. Comece mudando a cor do ícone para branco.

Mudar a cor do texto

Abra as Configurações de Texto a seguir e altere a Cor do Texto para 'Claro'.

Desativar navegação fixa

Para garantir que a barra de menu principal mantenha seu lugar dentro do design, precisaremos desabilitar a barra de navegação fixa também. Para fazer isso, vá para o Painel do WordPress> Divi> Opções de tema> Desative a opção 'Barra de navegação fixa' e salve as configurações .

Antevisão

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

Pensamentos finais

Nesta postagem, mostramos como incluir de forma criativa a barra de menu principal no design geral da página Divi. Essa abordagem o ajudará a criar uma aparência mais coerente em seu site. Também criamos um exemplo do zero. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!