como alterar os layouts do Listing Grid

Navegue até Painel do WordPress > Plugins > Adicionar novo e pressione o botão “ Carregar plug-in ”.

Clique no botão “ Escolher arquivo ” e encontre o arquivo ZIP necessário em seu computador.

Em seguida, pressione o botão “ Instalar agora ” e “ Ativar plug-in ” para fazer o widget funcionar.

Prossiga para o Elementor Page Builder para implementar o Layout Switcher . 

Abra a página onde está localizada a Grade de Listagem ou onde ela será colocada. 

Coloque o widget Listing Grid na página e ajuste suas configurações, caso ainda não tenha feito isso.

Encontre um widget Layout Switcher e coloque-o na página também. Depois, prossiga para as configurações; verifique sua descrição na visão geral do widget Layout Switcher .

Escolha a listagem no campo do widget Selecionar uma grade de listagem .

Para este tutorial, deixamos as opções padrão “Grid” e “List” e adicionamos vários layouts personalizados pressionando “ Add Item ”.

Criamos o layout “Duas Colunas” definindo o valor do Número das Colunas como “2” na guia Configurações de layout .

Chamamos o próximo layout de “Apenas Preços”. Adiciona outra listagem, não a definida por padrão. Para habilitar esta funcionalidade, abrimos a aba Configurações e selecionamos a Listagem necessária .

Também alteramos o valor do número das colunas para “2”.

A seguir, adicionamos um ícone aos rótulos. O campo para anexar o ícone está na aba Conteúdo de cada opção de camada.

Agora, os ícones são exibidos ao lado dos itens.

Também ajustamos as configurações de estilo para destacar a opção de layout habilitada. Para fazer isso, alteramos o estilo dos botões na guia Estilo > Botões > Ativo .

No entanto, o estilo é opcional. Assim que a página ficou pronta, clicamos no botão “ Publicar/Atualizar ”.

Agora, cada botão de layout no front end pode ser clicado para ver o layout necessário.

O layout “ Grid ” representa a Grade de Listagem padrão . É uma seção de conteúdo de três colunas.

A “ Lista ” exibe itens em uma coluna.

Um botão personalizado “ Duas Colunas ” permite um layout de duas colunas.

O último botão mostra uma listagem diferente chamada “Tours”.