Como adicionar widgets de menu de categoria de postagem ao rodapé global da Divi
Publicados: 2020-08-12Quando você está construindo um rodapé personalizado dentro do Divi's Theme Builder, há várias maneiras de adicionar itens de rodapé. Você poderia ir para um rodapé baseado em módulo, onde você adiciona itens de rodapé de página dentro de Módulos de Texto com links apropriados, mas você também pode decidir adicionar widgets de rodapé diferentes ao seu design, usando o Módulo da Barra Lateral do Divi, e estilizá-los usando o Divi integrado opções. No tutorial de hoje, mostraremos como fazer a segunda opção. Mais especificamente, mostraremos como adicionar widgets de menu de categoria de postagem ao seu rodapé. O estilo de design que estamos usando combina perfeitamente com o Food Recipes Layout Pack. Começaremos adicionando as diferentes categorias de postagens ao nosso site. Em seguida, construiremos os menus de rodapé dentro do WordPress. A seguir, criaremos nossos widgets e, por último, mas não menos importante, adicionaremos os widgets ao rodapé Divi personalizado dentro do Divi Theme Builder. 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 rodapé global GRATUITAMENTE
Para colocar suas mãos no modelo de rodapé global gratuito, primeiro você precisará 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. Configure as categorias de postagem para o seu site
Vá para suas categorias de postagem
Na primeira parte deste tutorial, vamos ter certeza de que todas as categorias de postagem estão configuradas antes de começar a adicioná-las aos menus de rodapé personalizados. Para fazer isso, navegue até as categorias de postagem dentro do back-end do WordPress.
Configure a estrutura da categoria de postagem de sua escolha
Configure todas as categorias de postagens diferentes que deseja incluir no rodapé, caso ainda não tenha feito isso. Para este tutorial, precisaremos de três grupos diferentes de categorias de postagem, pois incluiremos três widgets de menu de categoria de postagem diferentes em nosso rodapé personalizado.
2. Crie vários menus de categoria WordPress
Vá para os menus
A seguir, criaremos um menu separado para cada grupo de categorias de postagem. Navegue até os menus dentro das configurações de aparência do seu site WordPress.
Criar primeiro menu de rodapé
Adicione um primeiro menu de rodapé e dê a ele um nome reconhecível.
- Nome do menu: Menu de rodapé nº 1
Adicionar categorias de postagem
Adicione seu primeiro grupo de categorias de postagem a este novo menu.
Criar menu de segundo e terceiro rodapé para outras categorias de postagem
Faça o mesmo para dois outros grupos de categorias de postagens.
- Nome do menu: Menu de rodapé nº 2
- Nome do menu: Menu do rodapé nº 3
3. Crie widgets de rodapé
Vá para Widgets
Agora que temos nossas categorias de postagens e menus de categorias de postagens, podemos colocá-los dentro de nossos widgets de área de rodapé. Para fazer isso, navegue até os widgets no back-end do WordPress.
Adicionar Menu de Rodapé nº 1 à Área de Rodapé nº 1
Lá, adicione um primeiro widget de menu de navegação à sua Área de rodapé nº 1. Dentro do menu de navegação, selecione o primeiro menu de rodapé que você criou na parte anterior deste tutorial.
Adicionar Menu de Rodapé nº 2 à Área de Rodapé nº 2
Coloque o segundo menu de categoria de postagem na área do segundo rodapé.
Adicionar Menu de Rodapé nº 3 à Área de Rodapé nº 3
E o menu do terceiro rodapé na área do terceiro rodapé.
Adicionar postagens recentes à área 4 do rodapé
O último widget de que precisamos, que adicionaremos à área do quarto rodapé, é o widget de postagens recentes. Este widget irá mostrar dinamicamente suas 5 últimas postagens recentes como links.
3. Construir rodapé global dentro do Divi Theme Builder
Acesse Your Divi Theme Builder e comece a construir o modelo de rodapé
Agora que nossas categorias de postagens, menus de categorias de postagens e widgets estão prontos, é hora de mudar para o Divi! Vá para o Divi Theme Builder e comece a construir um rodapé global ou personalizado.
Configurações da seção
Cor de fundo
Uma vez dentro do modelo de rodapé, você notará uma seção. Abra essa seção e adicione uma cor de fundo a ela. O estilo que estamos usando neste design combina perfeitamente com o Food Recipes Layout Pack, mas a abordagem funcionará com qualquer tipo de design que você escolher.
- Cor de fundo: # ff7864
Imagem de fundo
Adicione uma imagem de plano de fundo a seguir. Se você quiser usar exatamente o mesmo que está neste tutorial, você pode encontrá-lo na pasta que você pode baixar no início deste tutorial.
- Tamanho da imagem de fundo: Ajustar
Espaçamento
Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior a seguir.
- 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:
Fundo Gradiente
Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique um fundo gradiente.
- Cor 1: rgba (10,10,10,0,05)
- Cor 2: rgba (10,10,10,0,18)
Dimensionamento
Vá para a guia de design da linha e modifique as configurações de dimensionamento da seguinte forma:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Equalize Alturas de Coluna: Sim
- Largura máxima: 1680 px
Espaçamento
Em seguida, remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Configurações da coluna 1
Espaçamento
Em seguida, abra as configurações da coluna 1 e adicione alguns valores de preenchimento personalizado na guia de design.
- Enchimento superior: 5%
- Estofamento inferior: 5%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Fronteira
Estamos usando uma borda direita no desktop também.
- Largura da borda direita:
- Desktop: 2px
- Tablet e telefone: 0px
- Cor da borda direita: # ff7864
Configurações da coluna 2
Espaçamento
Em seguida, abra as configurações da coluna 2 e aplique os seguintes valores de preenchimento a ela:
- Enchimento superior: 5%
- Estofamento inferior: 5%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Adicionar Módulo de Imagem à Coluna 1
Carregar logotipo
É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Carregue um logotipo de sua escolha e estilize-o como quiser.
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo H2
Na segunda coluna, estamos adicionando um Módulo de Texto com algum conteúdo H2 descritivo.
Configurações de texto H2
Vá para a guia de design e altere as configurações de texto H2 de acordo:
- Fonte do Título 2: Cormorant Garamond
- Peso da fonte do cabeçalho 2: médio
- Cor do texto do título 2: #ffffff
- Tamanho do texto do título 2:
- Desktop e tablet: 40px
- Telefone: 35px
- Altura da linha do título 2: 1,3em
Adicionar linha # 2
Estrutura da Coluna
Para a próxima linha. Nesta linha, colocaremos todos os nossos widgets. Escolha 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.
- Cor de fundo: rgba (10,10,10,0,05)
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 máxima: 1680 px
Espaçamento
Remova também todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Espaçamento entre colunas
Em seguida, abra as colunas individualmente e aplique os seguintes valores de preenchimento a cada uma delas:
- Enchimento superior: 5%
- Estofamento inferior: 5%
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Borda da coluna 1
Em seguida, adicionaremos uma borda à coluna 1.
- Largura da borda direita:
- Desktop e tablet: 2px
- Telefone: 0px
- Cor da borda direita: # ff7864
Borda da coluna 2
Estamos usando a mesma borda, com alguns valores responsivos diferentes, para a segunda coluna.
- Largura da borda direita:
- Desktop: 2px
- Telefone e tablet: 0px
- Cor da borda direita: # ff7864
Borda da coluna 3
E por último, mas não menos importante, adicionaremos uma borda direita à terceira coluna também.
- Largura da borda direita:
- Desktop e tablet: 2px
- Telefone: 0px
- Cor da borda direita: # ff7864
Adicionar Módulo da Barra Lateral à Coluna 1
É hora de adicionar nossos widgets de menu de categoria de postagem! Para fazer isso, usaremos o Módulo de barra lateral embutido do Divi. Adicione um à primeira coluna da linha.
Selecione a área de rodapé nº 1
Selecione a área do primeiro rodapé. Isso está vinculado ao nosso primeiro menu de categoria de postagem que criamos.
- Área do widget: área de rodapé nº 1
Layout
Vá para a guia de design do módulo e desative o separador de borda.
- Mostrar separador de borda: Não
Configurações do corpo do texto
Modifique as configurações do corpo do texto também.
- Fonte do corpo: Montserrat
- Peso da fonte do corpo: médio
- Cor do corpo do texto: #ffffff
- Tamanho do corpo do texto: 13px
Espaçamento
E complete as configurações do módulo adicionando algum preenchimento superior e inferior às configurações de espaçamento.
- Enchimento superior: 5%
- Estofamento inferior: 5%
Clone o módulo da barra lateral duas vezes e coloque duplicatas nas colunas 2 e 3
Depois de concluir o primeiro Módulo da barra lateral, você pode cloná-lo duas vezes e colocar as duplicatas nas colunas 2 e 3.
Alterar áreas de rodapé
Modifique a área do widget para cada duplicata para exibir os diferentes menus de categorias de postagem que você criou.
- Área do widget: Área do rodapé nº 2
- Área do widget: área de rodapé nº 3
Adicionar Módulo da Barra Lateral à Coluna 4
Agora, na última coluna, estamos adicionando um novo módulo da barra lateral.
Selecione a área de rodapé nº 4
Neste módulo, estamos selecionando a área do quarto rodapé que criamos contendo nossas postagens recentes.
- Área do widget: Área do rodapé nº 4
Configurações de texto do título
Vá para a guia de design do módulo e modifique as configurações de texto do título da seguinte maneira:
- Fonte do título: Cormorant Garamond
- Cor do texto do título: #ffffff
- Tamanho do texto do título: 30px
Configurações do corpo do texto
Faça algumas alterações nas configurações do corpo do texto também.
- Fonte do corpo: Montserrat
- Peso da fonte do corpo: médio
- Cor do corpo do texto: #dddddd
- Tamanho do corpo do texto: 13px
Espaçamento
E conclua as configurações do módulo, e este tutorial, adicionando algum preenchimento superior e inferior personalizado às configurações de espaçamento do módulo. É isso! Certifique-se de salvar todas as alterações do Divi Theme Builder antes de visualizar o resultado em seu site.
- Enchimento superior: 5%
- Estofamento inferior: 5%
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 combinar o Divi Theme Builder com widgets de rodapé do WordPress e o Divi Sidebar Module. Mais especificamente, mostramos como adicionar widgets de menu de categoria de postagem ao rodapé global para facilitar a jornada de navegação dos visitantes. Essa abordagem o ajudará a definir o estilo dos itens de rodapé usando as opções integradas do Divi, enquanto mantém os menus de rodapé e widgets dentro do backend do WordPress. 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.