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
La sezione Contents nella parte inferiore della libreria dei componenti visualizza 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. Include funzionalità di formattazione e funzionalità 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 (URL esterno o pagina di destinazione) per il testo o l’elemento selezionato. |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| Strumento | Utilizzo | Componenti |
|
Rimuovi il collegamento cliccabile (URL esterno o pagina di destinazione) 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
Puoi 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 Stile 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 lavori con la progettazione, puoi anche rimuovere o duplicare un componente.
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
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.
Aggiungere ad esempio un componente Container e quindi un componente Button in tale contenitore. Puoi utilizzare uno stile di area specifico per il contenitore e assegnare al pulsante e al relativo sfondo lo stile desiderato.
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.
-
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 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.
-
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.
-
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.
-
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.
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.
-
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.
-
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.
Pulsante
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, consulta #.
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
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, 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
Personalizza lo stile del pulsante nella scheda Stili.
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.
Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Testo e imposta le opzioni per gli stili di testo del componente:
-
Famiglia di caratteri - Fare clic sull'icona freccia giù per selezionare una famiglia di caratteri per il testo all'interno del componente.
-
Dimensione carattere - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire la dimensione del carattere oppure immettere un valore. Per i valori immessi, è possibile utilizzare i decimali.
-
Altezza riga - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire l'altezza della riga oppure immettere un valore. Per i valori immessi, è possibile utilizzare i decimali.
-
Stili testo - Selezionare l'icona per lo stile di testo: Grassetto, Corsivo, Sottolineato o Barrato.
-
Allineamento testo - Selezionare l'icona per l'allineamento orizzontale del testo: Sinistra, Centrata, Destra o Giustificata.
-
Colore carattere - Fare clic sul quadrato del colore per scegliere un colore del carattere 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.
-
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 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.
-
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.
-
+++Allineamento
+++
+++Margine pulsante
+++
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.
-
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.
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.
-
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.
-
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.
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.
Testo
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.
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.
Questi stili vengono applicati all'intero blocco di testo. È possibile applicare lo stile in linea a una stringa di testo selezionata.
Nel pannello di destra con la scheda Stili selezionata, espandi la sezione Testo e imposta le opzioni per gli stili di testo del componente:
-
Famiglia di caratteri - Fare clic sull'icona freccia giù per selezionare una famiglia di caratteri per il testo all'interno del componente.
-
Dimensione carattere - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire la dimensione del carattere oppure immettere un valore. Per i valori immessi, è possibile utilizzare i decimali.
-
Altezza riga - Fare clic sulle icone delle frecce su e giù per aumentare o diminuire l'altezza della riga oppure immettere un valore. Per i valori immessi, è possibile utilizzare i decimali.
-
Stili testo - Selezionare l'icona per lo stile di testo: Grassetto, Corsivo, Sottolineato o Barrato.
-
Allineamento testo - Selezionare l'icona per l'allineamento orizzontale del testo: Sinistra, Centrata, Destra o Giustificata.
-
Colore carattere - Fare clic sul quadrato del colore per scegliere un colore del carattere 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.
-
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 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.
-
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.
-
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.
-
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.
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.
-
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.
-
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.
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.
Divisore
Aggiungi un componente Divider per incorporare una divisione lineare tra le sezioni del contenuto.
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.
+++LINE
+++
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.
-
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.
-
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.
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.
-
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.
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.
-
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.
-
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.
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.
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.
Finestra di dialogo Modifica HTML
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:
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.
-
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 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.
-
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.
-
Espandere la sezione Alignment e scegliere l'allineamento orizzontale e verticale che si desidera utilizzare. Gli stili di allineamento influiscono sul modo in cui il componente HTML viene posizionato all’interno del componente contenitore (strutturale o contenitore).
L'allineamento orizzontale si traduce in uno stile CSS text-align standard ed è possibile scegliere tra sinistra, centro o destra. L'allineamento verticale si traduce nello stile CSS standard vertical-align ed è possibile scegliere dall'alto, dal centro o dal basso.
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.
-
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.
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.
-
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.
-
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.
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.
Immagine
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
Scegliere il tipo di origine risorsa e selezionare un file di immagine: