Passa al contenuto principale

WordPress - Testa in A/B nuovi elementi del page builder

Ultimo aggiornamento il 22 apr 20262 min di lettura
Indice

In breve​

Test illimitati in WordPress: crea nuovi blocchi, sezioni, navigazioni o altri elementi nel CMS (ad es. con Elementor), assegna loro un ID univoco e nascondili nel test A/B usando CSS. Con Varify, l'elemento torna visibile nella versione di test - così puoi testare nuovi contenuti senza dover ricostruire la pagina. Ideale per banner, sezioni o singoli elementi.

Inserire un nuovo elemento in una pagina WordPress​

Con Elementor in WordPress, puoi creare facilmente intere sezioni o blocchi. Puoi creare nuovi elementi oppure trascinare un elemento desiderato (ad es. testo, immagine o pulsante) nelle aree esistenti della tua pagina. Puoi quindi personalizzare il contenuto e il design secondo le tue esigenze.

In questo esempio, un riquadro per l'area di risoluzione dei problemi è stato aggiunto alla sezione superiore della pagina.

Pagina live ed editor di Elementor affiancati; una freccia indica il nuovo elemento aggiunto nell'editor

Assegnare un ID CSS a un nuovo elemento​

Seleziona l'elemento che vuoi mostrare successivamente utilizzando Varify - può essere un nuovo blocco, una colonna o semplicemente un singolo elemento. Clicca su di esso e vai alla scheda "Advanced" nel menu di Elementor. Lì troverai il campo "CSS ID". Inserisci qui un ID univoco, ad es. "new-element".

Scheda Elementor „Erweitert“ con il CSS ID „new-element“ inserito per il contenitore nascosto

Nascondi elemento​

Nella scheda "Advanced", passa alla sezione "Responsive". Attiva i tre interruttori presenti per nascondere l'elemento su desktop, tablet e smartphone. Questo ti permette di pubblicare le tue personalizzazioni senza che gli utenti vedano già l'elemento.

Scheda Elementor „Erweitert“ con la sezione „Responsiv“ evidenziata, dove l'elemento è nascosto su desktop, tablet e mobile

Mostra elemento tramite esperimento​

  1. Crea un nuovo esperimento in Varify.
  2. Poi clicca sul simbolo del codice in alto a destra per accedere all'area CSS.
  3. Puoi inserire qui questo codice (adatta l'ID se hai assegnato un nome diverso):
#new-element{
display: block !important;
}
  1. Sostituisci "new-element" con l'ID che hai assegnato in Elementor. Il carattere # indica che si tratta dell'ID. Non deve essere rimosso.
  2. Salva la variante.
  3. Testa l'esperimento per verificare che tutto funzioni come desiderato.
  4. Avvia l'esperimento
«Split-URL-Test» di Varify con il page targeting aperto: l'URL dello shop viene abbinato con «Simple Match»

Opzionale: nascondi altro elemento​

Se stai testando una variazione di un elemento esistente e questo è quindi presente due volte sulla pagina, dovresti nascondere l'elemento originale non appena viene visualizzato il nuovo elemento.

Procedura:

  1. Assegna un ID univoco all'elemento originale nel CMS.
  2. Aggiungi il codice appropriato al CSS della variante Varify, ad esempio:
#original-element{
display: none !important;
}

Questo garantisce che solo il nuovo elemento sia visibile nella variante di test.

Su questa pagina