WordPress - Neue Page Builder Elemente A/B testen
Inhaltsverzeichnis
Kurz & Knapp
Grenzenlos testen in WordPress: Erstelle im CMS (z. B. mit Elementor) neue Blöcke, Sektionen, Navigationen oder andere Elemente, gib ihnen eine eindeutige ID und blende sie per CSS im A/B Test aus. Mit Varify wird das Element in der Testvariante wieder sichtbar – somit testest du gezielt neue Inhalte, ohne die Seite umzubauen. Ideal für Banner, Sektionen oder einzelne Elemente.
Neues Element in WordPress Seite einfügen
Mit Elementor in WordPress erstellst du ganz einfach ganze Sektionen oder Blöcke. Du kannst neue Elemente anlegen oder per Drag & Drop ein gewünschtes Element (zum Beispiel Text, Bild oder Button) in bestehende Bereiche deiner Seite ziehen. Danach passt du Inhalt und Design ganz nach deinen Vorstellungen an.
In diesem Beispiel wurde eine Kachel für den Troubleshooting-Bereich im oberen Abschnitt der Seite eingefügt.
Neuem Element eine CSS ID vergeben
Wähle das Element aus, das du später per Varify einblenden möchtest – das kann ein neuer Block, eine Spalte oder auch nur ein einzelnes Element sein. Klicke es an und gehe im Elementor-Menü zum Tab „Erweitert“. Dort findest du das Feld „CSS ID“. Trage hier eine eindeutige ID ein, z. B. „new-element“.
Element ausblenden
Wechsle im Tab „Erweitert“ zum Bereich „Responsive“. 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.
Element in über Experiment einblenden
- Lege in Varify ein neues Experiment an.
- Klicke anschließend oben rechts auf das Code-Symbol, um zum CSS-Bereich zu gelangen.
- Dort kannst du diesen Code eingeben (passe die ID an, wenn du einen anderen Namen vergeben hast):
#new-element{
display: block !important;
}
- Ersetze „new-element“ durch die ID, die du in Elementor vergeben hast. Das #-Zeichen kennzeichnet, dass es sich hier um die ID handelt. Das darf nicht entfernt werden.
- Speichere die Variante ab.
- Teste das Experiment, ob alles funktioniert, wie gewünscht.
- Starte das Experiment
Optional: Anderes Element ausblenden
Wenn du eine Variation eines bestehenden Elements testest und dieses somit doppelt auf der Seite vorhanden ist, solltest du das Originalelement ausblenden, sobald das neue Element eingeblendet wird.
Vorgehen:
- Vergib im CMS auch dem Originalelement eine eindeutige ID.
- Ergänze im CSS der Varify-Variante den passenden Code, zum Beispiel:
#original-element{
display: none !important;
}
So stellst du sicher, dass nur das neue Element in der Testvariante sichtbar ist.