Utilizzare i moduli di scorrimento delle immagini

È possibile utilizzare il modulo di scorrimento delle immagini per visualizzare più immagini nello stesso modulo. È possibile impostare le immagini in modo che scorrano automaticamente, oppure supportare i visitatori nel passare manualmente da una all'altra.

Aggiungere e modificare le diapositive nei moduli di scorrimento delle immagini

1. Navigare nel contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
2. Fare clic sul nome del contenuto.
3. Nell'editor dei contenuti, fare clic sull'icona add Aggiungi nella barra laterale sinistra.
4. Fare clic per espandere la categoria Media , quindi fare clic sul modulo Image Slider e trascinarlo in posizione.
5. Nella barra laterale sinistra, passare il mouse su una diapositiva e fare clic sull'icona edit Modifica per aggiungere un'immagine alla diapositiva:
   
   • Nella sezione Immagine , fare clic su Carica per selezionare un'immagine dal computer o su Sfoglia immagini per selezionare un'immagine dallo strumento file. Per generare un'immagine, fare clic su Genera con AI.
   • Nel campo Didascalia , inserire una didascalia che apparirà sotto l'immagine. Per visualizzare l'immagine senza didascalia, eliminare il testo predefinito.
   
   • Per aggiungere un link alla diapositiva:
     • Fare clic sul menu a discesa Collegamento a e selezionare un tipo di collegamento.
     • Specificare la destinazione del link nel campo visualizzato. Per saperne di più su come lavorare con i link in HubSpot.
     • Per mantenere il contenuto aperto e far sì che il link si apra in una nuova finestra, attivare l'interruttore Apri link in una nuova finestra .
     • Per identificare la destinazione del link come non facente parte del vostro sito web per i motori di ricerca, selezionate la casella di controllo No follow .
   • Fare clic su Applica modifiche per salvare le modifiche a questa diapositiva.
6. Nella parte superiore dell'editor della barra laterale, fare clic su Image slider per tornare alla panoramica del modulo.

7. Per aggiungere altre diapositive, passare il mouse su una diapositiva diversa e fare clic sull'icona edit Edit .
8. Per finalizzare le modifiche, fare clic su Applica modifiche.

Modifica delle impostazioni per i moduli di scorrimento delle immagini

1. Navigare verso il contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
2. Fare clic sul nome del contenuto.
3. Nell'editor dei contenuti, fare clic sul modulo cursore immagine.
4. Nell'editor della barra laterale, fare clic su Impostazioni per modificare le impostazioni del modulo.
5. Fare clic per espandere la sezione Diapositive per modificare le opzioni delle diapositive:
   • Nel campo Diapositive per pagina , inserire il numero di diapositive che appariranno contemporaneamente nel dispositivo di scorrimento delle immagini. È possibile visualizzare fino a cinque diapositive alla volta. Quando si selezionano più diapositive alla volta, le didascalie e le miniature non vengono visualizzate.
   • Nel campo Dimensione immagine , selezionare un'opzione di rapporto d'aspetto. Per impostazione predefinita, le immagini vengono visualizzate con il rapporto di aspetto caricato. Per standardizzare un unico rapporto di aspetto tra le immagini, selezionare Forza rapporto di aspetto. Ciò potrebbe causare la distorsione di alcune immagini.
   • Per aggiungere o rimuovere le didascalie dalle diapositive, selezionare la casella di controllo Mostra didascalie. Per impostazione predefinita, la casella di controllo Mostra didascalie è selezionata.
   • Nel menu a discesa Posizione didascalia, selezionare la posizione delle didascalie.

6. Fare clic per espandere la sezione Movimento per modificare le opzioni di transizione delle diapositive:
   • Per configurare la transizione delle diapositive, selezionare un'opzione di transizione (ad esempio, Dissolvenza).
   • Per fare in modo che le diapositive si ripetano quando si raggiunge l'ultima diapositiva, selezionare la casella di controllo Ciclo di diapositive .
   • Per fare in modo che le diapositive scorrano automaticamente, selezionare la casella di controllo Autoplay . Se il numero di diapositive è inferiore all'impostazione Diapositive per pagina , non è possibile eseguire il ciclo.
