Como adicionar um rótulo de canto “novo” ou “em destaque” a um item de menu em seu cabeçalho Divi personalizado
Publicados: 2020-06-24Ao construir o cabeçalho do seu site, prestar atenção especial ao comportamento dos visitantes pode ajudar a aumentar as taxas de cliques. Seu cabeçalho não deve apenas ter uma boa aparência, mas também deve ajudar a orientar os visitantes para as páginas mais importantes do seu site. Uma técnica frequentemente usada é adicionar uma frase de chamariz dentro de seu cabeçalho global, mas essa não é a única opção por aí. Você também pode optar por um rótulo de canto nos itens de menu que deseja colocar em destaque. Neste tutorial, mostraremos como adicionar um rótulo “destaque” ou “novo” a itens de menu específicos. Esses rótulos de canto ajudarão a enfatizar os itens do menu na lista, o que aumenta a chance de seus visitantes ficarem curiosos e clicarem. Você também poderá baixar o modelo de cabeçalho global!
Vamos lá.
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no conceito do tutorial em diferentes tamanhos de tela.
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.
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.
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. Adicionar rótulos a itens de menu do WordPress
Vá para Menus na Aparência
A primeira parte deste tutorial é dedicada à configuração dos rótulos dentro do seu menu WordPress. Para fazer isso, navegue até o painel do WordPress> Menus> Abra o menu principal que você está usando ou crie um novo.
Adicionar etiqueta ao item de menu em destaque
A seguir, adicionaremos um rótulo de destaque a um item de menu de nossa escolha, colocando as tags HTML do rótulo na frente do item de menu.
<label class="menu-label featured-label">Featured</label>
Serviços
Adicionar rótulo a novo item de menu
Faremos a mesma coisa para outro item de menu de nossa escolha e alteraremos a classe CSS dentro das tags junto com a cópia do rótulo.
<label class="menu-label new-label">New</label>
Cursos Gratuitos
2. Vá para Divi Theme Builder
Vá para Divi Theme Builder & Add Global Header
Agora que os rótulos foram configurados, é hora de mudar para Divi. Navegue até o Divi Theme Builder do seu site e clique em “Add Global Header”.
Comece a construir do zero
Em seguida, selecione “Build Global Header” para ser redirecionado ao editor de modelos.
3. Construir Cabeçalho Global
Configurações da seção
Cor de fundo
Uma vez dentro do editor de template, você notará uma seção. Abra essa seção e adicione uma cor de fundo. O design do cabeçalho que construiremos vai bem com o Tutor Layout Pack, mas sinta-se à vontade para criar qualquer design de cabeçalho que desejar, desde que inclua o Módulo de Código (mais tarde) nele.
- Cor de fundo: # 2a3749
Espaçamento
Vá para a guia de design da seção e remova todos os preenchimentos padrão superior e inferior nas configurações de espaçamento.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Visibilidade
Por causa da sobreposição que adicionaremos à nossa linha (como você pode notar na visualização), precisaremos definir os overflows da seção como visíveis.
- Excesso horizontal: visível
- Estouro vertical: visível
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Cor de fundo
Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique uma cor de fundo branca.
- Cor de fundo: #FFFFFF
Dimensionamento
Vá para a guia de design e modifique as configurações de dimensionamento de acordo:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
Espaçamento
Aplicaremos alguns valores de preenchimento personalizados às configurações de espaçamento também.
- Enchimento superior: 25px
- Preenchimento inferior: 25 px
- Preenchimento esquerdo: 50 px
- Preenchimento direito: 50 px
Fronteira
Junto com alguns cantos arredondados.
- Todos os cantos: 6px
Sombra da caixa
E uma sombra de caixa sutil.
- Posição vertical da sombra da caixa: 16 px
- Cor da sombra: rgba (0,0,0,0,07)
Transformar Traduzir
A seguir, reposicionaremos a linha usando as configurações de conversão de transformação na guia de design.
- Transform Translate Right: 50px
Transbordamentos
Para garantir que nossos menus suspensos apareçam em tamanhos de tela menores, completaremos as configurações de linha definindo os transbordamentos para visíveis.
- Excesso horizontal: visível
- Estouro vertical: visível
Adicionar Módulo de Menu à Coluna
Selecione o menu
É hora de adicionar o Módulo de Menu. Selecione o menu que você editou na primeira parte deste tutorial.
Carregar logotipo
Faça upload de um logotipo a seguir.
Configurações de texto do menu
Em seguida, vá para a guia de design e altere as configurações de texto do menu da seguinte forma:
- Fonte do Menu: PT Sans
- Cor do texto do menu: # 000000
- Tamanho do texto do menu: 16px
- Alinhamento de Texto: Direito
Configurações do menu suspenso
Modifique a cor da linha do menu suspenso também.
- Cor da linha do menu suspenso: # 007aff
Ícones
Continue alterando a cor do ícone do menu de hambúrguer nas configurações dos ícones.
- Cor do ícone do menu de hambúrguer: # 007aff
Dimensionamento
E complete as configurações do módulo atribuindo uma largura máxima do logotipo às configurações de dimensionamento.
- Largura máxima do logotipo: 40%
Adicionar Módulo de Código à Coluna
Depois de concluir a aparência geral do seu Módulo de Menu, continue adicionando um Módulo de Código logo abaixo dele.
Adicionar código CSS
O código CSS a seguir nos ajudará a definir o estilo dos rótulos do menu individualmente e a criar um design responsivo:
<style>
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;
border-radius: 5px;
font-size: 10px;
padding: 5px 10px;
}
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
.et_pb_menu .et_pb_menu__menu,
.et_pb_menu .et_pb_menu__menu>nav,
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}
.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}
@media all and (min-width: 980px) {
.menu-label {
position: absolute;
top: -10px;
padding: 8px 15px;
}
}
@media all and (max-width: 980px) {
.menu-label {
position: relative;
float: right;
font-size: 12px;
padding: 5px 20px;
}
}
</style>
4. Salve todas as alterações do Theme Builder e o resultado da visualização
Depois de concluir o design do cabeçalho, certifique-se de salvar todas as alterações do Divi Theme Builder antes de visualizar o resultado em seu site!
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Pensamentos finais
Nesta postagem, mostramos como destacar itens de menu específicos dentro do cabeçalho global Divi-built. Mais especificamente, incluímos rótulos de canto em nosso menu WordPress, que são exibidos dentro de um Módulo de Menu. Esta é uma ótima maneira de destacar diferentes itens de menu dentro do seu menu sem criar uma jornada de navegação opressiva. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à 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.