A melhor revisão do GridBuilderWP: grades e filtros flexíveis

Quando você se senta para assistir a um jogo de futebol, você pode facilmente identificar os superstars a uma milha de distância.

Seu jogo elegante e polido os diferencia e muitas vezes mudam o resultado da partida. Fãs e gerentes os amam porque quando eles jogam, eles estão no seu melhor absoluto.

O mesmo se aplica aos superstars da indústria da música. Normalmente, eles trabalham, nos fazem serenata com sucessos e ainda continuam. As estrelas são mestres em seu ofício e levam nossa imaginação ao limite.

Você sabe, assim como o Gridbuilder WP , o assunto da revisão de hoje.

Aqui está uma cartilha:  Sabemos que construir layouts de grade não é para os fracos, mais ainda para um iniciante. É uma tarefa desafiadora mesmo para usuários razoavelmente experientes.

No entanto, os layouts de grade são uma maneira incrível de exibir e filtrar conteúdo em seu site WordPress. Algo assim:

Ou isto:

Mas, infelizmente, criar layouts de grade para o seu site WordPress não é simples. Ou assim costumava ser antes do advento dos plugins de grade do WordPress.

Para criar layouts de grade fantásticos sem suar a camisa, você precisa de um plugin de grade WordPress simples, mas poderoso .

Se você está procurando por um plugin, o Gridbuilder WP se encaixa perfeitamente.

E no artigo de revisão/como fazer de hoje, você descobre por que o Gridbuilder WP é o plug-in de grade e filtro de escolha para um número crescente de usuários do WordPress. Nós olhamos sob o capô e brincamos com o plugin, então você já sabe que vai ser divertido.

Sem mais delongas, arregacemos as mangas e nos sujamos.

O que é o Gridbuilder WP ?

Também conhecido como WP Grid Builder, o Gridbuilder WP é um belo plugin do WordPress que permite criar layouts de grade avançados rapidamente. Possui uma interface de usuário intuitiva que é bastante agradável de usar.

O plugin vem com um belo conjunto de recursos perfeitos para iniciantes e desenvolvedores. Para o iniciante, o WP Grid Builder é uma solução completa para criar layouts de grade flexíveis e filtráveis e filtrá-los sem conhecimento de codificação. Se você é um desenvolvedor, o construtor de grade vem com muitas ações e funções para mantê-lo ocupado.

Funciona com todos os temas do WordPress e integra-se perfeitamente com a maioria das suas ferramentas favoritas. Além disso, o plug-in vem com complementos que sobrecarregam seus layouts de grade e os filtros de pesquisa (conhecidos como facetas).

No momento em que escrevo, eles oferecem apenas uma versão premium do WP Grid Builder, mas isso pode mudar no futuro. Ou como Loic Blascos – o desenvolvedor – diz em um e-mail que ele enviou imediatamente após minha consulta:

Mesmo assim, eles têm três planos que custam entre US$ 49 e US$ 249 por ano. Escolha o plano adequado às suas necessidades.

Se você não estiver satisfeito com sua compra, o WP Grid Builder oferece uma garantia de reembolso de 14 dias. Além disso, eles oferecem excelentes descontos em renovações (20% para o plano Básico, 30% para o plano Premium e 40% para o plano Ultimate) para uma boa medida.

Para adoçar o negócio, os especialistas em WordPress elogiam o WP Grid Builder. Aqui está um cliente feliz:

Tanto para o usuário quanto para o desenvolvedor, o Gridbuilder ᵂᴾ é um produto incrível e um novo paradigma para esse tipo de recurso. Bem integrado ao WordPress Core, ele fornece um bom Admin UX e uma experiência de front-end incrivelmente rápida. – Jb Audras , desenvolvedor do WordPress Core.

Até Chris Lema , um dos maiores nomes nos círculos do WordPress, não tem nada além de elogios ao WP Grid Builder:

Além disso, você recebe suporte rápido de classe mundial e documentação detalhada para ajudá-lo a instalar e configurar extensivamente o WP Grid Builder.

Agora que sabemos com o que estamos trabalhando, vamos dar uma olhada rápida nos recursos do WP Grid Builder WP.

Recursos do Gridbuilder WP

O WP Grid Builder vem com todos os recursos que você precisa para criar layouts de grade como um profissional. Ao contrário dos concorrentes, o plug-in facilita demais a criação de layouts para sua loja de comércio eletrônico, site de portfólio, blog e diretório, entre outros.

