Panoramica dell'editor visivo

Scopri la barra dell'app, la tavolozza dell'editor e come funzionano le modifiche.

Dopo aver creato una variante, fai clic su Modifica (in Varianti) per avviare l'editor visivo di Optimize.

Click Edit to launch the visual editor.

L'interfaccia dell'editor visivo è costituita da questi componenti:

  • Pagina dell'editor: una copia della pagina web che vuoi modificare o personalizzare.
  • Barra dell'app: una barra degli strumenti visualizzata nella parte superiore della pagina.
  • Tavolozza dell'editor: una tavolozza mobile in basso a destra nella pagina.

Barra dell'app

La barra dell'app viene visualizzata lungo la parte superiore della pagina quando crei una variante nell'editor visivo e contiene una serie di funzionalità e informazioni sull'esperienza di Optimize.

The app bar in the visual editor.

La riga superiore (grigio scuro) della barra dell'app contiene:

  • Pulsante Indietro: torna alla pagina precedente.
  • Nome esperimento (e stato): mostra il nome e lo stato dell'esperienza corrente.
  • Menu delle varianti: passa rapidamente a un'altra variante selezionandola qui.
  • Menu delle preimpostazioni dei dispositivi: un elenco di dimensioni del dispositivo per controllare la tua variante.
  • Modifiche: il numero corrente di modifiche. Fai clic per vedere l'elenco delle modifiche.
  • Diagnostica [visual editor diagnostics button]: apre il riquadro diagnostica per aiutarti a identificare i problemi. Scopri di più.
  • Altro [Altro]: accedi a opzioni aggiuntive, tra cui il tour e la guida di Optimize.
  • Fine/Salva: fai clic su Fine quando hai finito di modificare la variante. Fai clic su Salva per salvare le modifiche e tornare alla pagina dei dettagli dell'esperimento.
Scopri di più sulle funzionalità nella riga inferiore della barra dell'app, inclusi il selettore elementi, i breadcrumb, l'editor di codice e la modalità interattiva in Utilizzo dell'editor visivo.

Analizziamo più in dettaglio alcune delle principali funzionalità della riga superiore della barra dell'app, tra cui il menu delle preimpostazioni dei dispositivi e il pulsante Modifiche.

Menu delle preimpostazioni dei dispositivi

L'editor visivo di Optimize ti consente di garantire che la tua variante sia compatibile con più dimensioni di schermi e tipi di dispositivi. Inoltre, ti permette di apportare modifiche dello stile adattabili che si applicano a specifiche larghezze dello schermo.

Esistono due metodi per verificare la compatibilità della variante:

  1. Scegli uno dei dispositivi predefiniti nel menu delle preimpostazioni dei dispositivi nella parte superiore dell'editor visivo. Utilizza questa opzione quando vuoi testare la tua variante in un modello di dispositivo specifico. Questa opzione simulerà lo user agent del browser corrispondente ed è particolarmente adatta se hai una versione del tuo sito specifica per i dispositivi mobili.
  2. Scegli Adattabile dalla parte inferiore del menu dei dispositivi, quindi utilizza uno dei metodi di anteprima adattabile (di seguito) per simulare schermi di dimensioni diverse. Utilizza questa opzione se hai un sito adattabile che si adatta dinamicamente alla larghezza e all'altezza della schermata del browser, anche su un browser web da computer desktop. Con questa opzione puoi anche apportare modifiche di stile adattabili utilizzando l'editor visivo.

Device preset menu

Il menu delle preimpostazioni dei dispositivi dell'editor visivo.

Anteprima adattabile

Quando selezioni Adattabile dal menu delle preimpostazioni dei dispositivi, hai a disposizione tre modi per visualizzare l'anteprima della variante in schermi di dimensioni diverse:

  1. Fai clic sulla barra grigia della larghezza automatica, che si trova immediatamente sotto il selettore elementi, per simulare larghezze della pagina predefinite (ad es. 320, 400 o 600 px). Nota: questa impostazione modifica solo la larghezza, non l'altezza. Se il tuo sito utilizza già il CSS adattabile, la barra utilizzerà i tuoi punti di interruzione della larghezza più comuni, in modo da poter identificare facilmente tutti i diversi aspetti che le tue pagine possono assumere.
  2. Inserisci i valori relativi alla larghezza e all'altezza desiderate (in pixel) direttamente nello strumento per ridimensionare le pagine (che si trova sotto la barra della larghezza automatica), quindi premi INVIO.
  3. Trascina i punti di ridimensionamento grigio scuri nel bordo inferiore destro della tua variante per simulare una specifica dimensione dello schermo e verificare come risponde la variante. Il risultato è simile al modo in cui la tua variante verrà mostrata quando un utente cambia in modo dinamico le dimensioni della finestra del proprio browser.

editor-responsive-previewing-ss-fpo

Le opzioni di anteprima adattabile dell'editor visivo.

Modifiche adattabili

Oltre a visualizzare l'anteprima delle varianti, selezionando Adattabile dalla parte inferiore del menu dei dispositivi puoi apportare modifiche di stile adattabili tramite il menu dei punti di interruzione.

editor-device-and-breakpoint-menus

Menu dei dispositivi (a sinistra) e menu dei punti di interruzione (a destra).

Il menu dei punti di interruzione contiene le restrizioni per il design adattabile più semplici e comuni (ad esempio, query supporti) che si applicano al tuo sito (solo per la larghezza). Se il tuo sito utilizza già il CSS adattabile, la barra utilizzerà i punti di interruzione della larghezza più comuni e ti permetterà di apportare modifiche coerenti con i punti di interruzione correnti.

Editor breakpoint menu screenshot

Il menu dei punti di interruzione espanso.

