Como criar uma galeria filtrável no Elementor?

Publicados: 2024-12-22

Você tem muitas fotos que gostaria de exibir de forma organizada? Se sim, a Galeria Filtrável é a solução que você procura. A funcionalidade da Galeria Filtrável permite agrupar suas fotos em categorias. Depois que as fotos estiverem agrupadas em categorias, você poderá usá-las como filtros clicáveis ​​no front end. Este emocionante widget de galeria de imagens vem com muitas opções e recursos de estilo, o que torna muito fácil construir galerias poderosas em seu site Elementor.

Neste tutorial, veremos como você pode criar uma galeria filtrável no Elementor com o widget Galeria de imagens dos complementos PowerPack Elementor. Antes de começar, certifique-se de ter o complemento Elementor e PowerPack instalado e ativado em seu site. Uma vez feito isso, podemos começar com nosso processo!

Por que adicionar uma galeria filtrável?

Galerias filtráveis ​​são ideais para sites que precisam exibir um grande número de imagens de forma organizada. Esteja você exibindo um portfólio, produtos de comércio eletrônico ou fotos de eventos, as galerias filtráveis ​​permitem que os usuários encontrem o que procuram com rapidez e facilidade.

Aqui estão alguns casos de uso do mundo real:

  • Sites de portfólio: exiba seus projetos categorizados por tipo, como web design, design gráfico ou fotografia.
  • Sites de comércio eletrônico: organize os produtos em categorias como roupas, acessórios ou itens sazonais.
  • Galerias de eventos: exiba fotos agrupadas por eventos, como casamentos, festas ou eventos corporativos.

Agora, vamos criar uma galeria filtrável no Elementor usando PowerPack Addons.

Como criar uma galeria filtrável no Elementor?

Etapa 1: adicionar o widget Galeria de imagens do PowerPack

Abra a página onde deseja adicionar a Galeria no editor Elementor. Para fazer isso, vá ao painel de administração do WP >> Páginas e clique em Editar com Elementor para a respectiva página.

Quando estiver no editor, arraste e solte a Galeria de imagens do PowerPack na página.

adicione o widget da galeria de imagens do powerpack ao elementor

Etapa 2: adicionar imagens à galeria

Agora iremos adicionar as imagens à galeria em grupos. Esses grupos de imagens nos ajudarão a bifurcar as imagens.

Para fazer isso, primeiro clique no botão Adicionar item e dê um nome adequado ao seu filtro. Lembre-se de que esse nome será exibido no botão de filtro da galeria.

Agora, adicione as imagens desejadas selecionando-as na biblioteca de mídia e clicando no botão Criar uma nova galeria .

criar uma nova galeria

Repita o processo e adicione mais galerias individuais clicando no botão “Adicionar Item”.

Passo 3: Adicionando Filtros à Galeria

Para ativar a opção de filtragem, clique no botão de alternância na subseção de filtro. Você pode alterar o alinhamento dos botões de filtro sobre a imagem e alterar o rótulo do filtro “Todos” .

ativar filtros

Passo 4: Personalizando a Galeria

Agora, vá para a subseção de configurações, e aqui você poderá fazer outras alterações em sua galeria, conforme mostrado na imagem abaixo. Você pode alterar o tamanho da imagem para o desejado. Você pode escolher o layout da galeria de imagens em Grade, Alvenaria ou Justificado.

Se desejar, você pode até inserir o número de colunas que deseja em seu site. Você pode alterar a ordem e também ativar e personalizar as legendas.

Se desejar vincular sua galeria, você também pode fazer isso selecionando a opção “Link para” .

Além disso, você também pode usar o recurso “ Carregar mais ” da galeria de imagens. Isso o ajudará a manter a velocidade do seu site, carregando apenas algumas imagens por vez. Você pode fazer isso simplesmente ativando o botão Carregar mais .

Etapa 5: estilização do layout e das miniaturas da galeria filtrável

Para o layout da galeria, você pode alterar as colunas e lacunas das linhas usando os slides ou inserindo um número.

Para as miniaturas, você pode dimensionar as imagens e alterar a opacidade das imagens ou miniaturas.

Se desejar adicionar filtros de cores às imagens, você pode fazer isso facilmente com a opção de filtro de imagem . Você também pode adicionar uma sobreposição às imagens.

filtros de imagem

Etapa 7: filtros de estilo

Se você adicionou filtros na parte superior da imagem, também poderá personalizá-los. Você pode alterar a tipografia, cor, espaçamento, bordas e preenchimento dos filtros usando as opções fornecidas na subseção de filtros.

estilo de filtros

A galeria filtrável está pronta!

Depois de publicar a página, sua galeria de imagens ficará assim:


Melhores práticas para projetar galerias filtráveis

  • Use filtros intuitivos : certifique-se de que suas categorias sejam claras e descritivas.
  • Otimize imagens: use imagens compactadas para reduzir o tempo de carregamento.
  • Limitar filtros: evite sobrecarregar os usuários com muitas opções de filtros.
  • Design consistente: combine os estilos de galeria e botão com o tema do seu site.

FAQs: Galeria filtrável no Elementor

Como adiciono filtros a uma galeria Elementor?

Você pode ativar filtros usando o widget PowerPack Gallery alternando a opção de filtro nas configurações do widget e atribuindo nomes de filtro às suas imagens.

O que é um layout de alvenaria em uma galeria?

Um layout de alvenaria organiza as imagens em uma grade escalonada, garantindo uma exibição visualmente atraente e compacta, sem cortes.

Posso usar uma galeria filtrável para produtos WooCommerce?

Sim! Uma galeria filtrável é perfeita para exibir produtos em categorias, criando uma experiência de compra envolvente.

Experimente hoje!

Você pode criar muitos designs e layouts incríveis com o widget de galeria filtrável. Para mais inspiração, você pode dar uma olhada em nossa landing page.

Se quiser experimentar o widget da galeria de imagens, você pode obtê-lo junto com mais de 80 outros widgets criativos que tornarão seu processo de design mais confortável e divertido! Obtenha os complementos PowerPack Elementor agora!

Compartilhe este artigo se achar útil e deixe-me saber o que você pensa sobre este widget nos comentários abaixo!

Foto da Equipe Editorial

Equipe Editorial

Deixe um comentário Cancelar resposta

Anterior Anterior [Como] criar um menu de comidas e bebidas com Elementor