Você pode esperar os seguintes recursos em sua cópia do WP Grid Builder:

• Integração suave com WooCommerce, Easy Digital Downloads, SearchWP, Relevanssi, Polylang, WPML, Advanced Custom Fields e Gutenberg
• 100% responsivo e pronto para dispositivos móveis com suporte de toque para lightbox e carrossel
• SEO amigável – WP Grid Builder é compatível com W3C e usa as melhores práticas de SEO
• Desempenho ultrarrápido graças aos endpoints AJAX personalizados
• Um sistema de filtragem avançado que permite classificar o conteúdo do WordPress por termos de taxonomia (personalizados), campos de postagem ou campos personalizados de forma eficiente
• Mais de 15 tipos de facetas, incluindo rádios, caixas de seleção, controles deslizantes, seleções, classificações, controles deslizantes, classificações, botões carregar mais, botões de redefinição e muito mais, o que permite aos usuários restringir os resultados da pesquisa
• Funcionalidade de importação e exportação para que você possa mover facilmente as configurações do WP Grid Builder para outro site
• caixa de luz embutida
• Construtor de grade de arrastar e soltar
• Mais de 20 cartões de grade prontos e fáceis de personalizar. Além disso, você pode criar seus cartões do zero
• Mais de 900 fontes do Google
• Mais de 250 ícones SVG para decorar seus cartões de grade conforme desejado
• Suporte de compartilhamento social permitindo que você compartilhe conteúdo em redes sociais diretamente de suas grades
• Suporte para imagem, vídeo (incluindo incorporações de sites como YouTube), galeria e formatos de postagem de áudio
• 3+ layouts de grade, incluindo Masonry, Justified e Metro
• Carregamento lento, que melhora a velocidade de carregamento da página
• Mais de 20 animações de carregamento, o que reduz o tempo de carregamento percebido pelos usuários
• Mais de 20 animações de revelação
• Suporte RTL para idiomas escritos na direção da direita para a esquerda
• Um painel de administração intuitivo
• E muitas outras configurações

O que uma lista impressionante de recursos? Agora, vamos instalar o WP Grid Builder e testar o que podemos alcançar com um construtor de grade como nenhum outro.

Como instalar o Gridbuilder WP

Agora a parte divertida

Instalar o WP Grid Builder é tão fácil quanto A, B, C. Se você sabe como instalar um plugin premium, não deverá ter problemas para instalar o WP Grid Builder. Depois de comprar o plugin, você pode encontrar a pasta ZIP do WP Grid Builder em sua conta ou no e-mail de compra.

Em primeiro lugar, baixe o arquivo ZIP do WP Grid Builder para o seu computador. Em seguida, faça login no painel de administração do WordPress e navegue até  Plugins > Adicionar novo , conforme mostrado abaixo.

Em seguida, clique no botão  Upload Plugin , escolha o arquivo ZIP do WP Grid Builder que você baixou e clique no botão Instalar agora para colocar as coisas em movimento. Aqui está uma captura de tela descrevendo o processo:

Em seguida, ative o WP Grid Builder:

Ativar o plugin adiciona um item Gridbuilder WP ao seu menu de administração do WordPress. Em seguida, navegue até Gridbuilder WP > Dashboard , conforme detalhamos abaixo.

Depois disso, insira seu e-mail de licença e chave de licença e clique no botão  Ativar  Plugin :

Para se beneficiar das atualizações automáticas, você pode ativar sua licença, que está disponível no e-mail de confirmação do pedido ou na página da sua conta:

Agora que instalamos e ativamos o WP Grid Builder, podemos criar nosso primeiro layout de grade.

Como configurar o Gridbuilder WP

Na seção a seguir, você aprenderá como criar uma grade funcional. Farei o meu melhor para cobrir a maioria (se não todas) as configurações. A excelente notícia é que os recursos do WP Grid Builder têm descrições claras na interface de administração. Devemos começar nomeando nossa nova grade para referência futura.

Nomeando uma nova grade

Para criar um novo layout de grade, navegue até  Gridbuilder WP > Todas as grades no menu de administração do WordPress:

Fazer isso leva você à  tela Todas as grades , que está vazia por enquanto. Em seguida, clique no botão Criar uma grade :

Alternativamente, você pode importar as demos de wpgridbuilder.com. Observe, no entanto, que as demonstrações são apenas para fins de configuração de layout. O conteúdo exibido em suas grades depende de suas postagens, mídia, produtos etc.

