Blog

Soluções

Mostrando diferentes cores com dynamic visibility

Hoje vou compartilhar com vocês uma solução incrível para exibir informações de status de forma intuitiva e personalizada em seu site WordPress, sem escrever uma única linha de código.

Quer receber conteúdos em primeira mão?
Assine a minha Newsletter

Hoje vou compartilhar com vocês uma solução incrível para exibir informações de status de forma intuitiva e personalizada em seu site WordPress, sem escrever uma única linha de código.

Recentemente, um inscrito do meu canal, o Cristian, me fez uma ótima sugestão. Ele queria que, em um Listing Grid de anúncios no meu site Portal Pet, os cards fossem exibidos com cores diferentes de acordo com o status de aprovação: laranja para “Aguardando Aprovação”, verde para “Aprovado” e vermelho para “Reprovado”.

Essa é uma funcionalidade muito útil para deixar a visualização dos anúncios mais intuitiva e atraente para os usuários. E, com as ferramentas certas, é possível implementá-la de forma rápida e fácil. Vamos ver como?

Caso queira comprar uma cópia do Portal Pet me chame no Whatsapp

Personalizando a Exibição do Listing Grid

Primeiro, vamos entrar no editor do Listing Grid que estamos trabalhando. Neste exemplo, estou usando o JetEngine, um poderoso plugin do Elementor que me permite criar layouts dinâmicos sem código.

Dentro do Listing Grid, vou adicionar um contêiner que irá englobar o conteúdo do card (foto e botão). Dessa forma, poderei personalizar a aparência desse contêiner de acordo com o status do anúncio.

Exibindo Anúncios Aguardando Aprovação

Dentro do contêiner, vou configurar a cor de fundo, borda e texto para o status “Aguardando Aprovação”. Neste caso, optei por uma cor laranja que combina com o visual do meu site.

Em seguida, vou ativar a Dynamic Visibility desse contêiner. Isso me permite definir uma regra para exibir esse bloco apenas quando o status do anúncio for “Aguardando Aprovação”.

Exibindo Anúncios Aprovados

Agora, vou duplicar o contêiner e configurar as cores para o status “Aprovado”. Neste caso, escolhi um tom de verde que transmite a sensação de aprovação.

Novamente, vou ativar a Dynamic Visibility desse contêiner, mas dessa vez definindo a regra para quando o status for “Aprovado”.

Exibindo Anúncios Reprovados

Por fim, vou duplicar o contêiner mais uma vez e configurar as cores para o status “Reprovado”. Aqui, optei por um vermelho que indica claramente a reprovação do anúncio.

E, claro, vou ativar a Dynamic Visibility desse contêiner para exibí-lo apenas quando o status for “Reprovado”.

Com essa configuração simples, sempre que um anúncio tiver seu status atualizado, o Listing Grid irá exibir o card com a cor correspondente, tornando a visualização muito mais clara e intuitiva para os usuários.

Benefícios dessa Solução

Além de deixar a interface do seu site mais atraente e fácil de usar, essa solução traz outros benefícios importantes:

  • Melhora a Experiência do Usuário: Ao fornecer informações visuais claras sobre o status dos anúncios, você torna a navegação e a compreensão do sistema muito mais intuitiva para os seus usuários.
  • Aumenta a Eficiência Operacional: Com a exibição diferenciada dos status, seus usuários podem identificar rapidamente quais anúncios precisam de atenção, otimizando o fluxo de trabalho.
  • Personalização Avançada sem Código: Usando ferramentas como o JetEngine, é possível criar layouts dinâmicos e personalizados sem precisar escrever uma única linha de código, economizando tempo e recursos.

Conclusão

Espero que esse tutorial tenha te inspirado a implementar soluções criativas e intuitivas em seu site WordPress. Lembre-se de que, com as ferramentas certas, é possível criar experiências incríveis para seus usuários, sem a necessidade de dominar habilidades avançadas de programação.

Se você tiver alguma dúvida ou quiser saber mais sobre como personalizar seu site, fique à vontade para entrar em contato comigo. Estarei sempre pronto para te ajudar!

FAQ

Posso usar essa solução em qualquer site WordPress?

Sim, essa solução pode ser aplicada a qualquer site WordPress que utilize o plugin JetEngine ou outros plugins que ofereçam recursos de exibição dinâmica de conteúdo.

Preciso saber programar para implementar essa funcionalidade?

Não, essa solução não requer conhecimentos avançados de programação. Ela pode ser implementada de forma visual, usando as ferramentas de configuração do JetEngine ou de outros plugins similares.

Essa solução é escalável? Posso aplicá-la a vários tipos de conteúdo?

Sim, essa solução é escalável e pode ser aplicada a diversos tipos de conteúdo, não apenas a anúncios. Você pode usar o mesmo princípio para exibir informações de status em listas de produtos, serviços, eventos, entre outros.

Onde posso encontrar mais informações sobre o JetEngine e outros plugins que oferecem recursos de exibição dinâmica?

Você pode encontrar mais informações sobre o JetEngine em meu site e canal no YouTube. Além disso, existem outros plugins como o Elementor Pro e o Crocoblock que também oferecem recursos avançados de personalização de conteúdo.

Made with VideoToBlog using Alterar Cores no Listing Grid com Dynamic Visibility do JetEngine no WordPress

Compartilhe
181 Visualizações

Quer receber conteúdos em primeira mão?
Assine a minha Newsletter

Entrar em Contato

Dante Testa

Para discutirmos suas necessidades, preencha o formulário; vou lhe chamar no Whatsapp.

Nome *
Whatsapp *
E-mail *
Mensagem *