Pular para o conteúdo principal

WordPress - Teste A/B novos elementos do page builder

Última atualização em 22 de abr. de 20262 min de leitura
Índice

Resumo​

Testes ilimitados no WordPress: Cria novos blocos, secções, navegações ou outros elementos no CMS (por exemplo, com Elementor), atribui-lhes um ID único e esconde-os no teste A/B usando CSS. Com o Varify, o elemento torna-se visível novamente na versão de teste - assim podes testar novo conteúdo sem ter de reconstruir a página. Ideal para banners, secções ou elementos individuais.

Inserir novo elemento numa página do WordPress​

Com o Elementor no WordPress, podes criar facilmente secções ou blocos inteiros. Podes criar novos elementos ou arrastar e soltar um elemento desejado (por exemplo, texto, imagem ou botão) em áreas existentes da tua página. Depois, podes personalizar o conteúdo e o design de acordo com as tuas necessidades.

Neste exemplo, foi adicionado um tile para a área de resolução de problemas na secção superior da página.

Página ao vivo e editor do Elementor lado a lado; uma seta aponta para o novo elemento que foi adicionado no editor

Atribuir um CSS ID a um novo elemento​

Seleciona o elemento que queres mostrar mais tarde usando o Varify - pode ser um novo bloco, uma coluna ou apenas um único elemento. Clica nele e vai até à aba «Advanced» no menu do Elementor. Aí encontrarás o campo «CSS ID». Insere aqui um ID único, por exemplo, «new-element».

Aba «Erweitert» do Elementor com o CSS ID «new-element» inserido para o contentor oculto

Ocultar elemento​

Na aba «Advanced», muda para a seção «Responsive». Ativa os três interruptores aí para ocultar o elemento no desktop, tablet e smartphone. Isto permite-te publicar as tuas personalizações sem que os utilizadores já vejam o elemento.

Aba «Erweitert» do Elementor com a seção «Responsiv» destacada, onde o elemento é ocultado no desktop, tablet e mobile

Mostrar elemento via experimento​

  1. Crie um novo experimento no Varify.
  2. Depois clique no símbolo de código no canto superior direito para ir para a área de CSS.
  3. Podes inserir este código ali (ajusta o ID se tiveres atribuído um nome diferente):
#new-element{
display: block !important;
}
  1. Substitui "new-element" pelo ID que atribuíste no Elementor. O caractere # indica que se trata do ID. Este não deve ser removido.
  2. Guarda a variante.
  3. Testa o experimento para ver se tudo funciona como desejado.
  4. Inicia o experimento
Varify «Split-URL-Test» com o direcionamento de página aberto: o URL da loja é correspondido com «Simple Match»

Opcional: Ocultar outro elemento​

Se estiveres a testar uma variação de um elemento existente e este estiver, por isso, presente duas vezes na página, deves ocultar o elemento original assim que o novo elemento for exibido.

Procedimento:

  1. Atribui um ID único ao elemento original no CMS.
  2. Adiciona o código apropriado ao CSS da variante Varify, por exemplo:
#original-element{
display: none !important;
}

Isto garante que apenas o novo elemento é visível na variante de teste.

Nesta página