Componenti della struttura structure-components
Utilizza i componenti struttura nell’area di progettazione visiva per definire la struttura del contenuto. Aggiungendo e spostando elementi strutturali con semplici azioni di trascinamento della selezione, puoi definire rapidamente la struttura del layout del contenuto. Ogni componente struttura occupa lo spazio orizzontale e può essere impilato per creare il layout in verticale. Per formare ogni blocco di contenuto necessario, divide ogni componente in colonne.
Libreria struttura
Nella parte superiore della libreria Components, la sezione Structures visualizza i componenti struttura disponibili:
Aggiungere componenti struttura
Quando progetti il contenuto per l’e-mail, la pagina di destinazione o il frammento, aggiungi ciascun componente struttura per creare il layout. Trascinare un elemento dalla sezione Strutture a sinistra e rilasciarlo nell’area di lavoro. Puoi utilizzare la barra degli strumenti per selezionare una colonna e utilizzare le schede Impostazioni e Stili nel pannello di destra per definire i parametri per il componente o la colonna selezionati.
Barra degli strumenti del componente
La barra degli strumenti viene visualizzata nell’area di lavoro quando questa viene selezionata nell’area di lavoro. Gli strumenti disponibili consentono di selezionare facilmente una colonna e applicare le funzioni dei componenti.
Impostazioni del componente
Dopo aver aggiunto un componente, questo viene selezionato nello spazio di progettazione visiva e le relative proprietà vengono visualizzate nel pannello di destra. Per impostazione predefinita, viene visualizzata la scheda Impostazioni. Puoi anche selezionare un componente struttura in qualsiasi momento per modificare le impostazioni.
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.
Intestazione e piè di pagina
Puoi designare un componente struttura come intestazione o piè di pagina HTML nel messaggio e-mail o nella pagina di destinazione. Con il componente struttura selezionato nell’area di lavoro, fai clic sull’opzione Intestazione o Piè di pagina. Può essere presente una sola intestazione o un solo piè di pagina e l’opzione non è disponibile se è stato assegnato un altro componente.
Per rimuovere la designazione di intestazione o piè di pagina, seleziona il componente e fai clic sull’opzione per rimuoverlo.
Colonne sovrapposte
Per schermate o finestre di visualizzazione più piccole, le colonne nel componente struttura vengono visualizzate in pila a meno che non si modifichi l’impostazione predefinita. Con il componente struttura a più colonne selezionato, modifica l’impostazione Non impilare le colonne sul dispositivo mobile spostando il cursore di attivazione/disattivazione a destra.
Stili dei componenti
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.
Informazioni di base
Con la scheda Stili selezionata nel pannello di destra, utilizza la sezione Sfondo per definire il colore e l’immagine facoltativa da utilizzare come sfondo per il componente struttura.
Colore di sfondo
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, utilizzare il cursore del colore e il campo del colore per selezionare il colore.
Immagine di sfondo background-image
Per abilitare le impostazioni dell’immagine di sfondo, sposta il selettore di attivazione/disattivazione.
Scegli il tipo di origine risorsa e seleziona il file di immagine:
Scegli questo tipo per sfogliare e selezionare una risorsa immagine dalla libreria B2B edition di Journey Optimizer o dall’istanza connessa di Market Engage.
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.
Scegli 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.
-
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.
Scegli 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.
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.
Utilizza l’opzione Posizionamento immagine per scegliere in che modo l’immagine riempie il componente struttura. Le impostazioni di posizionamento seguono gli attributi standard di riempimento e allineamento dell’immagine di sfondo di HTML.
Altri stili
Per regolarne la visualizzazione nel messaggio e-mail o nella pagina di destinazione, puoi applicare altri stili di componenti struttura.
-
Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Bordo e imposta le opzioni per visualizzare un bordo per il componente:
-
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.
-
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.
-
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.
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, dall’alto verso il basso, da sinistra a destra o da 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.
-
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.
-
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.
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.
Colonne
Utilizza lo strumento Seleziona una colonna nella barra degli strumenti del componente per selezionare una colonna. Puoi quindi utilizzare la barra degli strumenti delle colonne per modificare la selezione delle colonne, rimuoverle o applicare varianti di contenuto condizionale alla colonna. I parametri per la colonna vengono visualizzati nelle schede Impostazioni e Stili a destra.
Modifica n:n colonne
La larghezza delle colonne è statica per la maggior parte dei componenti della struttura. Quando si aggiunge il componente n:n column, è possibile modificare il numero di colonne e il ridimensionamento delle colonne. Il componente colonna n:n inizia con cinque colonne di larghezza uguale (20%).
Con il componente selezionato nell’area di lavoro, utilizza l’opzione Numero colonne nel pannello di destra per modificare il numero di colonne. Fare clic sulle icone freccia su e freccia giù per aumentare o diminuire il numero di colonne oppure immettere il numero nel campo.
Nell’area di lavoro, sposta l’icona di dimensionamento della colonna per regolare la larghezza della colonna selezionata. Quando aumentate o diminuite la larghezza, anche la colonna adiacente viene regolata in modo che tutte le colonne occupino il 100% della larghezza del componente.
Stili colonna
Per impostare gli stili da applicare a tale colonna, selezionare la colonna nell’area di lavoro.
-
Colore di sfondo - 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.
-
Immagine di sfondo - Per abilitare le impostazioni dell’immagine di sfondo, spostare il selettore di attivazione/disattivazione.
Scegli il tipo di origine della risorsa e seleziona un file di immagine.
-
Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Bordo e imposta le opzioni per visualizzare un bordo per il componente:
-
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.
-
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.
-
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.
Espandere la sezione Alignment e scegliere l’allineamento verticale da utilizzare: superiore, centrale o inferiore. Questo stile si traduce in uno stile CSS vertical-align standard e influisce sul posizionamento all’interno del componente che lo contiene.
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, dall’alto verso il basso, da sinistra a destra o da 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.
-
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.
-
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.
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.
Struttura di navigazione
Nello spazio di progettazione visiva è possibile accedere ai componenti strutturali, inclusi le colonne e il contenuto, utilizzando la struttura di navigazione. Fai clic sull’icona Struttura di navigazione (
L’elemento Body è la radice della struttura ad albero. Fai clic su uno dei componenti o degli elementi figlio di colonna nella struttura per selezionarlo nell’area di lavoro. Nelle schede Impostazioni e Stili a destra vengono visualizzati i parametri per il componente o la colonna.
