Opzioni del Compositore esperienza visivo
La versione di Adobe Target Standard/Premium 25.2.1 (17 febbraio 2015) introduce una versione aggiornata di Visual Experience Composer (VEC). 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à A/B Test. Le opzioni variano a seconda del tipo di attività.
Pannello Experiences
Il pannello Experiences viene visualizzato nella barra a sinistra del Compositore esperienza visivo.
È possibile visualizzare, creare, rinominare o rimuovere esperienze utilizzando il pannello Experiences.
Nel pannello Experiences sono disponibili le seguenti opzioni:
- Visualizza un'esperienza: per visualizzarla, fare clic sull'esperienza desiderata per visualizzarla nell'area di lavoro Design.
- Aggiungi un'esperienza: fai clic sull'icona Add (
- Rinominare un'esperienza: fare clic sull'icona Rename (
- Duplicare, eliminare o reindirizzare un'esperienza: fai clic sull'icona More Actions (
Impostazioni/configurazione delle attività
Fai clic sull'icona Configure (
Sono disponibili le seguenti opzioni:
- Properties: Assegna proprietà all'attività o rimuovi le proprietà dall'attività. Properties è una funzionalità (Target Premium). Per ulteriori informazioni, consulta Autorizzazioni per gli utenti Enterprise.
- Page Delivery: 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.
- Site Preferences: Configura le preferenze del sito per specificare come Target genera selettori CSS. Per ulteriori informazioni, vedere Selettori CSS in Configurare Visual Experience Composer.
- 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 (
Design/Browse modalità
Utilizza gli interruttori Design/Browse visualizzati sopra l'area di progettazione per passare dalla modalità progettazione alla modalità navigazione.
Utilizza la modalità Browse per navigare nel tuo sito e scegliere la visualizzazione o la pagina che desideri aggiornare. Torna alla modalità Design per aggiungere o modificare le modifiche.
Undo/Redo
Per annullare le modifiche apportate, fare clic sull'icona Undo (
Per ripristinare un'azione, espandere il gruppo di pulsanti Annulla/Redo e scegliere Redo.
Pannello Components
È possibile aggiungere diversi componenti alla pagina Web e modificarli in base alle esigenze utilizzando il nuovo pannello Components.
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:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Trascinare il componente su un elemento di pagina esistente nell'area di lavoro Design.
-
Scegli di inserire il componente prima di dopo l’elemento selezionato.
Rispetto alla versione precedente del Compositore esperienza visivo, non puoi sostituire un elemento selezionato con un componente.
Pannello Modifications
Per aprire il pannello Modifications, fai clic sull'icona Show Modifications (
Il pannello Modifications mostra tutte le modifiche apportate alla pagina nel Compositore esperienza visivo di Visual Experience Composer e consente di apportare ulteriori modifiche (ad esempio selettore CSS, Mbox e codice personalizzato).
Fai clic sull'icona More Options (
Fai clic sull'icona More Options (
Design area di lavoro
L'area di lavoro Design consente di selezionare i riquadri di visualizzazione, inclusi quelli adatti allo schermo, Desktop, Tablet, Mobile Landscape e Mobile Portrait. 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 Design, 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 di Visual Experience Composer (VEC) sono raggruppate nelle opzioni di menu appropriate per rendere il processo più veloce ed efficiente:
Pannello Properties
Il pannello Properties consente di modificare le proprietà degli elementi selezionati nella pagina, siano essi elementi di HTML o oggetti specifici di Target, ad esempio consigli o offerte.
Fai clic sulle icone nella parte superiore del pannello per modificare il codice HTML o eliminare, duplicare o nascondere gli elementi. Le modifiche vengono visualizzate nel pannello Modifications.
Il pannello Properties è comprimibile nella barra a destra. Fare clic sull'icona Show/Hide Properties (
Modifica elementi utilizzando l'area di lavoro Design design
Nelle sezioni seguenti viene illustrato come modificare immagini e testo nell'area di lavoro Design. L’area di lavoro Progettazione, insieme ai pannelli Componenti, Modifiche e Proprietà, ti offre potenti strumenti per creare facilmente esperienze per le tue attività.
Opzioni immagine
Se si fa clic su un'immagine in un'attività A/B Test, il Compositore esperienza visivo sarà simile a quello dell'illustrazione seguente:
Selezionare 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 Properties a destra 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). Fare clic su Show Advanced Options per configurare le dimensioni minime e massime, la larghezza, l'altezza, l'overflow e l'adattamento degli oggetti 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 Show Advanced Options per configurare i valori di 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
Se fai clic sul testo in un'attività A/B Test, il Compositore esperienza visivo si presenta simile all'illustrazione seguente:
Selezionare 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 Show Modifications (
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 (
Il pannello Properties a destra 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 Show Advanced Options per configurare le dimensioni minime e massime, la larghezza, l'altezza, l'overflow 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 Show Advanced Options per configurare i valori di 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 Experience Targeting. 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 Show 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.