Aller au contenu principal

WordPress - Tester en A/B de nouveaux éléments du page builder

Dernière mise à jour le 22 avr. 20262 min de lecture
Table des matières

En bref​

Des tests sans limites dans WordPress : crée de nouveaux blocs, sections, navigations ou autres éléments dans le CMS (par exemple avec Elementor), donne-leur un ID unique et masque-les dans le test A/B à l'aide de CSS. Avec Varify, l'élément redevient visible dans la version de test - tu peux ainsi tester du nouveau contenu sans avoir à reconstruire la page. Idéal pour les bannières, sections ou éléments individuels.

Insérer un nouvel élément dans une page WordPress​

Avec Elementor dans WordPress, tu peux facilement créer des sections ou blocs entiers. Tu peux créer de nouveaux éléments ou glisser-déposer un élément souhaité (par exemple du texte, une image ou un bouton) dans des zones existantes de ta page. Tu peux ensuite personnaliser le contenu et le design selon tes besoins.

Dans cet exemple, une tuile pour la zone de dépannage a été ajoutée à la section supérieure de la page.

Page en direct et éditeur Elementor côte à côte ; une flèche pointe vers le nouvel élément ajouté dans l'éditeur

Attribuer un ID CSS à un nouvel élément​

Sélectionne l'élément que tu souhaites afficher plus tard via Varify - il peut s'agir d'un nouveau bloc, d'une colonne ou d'un simple élément. Clique dessus et va dans l'onglet « Advanced » du menu Elementor. Tu y trouveras le champ « CSS ID ». Saisis ici un ID unique, par ex. « new-element ».

Onglet Elementor « Advanced » avec l'ID CSS « new-element » saisi pour le conteneur masqué

Masquer l'élément​

Dans l'onglet « Advanced », passe à la section « Responsive ». Active les trois interrupteurs pour masquer l'élément sur desktop, tablette et smartphone. Cela te permet de publier tes personnalisations sans que les utilisateurs ne voient déjà l'élément.

Onglet Elementor « Advanced » avec la section « Responsive » mise en évidence, où l'élément est masqué sur desktop, tablette et mobile

Afficher l'élément via l'expérience​

  1. Crée une nouvelle expérience dans Varify.
  2. Clique ensuite sur le symbole de code en haut à droite pour accéder à la zone CSS.
  3. Tu peux y saisir ce code (ajuste l'ID si tu as attribué un autre nom) :
#new-element{
display: block !important;
}
  1. Remplace « new-element » par l'ID que tu as attribué dans Elementor. Le caractère # indique qu'il s'agit de l'ID. Il ne doit pas être supprimé.
  2. Enregistre la variante.
  3. Teste l'expérience pour vérifier que tout fonctionne comme souhaité.
  4. Démarre l'expérience
Varify « Split-URL-Test » avec le ciblage de page ouvert : l'URL de la boutique est associée avec « Simple Match »

Optionnel : Masquer un autre élément​

Si tu testes une variation d'un élément existant et qu'il est donc présent deux fois sur la page, tu dois masquer l'élément original dès que le nouvel élément est affiché.

Procédure :

  1. Attribue un ID unique à l'élément original dans le CMS.
  2. Ajoute le code approprié au CSS de la variante Varify, par exemple :
#original-element{
display: none !important;
}

Cela garantit que seul le nouvel élément est visible dans la variante de test.

Sur cette page