Como exibir postagens personalizadas por meio de Listing Grids com Bricks

Vá para a guia Páginas no painel do WordPress e clique em “Editar com Bricks” na página que você criou anteriormente.

Adicione uma nova seção e arraste e solte o elemento Listing Grid .

Abra a guia Geral na seção Configurações de conteúdo do elemento Listing Grid e escolha a Listagem criada com Bricks .

Vejamos outros recursos:

• Colunas . Aqui você pode decidir quantas colunas serão exibidas na listagem;
• Ative o botão Usar como modelo de arquivo para usar a página onde você colocou a grade como modelo de arquivo. Neste caso, a quantidade de postagens será retirada das páginas do Blog que podem ser encontradas em WP Dashboard > Configurações > aba Leitura;
• Status . Somente as postagens com o status escolhido neste menu suspenso serão mostradas na Grade de Listagem :
  • Publicar — postagens publicadas;
  • Futuro — posts programados para serem publicados em algum momento;
  • Rascunho — rascunhos;
  • Revisão Pendente — os posts que precisam de alguma revisão;
  • Privado — as postagens que ficam visíveis apenas para você;
• Use o número de postagens aleatórias . Ative-o se quiser mostrar um número aleatório de postagens cada vez que o usuário recarregar a página. Depois de ativá-lo, você pode definir o número mínimo de postagens na barra de números de postagens e o número máximo de postagens na barra de números de Max Random Posts ;
• Número da postagem . Aqui você pode definir quantos posts serão mostrados na listagem;
• Carga preguiçosa . Esta opção aumenta o desempenho de renderização da página. Quando esta alternância está habilitada, a grade é carregada conforme o usuário rola a página e não quando a página é aberta;
• Ativar É grelha de alvenaria para apresentar o Listagem em forma de grelha de alvenaria;
• Ative o botão Altura das colunas iguais para unificar todas as colunas por sua altura;
• Carregue mais . Quando esta opção está habilitada, a grade mostra um número definido de postagens e carrega mais conforme a demanda do usuário. Para saber mais, consulte o tutorial Como criar o botão Carregar mais ;
• Use tipos de postagem personalizados . Ative esta opção se quiser mostrar postagens de dois ou mais tipos de postagem diferentes.

Query Builder é o recurso JetEngine que permite exibir apenas os itens da lista que correspondem às condições criadas. Você pode criar a consulta personalizada para postagens, termos, usuários, etc., e aplicá-la à grade de listagem na guia de configurações de consulta personalizada . Para saber mais, vá para Visão geral do Query Builder .

Com a seção de configurações de Visibilidade do Widget , é possível configurar o widget para sempre ser mostrado ou ocultá-lo quando a consulta estiver vazia.

Existem duas opções: os botões Ativar controle deslizante e Ativar controle deslizante de rolagem . Se você ativar o primeiro, verá as seguintes configurações:

• Slides para rolar . Escolha quantas postagens serão deslocadas para o lado em um clique;
• Ative a alternância Mostrar navegação por setas se desejar que as setas sejam exibidas em cada lado do slide e escolha o ícone de seta ;
• Ative o botão Mostrar navegação de pontos se desejar adicionar a navegação de pontos à parte inferior do bloco deslizante;
• Defina a reprodução automática e a velocidade de reprodução automática com a função Slider se não quiser que os usuários deslizem a listagem manualmente;
• Ative o Loop infinito para que os slides se repitam do primeiro após o último ser exibido e defina uma velocidade de animação apropriada .

A opção Ativar controle deslizante de rolagem adiciona uma rolagem horizontal à grade. Em um dispositivo móvel, esse controle deslizante pode ser movido simplesmente deslizando-o com os dedos. Isso pode reduzir suficientemente o comprimento da página e melhorar a IU.

• Controle deslizante de rolagem ativado . Aqui você pode escolher o dispositivo no qual o controle deslizante de rolagem será habilitado. Pode ser Desktop , Tablet ou Celular ;
• Largura da coluna estática . Com a ajuda deste campo, você pode definir alguma largura estática da grade para diferentes dispositivos.

Depois de terminar de personalizar a grade e a página da listagem, clique no botão “Salvar” .

Prossiga para a página com Listing Grid no front end. Para fazer isso, você pode clicar no botão “Modo de visualização” .

Se necessário, você também pode pressionar o botão “Visualizar no frontend” . Isso abrirá a página no front end na nova guia do navegador. Clique no botão “Voltar ao construtor” para retornar ao construtor e fazer novas alterações.