7. Fare clic per espandere la sezione Navigazione e modificare le opzioni di navigazione:
   • Per visualizzare le frecce che consentono ai visitatori di passare manualmente da una diapositiva all'altra, selezionare la casella di controllo Mostra frecce di navigazione .
   • Per visualizzare le miniature delle immagini sotto la navigazione, selezionare la casella di controllo Mostra miniature .
   • Per visualizzare i punti sotto le immagini, che mostreranno il numero totale di diapositive e permetteranno ai visitatori di selezionare un'immagine specifica, selezionare Mostra punti di navigazione.
8. Al termine, fare clic su Applica modifiche.

Modifica degli stili per i moduli di scorrimento delle immagini

È possibile modificare gli stili per i moduli image slider, compresi quelli per le diapositive, la navigazione e il cursore.

1. Navigare nel contenuto:

   • Pagine del sito web: Nel tuo account HubSpot, passa a Contenuti > Pagine del sito web.
   • Pagine di atterraggio: Nel tuo account HubSpot, passa a Contenuti > Landing Page.
   • Blog: Nel tuo account HubSpot, passa a Contenuti > Blog.
2. Fare clic sul nome del contenuto.
3. Nell'editor dei contenuti, fare clic sul modulo di scorrimento delle immagini.
4. Nell'editor della barra laterale, fare clic sulla scheda Stili.
5. Per continuare a modificare gli stili per il modulo di scorrimento delle immagini, fare clic su Diapositive, Navigazione o Slider.

Modifica degli stili per le diapositive

Per modificare gli stili di visualizzazione delle immagini nelle diapositive:

1. Fare clic su Diapositive.
2. Fare clic per espandere la sezione Immagini .
3. Immettere i valori in pixel nel campo Raggio d'angolo . Più alto è il valore, più arrotondati appariranno gli angoli.
4. Al termine, fare clic su Applica modifiche.

Per modificare gli stili di visualizzazione delle didascalie nelle diapositive:

1. Fare clic su Didascalie.
2. Fare clic per espandere la sezione Sfondo.
   • Per aggiungere margini sopra o sotto le didascalie, inserire i valori in pixel nei campi Margine sopra e Margine sotto .
   • Per aggiungere un padding alle didascalie, inserire un valore in pixel nel campo Padding . Per aggiungere valori separati per ogni lato, fare clic su Modifica separatamente e inserire i valori in pixel nei campi.
   • Per aggiungere un colore di sfondo alle didascalie, inserire un valore esadecimale nel primo campo della sezione Colore , oppure fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate .
   • Per impostare la trasparenza di un colore di sfondo, inserire un valore percentuale nel secondo campo della sezione Colore . Una trasparenza del 100% sarà opaca, mentre una trasparenza dello 0% non sarà visibile.
3. Fare clic per espandere la sezione Testo.
   • Per modificare il tipo di carattere, fare clic sul menu a discesa Seleziona carattere e selezionare un carattere.
   • Per modificare la dimensione del carattere, fare clic sul menu a discesa Dimensione e selezionare la dimensione del carattere.
   • Per modificare il colore del carattere, fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate .
   • Per modificare il peso del carattere, fare clic sull'icona del peso del carattere bold per il testo in grassetto, italicIcon in corsivo o underlineIcon sottolineato.
4. Al termine, fare clic su Applica modifiche.

Modifica degli stili per la navigazione

È possibile modificare gli stili per la navigazione, compresi le frecce del cursore, i punti e il pulsante di riproduzione automatica e la navigazione per miniature. Le opzioni di stile disponibili dipendono dalle impostazioni di navigazione del modulo cursore immagine.

