• Marketo Engage Assets - Scegliere questo tipo per sfogliare e selezionare una risorsa immagine dalla libreria Journey Optimizer B2B edition o dall'istanza connessa di Market Engage.

    Sfoglia le risorse immagini disponibili {width="700" modal="regular"}

    Dalla finestra di dialogo, puoi scegliere un’immagine dall’archivio selezionato. Fai clic su Seleziona per aggiungere la risorsa.

    Sono disponibili alcuni strumenti per individuare la risorsa di cui hai bisogno:

    • Fai clic sull'icona Filtro in alto a sinistra per filtrare gli elementi visualizzati in base ai criteri.

    • Immetti il testo nel campo Ricerca per filtrare gli elementi visualizzati in modo che corrispondano al nome della risorsa.

      Utilizza i filtri e il campo di ricerca per trovare la risorsa necessaria {width="700" modal="regular"}

  • Experience Manager Assets - Scegliere questo tipo per sfogliare e selezionare una risorsa immagine da un archivio Experience Manager Assets configurato.

    Nella finestra di dialogo Seleziona Assets, scegli un'immagine utilizzando gli strumenti disponibili per individuare la risorsa necessaria e fai clic su Seleziona.:

    • Modifica l'Archivio in alto a destra.

    • Fai clic su Gestisci risorse in alto a destra per aprire l'archivio Assets in un'altra scheda del browser e utilizzare gli strumenti di gestione AEM Assets.

    • Fai clic sul selettore Tipo di visualizzazione in alto a destra per modificare la visualizzazione in Vista a elenco, Vista griglia, Vista galleria o Vista a cascata.

    • Fai clic sull'icona Ordinamento per modificare l'ordinamento tra crescente e decrescente.

      Utilizzare gli strumenti nella finestra di dialogo Seleziona Assets per trovare e selezionare una risorsa immagine {width="700" modal="regular"}

    • Fare clic sulla freccia del menu Ordina per per modificare i criteri di ordinamento in Nome, Dimensione o Modificato.

    • Fai clic sull'icona Filtro in alto a sinistra per filtrare gli elementi visualizzati in base ai criteri.

    • Immetti il testo nel campo Ricerca per filtrare gli elementi visualizzati in modo che corrispondano al nome della risorsa.

    Utilizza i filtri e il campo di ricerca per individuare la risorsa {width="700" modal="regular"}

  • Importa file multimediali - Scegliere questo tipo per selezionare un file dal sistema e importarlo nella libreria di risorse di Journey Optimizer B2B edition.

    Nella finestra di dialogo Carica immagine, trascina un file dal sistema alla casella del file. La dimensione massima del file è 100 MB.

    Importa un file di immagine in {width="450"}

    I nomi dei file delle immagini selezionate vengono visualizzati nella finestra di dialogo. I nomi dei file di risorse devono essere univoci (per tutte le cartelle) e, se esiste già un file con questo nome, viene visualizzato un messaggio. I nomi possono contenere un massimo di 100 caratteri e non possono contenere caratteri speciali (ad esempio ;, :, \ e |).

    Fai clic su Importa.

Nel pannello di destra potete aggiungere un titolo immagine e un testo alternativo per l'immagine.

Impostazioni immagine {width="250"}

Impostare le opzioni del collegamento

Nella scheda Impostazioni, utilizza le opzioni Collega per collegare l'immagine a una destinazione e il comportamento del browser per caricare la pagina di destinazione.

  1. Imposta Tipo per il collegamento:

    • Collegamento esterno - Scegliere questo tipo per utilizzare un URL standard come destinazione del collegamento.

      In Url, immettere l'URL per la destinazione del collegamento. Fai clic sull'icona Personalizza ( Icona Personalizza ) per utilizzare un token di personalizzazione come parametro nell'URL.

      Definisci un collegamento esterno per un componente pulsante {width="250"}

    • Pagina di destinazione - Scegliere questo tipo per selezionare una pagina di destinazione pubblicata nell'istanza di Marketo Engage connessa .

      Per l'opzione Pagina di destinazione, selezionare la pagina di destinazione pubblicata. Fai clic sull'icona Seleziona pagina ( Mostra icona collegamenti ) e seleziona la pagina di destinazione pubblicata.

      Definisci un collegamento a una pagina di destinazione per un componente pulsante {width="250"}

  2. Per Etichetta, immettere il testo che si desidera visualizzare all'interno del pulsante.

    Il ridimensionamento del pulsante viene regolato in base al testo e allo stile impostati.

  3. Per Target, scegli come viene reindirizzata la destinazione collegata dall'e-mail o dalla pagina:

    • Nessuno - Apre il collegamento utilizzando il browser predefinito o il comportamento del client (impostazione predefinita).
    • Vuoto - Apre il collegamento in una nuova finestra o scheda.
    • Autonomo - Apre il collegamento nello stesso frame.
    • Elemento padre - Apre il collegamento nel frame padre.
    • Top - Apre il collegamento nel corpo completo della finestra.

