Como estilizar a paginação no módulo de portfólio filtrável do Divi

O módulo de portfólio filtrável do Divi é uma maneira excelente e fácil de exibir seu trabalho e projetos em seu site. Você pode usar categorias para criar filtros diferentes para o seu módulo de portfólio e oferece uma maneira fácil de manter um portfólio atualizado sem precisar modificar o design do seu site todas as vezes. Basta adicionar um novo projeto no painel do WordPress e ele será preenchido automaticamente no módulo de portfólio do seu site, desde que seja categorizado corretamente.

Neste tutorial, mostraremos 3 maneiras diferentes de estilizar a paginação no módulo de portfólio filtrável do Divi. Ao personalizar esse design, você pode ajustar o módulo de portfólio ao design geral do seu site e chamar a atenção para o trabalho que deseja exibir.

Vamos começar!

Espiada

Aqui está uma prévia do que vamos projetar

Estilo de paginação um

Estilo de paginação dois

Estilo de paginação três

O que você precisa para começar

Instalar e ativar o Divi

Antes de começarmos, instale e ative o Divi Theme e verifique se você tem a versão mais recente do Divi em seu site.

Adicionar projetos de portfólio

Para que o portfólio seja preenchido com projetos assim que o adicionarmos à nossa página, primeiro precisamos adicionar os projetos no painel do WordPress. Selecione Projetos na barra lateral do painel do WordPress e adicione um novo projeto. Certifique-se de que o projeto tenha uma imagem em destaque e uma categoria para que possa ser filtrada.

Agora, você está pronto para começar!

Como estilizar a paginação no módulo de portfólio filtrável do Divi

Criar uma nova página com um layout pré-fabricado

Vamos começar usando um layout pré-criado da biblioteca Divi. Usaremos a página de portfólio do Painter do pacote de layout do Painter para este design.

Adicione uma nova página ao seu site, dê um título a ela e selecione a opção Usar o Divi Builder.

Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Browse Layouts.

Pesquise e selecione o layout da página do Portfólio do Painter.

Selecione Usar este layout para adicionar o layout à sua página.

Agora estamos prontos para construir nosso projeto.

Adicionar o módulo de portfólio filtrável

Substituiremos o conteúdo do portfólio existente nesta página pelo módulo de portfólio filtrável. Primeiro, exclua a seção de portfólio existente.

Em seguida, insira uma nova seção na página, abaixo da seção “trabalhos recentes”.

Em seguida, adicione uma linha com uma única coluna à seção.

Adicione o módulo de portfólio filtrável à nova linha.

Seu portfólio filtrável deve ser preenchido com seus projetos, desde que tenham sido adicionados à seção de projetos do painel do WordPress.

Configurações de portfólio filtráveis

Agora vamos personalizar o design do portfólio filtrável. Abra as configurações do módulo e altere a contagem de postagens para 6.

• Contagem de postagens: 6

Em elementos, desative Mostrar categorias.

• Mostrar categorias: Não

Vá para a guia Design e abra as configurações de layout. Defina o layout como Grade.

• Esquema: Grade

Em seguida, abra as configurações de sobreposição. Defina a cor do ícone de zoom, a cor da sobreposição de foco e o seletor de ícone de foco da seguinte maneira:

• Cor do ícone de zoom: #fdd23a
• Cor de sobreposição de foco: rgba(61,61,61,0,28)
• Seletor de ícones ao passar o mouse: ícone de adição

Abra as configurações de imagem e adicione uma sombra de caixa de imagem.

Em seguida, defina a cor da sombra.

• Cor da sombra: #f2f2f2

Em seguida, altere as configurações da fonte do título da seguinte maneira:

• Fonte do título: Merriweather
• Peso da fonte do título: Negrito
• Cor do Texto do Título#000000

Defina o tamanho do texto do título e a altura da linha.

• Tamanho do texto do título: 25px
• Altura da linha de título: 2em

Vá para a seção Texto dos critérios de filtro e altere as configurações de fonte da seguinte maneira:

• Fonte dos critérios de filtro: Montserrat
• Peso da fonte dos critérios de filtro: negrito
• Cor do texto dos critérios do filtro: #000000

