[Beta]{class="badge informative" title="Questa funzione è attualmente in versione beta limitata"}
Progettazione pagina di destinazione
Dopo aver creato una pagina di destinazione, utilizza lo spazio di progettazione visiva per creare i componenti strutturali e di contenuto nella pagina.
Aggiungere struttura e contenuto structure-content-landing-page
-
Per iniziare la progettazione del contenuto, trascina un elemento dalle Strutture e rilascialo nell'area di lavoro.
Aggiungi tutti gli elementi da Strutture necessari e modifica le impostazioni per ciascuno nel riquadro a destra.
note tip TIP Seleziona il componente n:n column per definire il numero di colonne desiderato (tra tre e 10). Puoi anche definire la larghezza di ciascuna colonna spostando le frecce sotto di essa. 
Le dimensioni di ogni colonna non possono essere inferiori al 10% della larghezza totale del componente struttura. È possibile rimuovere solo colonne vuote.
-
Espandi la sezione Contents e aggiungi tutti i componenti di contenuto necessari in uno o più componenti della struttura.
-
Se necessario, puoi effettuare ulteriori personalizzazioni per ciascun componente nelle schede Impostazioni o Stile.
Ad esempio, puoi modificare lo stile del testo, la spaziatura interna o il margine di ciascun componente.
-
Per aggiungere contenuto condizionale e adattarlo ai profili target in base alle regole condizionali, selezionare un componente di contenuto e fare clic sull'icona Abilita contenuto condizionale nella barra degli strumenti del componente.
Per ulteriori informazioni, vedere Contenuto condizionale.
Aggiungere CSS personalizzato
Puoi aggiungere un CSS personalizzato direttamente nello spazio di progettazione della pagina di destinazione. Utilizza CSS personalizzato per applicare uno stile avanzato e specifico, per una maggiore flessibilità e un maggiore controllo sull’aspetto del contenuto. È consigliabile aggiungere questo stile di livello più alto prima di includere componenti quali immagini, pulsanti e testo.
Con almeno un componente di contenuto nell'area di lavoro, seleziona il componente Corpo nella struttura di navigazione a sinistra per accedere all'editor CSS personalizzato.
-
Nella scheda Stili visualizzata a destra, fai clic su Aggiungi CSS personalizzato.
note note NOTE Il pulsante Aggiungi CSS personalizzato è disponibile solo quando è selezionato il componente Body. Tuttavia, puoi applicare stili CSS personalizzati a tutti i componenti al suo interno. L'editor a comparsa Aggiungi CSS personalizzato viene visualizzato con i commenti del codice segnaposto.
-
Immetti il codice CSS nell’editor.
Assicurati che il CSS personalizzato sia valido e segua la sintassi corretta. Se il CSS immesso non è valido, viene visualizzato un messaggio di errore e non è possibile salvarlo. Per ulteriori informazioni, consulta Validità CSS.
-
Fai clic su Salva per salvare il file CSS personalizzato.
Il foglio di stile personalizzato viene applicato al contenuto esistente. Puoi verificare che il CSS personalizzato sia applicato in base alle tue esigenze. Per informazioni su come apportare modifiche e regolare l'applicazione del foglio di stile, vedere Risoluzione dei problemi.
Aggiungere risorse
Nell'editor del contenuto visivo, seleziona l'icona Assets di Marketo Engage (
-
Aggiungi una nuova risorsa trascinando la risorsa immagine in un componente struttura.
-
Sostituisci una risorsa immagine esistente selezionandola nell'area di lavoro e fai clic su Seleziona una risorsa negli strumenti di origine delle immagini.
Per ulteriori informazioni sull'utilizzo delle risorse del tipo di origine, vedere Utilizzare le risorse per l'authoring dei contenuti.
Aggiungi moduli
Un modulo è un componente riutilizzabile a cui è possibile fare riferimento tramite più pagine di destinazione e modelli di pagina di destinazione in Adobe Journey Optimizer B2B edition. Si tratta di un blocco di campi e di un pulsante di invio che può essere creato anticipatamente e inserito rapidamente per rendere la progettazione della pagina più rapida e coerente.
Nell'esempio seguente vengono illustrati i passaggi necessari per aggiungere un modulo durante la progettazione della pagina.
-
Nella sezione Contents trascinare l'elemento Form in un componente strutturale nello spazio di progettazione della pagina.
note tip TIP Per aggiungere il modulo in modo che occupi l’intero layout orizzontale all’interno dell’e-mail, aggiungi una struttura di colonne 1:1 e quindi trascina e rilascia il modulo al suo interno. -
Fai clic sull'icona 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 è 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.
-
-
Se si desidera limitare la visualizzazione del modulo per tipo di dispositivo, modificare l'impostazione Opzioni visualizzazione:
- Mostra solo su dispositivi desktop
- Mostra solo su dispositivi mobili
- Mostra su tutti i dispositivi (impostazione predefinita)
-
Se necessario, seleziona la scheda Stili nel pannello di destra per impostare i margini del modulo all'interno della pagina.
Spostarsi tra livelli, impostazioni e stili
Quando si lavora con il contenuto nello spazio di progettazione visivo, è possibile accedere ai componenti, alle colonne e agli elementi di contenuto utilizzando la struttura di navigazione. Fai clic sull'icona Struttura di navigazione (
L’esempio seguente illustra i passaggi per regolare la spaziatura e l’allineamento verticale all’interno di un componente struttura con le colonne.
-
Selezionare la colonna nel componente struttura direttamente nell'area di lavoro o utilizzando la struttura di spostamento visualizzata a sinistra.
-
Dalla barra degli strumenti della colonna, fare clic sullo strumento Seleziona una colonna e scegliere quello che si desidera modificare.
Puoi anche selezionarla dall’albero della struttura. I parametri modificabili per tale colonna vengono visualizzati nelle schede Impostazioni e Stili a destra.
-
Per modificare le proprietà della colonna, fai clic sulla scheda Stili a destra e modificale in base alle tue esigenze:
-
Per Sfondo, modifica il colore di sfondo in base alle esigenze.
Deselezionare la casella di controllo relativa a uno sfondo trasparente. Abilita l'impostazione Immagine di sfondo per utilizzare un'immagine come sfondo invece di un colore a tinta unita.
-
Per Allineamento, seleziona l'icona Superiore, Centro o Inferiore.
-
Per Spaziatura interna, definire la spaziatura per tutti i lati.
Selezionare Spaziatura interna diversa per ogni lato per ottimizzare la spaziatura. Fai clic sull'icona Blocca per interrompere la sincronizzazione.
-
Espandi la sezione Avanzate per definire gli stili in linea per la colonna.
-
-
Se necessario, ripeti questi passaggi per regolare l’allineamento e la spaziatura per le altre colonne del componente.
-
Salva le modifiche.
Personalizzazione dei contenuti
Journey Optimizer B2B edition utilizza una sintassi inline semplice che consente di creare espressioni con contenuto personalizzato racchiuso tra parentesi graffe {}. È possibile aggiungere più espressioni nello stesso contenuto o campo senza restrizioni.
Esempi:
-
Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}} -
Hello {{profile.person.name.fullName}}
Durante l’elaborazione del contenuto, Journey Optimizer B2B edition sostituisce l’espressione con i dati contenuti nel database Experience Platform. Il primo esempio diventa Hello John Doe.
L’esempio seguente illustra i passaggi per personalizzare il contenuto utilizzando gli attributi lead/account e i token di sistema.
-
Seleziona il componente testo e fai clic sull'icona Aggiungi personalizzazione nella barra degli strumenti.
Questa azione apre la finestra di dialogo Modifica Personalization.
-
Fare clic su + o … per aggiungere un token allo spazio vuoto.
-
Fai clic su Salva.
Modifica tracciamento URL collegato
-
Fai clic sull'icona Collegamenti (
-
Se necessario, fare clic sull'icona Modifica (
Puoi anche aggiungere Tag per un collegamento.
Salvare i dati
Fai clic su Salva in qualsiasi momento per salvare la bozza della pagina di destinazione.
Puoi continuare ad apportare modifiche alla pagina della bozza. Quando sei pronto per visualizzare la pagina e renderla disponibile per il collegamento in un messaggio e-mail o SMS, puoi pubblicare la pagina.
Opzioni di visualizzazione
Sfrutta le opzioni di convalida della visualizzazione e del contenuto disponibili nello spazio di progettazione visiva.
-
Zoom in/out del contenuto tra le opzioni di zoom predefinite.
-
Cambia la visualizzazione del contenuto tra desktop, dispositivi mobili o solo testo/solo testo.
- Fai clic sull'icona Visualizza per l'anteprima del contenuto tra i dispositivi.
- Seleziona uno dei dispositivi predefiniti o immetti dimensioni personalizzate per visualizzare in anteprima il contenuto.
Altre opzioni
Dal menu Altro … nella parte superiore dello spazio di progettazione visiva, è possibile eseguire le azioni seguenti:
- Ripristina pagina di destinazione - Fare clic su questa opzione per cancellare l'area di lavoro di progettazione visiva e ricominciare a creare il contenuto della pagina.
- Modifica la progettazione - Torna alla home page di creazione della pagina di destinazione principale. A questo punto è possibile scegliere un altro modello per riavviare il processo di progettazione oppure scegliere di progettare la pagina da zero in un'area di lavoro vuota.
- Esporta HTML - Scarica il contenuto nell'area di lavoro visiva nel tuo sistema locale in formato HTML racchiuso in un file zip.