Quando selezioni un'opzione dal menu dei punti di interruzione, l'editor inserirà uno stato speciale in cui tutte le modifiche dello stile che utilizzano la tavolozza dell'editor useranno questa restrizione. Ad esempio, se selezioni "Fino a 600 pixel di larghezza" dal menu dei punti di interruzione e modifichi le dimensioni del carattere usato da un pulsante, tale pulsante utilizzerà il carattere originale su finestre di dispositivi o browser più grandi di 600 pixel di larghezza. Ciò verrà messo in evidenza nella tavolozza dell'editor. Questo effetto si applica solo alle modifiche dello stile e non influisce sui cambiamenti a testo o contenuti.

Editor palette constrained by the breakpoint menu.

La tavolozza dell'editor è limitata dai valori selezionati nel menu dei punti di interruzione.

Quando utilizzi il menu dei punti di interruzione, il ridimensionamento adattabile tramite i punti di ridimensionamento continuerà a funzionare durante il trascinamento (per aiutarti a visualizzare l'anteprima), ma le dimensioni della pagina torneranno automaticamente alla larghezza dei punti di interruzione selezionata.

Puoi visualizzare e modificare la query supporti di ogni singola modifica dello stile utilizzando l'elenco delle modifiche o l'editor di codice CSS; inoltre, puoi utilizzarli per specificare restrizioni alle query supporti più complesse. Puoi uscire dalla modalità di modifica adattabile selezionando Tutte le dimensioni nella parte superiore del menu dei punti di interruzione.

Pulsante Modifiche

Optimize crea automaticamente un elenco di modifiche che vengono applicate agli elementi della pagina man mano che utilizzi l'editor visivo. Questo elenco delle modifiche è un insieme di istruzioni di base che trasformano la pagina originale nella variante che vuoi testare. Optimize applica le modifiche alla pagina web, nell'ordine in cui le hai create, quando un visitatore idoneo carica la variante nel browser web.

Pulsante Modifiche

Il pulsante Modifiche viene visualizzato sul lato destro della barra dell'app e mostra "Nessuna modifica" quando crei per la prima volta una variante. Quando utilizzi l'editor visivo, il pulsante Modifiche viene aggiornato automaticamente per mostrare il numero di modifiche apportate alla variante corrente, ad esempio "15 modifiche" di seguito:

15 changes button

Dispositivo di scorrimento delle modifiche

Fai clic sul pulsante Modifiche ("15 modifiche") per visualizzare il dispositivo di scorrimento delle modifiche e l'elenco delle modifiche, mostrate in ordine cronologico.

Changes list

Tipi di modifica

L'editor visivo di Optimize supporta i seguenti tipi di modifica:

Per scoprire di più, vedi Tipi di modifica nell'editor visivo.

Quando vengono applicate le modifiche

Lo snippet Optimize deve sempre essere caricato nella pagina <HEAD>. Ciò significa che, quando vengono eseguite le istruzioni di modifica, gli elementi target potrebbero non essere stati analizzati e non sono disponibili nella pagina.

Molte pagine includono script sincroni nel body che ritardano la prontezza del DOM. Per evitare sfarfallii, Optimize monitora costantemente il documento finché non vengono identificati elementi corrispondenti. Se un selettore CSS corrisponde a più elementi su una pagina complessa con più script sincroni, la modifica può essere applicata progressivamente su più iterazioni man mano che gli elementi corrispondenti vengono analizzati.

Diversi tipi di modifica vengono anche applicati in diverse fasi dell'analisi. Le modifiche del testo, dell'HTML e del riordino vengono applicate solo al termine dell'analisi di tutti i contenuti e del tag di chiusura dell'elemento corrispondente. Le modifiche di attributi e stili richiedono solo il tag di apertura, mentre le modifiche allo script possono essere configurate dall'utente.

Come passaggio ulteriore per minimizzare lo sfarfallìo, Optimize nasconde temporaneamente gli elementi abbinati (utilizzando i tag <STYLE> aggiunti molto presto) fino a che gli elementi vengono abbinati e le modifiche applicate.

  • Questi dettagli possono essere significativi se le modifiche riguardano un contenitore globale o il corpo del documento.
  • Le modifiche di stile implementate come regole CSS vengono aggiunte in modo sincrono nell'<HEAD> quando è in esecuzione lo snippet Optimize e non devono attendere che vengano analizzati gli elementi abbinati.

L'ordine delle modifiche viene rispettato in presenza di effetti collaterali (ad esempio in caso di modifica successiva apportata a un elemento aggiunto da una modifica precedente). Ma Optimize può applicare le modifiche in un ordine diverso quando non ci sono effetti collaterali e gli elementi corrispondenti di una modifica successiva diventano disponibili. Optimize può anche eseguire le modifiche che corrispondono a più elementi in maniera progressiva e parallela.

Sebbene Optimize includa queste funzionalità, la best practice consiste nel modificare dall'alto verso il basso.

Palette editor

La tavolozza dell'editor viene visualizzata nell'angolo inferiore destro della pagina web quando utilizzi l'editor visivo.

La tavolozza dell'editor è dinamica, in quanto mostra i controlli di modifica appropriati per un elemento. Se fai clic su un elemento, ad esempio un blocco di testo o un'immagine, viene attivato il pulsante Modifica elemento. Se fai clic su Modifica elemento, viene visualizzato un elenco a discesa di opzioni di modifica, che includono l'opzione per modificare il testo dell'elemento, l'HTML o per aggiungere HTML o JavaScript da eseguire al caricamento dell'elemento selezionato.

Suggerimento: l'intestazione blu contiene pulsanti per annullare o ripeterele modifiche oltre a chiudere.
È stato utile?
Come possiamo migliorare l'articolo?
Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale
Cerca nel Centro assistenza
true
101337
false