Componenti per contenuti content-components
Quando si progetta contenuto per e-mail, pagine di destinazione, modelli e frammenti visivi, utilizzare Componenti contenuto per aggiungere elementi di progettazione visiva.
Puoi aggiungere tutti i componenti di contenuto necessari all’interno di uno o più componenti struttura, che definiscono il layout.
Libreria dei contenuti
Nella sezione Contents della libreria dei componenti sono visualizzati i componenti di contenuto disponibili:
Barre degli strumenti del componente Contenuto
Ogni tipo di componente contenuto visualizza una barra degli strumenti quando la selezioni nell’area di lavoro. Gli strumenti disponibili, che variano in base al tipo di componente, forniscono un modo semplice per lavorare con il componente direttamente nel contenuto renderizzato. La barra degli strumenti include funzionalità di formattazione applicabili al tipo di componente.
Strumenti di formattazione
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica il grassetto, il corsivo, la sottolineatura o il barrato, il pedice o il pedice alla stringa di testo selezionata. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica un tipo di allineamento orizzontale al contenuto del componente. Scegliere sinistra, centrata, destra o giustificata. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica la formattazione di elenco ordinata o non ordinata al testo del componente. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica la formattazione a livello di titolo al paragrafo per la posizione del cursore. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica la dimensione del carattere al testo selezionato. Fate clic sullo strumento e scegliete le dimensioni o immettete il valore px. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Applica il colore del carattere al testo selezionato. Scegliete un colore dal selettore e utilizzate il cursore del colore e il campo del colore per selezionare il colore. In alternativa, è possibile immettere un valore RGB, HSL, HSB o esadecimale noto. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Crea un collegamento cliccabile per il testo o l'elemento selezionato.
|
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Rimuovi il collegamento cliccabile per il testo o l'elemento selezionato. |
|
Strumenti funzionali
Aggiungere un componente di contenuto alla progettazione
-
Nello spazio di progettazione visivo, utilizza un modello esistente o aggiungi i componenti struttura necessari in un’area di lavoro vuota per definire il layout.
-
Nella libreria Componenti, afferra l’handle di trascinamento
È possibile aggiungere più componenti in un singolo componente struttura e in ogni colonna di un componente struttura.
-
Regola la visualizzazione del componente utilizzando le schede Impostazioni e Stili a destra oppure la barra degli strumenti di contesto visualizzata nell’area di lavoro.
Ad esempio, puoi modificare lo stile del testo, la spaziatura interna o il margine del componente.
Mentre si lavora con la progettazione, è inoltre possibile rimuovere o duplicare un componente utilizzando gli strumenti Elimina e Duplica nella sezione Strumenti funzionali.
Impostazioni e stili dei componenti di contenuto
Dopo aver aggiunto un componente, questo viene selezionato nello spazio di progettazione visiva e le relative proprietà vengono visualizzate nel pannello di destra. Puoi anche selezionare un componente in qualsiasi momento per modificare le impostazioni e gli stili. Molte impostazioni e stili sono specifici del componente, ma alcune impostazioni e stili standard possono essere applicati a qualsiasi componente di contenuto selezionato.
Opzioni di visualizzazione
Se desideri escludere il componente dalla visualizzazione del desktop o del dispositivo mobile, modifica l’impostazione Opzioni di visualizzazione. Il valore predefinito, Mostra su tutti i dispositivi, consente la visualizzazione su tutti i dispositivi. Scegli un’altra impostazione per rendere il componente esclusivo per tipo di dispositivo:
- Mostra solo su dispositivi desktop - Scegliere questa impostazione quando si desidera visualizzare il componente su dispositivi desktop ed escluderlo per dispositivi mobili.
- Mostra solo su dispositivi mobili - Scegliere questa impostazione per visualizzare il componente su dispositivi mobili, ad esempio telefoni e tablet, ed escluderlo per i dispositivi desktop.
Contenitore container
Utilizza un contenitore per applicare uno stile specifico a un gruppo di componenti di contenuto. Aggiungere un componente Container, quindi aggiungere altri componenti di contenuto al suo interno. Questo componente è simile alla modalità di utilizzo di un elemento div in HTML. Puoi applicare uno stile distinto al contenitore, che è diverso dallo stile applicato ai componenti di contenuto in esso contenuti.
Ad esempio, aggiungi un componente Contenitore e quindi un componente Pulsante all’interno del contenitore. Puoi utilizzare uno stile di area specifico per il contenitore e assegnare al pulsante e al relativo sfondo lo stile desiderato.
Pulsante button
Utilizza il componente Button per inserire uno o più pulsanti selezionabili nel contenuto. Utilizza i pulsanti per reindirizzare i visualizzatori di pagina o i destinatari e-mail al contenuto di supporto (pagina di destinazione pubblicata o un collegamento esterno).
Aggiungere il testo del pulsante
Quando il componente Pulsante viene visualizzato nell’area di lavoro, la barra degli strumenti include opzioni per la formattazione del testo, nonché per la personalizzazione e le varianti condizionali. Per ulteriori informazioni sulle opzioni della barra degli strumenti dell’editor, vedere Barre degli strumenti del componente contenuto.
Quando si immette il testo dell’etichetta del pulsante e si imposta la formattazione, il pulsante viene ridimensionato per contenere il contenuto.
Impostare le opzioni del collegamento button-set-link-options
Nella scheda Impostazioni, utilizza le opzioni Collegamento per definire il testo del pulsante, la destinazione del collegamento e il comportamento del browser per il caricamento della pagina di destinazione.
-
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 (
-
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 (
-
-
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.
-
Per Target, scegliere la modalità di reindirizzamento della 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
Personalizza lo stile del pulsante nella scheda Stili.
Testo text
Utilizza il componente Testo per inserire un blocco di testo nel contenuto. Quando il componente testo è selezionato nell’area di lavoro, immetti il testo e utilizza le opzioni della barra degli strumenti per aggiungere formattazione in linea e opzioni, inclusi i token di personalizzazione e le varianti condizionali.
Personalizza lo stile del componente testo nella scheda Stili.
Questi stili vengono applicati all’intero blocco di testo. È possibile applicare lo stile in linea a una stringa di testo selezionata.
{{styles-text}}
Divisore divider
Aggiungi un componente Divider per incorporare una divisione lineare tra le sezioni del contenuto.
Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Riga e imposta le opzioni per l’altezza e la larghezza del componente:
-
Colore - 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.
-
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.
- 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 - Scegliere un valore dall’elenco dei valori CSS
line-stylestandard, ad esempio Solido, Punteggiato e Tratteggiato.
HTML html
Utilizza il componente HTML per aggiungere parti del HTML esistente. Questo componente consente di creare facilmente elementi modulari di HTML che riutilizzano il contenuto esterno.
-
Selezionare il componente nell’area di lavoro e fare clic sull’icona Mostra codice sorgente nella barra degli strumenti.
-
Incolla il HTML nella casella di testo e fai clic su Salva.
Se HTML è valido, esegue il rendering dell’elemento nell’area di lavoro. Se si tratta di un elemento associato a uno degli altri componenti di contenuto, puoi modificare le impostazioni e gli stili nel pannello di destra in base al tipo di componente. In caso contrario, rimane come componente di HTML.
Per un componente HTML, puoi impostare i seguenti stili per l’intero componente HTML nel pannello di destra:
Immagine image
Utilizza il componente Immagine per inserire una risorsa immagine nel contenuto. Quando il componente Immagine è selezionato nell’area di lavoro, è possibile aggiungere o modificare il file di risorse immagine visualizzato.
Aggiungi la risorsa immagine add-image-asset
Scegli un metodo per aggiungere la risorsa immagine:
-
Seleziona risorsa - Scegli questo tipo per sfogliare e selezionare una risorsa immagine dalla libreria Assets Marketo Optimizer.
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.
-
-
Importa file multimediali - Scegliere questo tipo per selezionare un file dal sistema e importarlo nella libreria di risorse Marketo Optimizer.
Nella finestra di dialogo Carica immagine, trascina un file dal sistema alla casella del file. La dimensione massima del file è 100 MB.
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.
Impostare le opzioni del collegamento image-set-link-options
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.
-
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 (
-
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 (
-
-
Per Label, immettere facoltativamente il testo descrittivo per il collegamento dell’immagine.
-
Per Target, scegliere la modalità di reindirizzamento della 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.
Social 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.
-
Per aggiungere un tipo di social media, fai clic sull’icona Aggiungi ( + ) e scegli un tipo di social media da aggiungere.
-
Per rimuovere un tipo di social media, fai clic su X accanto all’icona del social media.
Espandi la scheda per ogni tipo di social media per impostare le opzioni:
- 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 dalla libreria di Assets 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.
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:
Modulo (solo pagine di destinazione) form
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.
-
Fai clic sullo strumento Modulo nella barra degli strumenti del componente oppure utilizza le proprietà Incorpora modulo a destra per selezionare il modulo pubblicato.
-
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 di Marketo Optimizer 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. 
-
Se necessario, seleziona la scheda Stili nel pannello di destra per impostare i margini del modulo all’interno del componente struttura.
{{styles-margin}}