Para nossos propósitos de teste, optei pela primeira opção, criando uma nova grade do zero. O botão Criar uma grade leva você à seguinte página:

Na tela acima, você pode:

• Dê um nome à sua grade. Estou usando a “Galeria de Testes” para nosso exemplo
• Adicione e gere uma classe CSS personalizada, para que você possa adicionar estilos personalizados à sua grade, se desejar
• Defina as mensagens de erro que os usuários veem se não encontrarem nenhum resultado

Escolha a mídia para exibir em sua grade

É hora de escolher a mídia que deseja exibir em sua grade. Para isso, navegue até a próxima seção, ou seja, Grid Settings > Source Content , conforme mostrado abaixo.

Como mostrado acima, você tem três tipos de fontes em Type of Source :

• Tipo de postagem  – Você pode extrair conteúdo de suas postagens, páginas, biblioteca de mídia ou qualquer outro tipo de postagem personalizada
• Termo – Você pode obter material com base em categorias, tags ou quaisquer outros termos de taxonomia personalizados.
• Usuário – Esta opção permite que você obtenha conteúdo de usuários específicos do WordPress

Abaixo disso, você pode definir o número de itens por página. Use o valor “-1” para mostrar todas as postagens. Zero (0) é padrão para o número de postagens por página nas configurações do WordPress.

Seção de postagens consultadas

Abaixo disso, você tem a seção de Postagens Consultadas :

Na tela acima, você pode fazer várias coisas da seguinte forma:

• Escolha seu(s) tipo(s) de postagem em Tipo(s) de  postagem , conforme marcado na imagem. Se você quiser criar uma grade para as postagens do seu blog, escolha  Postagens . Se você estiver criando uma grade para sua mídia (digamos, deseja criar um portfólio visual), selecione Mídia, como em nosso exemplo acima. O outro tipo de postagem disponível é Páginas .
• Abaixo dos tipos de postagem, você pode escolher o status da postagem do conteúdo que deseja exibir em sua grade. Você tem algumas opções, mas eu recomendo que você fique com  Published . Além disso, você pode escolher autores de postagem, tipos de mime e incluir/excluir conteúdo específico de sua grade.
• Conforme mostrado pelo item número três (3) na imagem acima, você pode incluir outras mídias diretamente, o que pode economizar muito tempo, principalmente quando você deseja implantar uma grade rapidamente.

Ao rolar para a parte inferior da tela, você observará opções que o ajudam a ordenar o conteúdo da grade por valores, tags e campos personalizados. Você só precisará dessas opções ao ajustar sua grade:

Além disso: para evitar perder seu progresso acidentalmente, clique no botão  Salvar alterações ao criar sua grade. Vamos configurar os formatos de mídia.

Formatos de mídia

Navegue até  Configurações de grade > Formatos de mídia :

Você pode escolher os formatos de mídia que deseja usar em suas grades. O WP Grid Builder suporta galerias, vídeos e áudio. Na parte inferior da tela, você pode definir uma miniatura padrão em cada cartão de grade (ou bloco) caso o conteúdo esteja ausente.

Na mesma tela, você pode optar por capturar a primeira mídia em suas postagens automaticamente (caso falte o conteúdo). Além disso, você pode habilitar apresentações de slides de galeria dentro de cartões de grade, usar pôsteres de vídeos incorporados e abrir vídeos em uma caixa de luz em vez do cartão de grade.

Estilo de grade

Vá para  Configurações de grade > Estilo de grade para personalizar sua grade, como mostrado acima. Por padrão, você tem três estilos de grade: Masonry, Metro e Justified. Estou usando a Maçonaria para fins de ilustração. Além disso, eu já havia publicado imagens na minha biblioteca de mídia anteriormente. O WP Grid Builder adiciona as fotos à grade automaticamente.

Além disso, você pode controlar outras opções, como comportamento da grade, substituir tamanhos de cartão e controlar a responsividade. Salve para escolher um estilo de grade e substituir tamanhos de cartão, você dificilmente tocará nas configurações. Escolha seu estilo de grade e vamos para a próxima seção.

Layout de grade

Não há nada muito para ver aqui. Você tem dois tipos de layouts para suas grades; o design vertical padrão e o layout do carrossel. Além disso, você pode fazer suas grades de largura total. Estou trabalhando com o design padrão e minha grade está na largura total.