Impostare gli stili

Imposta gli stili del componente immagine nel pannello di destra.

Informazioni di base

Con la scheda Stili selezionata nel pannello di destra, utilizza la sezione Sfondo per definire il colore di sfondo per il componente.

Selezionare la casella di controllo e fare clic sul quadrato del colore per scegliere un colore dal selettore. È possibile scegliere un colore immettendo un valore RGB, HSL, HSB o esadecimale noto. In alternativa, è possibile utilizzare il cursore del colore e il campo del colore per selezionare il colore.

Selettore colore di sfondo {width="300"}

Bordo

  1. Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Bordo e imposta le opzioni per visualizzare un bordo per il componente:

  2. Spostare l'interruttore verso destra per attivare le opzioni di visualizzazione del bordo e impostarle in base ai criteri di progettazione:

    • Per impostare il colore del bordo, selezionare la casella di controllo e fare clic sul quadrato del colore per scegliere un colore dal selettore. È possibile scegliere un colore immettendo un valore RGB, HSL, HSB o esadecimale noto. In alternativa, è possibile utilizzare il cursore del colore e il campo del colore per selezionare il colore.

    Selettore colore bordo {width="300"}

    • Per impostare la dimensione bordo (larghezza linea), fare clic sulle icone della freccia su e giù per aumentare o diminuire il numero di pixel.

    • Per impostare lo stile Bordo, scegliere un valore dall'elenco dei valori standard CSS border-style.

    • Per determinare la posizione di visualizzazione del bordo, selezionare ogni casella di controllo Posizione bordo.

    Stili bordo {width="250"}

  3. Per il raggio bordo, impostare il valore numerico in base alla curva desiderata per gli angoli.

    Un valore pari a 0 (impostazione predefinita) produce un angolo al quadrato.

Dimensione

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Dimensioni e imposta le opzioni per l'altezza e la larghezza del componente:

  • Altezza - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire il numero di pixel. Il valore predefinito è vuoto (Automatico) e ridimensiona l’altezza dell’elemento in base al suo contenuto.

  • Larghezza - Utilizza l'interruttore per impostare la larghezza in pixel o in percentuale.

    • Per una larghezza percentuale, utilizzare il dispositivo di scorrimento per impostare il valore percentuale. La percentuale determina la dimensione dell’elemento in base alla casella del contenuto del blocco contenitore, che esclude la spaziatura interna e i bordi. Ad esempio, con un valore pari a 50 la larghezza dell’elemento viene impostata sul 50% della larghezza del contenuto del blocco che la contiene.

      Stile larghezza utilizzando percentuale {width="250"}

    • Per una larghezza basata su pixel, fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel. Il valore predefinito è un valore vuoto (Automatico) e la larghezza dell'elemento viene ridimensionata in base al contenuto.

      Stile larghezza con pixel {width="250"}

Allineamento

Espandere la sezione Alignment e scegliere l'allineamento orizzontale che si desidera utilizzare: a sinistra, al centro o a destra. Questo stile si traduce in uno stile CSS text-align standard e influisce sul modo in cui il componente viene posizionato all'interno del componente che lo contiene.

Stili di allineamento orizzontale {width="250"}

Margine

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Margine e imposta le opzioni per la spaziatura dei margini all'interno del componente strutturale. Questo stile replica il parametro CSS margin, che controlla lo spazio all'esterno del bordo di un componente, separandolo dagli altri componenti. Crea un gap intorno al componente per influenzarne il posizionamento e il layout del contenuto circostante.

Impostate i valori dei margini in pixel in base alle esigenze di progettazione. Puoi impostare il margine per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente:

  • Tutti i lati - Per impostare un valore da applicare a tutti i lati, deselezionare la casella di controllo Margine diverso per ogni lato. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Imposta margine per tutti i lati {width="250"}

  • Inizio-Fine - Per impostare i margini superiore e inferiore sullo stesso valore, impostare l'icona Bloccato tra le impostazioni superiore e inferiore. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

  • Sinistra-Destra - Per impostare i margini sinistro e destro sullo stesso valore, impostare l'icona Bloccato tra le impostazioni sinistra e destra. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Blocca i margini superiore inferiore e sinistro destro {width="250"}

  • Indipendente - Per impostare ogni margine su un valore indipendente, impostare l'icona Sbloccato tra le impostazioni superiore e inferiore e tra sinistra e destra. Per ogni impostazione, fai clic sulle icone della freccia su e della freccia giù per aumentare o diminuire il numero di pixel.

    Impostare margini indipendenti {width="250"}

