Progettazione di una pagina di destinazione designing-a-landing-page

Informazioni sulla progettazione del contenuto di una pagina di destinazione about-content-design

Le pagine di destinazione vengono create come qualsiasi altra attività di marketing.

Durante la progettazione di una pagina di destinazione, dovrai definire il contenuto della pagina stessa, della pagina di conferma e della pagina di errore. Per visualizzare e configurare ciascuna di queste pagine, utilizza il commutatore posto sotto la barra delle azioni.

Il contenuto delle pagine di destinazione è progettato tramite l’editor di contenuti di Campaign.

NOTE
Per la progettazione delle e-mail, se l’istanza è stata installata prima del rilascio di Adobe Campaign Standard 19.0, puoi ancora accedere all’editor dei contenuti delle e-mail legacy. In generale, per quanto riguarda le pagine di destinazione, l’interfaccia, i principi di utilizzo e di configurazione sono per lo più i medesimi illustrati di seguito. Tuttavia, non tutte le funzioni potrebbero essere disponibili o presenti nell’editor dei contenuti e-mail legacy, che è diventato obsoleto a partire dalla versione 19.0. Per modificare rapidamente il contenuto delle e-mail mediante un’interfaccia a trascinamento dotata di funzioni estese, puoi utilizzare E-mail Designer.

Questa pagina descrive le specificità dell’editor dei contenuti delle pagine di destinazione. Per ulteriori informazioni sulle azioni comuni a una o più attività di marketing, consulta le sezioni seguenti della guida Progettazione di contenuti delle e-mail:

NOTE
Se la pagina di destinazione è già predefinita in formato HTML, puoi importarla direttamente utilizzando il pulsante Change content.
Prima di importare una pagina HTML all’interno di Adobe Campaign, accertati che si apra e venga visualizzata correttamente nei vari browser. Se la pagina HTML contiene script di JavaScript, questi devono essere eseguiti senza errori all’esterno dell’editor. In generale, evita di utilizzare gli script nel contenuto dei messaggi per avere la certezza che siano elaborati correttamente dai client di posta elettronica.

Interfaccia dell’editor dei contenuti delle pagine di destinazione landing-page-content-editor-interface

L’editor dei contenuti delle pagine di destinazione consente di definire, modificare e personalizzare facilmente il contenuto all’interno di Adobe Campaign. Per accedervi, fai clic sul blocco Content del dashboard di una pagina di destinazione.

L’editor dei contenuti è organizzato in tre sezioni distinte. Tali sezioni ti consentono di visualizzare e modificare il contenuto.

  1. La palette a sinistra dello schermo ti consente di modificare le opzioni generali collegate a un blocco selezionato. Le opzioni che è possibile modificare sono le seguenti: colore di sfondo, bordo, allineamento del testo, condizione di visibilità e così via. Consulta Inserimento di un campo di personalizzazione.
  2. La barra delle azioni contiene le opzioni generali della pagina. Puoi selezionare un modello e modificare la modalità di visualizzazione.
  3. La zona di modifica principale ti consente di interagire direttamente con il contenuto tramite la barra degli strumenti contestuale: puoi inserire un collegamento in un’immagine, modificare il font, eliminare un campo e così via.

La barra delle azioni contiene vari pulsanti che ti permettono di interagire con il contenuto in fase di creazione.

Icona
Nome pulsante
Canale
Descrizione
Modifica il contenuto
Pagina di destinazione ed e-mail
Ti consente di selezionare il contenuto predefinito o importare il tuo contenuto HTML personale. Fai riferimento a Caricamento di un contenuto esistente.
Annulla
Tutto
Annulla l’ultima azione eseguita.
Ripeti
Tutto
Ripete l’ultima azione annullata.
Mostra blocchi
Pagina di destinazione ed e-mail
Ti consente di visualizzare le caselle intorno ai blocchi di contenuto (corrisponde al tag HTML <div>).
Mostra sorgente
Pagina di destinazione ed e-mail
Ti permette di visualizzare il codice sorgente HTML della pagina.

La barra degli strumenti è un elemento contestuale dell’interfaccia dell’editor che offre varie funzionalità a seconda della zona selezionata. Contiene i pulsanti di azione e i pulsanti che ti consentono di modificare lo stile del testo. Le modifiche effettuate si applicano sempre alla zona selezionata. Dopo aver selezionato un blocco, puoi per esempio eliminarlo o duplicarlo. Dopo aver selezionato il testo all’interno di un blocco, puoi convertirlo in un collegamento o renderlo in grassetto.

