Como usar o widget Elementor Loop Grid no WordPress com HappyAddons

Projetar sites visualmente atraentes e funcionais é essencial para qualquer pessoa criar engajamento, atrair públicos e impulsionar vendas. Para simplificar esse processo, ferramentas de web design como Elementor e seus complementos introduzem continuamente recursos e módulos inovadores.

O Loop Grid é um widget tão novo que a Elementor e seus complementos desenvolveram e lançaram para nós recentemente. O widget inovador permite criar e exibir seu conteúdo em layouts de grade lindamente organizados.

Não se preocupe se você não sabe muito sobre este widget em detalhes. Nesta postagem do tutorial, abordaremos um guia passo a passo sobre como usar o widget Elementor Loop Grid no WordPress com HappyAddons. Espero que você ache este tutorial útil e interessante.

O que é uma grade de loop no Elementor?

O Loop Grid é um widget Elementor multifuncional que permite criar layouts dinâmicos para exibir diferentes tipos de conteúdo em seu site e personalizá-los a qualquer momento. Este widget é particularmente útil para exibir postagens de blogs, produtos e conteúdo de portfólio em formato de grade.

Este widget é muito útil para exibir conteúdo dinâmico. Assim que novos posts, produtos ou conteúdos desejados são publicados, eles são exibidos automaticamente através do widget sem entrada manual. Você pode criar modelos exclusivos para mostrar o conteúdo como desejar.

Na próxima seção, explicaremos como usar o widget no WordPress. Continue lendo!

Como usar o widget Elementor Loop Grid

Você deve ter os seguintes plug-ins instalados para usar este widget em seu site. Obtenha-os clicando nos links anexados abaixo.

• Elementor
• HappyAddons
• HappyAddons Pro

Quando estiverem prontos, comece a seguir as etapas do tutorial conforme descrito.

Etapa 01: arraste e solte o widget Loop Grid em sua página

Abra a página onde deseja adicionar o widget. Em seguida, escolha uma seção para adicionar o widget.

Digite Happy Loop Grid na caixa de pesquisa do painel Elementor. Assim que o widget aparecer, arraste e solte-o na área desejada da tela.

Etapa 02: Crie um modelo de grade de loop

Depois de adicionar o widget, você será solicitado a selecionar um modelo de loop. Se você já possui um modelo pronto, pode selecioná-lo. Caso contrário, você deverá criar um do zero.

Então, para criar do zero, clique no botão Criar modelo .

Você será levado para uma nova página. Clique no botão Adicionar novo enquanto a guia Modelo de loop estiver selecionada.

Dê um nome ao modelo . Por exemplo, nós o chamamos de 'Loop Template One'. Em seguida, clique no botão Criar modelo .

Uma nova tela será aberta. Aqui, novamente, você pode arrastar e soltar os widgets que deseja para projetar o layout do seu modelo Loop Grid.

Confira este guia sobre como criar um pop-up em sites Elementor.

Etapa 03: Projete um layout para o modelo de grade de loop

Suponha que criaremos essa grade de loop para exibir nossas postagens de blog dinamicamente. Então, usaremos os widgets de postagem para criar o modelo.

# Postar imagem em destaque

A exibição de imagens de recursos de postagem é obrigatória na seção de grade de postagem. Para fazer isso, encontre o widget e solte-o na tela.

# Informações da postagem

Ao adicionar o widget Post Info, você pode mostrar o autor da postagem, a data de publicação e quando ela foi publicada. É melhor adicionar o widget na imagem em destaque.

Caso queira remover algum elemento do widget, basta clicar no ícone de cruz (x) ao lado dele. Da mesma forma, para adicionar um novo elemento, clique no botão + Adicionar Item .

Vá para a guia Estilo . Você terá opções nesta aba para alterar a cor, espessura e alinhamento dos textos e ícones do widget.

# Título da postagem

Arraste e solte o widget Título da postagem abaixo do widget Informações da postagem.

Na guia Conteúdo, você terá opções para personalizar a tag HTML, tamanho e alinhamento. Faça as alterações necessárias conforme necessário.

Vá para a guia Estilo . Você pode estilizar a cor e a tipografia do título como desejar.