Riempimento

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Spaziatura interna e imposta le opzioni per la spaziatura interna nel componente strutturale. Questo stile replica il parametro CSS padding, che è lo spazio tra il contenuto di un componente e il relativo bordo. La spaziatura interna consente di controllare la distanza tra il contenuto e il bordo del componente.

Imposta i valori di spaziatura in pixel in base alle tue esigenze di progettazione. Puoi impostare la spaziatura per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente:

  • Tutti i lati - Per impostare un valore da applicare a tutti i lati, deselezionare la casella di controllo Spaziatura interna diversa per ogni lato. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Imposta spaziatura interna per tutti i lati {width="250"}

  • Inizio-Fine - Per impostare la spaziatura superiore e inferiore sullo stesso valore, impostare l'icona Bloccato tra le impostazioni superiore e inferiore. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

  • Sinistra-Destra - Per impostare la spaziatura sinistra e destra sullo stesso valore, impostare l'icona Bloccato tra le impostazioni sinistra e destra. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Blocca spaziatura interna per il margine superiore inferiore e sinistro destro {width="250"}

  • Indipendente - Per impostare la spaziatura per ogni lato su un valore indipendente, impostare l'icona Sbloccato tra le impostazioni superiore e inferiore e tra sinistra e destra. Per ogni impostazione, fai clic sulle icone della freccia su e della freccia giù per aumentare o diminuire il numero di pixel.

    Imposta riempimento indipendente {width="250"}

Avanzate

Per applicare attributi CSS aggiuntivi con valori, utilizza le impostazioni di stile Avanzate. È possibile modificare i valori degli attributi esistenti o aggiungerne di nuovi. Lo stile viene applicato al componente utilizzando il modello di ereditarietà CSS per i componenti (elementi) padre-figlio.

Gli attributi visualizzati riflettono gli stili attualmente definiti per il componente. È possibile modificare i valori in base a definizioni CSS. Fai clic sull'icona Aggiungi (+) per aggiungere un nuovo attributo di stile per il componente.

Stili avanzati {width="250"}

Social

Utilizza il componente Social per inserire nel contenuto collegamenti a pagine di social media. Include tre tipi di social media predefiniti, ma puoi aggiungere o rimuovere i tipi in base alle tue esigenze.

Nuovo componente social network con tipi predefiniti {width="600" modal="regular"}

  • Per aggiungere un tipo di social media, fai clic sull'icona Aggiungi ( + ) e scegli un tipo di social media da aggiungere.

    Fai clic su + per aggiungere il tipo di social media {width="250"}

  • Per rimuovere un tipo di social media, fai clic su X accanto all'icona del social media.

Con un tipo di social media selezionato, imposta le opzioni per quel tipo:

  • URL - Immetti l'URL del social media che desideri collegare all'icona o al grafico del social media.

  • Source - Se desideri utilizzare una tua immagine invece di quella predefinita, scegli una risorsa immagine. Puoi selezionare un’immagine dal repository di risorse Marketo Engage collegato, da un repository Experience Manager Assets (se configurato) o importare un file di immagine dal sistema. Per informazioni dettagliate sulla selezione e l'importazione delle risorse immagine, consultare Informazioni sul componente immagine.

  • Testo alt - Immettere il testo alt per l'immagine visualizzata.

    Impostazioni per il tipo di social media selezionato {width="250"}

Per definire una dimensione di visualizzazione coerente per tutti gli elementi grafici dei social media, imposta la dimensione delle immagini.

È possibile impostare le seguenti opzioni di stile per il componente Social:

Informazioni di base

Con la scheda Stili selezionata nel pannello di destra, utilizza la sezione Sfondo per definire il colore di sfondo per il componente.

Selezionare la casella di controllo e fare clic sul quadrato del colore per scegliere un colore dal selettore. È possibile scegliere un colore immettendo un valore RGB, HSL, HSB o esadecimale noto. In alternativa, è possibile utilizzare il cursore del colore e il campo del colore per selezionare il colore.

Selettore colore di sfondo {width="300"}

