Tipi di modifica

Man mano che apporti le modifiche nell'editor visivo di Optimize, viene creato automaticamente un elenco. Per creare rapidamente una variante, fai clic su MODIFICA ELEMENTO nella tavolozza dell'editor. Poi puoi scegliere tra diversi tipi di modifiche.

Tipi di modifica

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

Modifica dello stile

Utilizzata per implementare le modifiche degli attributi di stile, tra cui la dimensione e la posizione degli elementi.

La modifica dello stile ti permette di implementare le istruzioni utilizzando una regola CSS:

#target { color : red }

...o di utilizzare l'attributo di stile dell'elemento target:

<p id="target" style="color : red"> </p>

L'editor visivo sceglie per impostazione predefinita la sintassi più corretta, favorendo l'approccio della regola CSS.

Se nella pagina esiste una regola CSS più specifica che supera la nuova regola, l'editor visivo utilizza la proprietà "importante", ad esempio:

#target { color : red !important}

L'editor utilizza lo stile dell'elemento solo se la regola precedente è a sua volta superata da una regola più specifica nella pagina.

L'approccio della regola CSS minimizza lo sfarfallìo (causato dalla breve comparsa di contenuti privi di stile prima del caricamento di CSS). Al contrario, modificare una proprietà di stile utilizzando lo stile dell'elemento richiede che l'elemento già esista sulla pagina, aumentando così la possibilità che diventi brevemente visibile all'utente prima della modifica.

Puoi esaminare le opzioni scelte dall'editor e modificarle facendo l'editing di una modifica dello Stile esistente.

Editor avanzato: screenshot della finestra di dialogo Modifica stile

Modifica dell'attributo

Utilizzata per implementare le modifiche degli attributi degli elementi, come il target di un link o l'origine di un'immagine. Puoi esaminare e modificare le proprietà come il selettore CSS, l'attributo e il valore.

Editor avanzato: screenshot Modifica attributo

Modifica del testo

Utilizzata quando apporti modifiche del testo in linea nell'editor. Quando un elemento contiene testo ed elementi secondari, l'editor indica la parte del testo che è stata modificata. Nell'esempio seguente, puoi modificare solo una delle parti, ad esempio "Testo". Per modificare, fai clic su ciascuna parte singolarmente o utilizza il tasto TAB per passare alla parte successiva.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

Sono supportate le seguenti modalità:

  1. Sostituisci: sostituisce una parte di testo esistente.
  2. Inserisci: inserisce una nuova parte di testo dentro l'elemento target, all'inizio.
  3. Aggiungi: inserisce una nuova parte di testo dentro l'elemento target, alla fine.
  4. Prima: inserisce una nuova parte di testo prima dell'elemento target.
  5. Dopo: inserisce una nuova parte di testo dopo l'elemento target.

Editor avanzato: screenshot Modifica testo

Una modifica del testo è più sicura e meno invasiva di una modifica dell'HTML. È preferibile quando viene modificato solo il testo. Una modifica del testo non comporta effetti collaterali sulla struttura del documento (sui selettori CSS o su altri elementi) e non influisce sui gestori di eventi che possono essere registrati negli elementi target.

Modifica dell'HTML

Utilizzata per sostituire o inserire un nuovo HTML. Vengono supportate le seguenti modalità:

  • Sostituisci: sostituisce i contenuti HTML esistenti.
  • Inserisci: inserisce nuovi contenuti HTML dentro l'elemento target, all'inizio.
  • Aggiungi: inserisce nuovi contenuti HTML dentro l'elemento target, alla fine.
  • Prima: inserisce nuovi contenuti HTML prima dell'elemento target.
  • Dopo: inserisce nuovi contenuti HTML dopo l'elemento target.

Editor avanzato: screenshot Inserisci testo prima

Una modifica dell'HTML comporta la perdita di tutti i gestori di eventi non in linea. Ad esempio, questo pulsante smetterà di funzionare dopo una modifica dell'HTML (ad es. Inserisci HTML prima):
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

Le modifiche dell'HTML avvengono dopo che i contenuti HTML iniziali vengono analizzati dal browser, quindi tutti gli script che li contengono saranno già stati eseguiti. Per questo motivo, l'editor visivo rimuove i tag di script durante il caricamento di contenuti HTML per la modifica. Non puoi includere script nei nuovi contenuti HTML. Per eseguire un nuovo script come parte di una variante, utilizza una modifica dello script (esegui JavaScript). Non puoi modificare gli script esistenti.

