Como estilizar o filtro de categoria no módulo de portfólio filtrável do Divi

O módulo de portfólio filtrável do Divi contém muitos elementos e cada um pode ser estilizado individualmente. O filtro é um dos elementos mais úteis, mas às vezes é esquecido. Neste post, veremos como estilizar o filtro de categoria no módulo de portfólio filtrável do Divi. Veremos o que pode ser feito com as configurações padrão e nos aprofundaremos no CSS para ver como estilizá-lo ainda mais.

Vamos começar!

Visualizar

Primeiro, vamos ver o que vamos construir neste tutorial.

Exemplo de filtro de categoria de desktop um

Exemplo de filtro de categoria de telefone um

Exemplo de filtro de categoria de desktop dois

Exemplo de filtro de categoria de telefone dois

Exemplo de filtro de categoria de desktop três

Exemplo de filtro de categoria de telefone três

Dividindo projetos em categorias

Para fazer o melhor uso do filtro de categorias, você precisará dividir seus projetos em categorias que façam mais sentido para seus leitores. Para criar suas categorias, vá para Projetos > Categorias no painel do WordPress.

Aqui, você verá campos para adicionar o nome, slug, categoria pai e descrição. Você também verá sua lista de categorias em uma lista onde poderá editá-las.

Depois de criar suas categorias, certifique-se de escolher aquelas para cada um de seus projetos que fazem mais sentido para o leitor. Para criar seus projetos, vá para Projetos e clique em Adicionar Novo no menu ou na parte superior da página.

Para meus exemplos, criei projetos para uma empresa de reforma de residências. A empresa se concentraria em reformas residenciais, mas também incluiria trabalhos semelhantes para empresas e eles poderiam construir a partir do zero. Para residências, estou usando as categorias Interior e Exterior. Para todos os outros trabalhos, adicionei Corporativo e Construção.

Configurações do módulo de portfólio filtrável

Em nosso exemplo, substituirei a seção de portfólio da página Portfólio do Renovation Layout Pack gratuito por um módulo de portfólio filtrável. Primeiro, vamos ver como estilizar o módulo. Em seguida, estilizaremos o filtro de três maneiras diferentes. Aqui está a página antes de eu fazer as alterações.

Aqui está a página depois de adicionar o Filterable Portfolio Module no lugar das imagens.

Primeiro, vamos estilizar o módulo. Usaremos essas mesmas configurações para todos os três exemplos.

Contente

Na guia Conteúdo, defina a contagem de postagens para 8 e selecione as categorias na lista de categorias incluídas.

• Contagem de postagens: 8
• Categorias incluídas: sua escolha

Elementos

Role para baixo até Elementos e desative Mostrar categorias . Usaremos apenas os títulos e permitiremos que o filtro exiba as categorias.

• Mostrar categorias: Não

Esquema

Em seguida, vá para a guia Design e selecione Grade em Layout . Eu já o havia selecionado para as imagens anteriores, mas o módulo exibe largura total por padrão.

• Esquema: Grade

Texto

Em seguida, role até Texto e defina o alinhamento do texto para o centro. Isso centraliza o filtro e a paginação com o módulo e os títulos com as imagens do projeto.

• Alinhamento de Texto: Centro

Texto do título

Em seguida, role até Texto do título . Altere a Fonte para Kanit e defina a Espessura para Semi Negrito. Defina a Cor para preto.

• Fonte: Kanit
• Peso: Semi Negrito
• Cor: #000000

Altere o tamanho da fonte para 20px para desktops, 18px para tablets e 16px para telefones. Defina o espaçamento entre linhas para 1px e a altura da linha para 1,3em.

• Tamanho: desktop de 20px, tablet de 18px, telefone de 16px
• Espaçamento entre letras: 1px
• Altura da linha: 1,3 em

Texto de paginação

Em seguida, role para baixo até Texto de paginação e altere a Fonte para Kanit. Altere a Cor para preto.

• Fonte: Kanit
• Cor: #000000

Altere o espaçamento entre linhas para 1px. Salve seu trabalho. Agora podemos estilizar o filtro de categoria para nossos exemplos.

• Espaçamento entre letras: 1px

Exemplos de filtro de categoria

Agora, podemos passar para nossos exemplos de Filtro de Categoria. Estou usando dicas de design do pacote de layout.

Exemplo de filtro de categoria um

Nosso primeiro exemplo é o mais simples dos três. Ele usa as configurações básicas e não faz nada extravagante. Funciona bem com o design de layout.

Texto dos critérios de filtro