Bordo

  1. Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Bordo e imposta le opzioni per visualizzare un bordo per il componente:

  2. Spostare l'interruttore verso destra per attivare le opzioni di visualizzazione del bordo e impostarle in base ai criteri di progettazione:

    • Per impostare il colore del bordo, selezionare la casella di controllo e fare clic sul quadrato del colore per scegliere un colore dal selettore. È possibile scegliere un colore immettendo un valore RGB, HSL, HSB o esadecimale noto. In alternativa, è possibile utilizzare il cursore del colore e il campo del colore per selezionare il colore.

    Selettore colore bordo {width="300"}

    • Per impostare la dimensione bordo (larghezza linea), fare clic sulle icone della freccia su e giù per aumentare o diminuire il numero di pixel.

    • Per impostare lo stile Bordo, scegliere un valore dall'elenco dei valori standard CSS border-style.

    • Per determinare la posizione di visualizzazione del bordo, selezionare ogni casella di controllo Posizione bordo.

    Stili bordo {width="250"}

  3. Per il raggio bordo, impostare il valore numerico in base alla curva desiderata per gli angoli.

    Un valore pari a 0 (impostazione predefinita) produce un angolo al quadrato.

Dimensione

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Dimensioni e imposta le opzioni per l'altezza e la larghezza del componente:

  • Altezza - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire il numero di pixel. Il valore predefinito è vuoto (Automatico) e ridimensiona l’altezza dell’elemento in base al suo contenuto.

  • Larghezza - Utilizza l'interruttore per impostare la larghezza in pixel o in percentuale.

    • Per una larghezza percentuale, utilizzare il dispositivo di scorrimento per impostare il valore percentuale. La percentuale determina la dimensione dell’elemento in base alla casella del contenuto del blocco contenitore, che esclude la spaziatura interna e i bordi. Ad esempio, con un valore pari a 50 la larghezza dell’elemento viene impostata sul 50% della larghezza del contenuto del blocco che la contiene.

      Stile larghezza utilizzando percentuale {width="250"}

    • Per una larghezza basata su pixel, fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel. Il valore predefinito è un valore vuoto (Automatico) e la larghezza dell'elemento viene ridimensionata in base al contenuto.

      Stile larghezza con pixel {width="250"}

Allineamento

Espandere la sezione Alignment e scegliere l'allineamento orizzontale che si desidera utilizzare: a sinistra, al centro o a destra. Questo stile si traduce in uno stile CSS text-align standard e influisce sul modo in cui il componente viene posizionato all'interno del componente che lo contiene.

Stili di allineamento orizzontale {width="250"}

Margine

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Margine e imposta le opzioni per la spaziatura dei margini all'interno del componente strutturale. Questo stile replica il parametro CSS margin, che controlla lo spazio all'esterno del bordo di un componente, separandolo dagli altri componenti. Crea un gap intorno al componente per influenzarne il posizionamento e il layout del contenuto circostante.

Impostate i valori dei margini in pixel in base alle esigenze di progettazione. Puoi impostare il margine per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente:

  • Tutti i lati - Per impostare un valore da applicare a tutti i lati, deselezionare la casella di controllo Margine diverso per ogni lato. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Imposta margine per tutti i lati {width="250"}

  • Inizio-Fine - Per impostare i margini superiore e inferiore sullo stesso valore, impostare l'icona Bloccato tra le impostazioni superiore e inferiore. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

  • Sinistra-Destra - Per impostare i margini sinistro e destro sullo stesso valore, impostare l'icona Bloccato tra le impostazioni sinistra e destra. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Blocca i margini superiore inferiore e sinistro destro {width="250"}

  • Indipendente - Per impostare ogni margine su un valore indipendente, impostare l'icona Sbloccato tra le impostazioni superiore e inferiore e tra sinistra e destra. Per ogni impostazione, fai clic sulle icone della freccia su e della freccia giù per aumentare o diminuire il numero di pixel.

    Impostare margini indipendenti {width="250"}

Riempimento

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Spaziatura interna e imposta le opzioni per la spaziatura interna nel componente strutturale. Questo stile replica il parametro CSS padding, che è lo spazio tra il contenuto di un componente e il relativo bordo. La spaziatura interna consente di controllare la distanza tra il contenuto e il bordo del componente.

