Como mostrar visualmente as categorias de postagem do blog no cabeçalho Divi
Publicados: 2020-07-15Ao criar seu cabeçalho global, há grandes chances de você incluir um item de menu do blog. Se você não tiver muitas categorias de postagem de blog em seu site, escolher um item de menu de blog pode ser o suficiente. No entanto, se você tiver um conjunto de categorias diferentes e quiser destacar cada uma delas, pode tentar uma abordagem diferente, como mostrar visualmente cada categoria de blog em um menu suspenso.
Neste tutorial, mostraremos exatamente como fazer isso usando o Divi's Theme Builder. Construiremos o menu suspenso usando os elementos e opções embutidos do Divi e o combinaremos com algum código que nos permitirá colocar o menu suspenso dentro do item de menu do blog. 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 cabeçalho global GRATUITAMENTE
Para colocar as mãos no 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!
Como fazer upload do arquivo JSON
Descompacte a pasta compactada que você conseguiu baixar acima. Em seguida, navegue até seu site WordPress> Divi> Divi Library e faça o upload do JSON.
Assim que seu layout for salvo na Biblioteca Divi, você pode navegar até o Divi Theme Builder e importar o layout salvo clicando em 'Adicionar Cabeçalho Global' ou 'Adicionar Cabeçalho Personalizado' e selecionando 'Construir Cabeçalho Global / Personalizado'. Vá para a guia 'Seus layouts salvos' na Biblioteca Divi, selecione o layout que você carregou na etapa anterior e salve todas as alterações do Divi Theme Builder.
Para ter um menu funcional logo de cara, você precisará passar pela primeira parte deste tutorial abaixo; adicionar as classes CSS aos itens de menu em um nível individual. Você também precisará habilitar uma das classes CSS dentro do Módulo de Código, conforme mostrado na parte 5 deste tutorial.
1. Adicionar classe CSS ao item de menu do blog
Vá para Menus na Aparência
Na primeira parte deste tutorial, adicionaremos duas classes CSS personalizadas ao item de menu da página do blog dentro do menu do WordPress. Para fazer isso, navegue até os menus dentro do painel do WordPress.
Habilitar opção de classe CSS
No topo da página, certifique-se de habilitar a opção de classes CSS dentro da opção de tela.
Adicionar classes CSS ao item de menu do blog
Em seguida, encontre o item de menu do seu blog e adicione duas classes CSS a ele. Certifique-se de deixar um espaço entre as classes CSS.
- Classes CSS: primeiro nível primeiro nível-1
2. Crie um cabeçalho personalizado com o Divi's Theme Builder
Vá para Divi Theme Builder
Uma vez que as classes CSS do item de menu estão no lugar, é hora de mudar para Divi. Vá para o Divi Theme Builder e selecione 'Add Global / Custom Header'.
Comece a construir o cabeçalho global
Em seguida, selecione 'Build Global Header' para ser redirecionado ao editor de modelos.
Configurações da seção
Cor de fundo
Dentro do editor de template, você notará uma seção. Abra essa seção e aplique uma cor de fundo branca.
- Cor de fundo: #FFFFFF
Espaçamento
Vá para a guia de design e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar linha # 1
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 de acordo:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 95%
- 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
Adicionar Módulo de Menu à Linha
Selecione o menu
Em seguida, adicione um Módulo de Menu e selecione o menu que você modificou na primeira parte deste tutorial.
Carregar logotipo
Faça upload de um logotipo a seguir.
Configurações de texto do menu
Vá para a guia de design e modifique as configurações de texto do menu da seguinte forma:
- Fonte do menu: Roboto Mono
- Estilo da fonte do menu: maiúscula
- Cor do texto do menu: # 000000
- Tamanho do texto do menu: 18 px
- Espaçamento entre letras do menu: -1px
Configurações do menu suspenso
Altere também a cor da linha do menu suspenso.
- Cor da linha do menu suspenso: #FFFFFF
Configurações de ícones
Em seguida, altere a cor do ícone do menu de hambúrguer nas configurações dos ícones.
- Cor do ícone do menu de hambúrguer: # 000000
Classe CSS
E complete as configurações do módulo adicionando uma classe CSS.
- Classe CSS: menu de categorias
3. Criar design suspenso do blog
Adicionar linha # 2
Estrutura da Coluna
Assim que sua linha, contendo o Módulo de Menu, estiver no lugar, é hora de construir o menu suspenso contendo categorias de blog visual. Para fazer isso, adicione uma nova linha com duas colunas de tamanhos iguais. A linha inteira será o nosso menu suspenso para o item de menu do blog.
Cor de fundo
Abra as configurações de linha e use uma cor de fundo branca.
- Cor de fundo: #FFFFFF
Dimensionamento
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: 80vw (desktop), 100% (tablet e telefone)
- Largura máxima: 50vw (desktop), 100% (tablet e telefone)
Espaçamento
Modifique os valores de preenchimento a seguir.
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Preenchimento esquerdo: 10 px
- Preenchimento inferior: 10 px
Sombra da caixa
Também estamos usando uma sombra de caixa sutil.
- Força do desfoque de sombra da caixa: 30 px
- Cor da sombra: rgba (0,0,0,0.13) (Desktop), rgba (0,0,0,0) (tablet e telefone)
Classe CSS
Em seguida, adicionaremos duas classes CSS à nossa linha. Essas classes CSS (em combinação com algum código posteriormente) nos ajudarão a colocar todo o contêiner de linha dentro do item de menu do blog como uma lista suspensa.
- Classe CSS: dropdown-menu dropdown-menu-1
Posição
Vá para a guia avançada e reposicione a linha também.
- Posição: Absoluta (Desktop), Relativa (Tablet e Telefone)
- Localização: Cima direita
- Deslocamento vertical: 100 px (desktop), 0 px (tablet e telefone)
- Índice Z: 11
Elemento Principal de Ambas as Colunas
Por último, mas não menos importante, complete as configurações de linha adicionando uma linha de código CSS ao elemento principal de cada coluna. Isso nos ajudará a manter a estrutura da coluna em telas menores.
width: 50% !important;
Adicionar Módulo de Texto à Coluna 1
Adicionar nome de categoria
É hora de exibir visualmente as categorias do nosso blog! Adicione um primeiro Módulo de Texto à coluna 1 e adicione o título da categoria à caixa de conteúdo.
Adicionar link de categoria
Em seguida, adicione um link para sua categoria.
Fundo Gradiente
Em seguida, aplique o seguinte fundo gradiente:
- Cor 1: rgba (0,0,0,0,08)
- Cor 2: # 0a0a0a
- Posição inicial: 60%
- Posição final: 60%
- Colocar gradiente acima da imagem de fundo: Sim
Imagem de fundo
Faça upload de uma imagem de plano de fundo de sua escolha. Se você deseja exatamente o mesmo resultado deste tutorial, carregue uma das ilustrações que você encontra na pasta que você baixou no início deste post.
- Tamanho da imagem de fundo: tamanho real
- Repetição da imagem de fundo: repetir X (horizontal)
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: Roboto Mono
- Peso da fonte do texto: negrito
- Cor do texto: #ffffff
- Tamanho do texto: 1,9vw (desktop), 3vw (tablet), 3,5vw (telefone)
- Espaçamento entre letras do texto: -0,1vw
- Altura da linha de texto: 1em
Dimensionamento
Altere as configurações de dimensionamento a seguir.
- Largura: 99%
- Alinhamento do Módulo: Esquerda
Espaçamento
Modifique as configurações de espaçamento também.
- Margem inferior: 10px
- Margem direita: 1% (tablet e telefone)
- Preenchimento superior: 60% (desktop), 40% (tablet e telefone)
- Estofamento inferior: 4%
- Preenchimento esquerdo: 2%
CSS do elemento principal
E complete as configurações do módulo adicionando uma linha de código CSS ao elemento principal do módulo.
cursor: pointer;
Clonar Módulo de Texto e Colocar Duplicado na Coluna 2
Depois de concluir o primeiro Módulo de texto, clone o módulo e coloque a duplicata na coluna 2.
Modificar Módulo de Texto na Coluna 2
Alterar nome e link da categoria
Modifique o título da categoria e o link no módulo duplicado.
Alterar imagem de fundo
Altere a imagem de fundo também. Você pode encontrar a ilustração na pasta de download.
- Repetição da imagem de fundo: sem repetição
Mudar o tamanho
Altere o alinhamento do módulo nas configurações de dimensionamento a seguir.
- Alinhamento do Módulo: Direito
Clone os dois módulos uma vez
Depois de concluir os dois módulos (um em cada coluna), você pode clonar os dois uma vez.
Alterar nomes e links de categorias
Altere os nomes das categorias e links dentro dos módulos duplicados.
Alterar imagens de fundo
Junto com as imagens de fundo. Você pode encontrar as novas ilustrações na pasta que você baixou no início deste post.
- Tamanho da imagem de fundo: Ajustar
- Repetição da imagem de fundo: sem repetição
- Tamanho da imagem de fundo: Ajustar
- Posição da imagem de fundo: canto inferior direito
4. Adicionar código CSS e JQuery
Adicionar Módulo de Código Abaixo do Módulo de Menu na Linha 1
Depois de preencher a linha que contém os nomes das categorias do menu suspenso, adicione um Módulo de código à primeira linha de sua seção, logo abaixo do Módulo de menu.
Adicionar código CSS
Adicione as seguintes linhas de código CSS ao Módulo de Código:
<style>
/* Enable class below once you're done editing the menu */
/*
.dropdown-menu {
visibility: hidden;
}*/
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);
-o-transition: 300ms all cubic-bezier(.4,0,.2,1);
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);
transition: 300ms all cubic-bezier(.4,0,.2,1);
}
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.category-menu .et_pb_menu__menu li {
margin-top: 0px !important;
}
.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;
}
.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995;
}
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white;
padding-top: 25px;
padding-bottom: 5px;
}
.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
</style>
Adicionar código JQuery
Junto com algum coeficiente JQuery que ajudará a colocar a linha, contendo categorias, dentro do item de menu do seu blog. Certifique-se de colocar o código JQuery entre as tags de script, como você pode observar na tela de impressão abaixo.
jQuery(function($){
$(document).ready(function(){
$('.dropdown-menu').each(function(i){
i = i + 1;
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');
var $thisDropdown = $(this).siblings();
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');
});
});
});
5. Habilite a classe CSS assim que terminar de personalizar os itens suspensos do blog
Assim que terminar de personalizar todos os itens do menu suspenso, você terá uma coisa a fazer: ocultar a linha inteira que contém os itens do menu suspenso. Isso, em combinação com uma função de carregamento dentro de nosso código, impedirá que o menu suspenso apareça ao carregar a página. Depois de habilitar essa classe CSS, você não verá mais a segunda linha dentro do Visual Builder, mas poderá acessá-la no modo wireframe e / ou desabilitar temporariamente a classe CSS ao fazer alterações em seu menu suspenso. Para habilitar a classe, remova os colchetes '/ * * /' no início e no final da classe CSS.
6. Adicionando mais menus suspensos de categoria de postagem
Clonar linha de categoria de blog
Se você deseja adicionar mais menus suspensos de categoria, pode clonar toda a linha suspensa que criou.
Acessar linha duplicada no painel de camadas
Como estamos usando posicionamento absoluto na área de trabalho, as linhas serão colocadas umas sobre as outras. Para acessar as linhas individualmente, abra o painel de camadas dentro do Divi Builder e abra as configurações da linha duplicada.
Alterar classe CSS de linha duplicada
Altere a segunda classe CSS em sua linha duplicada. Certifique-se de que o número que você está usando seja consecutivo.
- Classe CSS: dropdown menu dropdown-menu-2
Adicionar classes CSS a itens de menu na aparência
Em seguida, navegue de volta ao menu do WordPress dentro do painel e adicione as seguintes classes CSS a outro item de menu e pronto:
- Classes CSS: primeiro nível primeiro nível-2
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 ser criativo com o cabeçalho Divi e o item de menu do blog. Mais especificamente, mostramos como incluir visualmente categorias de blog como itens de menu suspenso que ficam bem em todos os tamanhos de tela. Essa abordagem o ajudará a destacar cada categoria de blog diferente, ao mesmo tempo em que mantém uma aparência e sensação mínimas à primeira vista. 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.