La sezione Banner di Durable è disponibile in più stili, così puoi abbinare l'aspetto e la sensazione del tuo marchio.
Ecco come aggiungere e configurare una sezione Banner nel tuo editor di siti web Durable:
Clicca Aggiungi sezione +
Nel tuo editor di pagina, seleziona Aggiungi sezione + nella parte superiore o inferiore della tua pagina.
Cerca di “Banner”
Digita Banner nella casella di ricerca.
Vedrai opzioni come Banner, Banner carousel full, Banner image slider orizzontale, Banner doppio slider immagine, Banner bento grid, e altro ancora.
Scegli il tuo stile di banner
Clicca sullo stile che preferisci per aggiungerlo alla tua pagina.Durable inserirà esempi di titoli, sottotitoli e immagini segnaposto.
Banner
Banner
Utilizza la sezione Banner quando desideri un'immagine (o un video) eroico audace e senza ingombri con un messaggio chiaro e un'opzione di invito all'azione. È perfetto per:
Grande impatto, copia minima: Annunci di lancio, rivelazioni di prodotti o dichiarazioni di marca in cui un titolo d'impatto e uno sfondo raccontano la storia.
Concentrare l'attenzione: Guidare i visitatori verso un'azione principale come “Inizia” o “Prenota ora” senza distrazioni visive.
Presentazione del marchio senza soluzione di continuità: Fondere l'intestazione della tua pagina in un'unica immagine hero immersiva per un aspetto uniforme e coeso.
Scheda Contenuti
Qui è dove puoi modificare il testo e decidere se utilizzare un'immagine/video di sfondo.
Slogan
Linea di accento opzionale sopra il tuo titolo principale.
Clicca Genera per far suggerire a Durable una breve frase.
Titolo
Il tuo messaggio principale.
Clicca Rigenera per provare titoli diversi o digita il tuo.
Sottotesto
Dettagli di supporto sotto il tuo titolo.
Clicca Rigenera per nuove proposte di testo o inserisci un testo personalizzato.
Attivazione immagine
Attiva l'immagine su (immagine/video di sfondo) se desideri un media dietro il tuo testo.
Se abilitato, vedrai il selettore Immagine/Video qui sotto.
Pulsanti
Attiva on Pulsanti per aggiungere una chiamata all'azione.
Clicca Su pulsante Aggiungi +, quindi imposta il Label e il Tipo di link (pagina, sezione, email, telefono o URL esterno).
Scheda Stile
Affina l'aspetto, il layout e il comportamento dello sfondo e del testo del tuo banner.
Colori
Clicca Cambia per scegliere i colori di sfondo e del testo dalla tua palette del tema o inserisci un codice esadecimale personalizzato.
Immagine/video di sfondo
Se abilitato in Contenuto, vedrai questa opzione qui.
Posizione i cursori ti permettono di spostare l'immagine orizzontalmente e verticalmente.
Overlay il menu a discesa regola quanto scuro o chiaro è il sovrapposto per migliorare la leggibilità del testo.
Sfocatura immagine/video applica un effetto di morbidezza dietro il tuo testo.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra Grande.
Subtesto: scegli Piccolo, Medio o Grande.
Spacing
Top e Bottom padding (Piccolo, Medio, Grande).
Altezza minima: seleziona Contenuto (adatta il testo) o Schermo (riempie la finestra del browser).
Allineamento orizzontale
Allinea il tuo testo a sinistra, al centro o a destra all'interno del banner.
Divider
Attiva on per aggiungere un divisore decorativo in fondo al banner (clicca Cambia per scegliere uno stile).
Confine
Attiva on per racchiudere il banner in un contorno.
Animazioni
Scegli come gli elementi del banner appaiono durante lo scorrimento: Dal tema (Dissolvenza), Dissolvenza, Zoom o Scivolamento.
Combina con l'intestazione
Attiva on per fondere senza soluzione di continuità lo sfondo del banner con l'intestazione del tuo sito.
Banner Carousel Full
Banner Carousel Full
Scegli Banner Carousel Full quando hai più messaggi chiave o immagini che desideri mostrare in sequenza. Gli scenari ideali includono:
Caratteristiche in evidenza: Ruotando attraverso i benefici del prodotto, le offerte di servizi o i momenti salienti dei casi studio, ciascuno con il proprio titolo e sottotesto.
Raccontare in capitoli: Raccontare una narrativa a più fasi come “Pianifica → Costruisci → Cresci” con ogni diapositiva che copre un passo.
Massimizzare il settore immobiliare: Utilizzare diapositive a larghezza intera per mantenere la tua sezione hero dinamica e coinvolgente, specialmente quando hai 3-5 immagini forti da condividere.
Content Tab
Usa questa scheda per modificare il testo del tuo carosello, scegliere le immagini e attivare i pulsanti.
Slogan
Una breve linea di accento sopra il tuo titolo.
Clicca Genera per suggerire automaticamente una frase breve.
Titolo
Il messaggio principale del tuo carosello rotante.
Clicca Rigenera per provare nuove idee di titolo.
Sottotesto
Dettaglio di supporto sotto il titolo.
Clicca Rigenera per nuove proposte o inserisci la tua.
Immagini del carosello
Trascina e rilascia per riordinare fino a 5 diapositive.
Clicca sull' icona della matita in qualsiasi diapositiva per cambiare la sua immagine, didascalia o testo alternativo.
Clicca sull'icona del cestino per rimuovere una diapositiva.
Pulsanti
Attiva on per mostrare un pulsante di invito all'azione sotto il tuo carosello.
Clicca Aggiungi pulsante +, quindi imposta il tuo Etichetta e Tipo di link (pagina, sezione, email, telefono o URL esterno).
Scheda Stile
Regola l'aspetto e il comportamento delle immagini, del testo e del layout del tuo carosello.
Colori
Clicca Cambia per scegliere i colori di sfondo e del testo dal tuo tema o dalla tua palette personalizzata.
Stile del pulsante
Clicca Modifica per scegliere tra gli stili di pulsante preimpostati di Durable (riempito, contorno, pillola, ecc.).
Stile dell'immagine
Overlay: Regola l'oscurità/luminosità dell'overlay su ogni diapositiva.
Sfocatura dell'immagine: Applica un effetto sfocato morbido dietro il testo per migliorarne la leggibilità.
Fade: Attiva per applicare una sottile dissolvenza incrociata tra le diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra grande.
Subtesto: scegli Piccolo, Medio o Grande.
Spaziatura
Superiore e Inferiore padding: Piccolo, Medio, Grande.
Altezza min.: Contenuto (si adatta al testo) o Schermo (riempie la finestra del visitatore).
Allineamento dei contenuti
Allinea il testo e i pulsanti a sinistra, al centro o a destra sopra il carosello.
Divider
Attiva on per aggiungere una forma decorativa tra il tuo carosello e la sezione successiva.
Confine
Attiva on per racchiudere ogni diapositiva in un contorno sottile.
Animazioni
Seleziona come animare le diapositive (Dal tema, Dissolvenza, Scivola, Zoom).
Combina con intestazione
Attiva on per fondere senza soluzione di continuità il primo slide del carosello con l'intestazione del tuo sito per un effetto in stile eroe.
Slider di Immagini Banner (Orizzontale)
Slider di Immagini Banner (Orizzontale)
Scegli lo stile Banner Image Slider Orizzontale per un carosello a scorrimento laterale che fonde immagini e testo in un viewport più compatto. Ideale per:
Esplorazione visiva: Consentire agli utenti di scorrere o fare clic attraverso una galleria di 6–10 immagini—ottimo per portfolio, testimonianze dei clienti o gallerie prima-&-dopo.
Messaggistica a strati: Sovrapporre titoli concisi e CTA su ogni diapositiva, mantenendo l'altezza dello slider moderata per un accesso più rapido alla pagina.
Scoperta interattiva: Incoraggiare l'engagement degli utenti attraverso controlli di scorrimento manuale, ideale quando i visitatori devono esplorare le opzioni al proprio ritmo.
Scheda Contenuto
Questo è il luogo in cui gestisci il testo, le immagini e i pulsanti del tuo cursore.
Slogan
Una linea accentuata sopra il tuo titolo.
Clicca Genera per i tag line suggeriti dall'IA.
Titolo
Il messaggio principale che appare sopra il tuo slider.
Clicca Rigenera per provare nuove idee di titolo.
Subtesto
Testo di supporto sotto il titolo.
Clicca Rigenera per aggiornare il suggerimento o digita il tuo.
Immagini del carosello
Trascina e rilascia fino a 10 immagini nell'elenco per definire le tue diapositive.
Clicca sull'icona ✎ modifica in una diapositiva per sostituire la sua immagine, aggiornare il testo alternativo o cambiare la didascalia.
Clicca sull'🗑️ icona del cestino per rimuovere una diapositiva indesiderata.
Per aggiungere di più, clicca Aggiungi immagine +.
Pulsanti
Attiva on per visualizzare un pulsante di invito all'azione sotto il tuo slider.
Clicca Su aggiungi +, poi specifica:
Etichetta (ad es. “Esplora i Nostri Servizi”)
Tipo di collegamento (sezione, pagina, URL esterno, telefono o email)
Consiglio: Mantieni le etichette dei pulsanti concise per mantenere l'equilibrio visivo.
2. Scheda Stile
Utilizza questi controlli per perfezionare l'aspetto e la sensazione del tuo cursore.
Colori
Clicca Cambia per selezionare i colori di sfondo, testo e pulsante dal tuo tema o da una tavolozza personalizzata.
Stile del pulsante
Clicca Cambia per scegliere la forma (riempita, contorno, pillola) e il comportamento al passaggio del mouse.
Velocità del carosello
Seleziona la velocità di rotazione automatica delle diapositive: Lenta, Normale o Veloce.
Layout
Posizione del carosello: Scegli se le immagini scorrono orizzontalmente (scorrimento laterale) o verticalmente (dall'alto verso il basso).
Allineamento del contenuto: Allinea testo e pulsanti Sinistra, Centro o Destra sulle diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra Grande.
Subtesto: scegli Piccolo, Medio o Grande.
Angoli arrotondati
Applica raggi d'angolo a ciascuna diapositiva (Nessuno, Piccolo, Medio, Grande o predefinito del tema).
Spaziatura
Superiore e Inferiore padding: Piccolo, Medio o Grande.
Altezza min.: Contenuto (altezza automatica) o Schermo (altezza dell'intero viewport).
Animazioni
Scegli come animare le diapositive: Dal tema, In dissolvenza, Scorrimento, o Zoom.
Divider
Attiva on per inserire un divisore SVG decorativo sotto lo slider.
Confine
Attiva on per aggiungere un contorno sottile attorno a ciascuna diapositiva.
Consiglio da professionista: Una velocità di auto-scorrimento moderata con un semplice pulsante "Esplora" spesso porta al miglior coinvolgimento.
Banner Doppio Slider Immagini (Verticale)
Banner Doppio Slider Immagini (Verticale)
Usa questo stile quando vuoi mostrare due immagini affiancate in ogni diapositiva, con titolo e sottotesto sovrapposti, più una chiamata all'azione. Ottimo per:
Giustapposizione di immagini prima/dopo o problema/soluzione
Caratteristiche abbinate in evidenza (ad es. “Supporto in loco” accanto a “Monitoraggio 24/7”).
Mantenere un'altezza della sezione hero pur offrendo ai visitatori più immagini ad alto impatto.
Scheda Contenuto
Tagline (opzionale)
Testo breve con accento sopra il tuo titolo (“Partner IT di fiducia”).
Clicca Genera per suggerimenti AI.
Titolo
Messaggio principale (“Supporto IT affidabile per le aziende di Burnaby”).
Clicca Rigenera per provare nuove angolazioni.
Sottotesto
Due o tre righe di descrizione sotto il titolo.
Energizzare le imprese di Burnaby con soluzioni IT affidabili per operazioni senza interruzioni e maggiore efficienza.Collabora con P3Cloud Consulting oggi.
Immagini del carosello
Fino a 10 coppie di immagini; ogni diapositiva mostra due affiancate.
Usa il manico di trascinamento per riordinare, la matita per scambiare, il cestino per rimuovere, o Aggiungi immagine + per caricare/selezionare nuovi elementi.
Pulsanti
Attiva Aggiungi un pulsante.
Personalizza il tipo di collegamento (sezione pagina, URL esterno, telefono, email).
Modifica l'etichetta (“Ottieni supporto IT”) e l'obiettivo (“Sezione Contatti” o link esterno).
Scheda Stile
Colori
Clicca Cambia per selezionare i colori di sfondo, testo e pulsante dal tuo tema o da una palette personalizzata.
Stile del pulsante
Clicca Cambia per scegliere la forma (riempita, contorno, pillola) e il comportamento al passaggio del mouse.
Velocità del carosello
Seleziona la velocità di rotazione automatica delle diapositive: Lenta, Normale o Veloce.
Layout
Posizione del carosello: Scegli se le immagini scorrono orizzontalmente (scorrimento laterale) o verticalmente (dall'alto verso il basso).
Allineamento del contenuto: Allinea il testo e i pulsanti Sinistra, Centro o Destra sulle diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra grande.
Subtesto: scegli Piccolo, Medio o Grande.
Angoli arrotondati
Applica i raggi d'angolo a ciascuna diapositiva (Nessuno, Piccolo, Medio, Grande o Predefinito del tema).
Spaziatura
Superiore e Inferiore padding: Piccolo, Medio o Grande.
Altezza min.: Contenuto (altezza automatica) o Schermo (altezza completa della viewport).
Animazioni
Scegli come animare le diapositive: Dal tema, Fade in, Scivola, o Zoom.
Carousel di Banner
Carousel di Banner
Utilizza questo stile quando vuoi scorrere attraverso multiple full-width images con un'unica intestazione e sovrapposizione di testo secondario, permettendo ai visitatori di scorrere o avanzare automaticamente attraverso i tuoi messaggi principali. Ideale per:
Raccontare storie in fasi (ad esempio, “Il nostro processo” in 3 passaggi)
In evidenza studi di caso o pezzi del portfolio
Mostrando diverse offerte di servizio in un compatto hero
Scheda Contenuti
Tagline (opzionale)
Scopri la nostra esperienza
Clicca Genera per suggerimenti AI.
Titolo
Chiamata principale (“Avanza con consulenza IT strategica”).
Clicca Rigenera per provare una formulazione diversa.
Sottotesto
Descrizione di supporto sotto il titolo.
Elevate il potenziale della tua azienda con servizi di consulenza IT esperti, personalizzati per soddisfare le tue esigenze uniche a Burnaby, BC.
Immagini del carosello
Seleziona fino a 10 immagini, ciascuna riempirà la metà destra (o l'intera larghezza su mobile) in sequenza.
Riordina tramite il drag-handle, scambia tramite l'icona della matita, rimuovi tramite il cestino, o Aggiungi immagine + per caricare/scegliere nuove.
Pulsanti
Attiva Aggiungi un pulsante per visualizzare un CTA (“Ottieni supporto IT”).
Personalizza il tipo di link (sezione pagina, URL esterno, telefono, email), etichetta e destinazione.
Scheda Stile
Colori
Cambia l'accento per i punti di paginazione e gli evidenziatori dei pulsanti.
Layout
Allineamento del contenuto: scegli sovrapposizione a sinistra, centrale o a destra.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra Grande.
Subtesto: scegli Piccolo, Medio o Grande.
Angoli arrotondati
Applica il raggio del tema (ad es. Grande) all'overlay card o alla maschera dell'immagine.
Spaziatura
Margini superiori e inferiori (Piccolo/Medio/Grande) per l'equilibrio.
Animazioni
Stile di ingresso (ad es. Dal tema (Fade in)) per il titolo e il sottotesto.
Banner Bento Grid
Banner Bento Grid
Utilizza il Banner Bento Grid quando desideri un layout pulito a tre immagini che bilancia un forte blocco di titolo/sottotitolo con tre immagini di supporto. Questo stile è perfetto per:
Mostrando Tre Servizi Core: Presenta le tue tre migliori offerte affiancate.
Metodi di evidenziazione dei casi studio: Dare spazio uguale alle immagini del progetto “prima”, “durante” e “dopo”.
Caratteristiche dei membri del team o delle testimonianze: Abbina ogni foto a un richiamo in una griglia unificata.
Scheda Contenuti
Tagline (opzionale)
Scopri la nostra esperienza
Clicca Genera per suggerimenti AI.
Titolo
Chiamata principale ("Avanza con consulenza IT strategica").
Clicca Rigenera per provare una formulazione diversa.
Sottotesto
Descrizione di supporto sotto il titolo.
Elevate il potenziale della tua azienda con servizi di consulenza IT esperti, su misura per soddisfare le tue esigenze uniche a Burnaby, BC.
Immagini del carosello
Seleziona fino a 10 immagini, ognuna delle quali riempirà la metà destra (o l'intera larghezza su mobile) in sequenza.
Riordina tramite il manico di trascinamento, scambia tramite l'icona della matita, rimuovi tramite il cestino, o Aggiungi immagine + per caricare/scegliere nuove immagini.
Pulsanti
Attiva Aggiungi un pulsante per visualizzare un CTA (“Ottieni supporto IT”).
Personalizza il tipo di collegamento (sezione pagina, URL esterno, telefono, email), etichetta e obiettivo.
Scheda Stile
Colori
Cambia l'accento per i punti di paginazione e gli evidenziatori dei pulsanti.
Layout
Allineamento del contenuto: scegli sovrapposizione a sinistra, centrale o destra.
Dimensione del testo
Intestazione: scegliere Piccolo, Medio, Grande o Extra grande.
Sottotesto: scegliere Piccolo, Medio o Grande.
Angoli arrotondati
Applica il raggio del tema (ad es. Grande) all'overlay card o alla maschera dell'immagine.
Spaziatura
Padding superiore e inferiore (Piccolo/Medio/Grande) per l'equilibrio.
Animazioni
Stile di inserimento (ad es. Dal tema (Sfumare in)) per il titolo e il sottotesto.
Banner Grid
Banner Grid
Usa questo stile quando vuoi presentare un singolo titolo + sottotesto insieme a una griglia compatta di fino a 3 immagini, tutte visibili contemporaneamente.È perfetto per:
Mostrando più pilastri di servizio affiancati sotto un messaggio unificante
Introduzione dei membri del team o dei clienti chiave in un layout ordinato
Evidenziare le caratteristiche del prodotto con rapide istantanee visive
Scheda Contenuti
Slogan (opzionale)
Una breve pre-intestazione accentuata (ad esempio, “Servizi IT Esperti”)
Clicca Genera per suggerimenti AI
Titolo
Main call-out (e.g. “Elevare le prestazioni aziendali con IT affidabile”
Clicca Rigenera per provare una formulazione diversa
Sottotesto
Descrizione di supporto sotto il titolo
Ottimizza le tue operazioni con P3Cloud Consulting, il partner fidato di Burnaby per soluzioni IT innovative e affidabili.Vivi l'eccellenza oggi.
Immagini a griglia
Seleziona fino a 3 immagini—ognuna riempie una cella della griglia
Riordina tramite il manico di trascinamento, scambia tramite l'icona della matita, rimuovi tramite il cestino, o Aggiungi immagine + per caricare/scegliere nuove immagini
Pulsanti
Attiva Aggiungi un pulsante per visualizzare un CTA (ad es. “Potenzia il tuo IT”
Personalizza il tipo di collegamento (sezione pagina, URL esterno, telefono, email), etichetta e destinazione
Scheda Stile
Colori
Cambia l'accento (“Cc”) per i pulsanti e gli stati di messa a fuoco
Stile del pulsante
Scegli tra Stile 1 o Stile 2 per il tuo CTA
Layout
Posizione della Griglia: scegli icone image-left, image-right, image-top o image-bottom
Allineamento del contenuto: sinistra, centro o destra rispetto alla griglia
Immagine senza bordi: attiva/disattiva per rimuovere le cornici delle immagini
Angoli arrotondati
Applica il raggio del tema (Piccolo/Medio/Grande/Extra Grande) alle immagini e alla scheda di sovrapposizione
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra grande.
Subtext: scegli Piccolo, Medio o Grande.
Spaziatura
Top & Bottom: scegli padding Piccolo/Medio/Grande per spazio di respirazione
Altezza Min.
Imposta su Contenuto (automatico) o Schermo (a schermo intero)
Divider / Border
Attiva per disegnare una linea sottile o una casella attorno alla sezione
Animazioni
Stile di ingresso (ad es. Dal tema (Fade in)) per il titolo e la griglia
…e non dimenticare la nuova barra degli strumenti di accesso rapido in cima alla tua sezione
Nota che questa barra degli strumenti appare solo quando passi il cursore sulla sezione nell'editor di pagina, basta spostare il cursore sulla sezione per rivelare questi pulsanti di azione rapida.
Icona / Pulsante | AZIONE |
Restyle | Applica istantaneamente una configurazione di sezione o una palette di colori a questa sezione. |
Rigenera immagini | Sostituire tutte le immagini attuali con opzioni nuove fornite dall'IA. |
↑ / ↓ | Sposta questa sezione in alto o in basso nella pagina. |
⋮ (Menu di più) | Modifica sezione • Duplica sezione• Elimina sezione• |
Questi controlli ti permettono di sperimentare e riorganizzare al volo senza bisogno di approfondire le impostazioni.