Imposta i valori di spaziatura in pixel in base alle tue esigenze di progettazione. Puoi impostare la spaziatura per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente:

  • Tutti i lati - Per impostare un valore da applicare a tutti i lati, deselezionare la casella di controllo Spaziatura interna diversa per ogni lato. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Imposta spaziatura interna per tutti i lati {width="250"}

  • Inizio-Fine - Per impostare la spaziatura superiore e inferiore sullo stesso valore, impostare l'icona Bloccato tra le impostazioni superiore e inferiore. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

  • Sinistra-Destra - Per impostare la spaziatura sinistra e destra sullo stesso valore, impostare l'icona Bloccato tra le impostazioni sinistra e destra. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Blocca spaziatura interna per il margine superiore inferiore e sinistro destro {width="250"}

  • Indipendente - Per impostare la spaziatura per ogni lato su un valore indipendente, impostare l'icona Sbloccato tra le impostazioni superiore e inferiore e tra sinistra e destra. Per ogni impostazione, fai clic sulle icone della freccia su e della freccia giù per aumentare o diminuire il numero di pixel.

    Imposta riempimento indipendente {width="250"}

Avanzate

Per applicare attributi CSS aggiuntivi con valori, utilizza le impostazioni di stile Avanzate. È possibile modificare i valori degli attributi esistenti o aggiungerne di nuovi. Lo stile viene applicato al componente utilizzando il modello di ereditarietà CSS per i componenti (elementi) padre-figlio.

Gli attributi visualizzati riflettono gli stili attualmente definiti per il componente. È possibile modificare i valori in base a definizioni CSS. Fai clic sull'icona Aggiungi (+) per aggiungere un nuovo attributo di stile per il componente.

Stili avanzati {width="250"}

Modulo (pagine di destinazione)

[Beta]{class="badge informative" title="Funzione Beta"}

Utilizza il componente Modulo per aggiungere un modulo pubblicato a una pagina di destinazione o a un modello di pagina di destinazione. Per ulteriori informazioni sulla creazione e la pubblicazione di moduli, vedere Forms.

  1. Fai clic sullo strumento Modulo nella barra degli strumenti del componente oppure utilizza le proprietà Incorpora modulo a destra per selezionare il modulo pubblicato.

    Seleziona il modulo pubblicato {width="600"}

  2. Se si desidera ignorare il tipo di completamento predefinito per il modulo, modificare l'impostazione in base ai requisiti della pagina o del modello.

    Questa pagina è anche nota come pagina di ringraziamento per il modulo e questa impostazione determina cosa accade quando un visitatore invia il modulo:

    • Resta a pagina - Scegli questa opzione per mantenere il visitatore sulla stessa pagina al momento dell'invio del modulo.

    • Pagina di destinazione - Scegli questa opzione per selezionare una pagina di destinazione Journey Optimizer B2B edition o Marketo Engage come follow-up.

    • URL esterno - Scegliere questa opzione per specificare qualsiasi URL come pagina di follow-up. Dopo che il visitatore ha inviato il modulo, il browser carica l’URL designato.

      note tip
      TIP
      Se desideri utilizzare il modulo per scaricare un file, puoi specificare un URL per il file ospitato. Con questa configurazione, il pulsante Invia funziona come un pulsante di download.

      Modifica l'impostazione di completamento {width="280"}

Se necessario, seleziona la scheda Stili nel pannello di destra per impostare i margini del modulo all'interno del componente struttura.

Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Margine e imposta le opzioni per la spaziatura dei margini all'interno del componente strutturale. Questo stile replica il parametro CSS margin, che controlla lo spazio all'esterno del bordo di un componente, separandolo dagli altri componenti. Crea un gap intorno al componente per influenzarne il posizionamento e il layout del contenuto circostante.

Impostate i valori dei margini in pixel in base alle esigenze di progettazione. Puoi impostare il margine per tutti i lati, il bottone superiore, il lato sinistro-destro o ciascun lato del componente in modo indipendente:

  • Tutti i lati - Per impostare un valore da applicare a tutti i lati, deselezionare la casella di controllo Margine diverso per ogni lato. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Imposta margine per tutti i lati {width="250"}

  • Inizio-Fine - Per impostare i margini superiore e inferiore sullo stesso valore, impostare l'icona Bloccato tra le impostazioni superiore e inferiore. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

  • Sinistra-Destra - Per impostare i margini sinistro e destro sullo stesso valore, impostare l'icona Bloccato tra le impostazioni sinistra e destra. Fai clic sulle icone freccia su e giù per aumentare o diminuire il numero di pixel.

    Blocca i margini superiore inferiore e sinistro destro {width="250"}

  • Indipendente - Per impostare ogni margine su un valore indipendente, impostare l'icona Sbloccato tra le impostazioni superiore e inferiore e tra sinistra e destra. Per ogni impostazione, fai clic sulle icone della freccia su e della freccia giù per aumentare o diminuire il numero di pixel.

    Impostare margini indipendenti {width="250"}

recommendation-more-help