Um guia prático sobre como estilizar a paginação em Divi
Publicados: 2019-03-11A paginação é um dos elementos de um site que muitas vezes é esquecido, especialmente quando se trata de design. E há vários lugares onde a paginação pode ser apropriada para uso em seu site. Basicamente, a paginação (ou um menu de paginação) permite que os usuários naveguem por várias páginas de itens (um arquivo de postagens, por exemplo). Isso é especialmente útil para reduzir o conteúdo da página inicial.
Divi tem vários módulos que incluem paginação (como o módulo da galeria) que podem ser estilizados usando configurações integradas. Alguns desses módulos (como blog e portfólio) herdam a paginação padrão do Divi Theme (ou WordPress), que pode ser simplificado em alguns sites. Mas com a ajuda de um plugin, você pode substituir a paginação de todo o seu tema por um mais complexo. Em seguida, você pode estilizá-lo com CSS da maneira que precisar.
Neste tutorial, vou mostrar como estilizar a paginação em todo Divi. Aqui está o que iremos ver:
- Coisas a considerar ao definir o estilo da paginação em Divi
- Módulo de Styling Divi Gallery e Paginação do Módulo de Portfólio Filtrável
- Estilos de paginação avançados para módulo de galeria e módulo de portfólio filtrável
- Módulo de Estilo de Blog e Paginação de Módulo de Portfólio
- Adicionando paginação complexa a Divi usando o plug-in WP-PageNavi
- Estilo de paginação WP-PageNavi com CSS personalizado
Vamos começar.
Espiada
Esta postagem é principalmente sobre como estilizar a paginação. No entanto, aqui estão alguns estilos de paginação complexos que mostrarei como construir.
Começando
Inscreva-se no nosso canal no Youtube
Para este tutorial, você precisará do seguinte:
- o Divi Theme instalado e ativo.
- Para testar os designs de paginação de diferentes módulos, você precisará de algum conteúdo simulado. Por exemplo, para projetar a paginação do módulo de portfólio (ou portfólio filtrável), você precisará de cerca de 12-16 projetos adicionados ao seu tema para que tenha conteúdo suficiente para permitir que a paginação entre em vigor. Para o módulo da galeria, você também precisará de cerca de 12 a 16 imagens para preencher a galeria.
- Se quiser usar o plug-in WP-PageNavi, você precisará instalar e ativar o plug-in. Este é um plugin gratuito que pode ser baixado do diretório do WordPress de dentro do painel do WordPress do seu site. Simplesmente navegue até Plugin> Adicionar Novo e pesquise WP-PageNavi.
Depois de ter algum conteúdo simulado no lugar, você está pronto para criar uma nova página. No painel do WordPress, navegue até Pages> Add New. Dê a você um título para a página e implante o Divi Builder. Selecione a opção “Construir do zero”. Em seguida, clique em para construir no front end.
Agora você está pronto para começar a testar alguns designs de paginação.
Coisas a considerar ao definir o estilo da paginação em Divi
De modo geral, você provavelmente não vai querer enlouquecer com o design de paginação porque, como qualquer menu de navegação, é importante mantê-lo simples e intuitivo. No entanto, aqui estão algumas coisas que você deve considerar ao projetar a paginação em Divi.
Fonte de paginação
A paginação é um ótimo lugar para se afastar das fontes principais que você está usando no seu site. Você deseja escolher as melhores fontes voltadas para interfaces de usuário e navegação. E como a paginação contém principalmente números, você deseja ter certeza de que a fonte exibe todos os números com altura e largura iguais (o que os especialistas em tipografia chamam de forro e tabular). Alguns dos meus favoritos conservadores incluem Oxygen, Nunito Sans e Source Sans Pro. E se você tiver muitas páginas em sua paginação, talvez precise liberar algum espaço escolhendo uma fonte condensada como Fjalla One ou Roboto Condensed.
Estilo de fonte de paginação
Você também pode experimentar alguns estilos de fonte para definir sua paginação. Por exemplo, você pode usar o estilo de fonte maiúscula para tornar os links “próximo” e “anterior” mais pronunciados e iguais à altura dos números das páginas. No entanto, adicionar o estilo de fonte sublinhado pode ser um pouco redundante, considerando que os links já estão em um menu de navegação.
Espaçamento entre letras de paginação
O espaçamento entre letras é uma ótima maneira de adicionar um pouco mais de espaçamento horizontal à paginação. Isso pode adicionar um elemento de design agradável e fazer a navegação se destacar.
Alinhamento de Texto de Paginação
No Divi, você pode alinhar facilmente sua paginação à esquerda, ao centro ou à direita da página. Portanto, não se esqueça disso sempre que estiver projetando sua página da web.
Espaço clicável
É importante ter espaço clicável suficiente para seus links de paginação. Por padrão, isso será bastante pequeno. Você pode aumentar o espaço clicável usando um texto maior ou aumentando a altura da linha. Mas você também pode adicionar algum preenchimento em torno desses links com algum CSS.
Tamanho do Texto de Paginação
O tamanho do texto de paginação normalmente é bastante pequeno. Provavelmente, isso evita que os usuários desviem a atenção do conteúdo da página. No entanto, ter um tamanho de texto maior pode aumentar o espaço clicável do link de paginação e torná-lo mais perceptível para os usuários. Eu gosto de usar uma unidade de comprimento vw para texto de paginação maior, de modo que ele se adapte perfeitamente ao navegador e ao conteúdo.
Altura da linha de paginação
Como a paginação normalmente fica em uma linha, você pode adicionar um pouco mais de altura de linha aos links para adicionar espaço clicável adicional.
Pagination Text Shadow
A sombra do texto pode distrair se usada incorretamente. Melhor deixá-lo de fora, a menos que você planeje mantê-lo sutil. Também pode ser usado para adicionar um brilho criativo ao seu texto, se você quiser esse tipo de coisa.
Pagination Active Page
Este aspecto da paginação é importante para permitir que os usuários saibam em que página eles estão ao navegar. Deve haver um contraste claro entre o estilo do link da página ativa e os links da página não ativa. Por padrão, Divi usará a cor de destaque principal definida no Personalizador de temas como a cor do link da página ativa no Divi. No entanto, você pode substituir isso com a linha de CSS.
Para módulos que possuem paginação, Divi possui opções de design integradas para estilizar diferentes elementos da paginação. Além disso, você pode adicionar facilmente alguns trechos de CSS na guia avançada para ter ainda mais controle sobre o design em um local conveniente.
Mas para paginação no nível do tema, você pode obter uma solução complexa usando o plugin WP-PageNavi com CSS customizado (mais sobre isso mais tarde).
Por enquanto, vamos começar com como estilizar a paginação nos Módulos Divi.
Módulo de Styling Divi Gallery e Paginação do Módulo de Portfólio Filtrável
Com o Divi Builder ativo em uma nova página, crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione um módulo de portfólio filtrável à linha. Conforme mencionado anteriormente, certifique-se de ter 12-16 projetos criados para que você possa ver a paginação.
Nas configurações de portfólio filtráveis, atualize o seguinte:
Número das postagens: 4 (para que você possa ver mais links de páginas na paginação)
Mostrar título: NÃO
Mostrar categorias: Não
Por padrão, Divi mostrará paginação, portanto, deixe essa opção definida como SIM.
Você deve ver a paginação no canto inferior direito do portfólio.
Para definir o estilo da paginação, vá até a guia de design e abra o botão Alternar Texto de paginação para ver todas as opções disponíveis. Atualize o seguinte:
Layout: Grade
Fonte de paginação: Source Sans Pro
Estilo de fonte de paginação: TT
Alinhamento de Texto de Paginação: Centro
Cor do texto da paginação: #cccccc
Tamanho do texto de paginação: 4vw (desktop), 38px (tablet e telefone)
Espaçamento entre letras de paginação: 1vw
Altura da linha de paginação: 2em
Em seguida, clique na guia avançada e adicione o seguinte snippet de CSS em Página ativa de paginação :
color: #0096eb !important;
Ao tornar o texto maior com uma altura de linha maior, há mais espaço clicável para os usuários. Alterar o alinhamento para o centro e adicionar um pequeno espaçamento entre letras ajuda a tornar a paginação mais perceptível. E a cor do texto da paginação personalizada com a cor da página ativa contrastante ajuda o usuário a saber em que página está.
Outros trechos CSS rápidos
Aqui estão alguns snippets CSS rápidos e fáceis para alterar o design da paginação.
Para remover a linha de fronteira padrão que fica diretamente acima da paginação, você pode inserir o seguinte CSS em Paginação de portfólio:
border: none;
Para dar à sua paginação uma borda completa, você pode inserir o seguinte CSS em Paginação de portfólio:
border: 2px solid #dddddd;
Para fornecer uma cor de fundo à paginação, você pode inserir o seguinte CSS em Paginação de portfólio:
background: #333333;
Funciona para o Módulo Galeria também
Essas mesmas configurações de design também funcionarão para o Módulo Galeria. Na verdade, você pode copiar os estilos de texto de paginação do Módulo de portfólio filtrável e colá-los em um Módulo de galeria! Apenas certifique-se de transferir quaisquer snippets CSS também.
Estilos de paginação avançados para módulo de galeria e módulo de portfólio filtrável
Se você deseja obter um design mais avançado para a paginação de seu portfólio filtrável e módulos de galeria, você pode usar alguns CSS personalizados mais avançados. O que eu gosto neste exemplo específico é que o CSS personalizado funciona em conjunto com as configurações internas do módulo.
Para demonstrar, vamos usar o portfólio filtrável novamente. Desta vez, atualize as opções de design com o seguinte:
Layout: Grade
Tamanho do texto de paginação: 16px
Altura da linha de paginação: 2,5em
Na guia avançada, adicione a seguinte classe CSS:
Classe CSS: pagi-space
Isso permitirá que nosso CSS seja aplicado apenas a este módulo.
Agora salve suas configurações e abra o pop-up modal de Configurações da página. Na guia avançada, adicione o seguinte código CSS dentro da caixa Custom CSS.
.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
border: none;
}
.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
padding: 1em 1.5em;
background: #eeeeee;
border: 1px solid #eeeeee;
}
.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
border-color: #333333;
}
.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
background: #333333;
color: #ffffff;
border-color: #333333;
}
Com o código no lugar, você pode ver que a paginação agora tem mais espaço clicável para cada um dos links da página. E os links também têm cores de fundo adicionadas para que se pareçam mais com botões clicáveis. Uma borda sutil também é adicionada a cada um dos links ao passar o mouse. O link da página ativa se destaca com um fundo escuro contrastante com uma cor de texto mais clara.
Este código definirá o estilo da paginação para o módulo de portfólio filtrável e o módulo de galeria. Apenas certifique-se de adicionar a classe CSS “pagi-space” ao módulo para que tenha efeito.
Aqui está o resultado no módulo de portfólio filtrável.
Módulo de Estilo de Blog e Paginação de Módulo de Portfólio
O Módulo de Blog e o Módulo de Portfólio herdam a paginação padrão do WordPress que permite que você navegue pelo seu arquivo de postagens com um link para “Entradas mais antigas” e um link para “Próximas entradas”.
Esta é a aparência da paginação padrão na página de arquivo do blog no Divi Theme:
Essa mesma paginação é usada pelo módulo de blog e módulo de portfólio.
Se você estiver usando o Módulo de Blog (ou módulo de portfólio), você pode estilizar o texto de paginação usando as configurações integradas.
Esta é uma solução simples e elegante para a maioria dos casos. No entanto, se você está procurando uma paginação mais complexa para substituir a paginação Divi / WordPress padrão, há uma solução que é tão fácil que pode surpreendê-lo.
Adicionando paginação complexa a Divi usando o plug-in WP-PageNavi
Se quiser uma paginação mais avançada para todo o seu Divi Theme, incluindo o módulo de blog e o módulo de portfólio, você pode substituir a paginação padrão do WordPress por uma diferente usando o popular plugin WP-PageNavi. Este plugin funciona bem com Divi. O design é básico, mas pode ser facilmente customizado usando CSS.
Adicionando o Plugin ao Divi
Se você ainda não fez isso, vá em frente e instale o plugin conforme descrito na seção “Primeiros passos” no topo da postagem. Assim que o plugin estiver instalado e ativo, a nova forma de paginação aparecerá automaticamente em todo o seu tema.
Isso também afetará o módulo de blog e o módulo de portfólio.
Configurações de plug-in
Você pode localizar as configurações do plug-in no painel do WordPress navegando para Configurações> WP-PageNavi.
As configurações são principalmente para personalizar a funcionalidade e o conteúdo de texto que é exibido. No entanto, se quiser estilizar a paginação, você precisará usar algum CSS personalizado.
Estilo de paginação WP-PageNavi com CSS personalizado
Como você provavelmente desejará estilizar a paginação de todo o tema, faz mais sentido adicionar o CSS ao Customizador de tema ou ao arquivo style.css do tema filho. Vá em frente e coloque o seguinte CSS na caixa CSS Adicional do Customizador de Tema:
/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
padding: 0.3em 0.8em !important;
font-size: 2em !important;
color: #333333;
line-height: 2em;
background: #eeeeee;
transition: all .5s;
}
/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
color: #ffffff !important;
background: #333333 !important;
}
/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
color: #ffffff !important;
background: #333333 !important;
}
/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
background: none;
}
Aqui está o resultado final.
Estilizando WP-PageNavi no Módulo de Blog e no Módulo de Portfólio
Conforme mencionado anteriormente, o Módulo de Blog e o Módulo de Portfólio herdam a navegação de página padrão do WordPress. Como isso foi substituído pela nova paginação complexa do WP-PageNavi, os módulos também exibirão essa nova paginação.
Você pode usar as opções de design de texto de paginação integradas para adicionar mais estilo à paginação.
Apenas tenha em mente que algumas das opções podem não funcionar como esperado com CSS customizado externo.
Pensamentos finais
A paginação não precisa ficar em segundo plano ao construir um site na Divi. Existem algumas opções internas úteis para ajudar com os módulos que usam paginação. E com algum CSS personalizado, você pode criar o estilo que desejar. O plugin WP-PageNavi é uma solução elegante para adicionar uma paginação complexa em todo o Divi Theme. Além de funcionar perfeitamente com o Divi, ele oferece opções adicionais que você pode personalizar facilmente. Definir o estilo da paginação WP-PageNavi requer algum CSS, mas espero que o modelo usado neste artigo o coloque no caminho certo.
Os exemplos de design neste post foram propositalmente simples.
Estou ansioso para ouvir de você nos comentários.
Saúde!