Na guia Design , role para baixo até Texto dos critérios . Altere a fonte para Kanit. Altere o estilo para TT e a cor para preto.

• Fonte: Kanit
• Estilo: TT
• Cor: #000000

Defina o espaçamento entre linhas para 1px e defina a altura da linha para 1,3em. Isso é tudo para o primeiro. Agora, salve suas configurações e feche o módulo.

• Espaçamento entre letras: 1px
• Altura da linha: 1,3 em

Exemplo de filtro de categoria dois

Nosso segundo exemplo usará um CSS simples para o módulo e a página para criar cantos arredondados e uma sombra de caixa. Este parece o mais diferente.

Texto dos critérios de filtro

Vá para a guia Design e role para baixo até Filter Criteria Text . Altere a fonte para Kanit. Defina a Cor para preto, o Tamanho para 16px e a Altura da linha para 1,5em. O tamanho da fonte funciona bem em todos os tamanhos de tela, portanto, não precisaremos ajustá-lo para tablets ou telefones.

• Fonte: Kanit
• Cor: #000000
• Tamanho: 16px
• Altura da linha: 1,5 em

Módulo CSS

Em seguida, vá para a guia Avançado . Role para baixo até Filtro de portfólio ativo e adicione CSS para a cor de fundo e feche o módulo. Isso altera a cor de fundo do filtro ativo. Qualquer filtro em que o usuário clica muda para essa cor de fundo e o filtro anterior reverte para a cor normal.

• CSS do filtro de portfólio ativo:

  background-color:#ffd000;

CSS de configurações de página

Em seguida, abra as Configurações da página no menu da página. No modal Configurações da página, selecione a guia Avançado e cole o CSS personalizado no campo. Este CSS remove a borda dos itens de filtro, cria um raio de borda de 25px e adiciona 5px de margem entre os itens. Ele também adiciona uma pequena sombra de caixa na parte inferior dos itens e altera a cor da sombra. Feche o módulo e salve suas configurações.

• CSS customizado:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Exemplo de filtro de categoria três

Nosso terceiro exemplo segue ideias de design CSS semelhantes do exemplo anterior. Ele não inclui cantos arredondados e altera as cores da fonte e do plano de fundo ao passar o mouse. Ele também usa CSS para o módulo e a página.

Texto dos critérios de filtro

Vá para a guia Design e role para baixo até Filter Criteria Text . Escolha Kanit para a Fonte , defina o Estilo para TT e a Cor para branco.

• Fonte: Kanit
• Estilo: TT
• Cor: #ffffff

Em seguida, selecione a opção Hover para a cor do texto e altere a cor para preto. Isso cuida das fontes em foco. Vamos lidar com os planos de fundo com CSS. Altere o espaçamento entre letras para 1px e a altura da linha para 1,3em.

• Cor do cursor: #000000
• Espaçamento entre letras: 1px
• Altura da linha: 1,3 em

Módulo CSS

Em seguida, vá para a guia Avançado e role para baixo até Filtro de portfólio ativo . Adicione o seguinte CSS para alterar o plano de fundo do filtro ativo. Feche o módulo.

• CSS do filtro de portfólio ativo:

  background-color:#ffd000

CSS de configurações de página

Por fim, abra as Configurações da página . vá para a guia Avançado e insira o seguinte CSS personalizado . Feche o módulo e salve suas configurações. Isso altera o plano de fundo para preto, adiciona 15px de preenchimento na parte superior e inferior e 30px de preenchimento à esquerda e à direita. Isso redimensiona os itens de filtro para corresponder aos botões no layout e ajuda a criar a mudança de cor para o efeito de foco. O fundo mudará para branco ao passar o mouse.

• CSS customizado:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Resultados

Exemplo de filtro de categoria de desktop um

Exemplo de filtro de categoria de telefone um

Exemplo de filtro de categoria de desktop dois

Exemplo de filtro de categoria de telefone dois

Exemplo de filtro de categoria de desktop três

Exemplo de filtro de categoria de telefone três

Pensamentos finais

Essa é a nossa visão de como estilizar o filtro de categoria no módulo de portfólio filtrável do Divi. O filtro de categoria inclui as mesmas ferramentas de estilo dos outros elementos, para que possa ser facilmente estilizado para funcionar com qualquer layout Divi. Adicionando CSS ao módulo e à página, podemos estilizar o filtro de categoria de várias maneiras exclusivas para se destacar da multidão.

Nós queremos ouvir de você. Você estilizou seu filtro de categoria no módulo de portfólio filtrável do Divi? Deixe-nos saber sobre isso nos comentários.