Como criar um modelo de listagem para tipos de postagem CPT no Elementor

Adicione um novo item de listagem

Vá para o Painel do WordPress> JetEngine> guia Listagens e pressione o botão “ Adicionar Novo ”.

Configurar item de listagem

Depois que a janela Configurar item de listagem for aberta, estes campos deverão ser definidos:

• Fonte da listagem — agora estamos falando do modelo de listagem das postagens, então escolha a opção “Postagens” neste menu suspenso;
• Do tipo de postagem – aqui, você deve selecionar o tipo de postagem do qual o conteúdo será extraído. Por exemplo, pode ser denominado “País”. Leve em consideração que você também pode criar um modelo de listagem para os tipos de postagem padrão do WordPress;
• Nome do item da listagem — digite o nome da listagem aqui;
• Visualização da listagem – neste menu suspenso, você pode escolher criar a listagem usando Elementor, Gutenberg ou Bricks. Por enquanto, selecionamos a opção “Elementor”.

Em seguida, clique no botão “ Criar item de listagem ”.

Ajustar as configurações dos itens da listagem

Primeiro, você pode clicar no ícone “ engrenagem ” no canto inferior esquerdo para abrir as Configurações do item de listagem e desdobrar a guia Configurações de listagem . Existem essas opções:

• Fonte de listagem e tipo de postagem – verifique se a fonte está definida corretamente. Se você deseja definir outras opções para esses campos – recarregue a página posteriormente para poder acessar as opções de metacampo apropriadas para widgets dinâmicos;
• Largura de visualização — aqui, você pode definir a largura do cartão de listagem movendo o indicador deslizante ou digitando o número necessário de pixels. Por exemplo, definimos a largura “400”;
• Tornar o item da listagem clicável — se ativado, os usuários podem prosseguir para outra página com os detalhes da postagem após clicarem. Saiba mais na Visão geral do modelo de listagem .

Exibir conteúdo com widgets dinâmicos

O item da listagem pode ser personalizado com qualquer widget que você achar útil. Para este tutorial, exibiremos dados de postagem dinâmicos com widgets dinâmicos encontrados na guia Listagem de elementos do painel Elementor Editor.

Primeiro, colocamos o widget Imagem Dinâmica para mostrar a imagem em destaque da postagem. A opção “Postar miniatura” é definida por padrão no campo Fonte .

Em seguida, arrastamos e soltamos o widget Campo Dinâmico para apresentar o título do post. Mantivemos as configurações padrão: Fonte “Post/Term/User/Object Data” e “Title” Object Field .

Também definimos a tag HTML como “H2”.

Posteriormente, adicionamos o widget Dynamic Meta , que exibe a data da postagem, autor e comentários.

Se alguma aba for desnecessária, ela poderá ser excluída (por exemplo, “comentários”).

A aba de desdobramento abre suas configurações, onde um ícone, prefixo e sufixo podem ser modificados.

Por exemplo, definimos o ícone para a guia “data”.

Para a aba “autor”, definimos o Prefix .

Mais configurações são apresentadas nas Configurações de data , Configurações de autor e Configurações de comentários da seção do widget Conteúdo .

Por exemplo, o formato pode ser alterado na guia Configurações de data .

Para mostrar o trecho da postagem, inserimos o widget Campo Dinâmico novamente, mantivemos a Fonte “Post/Term/User/Object Data” e escolhemos o Campo de Objeto “Trecho” .

Ativamos a alternância de trecho gerado automaticamente e definimos a duração personalizada como “20”.

Eventualmente, colocamos o widget Dynamic Link com a fonte “Permalink” . Se esta opção estiver definida, os usuários poderão prosseguir para a página única da postagem após clicar no link.

Personalize as configurações de estilo

As configurações de estilo podem ser definidas para widgets no Editor Elementor. Por exemplo, definimos a cor do plano de fundo e do texto, o preenchimento e o raio da borda para o widget Dynamic Link .

As configurações avançadas também podem ser ajustadas. Por exemplo, você pode definir intervalos entre os widgets ajustando o Padding .

Como toque final, definimos a cor de fundo na guia Configurações de estilo da Seção .

O design do modelo de listagem criado aqui será aplicado a toda a grade de listagem da página. Para aprender como combinar diferentes designs de listagem, como criar diferentes cores de fundo de itens em uma grade, consulte o tutorial Como usar injeções de modelo de listagem alternativas no widget de grade de listagem .

Para salvar as alterações, clicamos no botão “ Atualizar ”.

Os itens da listagem podem ser exibidos com o widget Listing Grid colocado em uma página, postagem ou modelo. Fomos para o Painel do WordPress> Páginas> guia Adicionar nova página , inserimos o novo título da página e clicamos no botão “ Editar com Elementor ”.

No Elementor Editor, arrastamos e soltamos o widget Listing Grid e escolhemos o Listing recentemente criado . Também ativamos a alternância de altura igual das colunas para tornar a altura do item da listagem igual na grade.

Após modificar as configurações de conteúdo e estilo, pressionamos o botão “ Publicar/Atualizar ”.

Abra a página no front end e verifique os resultados.

Após clicar no botão “ Leia mais ”, fomos redirecionados para a página única do post. Aprenda como criar uma página única personalizada no tutorial Como criar um modelo de página de postagem única no WordPress .