Modifica del riordino

Per trascinare e spostare un elemento in una posizione diversa della pagina, sono supportati due approcci. L'approccio predefinito produce una modifica del riordino, che modifica la posizione di un elemento nel DOM. L'elemento avrà nuovi elementi principali e/o associati. In genere questo comporta che l'elemento adotta lo stile degli elementi nel suo nuovo spazio.

Utilizza una modifica del riordino quando riordini gli elementi del menu o altri dall'aspetto simile.

Una modifica del riordino coinvolge un selettore CSS di origine e uno target che possono essere modificati dalla finestra di dialogo correlata e dalla modalità Sposta:

  • In alto: rende l'elemento di origine il primo elemento secondario dell'elemento target.
  • In basso: rende l'elemento di origine l'ultimo elemento secondario dell'elemento target.
  • Prima: rende l'elemento di origine il precedente associato all'elemento target.
  • Dopo: rende l'elemento di origine il prossimo associato dell'elemento target.

Modifica dello script

Una modifica dello Script permette a Optimize di eseguire Javascript arbitrari su qualunque elemento che corrisponda a un selettore CSS. La modifica consente a Optimize di eseguire JavaScript come corpo di una funzione che prende l'elemento come parametro.

Puoi anche utilizzare "head" o "body" per il selettore CSS ed eseguire JavaScript solo una volta (dato che c'è solo un singolo elemento di questo tipo nella pagina). Il selettore utilizzato e l'opzione "esegui alle" influiscono sulle precondizioni che determinano quando verrà eseguito lo script. Leggi di seguito Quando vengono applicate le istruzioni della modifica.

Se un selettore CSS corrisponde a più elementi, lo script fornito verrà eseguito più volte, una per ciascun elemento. A ogni chiamata, l'elemento viene passato come singolo argomento della funzione.

Ciascuna chiamata ha luogo il prima possibile in base all'opzione selezionata:

  • Dopo il tag di apertura: affinché lo script venga eseguito, solo il tag di apertura dell'elemento abbinato deve essere analizzato e disponibile nella pagina.
  • Dopo il tag di chiusura: affinché lo script venga eseguito, tutti i contenuti e il tag di chiusura dell'elemento abbinato devono essere analizzati e disponibili nella pagina.

Ad esempio:

  • Utilizzare l'opzione "Dopo il tag di apertura" con il selettore "head" significa che la modifica dello script possa essere eseguita alla prima esecuzione dello snippet Optimize in <HEAD> (esecuzione di blocco sincrono).
  • Utilizzare l'opzione "Dopo il tag di chiusura" con il selettore "body" significa che la modifica dello script verrà eseguita dopo l'evento "documento pronto" (DOMContentLoaded).

Editor avanzato: screenshot Esegui JavaScript

Più elementi target

Come per altri tipi di modifica, una modifica del riordino permette di modificare i selettori CSS di origine e target per corrispondere a più elementi. Ad esempio, selezionando più elementi di origine, puoi spostare tutti gli elementi di un menu in un menu diverso.

Una modifica del riordino supporta anche un selettore target che corrisponda a più elementi. Questo può essere utilizzato per modificare l'ordine di due colonne di una tabella o di altre struttura a tabella nella pagina.

  • Se ci sono più elementi target rispetto a quelli di origine, quelli in eccesso verranno ignorati.
  • Se ci sono più elementi di origine rispetto a quelli target, gli elementi di origine in più verranno aggiunti nell'ultimo elemento target.

Sposta in qualsiasi posizione

Esiste un approccio alternativo per spostare gli elementi in una posizione diversa. Attiva l'opzione Sposta in qualsiasi posizione nelle impostazioni di Spostamento.

Editor di Optimize: opzione Sposta in qualsiasi posizione

L'utilizzo di questo approccio comporta modifiche dello stile correlate alla posizione (ad es. a sinistra, in alto, posizione e così via). L'elemento rimane nella stessa posizione nel DOM, ma sembra che sia stato spostato in una nuova posizione. In genere, il suo stile rimane inalterato e non ci sono modifiche nel resto della pagina.

Utilizza Sposta in qualsiasi posizione quando modifichi la posizione di pulsanti o aree globali (come l'area login) e di elementi già posizionati.

È stato utile?
Come possiamo migliorare l'articolo?
Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale
Cerca nel Centro assistenza
true
101337
false