# Trecho da postagem

Ao adicionar o widget Post Trecho ao modelo, você pode exibir o resumo ou trecho das respectivas postagens na seção Loop Grid. Encontre e adicione o widget Post Trerpt abaixo do título.

Da mesma forma, conforme mostrado acima, você pode personalizar a cor do texto e a tipografia na guia Estilo .

Etapa 04: Otimize o layout do modelo para dispositivos móveis

Você deve otimizar o layout do seu modelo para todos os tipos de dispositivos (tablets e telefones celulares) além de desktops. Caso contrário, os usuários de outros dispositivos não terão uma boa experiência ao explorar este widget em dispositivos móveis e tablets.

Portanto, para otimizar o layout do template, clique na opção Modo Responsivo no rodapé do painel Elementor. Uma barra superior aparecerá no modelo, incluindo a opção de alternar entre diferentes modos de dispositivo (desktop, tablet e celular).

Agora, mude para diferentes modos de dispositivo e veja se o layout do modelo é perfeito para diferentes dispositivos específicos. Se não for perfeito, redimensione e personalize os elementos do modelo conforme necessário.

Esperançosamente, ao fazer isso, você poderá tornar o modelo responsivo para todos os tamanhos de tela.

Aqui está um guia sobre o que deve ser considerado ao tornar um site responsivo a dispositivos móveis.

# Publique o modelo

Uma vez feito isso, publique o modelo clicando no botão Publicar no painel Elementor.

Passo 04: Vá para a tela principal e selecione o modelo de loop

Vá para a tela principal do Elementor. Selecione a seção Grade de Loop . Na seção Layout , você encontrará a opção Escolher um modelo de loop .

Digite o nome pelo qual você salva o modelo. Depois de digitado, o modelo aparecerá em tempo real. Clique no modelo para exibi-lo na tela.

Assim que o modelo Loop Grid for selecionado, ele exibirá suas postagens publicadas em formato de grade como na imagem abaixo.

A grade pode parecer estranha, pois vem com configurações padrão. Agora você pode personalizar ainda mais seu layout.

Etapa 05: Personalize e estilize a seção Loop Grid

Na seção Layout, você seleciona o número da coluna, postagem por página e altura igual . Faça a configuração necessária conforme necessário.

Mantivemos três colunas e três postagens por página para este tutorial.

#Configurar consulta

Depois disso, vá para a seção Consulta .

Você pode exibir conteúdo de diversas fontes no widget Loop Grid. Por padrão, as postagens são exibidas em formato de grade. Mas você pode exibir páginas ou páginas de destino, se desejar.

Clique no ícone suspenso próximo à opção Tipo de postagem. Selecione o tipo de conteúdo desejado.

Você deve salvar cada postagem com uma tag ou categoria. Se você deseja exibir apenas o conteúdo de um autor, tag ou categoria específico, clique no ícone + mais abaixo de Incluir por.

Selecione Autores ou Termos . Você também pode escolher ambos.

Depois que as opções Incluir por forem selecionadas, digite os nomes dos autores e termos nos respectivos campos. Instantaneamente, o conteúdo será filtrado, e apenas o conteúdo deste autor e termo específico será exibido na grade do loop.

Configure as outras opções de consulta conforme desejar. Espero que você possa fazer isso sozinho.

Etapa 06: Configurar a opção de paginação para a seção Loop Grid

Expanda a seção Paginação e Carregue Mais .

Clique no ícone suspenso ao lado de Paginação . Selecione a opção desejada.

Selecionamos Números + Anterior/Próximo . Você pode ver na imagem que esta opção de paginação foi exibida abaixo do widget.

Etapa 07: estilizar o layout do widget Loop Grid

Vá para a guia Estilos . Você encontrará opções para personalizar e estilizar o layout, a caixa de itens e a paginação do widget.

Vamos primeiro expandir a seção Layout . Isso permitirá que você configure o Column Gap e o Row Gap . Faça isso conforme necessário.

Da mesma forma, expanda a seção Caixa de item . Você pode adicionar Padding , Background Type (cor ou imagem), Box Shadow, Border Types e Border Radius .