Frecce di scorrimento

1. Fare clic su Navigazione.
2. Fare clic per espandere la sezione Frecce di scorrimento.
3. Inserire un valore esadecimale nella sezione Colore di sfondo. È anche possibile fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate.
4. Per impostare la trasparenza del colore di sfondo, inserire un valore percentuale nel secondo campo della sezione Colore di sfondo. Ad esempio, una trasparenza del 100% sarà opaca, mentre una trasparenza dello 0% non sarà visibile.
5. Per sostituire le icone utilizzate per le frecce destra e sinistra, fare clic su Sostituisci sopra i campi Icona sinistra e Icona destra. Nel pannello di destra, selezionare un'icona.
6. Per impostare il colore delle icone destra e sinistra, inserire un valore esadecimale nel primo campo della sezione Colore icona. È anche possibile fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate.
7. Per impostare la trasparenza del colore di sfondo dell'icona, inserire un valore percentuale nel secondo campo della sezione Colore icona. Ad esempio, una trasparenza del 100% sarà opaca, mentre una trasparenza dello 0% non sarà visibile.
8. Al termine, fare clic su Applica modifiche.

Puntini e pulsante autoplay

1. Fare clic per espandere la sezione Punti e pulsante di riproduzione automatica.
2. Inserire un valore esadecimale nel primo campo della sezione Colore, oppure fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate.
3. Al termine, fare clic su Applica modifiche.

Navigazione delle miniature

1. Fare clic per espandere la sezione di navigazione Miniature.
2. Per modificare il colore di sfondo, inserire un valore esadecimale nel primo campo della sezione Colore di sfondo a freccia , oppure fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate .
3. Per modificare la trasparenza del colore di sfondo, inserire un valore percentuale nel secondo campo della sezione Freccia colore di sfondo . Una trasparenza del 100% sarà opaca, mentre una trasparenza dello 0% non sarà visibile.
4. Per sostituire le icone utilizzate per le frecce destra e sinistra, fare clic su Sostituisci sopra i campi Icona freccia sinistra e Icona freccia destra . Nel pannello di destra, selezionare un'icona.

5. Per modificare il colore delle icone delle frecce destra e sinistra, inserire un valore esadecimale nel primo campo della sezione Colore riempimento icona freccia. È anche possibile fare clic sul selezionatore di colori e selezionare un colore. I colori personalizzati possono essere aggiunti dalla scheda Avanzate .
6. Per impostare la trasparenza della freccia, inserire un valore percentuale nel secondo campo della sezione Colore icona . Ad esempio, una trasparenza del 100% sarà opaca, mentre una trasparenza dello 0% non sarà visibile.
7. Per modificare il rapporto, la larghezza e gli angoli arrotondati delle miniature:
   • Fare clic per espandere la sezione Immagini in miniatura .
   • Per impostare il rapporto di aspetto utilizzato per tutte le miniature, fare clic sul menu a discesa Rapporto di aspetto e selezionare un rapporto di aspetto.
   • Per impostare la larghezza utilizzata per tutte le miniature, inserire un valore in pixel nel campo Larghezza .
   • Per impostare l'arrotondamento degli angoli delle miniature, inserire un valore in pixel nel campo Raggio . Più alto è il valore, più arrotondati appariranno gli angoli.
8. Al termine, fare clic su Applica modifiche.

Modifica degli stili per lo slider

1. Fare clic su Slider.
2. Fare clic per espandere la sezione Spaziatura .
3. Per aggiungere margini sopra e sotto il cursore, inserire i valori in pixel nei campi Margine sopra e Margine sotto .
4. Per aggiungere un padding al cursore, inserire un valore in pixel nel campo Padding . Per aggiungere valori separati per ciascun lato, fare clic su Modifica separatamente, quindi inserire i valori in pixel nei campi.
5. Al termine, fare clic su Applica modifiche.