Zum Hauptinhalt springen

WordPress – neue Page-Builder-Elemente A/B-testen

Zuletzt aktualisiert am 22. Apr. 20262 Min. Lesezeit
Inhaltsverzeichnis

Kurz gesagt​

Grenzenloses Testen in WordPress: Erstelle neue Blöcke, Sektionen, Navigationen oder andere Elemente im CMS (z. B. mit Elementor), gib ihnen eine eindeutige ID und blende sie im A/B-Test per CSS aus. Mit Varify wird das Element in der Testversion wieder sichtbar — so kannst du neue Inhalte testen, ohne die Seite neu aufbauen zu müssen. Ideal für Banner, Sektionen oder einzelne Elemente.

Neues Element in WordPress-Seite einfügen​

Mit Elementor in WordPress kannst du ganz einfach ganze Bereiche oder Blöcke erstellen. Du kannst neue Elemente erstellen oder ein gewünschtes Element (z. B. Text, Bild oder Button) per Drag-and-drop in bestehende Bereiche deiner Seite ziehen. Anschließend kannst du den Inhalt und das Design nach deinen Wünschen anpassen.

In diesem Beispiel wurde eine Kachel für den Troubleshooting-Bereich im oberen Abschnitt der Seite hinzugefügt.

Live-Seite und Elementor-Editor nebeneinander; ein Pfeil zeigt auf das neue Element, das im Editor hinzugefügt wurde

Einer neuen Elementen eine CSS-ID zuweisen​

Wähle das Element aus, das du später mit Varify einblenden möchtest – das kann ein neuer Block, eine Spalte oder auch nur ein einzelnes Element sein. Klicke darauf und wechsle im Elementor-Menü zum Tab „Erweitert“. Dort findest du das Feld „CSS-ID“. Gib hier eine eindeutige ID ein, z. B. „new-element“.

Elementor-Tab „Erweitert“ mit der CSS-ID „new-element“, die für den ausgeblendeten Container eingegeben wurde

Element ausblenden​

Wechsle im Tab „Erweitert“ zum Bereich „Responsiv“. Aktiviere dort die drei Schalter, um das Element auf Desktop, Tablet und Smartphone auszublenden. So kannst du deine Anpassungen veröffentlichen, ohne dass Nutzer das Element bereits sehen.

Elementor-Tab „Erweitert“ mit hervorgehobenem Bereich „Responsiv“, in dem das Element auf Desktop, Tablet und Mobilgerät ausgeblendet wird

Element per Experiment einblenden​

  1. Erstelle ein neues Experiment in Varify.
  2. Klicke dann oben rechts auf das Code-Symbol, um zum CSS-Bereich zu gelangen.
  3. Dort kannst du diesen Code eingeben (passe die ID an, falls du einen anderen Namen vergeben hast):
#new-element{
display: block !important;
}
  1. Ersetze „new-element“ durch die ID, die du in Elementor vergeben hast. Das #-Zeichen zeigt an, dass es sich um die ID handelt. Dieses darf nicht entfernt werden.
  2. Speichere die Variante.
  3. Teste das Experiment, um zu sehen, ob alles wie gewünscht funktioniert.
  4. Starte das Experiment
Varify „Split-URL-Test“ mit geöffnetem Page-Targeting: Die Shop-URL wird mit „Simple Match“ abgeglichen

Optional: Anderes Element ausblenden​

Wenn du eine Variante eines bestehenden Elements testest und dieses dadurch doppelt auf der Seite vorhanden ist, solltest du das ursprüngliche Element ausblenden, sobald das neue Element angezeigt wird.

Vorgehensweise:

  1. Weise dem ursprünglichen Element im CMS eine eindeutige ID zu.
  2. Füge den entsprechenden Code zum CSS der Varify-Variante hinzu, zum Beispiel:
#original-element{
display: none !important;
}

So wird sichergestellt, dass in der Testvariante nur das neue Element sichtbar ist.

Auf dieser Seite