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.

IMPORTANT
L'aggiornamento di Visual Editing Composer richiede l'estensione Adobe Experience Cloud Visual Editing Helper disponibile nel Chrome Web Store.

Il Compositore esperienza visivo viene visualizzato quando crei o modifichi un’attività esistente.

Compositore esperienza visivo

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.

Pannello Esperienze

È 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 ( Aggiungi icona ) per aggiungere una nuova esperienza. Configura la nuova esperienza come desideri.
  • Rinominare un'esperienza: fare clic sull'icona Rename ( icona Rinomina ) per visualizzare la finestra di dialogo Rename Experience. Specificare il nuovo nome, quindi fare clic su Save.
  • Duplicare, eliminare o reindirizzare un'esperienza: fai clic sull'icona More Actions ( Icona altre azioni ), quindi scegli Duplicate, Delete o Redirect to URL.

Impostazioni/configurazione delle attività

Fai clic sull'icona Configure ( icona Configura ) visualizzata sopra l'area di lavoro Design per visualizzare il menu delle proprietà dell'attività.

Opzioni di configurazione attività

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 ( icona Aggiungi ), quindi seleziona uno o più tipi di pubblico dall'elenco. È inoltre possibile combinare tipi di pubblico o creare un nuovo pubblico dalla finestra di dialogo Add Audiences.

Design/Browse modalità

Utilizza gli interruttori Design/Browse visualizzati sopra l'area di progettazione per passare dalla modalità progettazione alla modalità navigazione.

Attiva/disattiva progettazione e 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 ( icona Annulla ).

Icona Annulla nel Compositore esperienza visivo

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.

Pannello Componenti

NOTE
Se in quest'area è visualizzato il pannello Modifications anziché il pannello Components, fare clic sull'icona Show Components ( icona Mostra componenti ). L'icona Show Components ( icona Mostra componenti ) e l'icona Show Modifications ( Mostra pannello modifiche ) consentono di visualizzare le opzioni appropriate.

Per aggiungere un nuovo componente a un’esperienza:

  1. Fai clic sul componente desiderato da aggiungere per evidenziarlo.

    I componenti disponibili sono raggruppati in contenitori logici:

  2. Trascinare il componente su un elemento di pagina esistente nell'area di lavoro Design.

  3. 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 ( Mostra pannello Modifiche ) nel pannello Components.

Pannello delle modifiche

NOTE
L'icona Show Components ( icona Mostra componenti ) e l'icona Show Modifications ( Mostra pannello modifiche ) consentono di visualizzare le opzioni appropriate.

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 ( Icona Altre azioni ) nell'intestazione del pannello per aggiungere una modifica, eliminare tutte le modifiche o eliminare tutte le modifiche non valide. Fare clic su Select per eseguire operazioni in blocco: Apply to All Pages o Delete.

Fai clic sull'icona More Options ( Icona Altre azioni ) accanto a ciascuna modifica per visualizzarne le informazioni, eliminare la modifica o applicare la modifica a più viste.

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.

Opzioni riquadro di visualizzazione

È inoltre possibile ingrandire o ridurre facendo clic sull'icona appropriata ( icona Zoom avanti o icona Zoom indietro ).

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:

Menu delle opzioni del Compositore esperienza visivo

NOTE
Le opzioni disponibili dipendono dal tipo di attività e dall’elemento che stai creando o modificando. Per ulteriori informazioni sulla modifica di immagini e offerte in un'attività A/B Test, vedere Modificare elementi utilizzando l'area di lavoro Design di seguito.

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.

Pannello Proprietà

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 ( icona Proprietà ) a destra del pannello per comprimere o visualizzare il pannello 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:

Compositore esperienza visivo con immagine selezionata

Selezionare i componenti dal frame Components sul lato sinistro per inserire i seguenti elementi:

Il menu nella parte superiore dell’immagine consente di effettuare le seguenti operazioni:

  • Inserire un collegamento ( Icona Inserisci collegamento ).
  • Cambia l'immagine ( icona Scegli immagine ).
  • Aggiungi personalizzazione ( Icona Aggiungi Personalization ).
  • Elimina l'immagine ( Icona Elimina ).

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 ( Icona Inserisci HTML ). Per ulteriori informazioni, vedere Modifica HTML.
  • Duplica l'immagine ( Icona Duplica ).
  • Elimina l'immagine ( Icona Elimina ).
  • Nascondi l'immagine ( Icona Nascondi ).

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:

Compositore esperienza visivo con testo selezionato

Selezionare i componenti dal frame Components sul lato sinistro per inserire i seguenti elementi:

Fai clic sull'icona Show Modifications ( Mostra icona Modifiche ) per visualizzare le modifiche apportate all'esperienza.

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 ( icona Colore testo )
  • Configurare gli attributi del testo (grassetto, corsivo, sottolineato o barrato) ( Icona Attributi testo ).
  • Configurare l'allineamento del testo (a sinistra, al centro, a destra, giustifica) ( Icona Allineamento testo ).
  • Inserire un collegamento ( Icona Inserisci collegamento ).
  • Sostituisci il contenuto con un'offerta HTML, Frammento esperienza o Consiglio.
  • Modificare HTML ( Icona Inserisci HTML ).
  • Aggiungi personalizzazione ( Icona Aggiungi Personalization ).
  • Elimina l'immagine ( Icona Elimina ).

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 ( Icona Inserisci HTML ). Per ulteriori informazioni, vedere Modifica HTML.
  • Testo duplicato ( Icona duplicata ).
  • Eliminare il testo ( Icona Elimina ).
  • Nascondi il testo ( Icona Nascondi ).

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:

Tag
Tag nidificati consentiti
<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>

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.

Percorso DOM

Se il percorso DOM non viene visualizzato, fare clic sull'icona Show DOM ( Mostra icona 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.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654