IMPORTANT
Alcune funzioni della barra degli strumenti ti consentono di formattare il contenuto HTML. Tuttavia, se la pagina contiene un foglio di stile CSS, le istruzioni del foglio di stile potrebbero avere la priorità rispetto a quelle specificate tramite la barra degli strumenti.
Icona
Nome pulsante
Contesto
Descrizione
Collegamento a un URL esterno
Qualsiasi elemento
Consente di aggiungere un collegamento a un URL. I dettagli sulla configurazione di un collegamento sono riportati nella sezione Inserimento di un collegamento.
Collegamento a una pagina di destinazione
Qualsiasi elemento
Consente di accedere a una pagina di destinazione di Adobe Campaign. I dettagli sulla configurazione di un collegamento sono riportati nella sezione Inserimento di un collegamento.
Collegamento di abbonamento
Qualsiasi elemento
Permette di inserire un collegamento di abbonamento a un servizio. I dettagli sulla configurazione di un collegamento sono riportati nella sezione Inserimento di un collegamento.
Collegamento di annullamento dell’abbonamento
Qualsiasi elemento
Permette di inserire un collegamento di annullamento dell’abbonamento a un servizio. I dettagli sulla configurazione di un collegamento sono riportati nella sezione Inserimento di un collegamento.
Rimuovi collegamento
Collegamento
Dopo la conferma, potrai eliminare il collegamento, oltre a tutte le configurazioni correlate.
Inserisci un campo di personalizzazione
Elemento di testo
Ti consente di aggiungere al contenuto un campo del database. Fai riferimento a Inserimento di un campo di personalizzazione.
Inserisci un blocco di contenuto
Elemento di testo
Ti consente di aggiungere al contenuto un blocco di personalizzazione. Fai riferimento a Aggiunta di un blocco di contenuto.
Abilita il contenuto dinamico
Elemento di testo
Consente di inserire contenuto dinamico all’interno del contenuto. Fai riferimento a Definizione del contenuto dinamico.
Disabilita il contenuto dinamico
Elemento di testo
Permette di eliminare il contenuto dinamico.
Ingrandisci font
Elemento di testo
Aumenta le dimensioni del testo selezionato (aggiunge <span style="font-size:">).
Riduci font
Elemento di testo
Riduce le dimensioni del testo selezionato (aggiunge <span style="font-size:">).
Grassetto
Elemento di testo
Aggiunge lo stile grassetto al testo selezionato (applica al testo i tag <strong></strong>).
Corsivo
Elemento di testo
Aggiunge lo stile corsivo al testo selezionato (applica al testo i tag <em></em>).
Sottolineato
Elemento di testo
Sottolinea il testo selezionato (applica al testo selezionato il tag <span style="text-decoration: underline;">).
Cambia colore di sfondo
Elemento di testo
Consente di modificare il colore di sfondo del blocco selezionato (aggiunge style="background-color: rgba(170, 86, 255, 0.87)).
Cambia colore del font
Elemento di testo
Consente di modificare il colore di tutto il testo nel blocco o solo del testo selezionato al suo interno (<span style="color: #56ff56;">).
Immagine
Blocco contenente un’immagine
Permette di inserire un’immagine da un file salvato localmente.
Elimina
Qualsiasi blocco
Elimina il blocco e il relativo contenuto.
Duplica
Qualsiasi blocco
Duplica il blocco, compresi eventuali stili ad esso collegati.

Gestione della struttura e dello stile della pagina di destinazione managing-landing-page-structure-and-style

Gestione dei blocchi nell’editor dei contenuti managing-blocks-in-the-content-editor

I diversi elementi di contenuto HTML vengono visualizzati nella pagina di destinazione sotto forma di blocchi, corrispondenti al tag <div> </div>. Seleziona un blocco per interagire con esso, che sarà poi circondato da una casella blu.

Se è stato selezionato un blocco, gli oggetti principali dell’elemento HTML corrispondente verranno visualizzati in una breadcrumb situata nella parte inferiore dell’area di modifica.

Al passaggio del mouse passa sopra uno degli elementi della breadcrumb, viene evidenziato l’elemento interessato. Puoi quindi spostarti facilmente tra i diversi blocchi e selezionare con precisione l’elemento HTML che desideri modificare.

Per modificare, eliminare o duplicare il blocco, utilizza le opzioni della palette e della barra degli strumenti contestuale.

Per i blocchi contenenti testo, fai di nuovo clic sul blocco per attivare la modalità di modifica del testo. La cornice intorno al blocco diventa verde. A quel punto, potrai selezionare o immettere il testo. Per aggiungere un collegamento o modificare la formattazione del testo, utilizza le opzioni della palette e della barra degli strumenti contestuale.

I parametri definiti per un elemento in un blocco, quali collegamenti, campi di personalizzazione, blocchi di contenuto e così via, possono essere modificati dalla palette in qualsiasi momento.

Aggiunta di un bordo e uno sfondo nell’editor dei contenuti adding-a-border-and-a-background-in-the-content-editor

È inoltre possibile definire un colore di sfondo selezionandone uno dal grafico. Questo colore viene quindi applicato al blocco selezionato.

Puoi aggiungere anche un bordo al blocco.

Modifica dello stile del testo nell’editor dei contenuti changing-the-text-style-in-the-content-editor

Per modificare lo stile del testo, è necessario fare clic all’interno di un blocco di testo.

Per cambiare l’allineamento del testo, seleziona una delle tre icone seguenti nella palette a sinistra:

  • Allinea a sinistra: allinea il testo a sinistra del blocco selezionato (aggiunge style="text-align: left;").
  • Centra: centra il testo nel blocco selezionato (aggiunge style="text-align: center;").
  • Allinea a destra: allinea il testo a destra del blocco selezionato (aggiunge style="text-align: right;").

Puoi inoltre utilizzare la barra degli strumenti per modificare gli attributi del font: adattarne le dimensioni, rendere il testo in grassetto o corsivo, sottolineare o modificare il colore del testo. Fai riferimento a questa sezione.

Inserimento di immagini in una pagina di destinazione inserting-images-in-a-landing-page

  1. All’interno del contenuto di una pagina di destinazione, seleziona un blocco contenente un’immagine.

  2. Fai clic sul pulsante Insert.

  3. Dalla barra degli strumenti contestuale, seleziona Local image .

  4. Scegli un file.

  5. Regola le proprietà dell’immagine in base alle esigenze.

Definizione del contenuto dinamico in una pagina di destinazione defining-dynamic-content-in-a-landing-page

Per definire il contenuto dinamico di una pagina di destinazione, seleziona un blocco utilizzando la breadcrumb o facendo clic direttamente su un elemento.

Alcuni blocchi non possono essere selezionati direttamente, ad esempio le immagini. In tal caso, seleziona il blocco principale tramite la breadcrumb. Puoi quindi modificare tutti gli elementi inclusi in questo elemento principale, incluse le immagini. La condizione verrà applicata a tutti gli elementi secondari all’interno del blocco principale.

La breadcrumb viene presentata nella sezione Gestione dei blocchi.

I passaggi successivi per la definizione del contenuto dinamico in una pagina di destinazione sono simili a quelli per la creazione di un’e-mail. Vedi questa sezione.

NOTE
Se un elemento variante è evidenziato in rosso, ciò significa che non è ancora stata definita un’espressione.

Puoi spostarti tra i diversi contenuti dinamici di un blocco. Per eseguire questa operazione:

  1. Seleziona il blocco.

    Le frecce sono visualizzate sul lato destro e sinistro dell’immagine.

  2. Per sfogliare i contenuti dinamici disponibili, fai clic sulla freccia destra.

    In base al raggiungimento dell’ultimo o del primo contenuto dinamico disponibile, le frecce su ciascun lato si attenuano.

  3. Per eliminare tutte le condizioni applicate a un blocco, selezionalo e fai clic sull’icona Disable dynamic content.

  4. Seleziona il contenuto dinamico che desideri mantenere.

Nella palette:

  • I contenuti con un’espressione inserita non sono più evidenziati in rosso, ma sono visualizzati in grigio.
  • Il contenuto attualmente selezionato viene visualizzato in blu.

recommendation-more-help
3ef63344-7f3d-48f9-85ed-02bf569c4fff