Opzioni del Compositore esperienza visivo
La versione di Adobe Target Standard/Premium 25.2.1 (17 febbraio 2015) introduce un Compositore esperienza visivo aggiornato. Questo articolo spiega l’interfaccia utente aggiornata e le relative opzioni.
Il Compositore esperienza visivo viene visualizzato quando crei o modifichi un’attività esistente.
Panoramica dell’interfaccia utente del Compositore esperienza visivo
Nelle sezioni seguenti vengono illustrate le opzioni disponibili nel Compositore esperienza visivo aggiornato per un’attività Test A/B. Le opzioni variano a seconda del tipo di attività.
Barra Esperienze
La barra Esperienze viene visualizzata nella barra a sinistra del Compositore esperienza visivo.
Puoi visualizzare, creare, rinominare o rimuovere esperienze utilizzando la barra Esperienze.
Nella barra Esperienze sono disponibili le seguenti opzioni:
- Visualizza un’esperienza: per visualizzarla, fare clic sull’esperienza desiderata per visualizzarla nell’area di lavoro Progettazione.
- Aggiungi un’esperienza: fai clic sull’icona Aggiungi (
- Rinomina un’esperienza: fai clic sull’icona Rinomina (
- Duplicare, eliminare o reindirizzare un’esperienza: fai clic sull’icona Altre azioni (
Impostazioni/configurazione delle attività settings
Fai clic sull’icona Configura (
Sono disponibili le seguenti opzioni:
- Proprietà: assegna proprietà all’attività o rimuovi proprietà dall’attività. Proprietà è una funzionalità di (Target Premium. Per ulteriori informazioni, consulta Autorizzazioni per gli utenti Enterprise.
- Consegna pagine: includi la stessa esperienza in pagine simili del tuo sito. Utilizza un modello di pagina per fornire una struttura alle pagine o, se le pagine contengono elementi simili, per testare le varianti di elementi di pagina con struttura simile o per l’intero dominio. Per ulteriori informazioni, vedere Includere la stessa esperienza in pagine simili.
- Preferenze sito: configura le preferenze del sito per specificare come Target genera selettori CSS. Per ulteriori informazioni, consulta Selettori CSS in Configurare il Compositore esperienza visivo.
- Aggiungi pagine aggiuntive: aggiungi ulteriori pagine all’attività per creare un’attività multipagina che ti consenta di creare una storia su più pagine, con una progettazione specifica per ogni pagina. Per ulteriori informazioni, vedere Attività multipagina.
- Pubblico singolo: utilizza un solo pubblico per l’attività.
- Più tipi di pubblico: assegna più tipi di pubblico all’attività. Fai clic sull’icona Aggiungi pubblico (
Modalità Progettazione/Sfoglia
Utilizza le opzioni Progettazione/Sfoglia visualizzate nell’area di progettazione per passare dalla modalità progettazione alla modalità sfoglia.
Utilizza la modalità Sfoglia per navigare nel tuo sito e scegliere la visualizzazione o la pagina che desideri aggiornare. Torna alla modalità Progettazione per aggiungere o modificare le modifiche.
Annulla/Ripeti
Per annullare le modifiche apportate, fai clic sull’icona Annulla (
Per ripristinare un’azione, espandere il gruppo di pulsanti Annulla/Ripeti e scegliere Ripeti.
Barra di Componenti
Puoi aggiungere diversi componenti alla pagina Web e modificarli in base alle esigenze utilizzando la nuova barra Componenti.
Per aggiungere un nuovo componente a un’esperienza:
-
Fai clic sul componente desiderato da aggiungere per evidenziarlo.
I componenti disponibili sono raggruppati in contenitori logici:
-
Base
- Divisore
- HTML
- Immagine
-
Testo
- Intestazione
- Paragrafo
- Collegamento
-
Dinamico
-
-
Trascina il componente su un elemento di pagina esistente nell’area di lavoro Progettazione.
-
Scegli di sostituire l’elemento selezionato o di inserire il componente prima di dopo l’elemento selezionato.
Barra delle modifiche
Per aprire la barra Modifiche, fai clic sull’icona Mostra modifiche (
La barra Modifiche mostra tutte le modifiche apportate alla pagina nel Compositore esperienza visivo (VEC) e consente di apportare ulteriori modifiche (come selettore CSS, Mbox e codice personalizzato).
Fai clic sull’icona Altre opzioni (
Fai clic sull’icona Altre opzioni (
Progettazione area di lavoro
L’area di lavoro Progettazione consente di selezionare i riquadri di visualizzazione, incluso Adatta allo schermo, Desktop, Tablet, Orizzontale mobile e Verticale mobile. Per impostazione predefinita, l’area di lavoro adatta la pagina allo schermo insieme ai riquadri di visualizzazione definiti nella sezione Amministrazione.
È inoltre possibile ingrandire o ridurre facendo clic sull’icona appropriata (
Quando si fa clic su un elemento di pagina nell’area di lavoro Progettazione, un menu mostra le opzioni disponibili per tale tipo di elemento. Inoltre, nella parte inferiore della pagina viene visualizzato un percorso DOM che consente di navigare facilmente nella struttura della pagina.
Le varie azioni del Compositore esperienza visivo sono raggruppate nelle opzioni di menu appropriate per rendere il processo più rapido ed efficiente:
Barra Proprietà
La barra Proprietà consente di modificare le proprietà degli elementi selezionati nella pagina, sia che si tratti di elementi di HTML che di oggetti specifici di Target, ad esempio consigli o offerte.
Fai clic sulle icone nella parte superiore della barra per modificare il codice HTML o eliminare, duplicare o nascondere gli elementi. Le modifiche vengono visualizzate nella barra Modifiche.
La barra Proprietà è comprimibile nella barra a destra per consentire di nascondere l’area di progettazione e di ingrandirla. Fai clic sull’icona Mostra/Nascondi proprietà (
Modifica elementi utilizzando l’area di lavoro Progettazione design
Nelle sezioni seguenti viene illustrato come modificare immagini e testo nell’area di lavoro Progettazione. L’area di lavoro Progettazione, insieme alle barre di componenti, modifiche e proprietà, ti offre potenti strumenti per creare facilmente esperienze per le attività.
Opzioni immagine
Se fai clic su un’immagine in un’attività di Test A/B, il Compositore esperienza visivo si presenta simile all’illustrazione seguente:
Seleziona i componenti dal frame Components sul lato sinistro per inserire i seguenti elementi:
- Base (divisore, HTML, immagine).
- Testo (intestazione, paragrafo, collegamento).
- Dinamico (Consiglio, Frammento esperienza, Offerta HTML).
Il menu nella parte superiore dell’immagine consente di effettuare le seguenti operazioni:
- Inserire un collegamento (
- Cambia l’immagine (
- Aggiungi personalizzazione (
- Elimina l’immagine (
Il riquadro Proprietà sul lato destro consente di configurare ulteriormente le proprietà dell’immagine.
Le icone nella parte superiore della cornice consentono di effettuare le seguenti operazioni:
- Modificare HTML (
- Duplica l’immagine (
- Elimina l’immagine (
- Nascondi l’immagine (
Le opzioni nel riquadro destro consentono di effettuare le seguenti operazioni:
- Modifica la classe CSS.
- Configura le proprietà dell’immagine (sorgente, titolo, testo alternativo).
- Modifica l’URL del collegamento.
- Configura le dimensioni dell’immagine (altezza e larghezza). Fai clic su Mostra opzioni avanzate per configurare le dimensioni minime e massime, la larghezza, l’altezza, l’overflow e la larghezza massima dell’immagine.
- Configura la posizione dell’immagine sulla pagina (assoluta, fissa, relativa, statica o permanente).
- Configura la spaziatura dell’elemento, inclusi margine e spaziatura interna.
- Configura gli effetti dell’elemento (opacità). Fare clic su Mostra opzioni avanzate per configurare i valori seppia, scala di grigio, contrasto, luminosità e sfocatura dell’immagine. Potete anche invertire o ruotare l’immagine.
- Configura gli stili in linea dell’immagine.
Opzioni testo
Facendo clic sul testo in un’attività Test A/B, il Compositore esperienza visivo è simile all’illustrazione seguente:
Seleziona i componenti dal frame Components sul lato sinistro per inserire i seguenti elementi:
- Base (divisore, HTML, immagine).
- Testo (intestazione, paragrafo, collegamento).
- Dinamico (Consiglio, Frammento esperienza, Offerta HTML).
Fai clic sull’icona Mostra modifiche (
Il menu nella parte superiore dell’elemento di testo consente di effettuare le seguenti operazioni:
- Configurare le proprietà del testo (livello di intestazione, paragrafo, virgolette o spazio)
- Selezionare il colore del testo (
- Configurare gli attributi del testo (grassetto, corsivo, sottolineato o barrato) (
- Configurare l’allineamento del testo (a sinistra, al centro, a destra, giustifica) (
- Inserire un collegamento (
- Sostituisci il contenuto con un’offerta HTML, Frammento esperienza o Consiglio.
- Modificare HTML (
- Aggiungi personalizzazione (
- Elimina l’immagine (
La barra Proprietà sul lato destro consente di configurare ulteriormente le proprietà del testo.
Le icone nella parte superiore della cornice consentono di effettuare le seguenti operazioni:
- Modificare HTML (
- Testo duplicato (
- Eliminare il testo (
- Nascondi il testo (
Le opzioni nel riquadro destro consentono di effettuare le seguenti operazioni:
- Modifica la classe CSS.
- Configura il colore e l’immagine di sfondo del testo.
- Configurare la composizione tipografica del testo (stile titolo, dimensione carattere, spessore carattere, altezza linea, allineamento, colore testo, stile testo (grassetto, corsivo, sottolineato o barrato)).
- Configura gli elenchi, inclusi quelli puntati, numerati o A, B, C.
- Scegliere il colore del bordo.
- Configurare le dimensioni della casella di testo (altezza e larghezza). Fare clic su Mostra opzioni avanzate per configurare le dimensioni minime e massime, la larghezza, l’altezza, l’area di riversamento e l’adattamento degli oggetti della casella di testo.
- Configurate la posizione della casella di testo sulla pagina (assoluta, fissa, relativa, statica o fissa) e impostate il numero di pixel dall’alto, da destra, dal basso e da sinistra.
- Configura la spaziatura dell’elemento, inclusi margine e spaziatura interna.
- Configura gli effetti dell’elemento (opacità). Fare clic su Mostra opzioni avanzate per configurare i valori seppia, scala di grigio, contrasto, luminosità e sfocatura dell’immagine. Potete anche invertire o ruotare il testo.
- Configura gli stili in linea.
Edit HTML (Modifica HTML)
Oltre al codice HTML, puoi modificare e inserire codice JavaScript personalizzato.
Sono disponibili diverse opzioni di formattazione per modificare il testo e HTML per le attività A/B e Targeting esperienza. Puoi scegliere font e stile, l’allineamento del testo e altre opzioni standard per la formattazione del testo. Quando si modifica HTML, è possibile passare dalla vista codice alla vista di modifica avanzata di HTML e viceversa.
I seguenti tag HTML5 possono essere nidificati:
<a><h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption><ins><h1-h6>, <p>, <ul>, <ol>, <menu><del><ul>, <ol>, <menu>, <h1-h6>, <p><label><p>Navigare tra gli elementi utilizzando il percorso DOM dom-path
Facendo clic su un elemento della pagina, viene visualizzato il menu delle opzioni del Compositore esperienza visivo. Inoltre, quando fai clic su un elemento, il percorso DOM corrispondente viene visualizzato nella parte inferiore della pagina.
Se il percorso DOM non viene visualizzato, fare clic sull’icona Mostra DOM (
Puoi utilizzare il percorso DOM per vedere rapidamente le informazioni sull’elemento selezionato (tipo, ID e classe) e spostarti verso l’alto o il basso nel percorso DOM per selezionare l’elemento desiderato.
Utilizzando il percorso DOM, è possibile passare facilmente a qualsiasi elemento principale, di pari livello o secondario all’interno del Compositore esperienza visivo.
La funzione Percorso DOM è disponibile anche quando si imposta il tracciamento dei clic.
Ulteriori informazioni sull’interfaccia utente aggiornata
-
Target Standard/Premium 25.2.1 (17 febbraio 2025) - Note sulla versione: fornisce un riepilogo delle modifiche chiave apportate all’interfaccia utente in Target per Attività, Consigli e Compositore esperienza visivo.
-
Target Standard/Premium 25.1.1 (9 gennaio 2025) note sulla versione: fornisce un riepilogo delle modifiche all’interfaccia utente chiave in Target per la Libreria offerte.
-
Comprendere l’interfaccia utente Target UI: fornisce una breve panoramica per acquisire familiarità con Target e fornisce collegamenti per informazioni più approfondite e istruzioni dettagliate.
-
Modifiche al Compositore esperienza visivo: la versione Adobe Target Standard/Premium 25.2.1 (17 febbraio 2015) introduce una versione aggiornata del Compositore esperienza visivo. Questo articolo spiega le differenze tra le versioni legacy e aggiornata del Compositore esperienza visivo.
-
Opzioni del Compositore esperienza visivo: questo articolo illustra l’interfaccia utente del Compositore esperienza visivo aggiornata e le relative opzioni.
-
Target Domande frequenti sull’aggiornamento dell’interfaccia utente: queste domande frequenti riguardano le domande comuni sulla nuova interfaccia utente Target e sul Compositore esperienza visivo, incluse le modifiche alla navigazione, le posizioni delle funzionalità e l’attivazione/disattivazione della versione temporanea dell’interfaccia utente. Che tu sia un addetto marketing, uno sviluppatore o un amministratore, queste domande frequenti consentono una transizione fluida e di sfruttare al massimo l’interfaccia utente aggiornata.