Estamos seguindo em frente.

Compositor de grade

O Grid Composer é útil quando você está personalizando suas grades com facetas, por exemplo, um filtro, classificação, pesquisa, caixas de seleção, carregar mais, paginação e muito mais.

Na parte inferior da tela, você encontrará um construtor de layout de grade de arrastar e soltar. Por exemplo, abaixo, veja meu exemplo com três facetas: botão Filtrar por Data , Pesquisar e Carregar Mais .

Se eu publicar minha grade neste momento, vejo a seguinte grade, completa com minhas três (3) facetas totalmente funcionais:

Nada mal Nada mal. Espero que você esteja entendendo a essência das coisas, exceto que ainda não terminamos. Vamos voltar para a área de administração do WP Grid Builder.

Estilos de cartão

A seção Estilo de Cartão mostrada acima permite que você personalize seus cartões de grade. Os cartões de grade são simplesmente as peças retangulares ou quadradas que compõem a grade. Ao começar a usar o WP Grid Builder, talvez seja necessário importar as demos, conforme mostrado na imagem acima. Você pode, no entanto, criar seus cartões do zero, o que abre infinitas possibilidades .

Então fui em frente e importei todos os cartões e atribuí um cartão padrão às minhas grades. Depois disso, selecionei um cartão para cada tipo de postagem, incluindo minha mídia. Estou usando Beryl como meu cartão padrão.

Parece bastante confiável, este construtor de grade do WordPress, me impressionou. Em seguida, temos animações.

Animações

Novamente, nada muito para ver aqui; apenas algumas animações para revelar cartões na grade quando um usuário rola ou clica no  botão Carregar mais . O recurso é incrivelmente fácil de usar e produz belos efeitos que aumentam o engajamento do usuário.

Carregando

Em seguida, você tem opções de carregamento, conforme detalhamos acima. Na tela, você pode ativar o carregamento lento para aumentar tremendamente a velocidade de suas grades. O carregamento lento só carrega a mídia quando ela está na janela de visualização do usuário, o que pode reduzir o tempo que suas grades levam para carregar.

Por outro lado, uma barra ou ícone de carregamento reduz o tempo de carregamento percebido pelos usuários. O carregador aparece quando um usuário está carregando um conjunto de postagens. Ele aparece ao carregar a página de grade e quando o usuário filtra ou classifica uma grade. É uma maneira conveniente e amigável de manter os usuários em seu site.

Costumização

Lembre-se da classe CSS personalizada que adicionamos à nossa grade anteriormente? Bem, você usa a classe para modificar os estilos CSS do plug-in na  janela Configurações de grade > Personalização . Se você não conhece o CSS, é melhor contratar ajuda externa, se necessário.

Complementos WP do Gridbuilder

Os complementos permitem estender a funcionalidade de um plug-in do WordPress. O WP Grid Builder vem com alguns complementos que você pode instalar facilmente navegando até Gridbuilder WP > Complementos. Atualmente, o WP Grid Builder vem com quatro complementos, a saber:

• Map Facet – Permite adicionar mapas do Google Maps, Mapbox ou Leaflet e exibir marcadores
• Cache – Para acelerar grades armazenando conteúdo e facetas em cache
• LearnDash – Exibe informações do curso em cartões
• Multilíngue – Integre o WP Grid Builder com Polylang e WPML

Outras configurações do WP do Gridbuilder

Para acessar as configurações gerais do WP Grid Builder, vá para  Gridbuilder WP > Configurações. Na tela, você encontra opções como:

• Permitir que o WP Grid Builder renderize blocos no Gutenberg
• Ativar suporte para formatos de postagem
• Exibir opções de postagem e termo (formatos de postagem e cores de termo)
• Limpe o cache e limpe as folhas de estilo
• Alterar cores globais
• Configurar tamanhos de imagem adicionais
• Configure seu plug-in do Lightbox
• Redefinir as configurações globais do plug-in

Conclusão

O WP Grid Builder é um fabuloso plugin de grade e filtro do WordPress adequado tanto para iniciantes quanto para desenvolvedores. Ele vem com uma extensa lista de recursos incríveis que facilitam a criação de layouts de grade responsivos. Além disso, eles oferecem uma estrutura de preços flexível e suporte rápido.

O que você acha do Gridbuilder WP ? Perdemos alguma coisa? Por favor, deixe-nos saber na seção de comentários abaixo.