Saltar al contenido principal

WordPress - Haz pruebas A/B con nuevos elementos del creador de páginas

Última actualización el 22 abr 20262 min de lectura
Índice de contenidos

En resumen​

Pruebas sin límites en WordPress: crea nuevos bloques, secciones, navegaciones u otros elementos en el CMS (por ejemplo, con Elementor), asígnales un ID único y ocúltalos en el test A/B usando CSS. Con Varify, el elemento vuelve a ser visible en la versión de prueba, para que puedas probar contenido nuevo sin tener que reconstruir la página. Ideal para banners, secciones o elementos individuales.

Insertar un nuevo elemento en una página de WordPress​

Con Elementor en WordPress, puedes crear fácilmente secciones o bloques completos. Puedes crear nuevos elementos o arrastrar y soltar un elemento deseado (p. ej., texto, imagen o botón) en áreas existentes de tu página. Luego puedes personalizar el contenido y el diseño según tus necesidades.

En este ejemplo, se ha añadido un mosaico para el área de solución de problemas en la sección superior de la página.

Página en vivo y editor de Elementor uno al lado del otro; una flecha señala el nuevo elemento que se ha añadido en el editor

Asignar un ID de CSS a un nuevo elemento​

Selecciona el elemento que quieres mostrar más adelante mediante Varify: puede ser un nuevo bloque, una columna o simplemente un elemento individual. Haz clic en él y ve a la pestaña "Advanced" en el menú de Elementor. Allí encontrarás el campo "CSS ID". Introduce aquí un ID único, p. ej. "new-element".

Pestaña de Elementor „Erweitert" con el CSS ID „new-element" introducido para el contenedor oculto

Ocultar elemento​

En la pestaña "Advanced", cambia a la sección "Responsive". Activa allí los tres interruptores para ocultar el elemento en desktop, tablet y smartphone. Esto te permite publicar tus personalizaciones sin que los usuarios vean ya el elemento.

Pestaña de Elementor „Erweitert" con la sección „Responsiv" resaltada, donde el elemento está oculto en desktop, tablet y móvil

Mostrar elemento a través del experimento​

  1. Crea un nuevo experimento en Varify.
  2. Luego haz clic en el símbolo de código en la parte superior derecha para ir al área de CSS.
  3. Puedes introducir este código ahí (ajusta el ID si has asignado un nombre diferente):
#new-element{
display: block !important;
}
  1. Reemplaza "new-element" con el ID que has asignado en Elementor. El carácter # indica que se trata del ID. Este no debe eliminarse.
  2. Guarda la variante.
  3. Prueba el experimento para ver si todo funciona como se desea.
  4. Inicia el experimento
«Split-URL-Test» de Varify con el targeting de página abierto: la URL de la tienda se coincide con «Simple Match»

Opcional: Ocultar otro elemento​

Si estás probando una variación de un elemento existente y, por lo tanto, este está presente dos veces en la página, deberías ocultar el elemento original tan pronto como se muestre el nuevo elemento.

Procedimiento:

  1. Asigna un ID único al elemento original en el CMS.
  2. Añade el código correspondiente al CSS de la variante de Varify, por ejemplo:
#original-element{
display: none !important;
}

Esto asegura que solo el nuevo elemento sea visible en la variante de test.

En esta página