Para este tutorial, adicionamos preenchimento, um raio e uma cor de fundo. Faça o mesmo você mesmo.

Da mesma forma, você pode estilizar as opções de cor, tipografia, preenchimento, raio, espaço e paginação do widget.

Nota: Parece um pouco gritante, certo? Nesta fase do design, você pode descobrir que o modelo de grade de loop precisa ser um pouco mais estilizado e personalizado. Mas como fazer? É mostrado na próxima etapa.

Etapa 08: Personalizar novamente o modelo de grade de loop

Primeiro, você precisa encontrar o modelo. Conforme você projetou com HappyAddons, vá para o painel do WordPress . Em seguida, navegue até HappyAddons > Theme Builder > Loop Template .

Encontre o modelo e abra-o com a opção Editar com Elementor .

Por exemplo, alteramos a tipografia do texto Continue Reading >> .

Uma vez feito isso, atualize as alterações.

Etapa 09: Visualize as alterações

Vá para a tela principal novamente. Selecione o ícone suspenso . Em seguida, clique na opção Salvar rascunho .

Depois que o rascunho for salvo, recarregue a tela . Você verá as alterações na página conforme feitas no modelo.

Assim, você pode personalizar o modelo Loop Grid a qualquer momento.

Etapa 10: publique o design da grade de loop

Esperançosamente, sua seção Loop Grid já está pronta para publicação. Clique no botão Publicar na parte inferior do painel Elementor.

Observação: certifique-se de ter otimizado o widget perfeitamente para capacidade de resposta móvel, como mostramos acima na otimização do modelo Loop Grid. O processo será o mesmo aqui também.

Casos de uso comuns do widget Elementor Loop Grid

Até agora, descrevemos o que é o widget Loop Grid e como usá-lo em seus sites Elementor. Vamos agora dar uma olhada rápida em alguns casos de uso cruciais do widget onde ele pode causar uma impressão inestimável.

1. Layouts de blogs

Elementor Loop Grid simplifica os layouts de blog, pois permite renderizar postagens em uma grade dinâmica e agradável. Você pode personalizar a forma como o conteúdo (postagens ou páginas) aparecerá, incluindo títulos de postagens, trechos, imagens, metadados e muito mais para garantir uma aparência coesa.

Aprenda como criar um modelo de postagem de blog com Elementor.

2. Grades de produtos

O Loop Grid é inestimável em sites de comércio eletrônico para exibir produtos em uma grade limpa e organizada. Ele permite que você mostre fotos, preços e descrições de produtos para que os clientes possam desfrutar de uma boa experiência enquanto exploram os produtos em seu site.

3. Vitrine do portfólio

O widget Loop Grid permite que você organize seus desenhos, artigos, estudos de caso e peças de portfólio em um layout atraente. Você pode até alterar a grade para combinar com sua marca, para que seu portfólio possa ser destacado para seus clientes e funcionários.

Aprenda como criar um site de portfólio.

4. Listagens de eventos

Você pode organizar seus eventos de forma gráfica com Loop Grid. Ele permite que você liste visualmente informações de eventos, como datas, locais e descrições, para que as pessoas possam descobrir rapidamente o que está por vir.

5. Listagens de serviços

Você também pode oferecer seus serviços em formato de grade com opções de estilo. Você pode mostrar elementos-chave, como títulos de serviços, descrições e fotos, para que os clientes possam ver facilmente o que você tem a oferecer.

Fechando

Esperamos que agora você conheça os meandros do widget Elementor Loop Grid. Depois de saber como usar bem o widget, você poderá criar infinitas possibilidades de design para o seu site. Com seus recursos intuitivos e facilidade de uso, você pode deixar um impacto profissional em seu site para visitantes cativos.

Tentamos o nosso melhor para cobrir tudo o que você pode estar procurando nesta postagem. Se você achar que perdemos alguma coisa, informe-nos através da caixa de comentários abaixo. Você também pode deixar um chat na caixa de suporte se desejar saber mais sobre nosso produto.

No final, obrigado pelo seu tempo e por estar conosco até o fim. Aproveite, boa leitura!