Agora que a maior parte do design do nosso módulo está concluída, podemos seguir em frente para personalizar os estilos de paginação.

Estilo de paginação um

Para o primeiro estilo de paginação, definiremos uma cor de fonte diferente para a página ativa. Além disso, definiremos o tamanho do texto da paginação para aumentar ao passar o mouse. Vamos começar.

Nas configurações de portfólio filtráveis, abra as configurações de texto de paginação. Personalize a fonte da seguinte forma:

• Fonte de paginação: Montserrat
• Peso da fonte de paginação: Negrito
• Alinhamento do Texto de Paginação: Direita
• Cor do texto da paginação: #000000

Defina o tamanho do texto. Então. use as configurações de foco para aumentar o tamanho do texto ao passar o mouse.

• Tamanho do texto de paginação: 17px
• Tamanho do texto de paginação ao passar o mouse: 21px

Por fim, navegue até a guia Avançado e adicione o seguinte CSS personalizado à seção CSS da página ativa de paginação. Isso habilita a cor amarela na página ativa.

color: #FDD23A !important;

Design final

E aqui está a aparência final do nosso primeiro design.

Estilo de paginação dois

O segundo estilo de paginação que criaremos inclui uma cor de fundo por trás da paginação, alguns efeitos de cores flutuantes e uma cor diferente para a página ativa.

Nas configurações de portfólio filtráveis, abra as configurações de texto de paginação. Personalize a fonte da seguinte forma:

• Fonte de paginação: Merriweather
• Peso da fonte de paginação: Negrito
• Alinhamento do Texto de Paginação: Centro
• Cor do texto da paginação: #9e9e9e
• Cor do texto de paginação ao passar o mouse: #000000

Em seguida, defina o tamanho do texto e a altura da linha.

• Tamanho do texto de paginação: 26px
• Altura da linha de paginação: 2em

Vá para a guia Avançado e adicione o CSS personalizado a seguir à seção CSS de paginação do portfólio. Isso adicionará uma cor de fundo e removerá a borda:

background:#f2f2f2;
border:none;

Por fim, adicione o seguinte CSS à seção CSS da página ativa de paginação para definir uma cor de texto diferente para a página ativa.

color: #000000 !important;

Design final

Aqui está o design final para o nosso segundo estilo de paginação.

Estilo de paginação três

Para nosso design final de paginação, adicionaremos um círculo amarelo atrás da página ativa. Também definiremos uma cor de fonte diferente para a página ativa e ao passar o mouse.

Nas configurações de portfólio filtráveis, abra as configurações de texto de paginação. Em seguida, personalize a fonte da seguinte forma:

• Fonte de paginação: Merriweather
• Peso da fonte de paginação: Negrito
• Alinhamento do Texto de Paginação: Centro
• Cor do texto da paginação: #000000
• Cor do texto de paginação ao passar o mouse: #FDD23A
• Tamanho do texto de paginação: 26px

Vá para a guia Avançado e adicione o seguinte CSS personalizado à seção CSS de paginação do portfólio para remover a borda:

border:none;

Por fim, adicione o seguinte CSS à seção CSS da página ativa de paginação. Este CSS definirá uma cor de texto diferente e um plano de fundo circular para a página ativa.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Design final

Aqui está o design final para o nosso último layout.

Resultado final

Agora vamos dar uma olhada em todos os três designs finais com nossos diferentes estilos de paginação.

Estilo de paginação um

Estilo de paginação dois

Estilo de paginação três

Pensamentos finais

O módulo de portfólio filtrável é fácil de personalizar para se adequar ao design do seu site, e você pode adicionar rapidamente novos projetos no painel do WordPress para manter seu portfólio atualizado. Este módulo é ótimo para designers, artistas, fotógrafos e outros criativos exibirem seu trabalho com belas imagens e navegação fácil. Para mais ideias exclusivas de design de portfólio, confira este tutorial sobre como criar um modelo de projeto de portfólio dinâmico. Você já usou o módulo de portfólio filtrável em seu site? Deixe-nos saber nos comentários!