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 “Banner”
Digita Banner nella casella di ricerca.
Vedrai opzioni come Banner, Banner carousel full, Banner image slider horizontal, Banner double image slider, Banner bento grid, e altro.
Seleziona lo stile del 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, testo minimo: Comunicati di lancio, presentazioni di prodotto o dichiarazioni del marchio in cui un titolo d'impatto e lo sfondo raccontano la storia.
Concentrare l'attenzione: Indirizzare i visitatori verso un'unica azione principale come “Get Started” o “Book Now” senza distrazioni visive.
Presentazione del brand senza soluzione di continuità: Fondendo l'intestazione della tua pagina in un'unica immagine principale coinvolgente per un aspetto più snello e coerente.
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.
Attiva/disattiva immagine
Attiva l'immagine su (immagine/video di sfondo) se desideri un media dietro il tuo testo.
Se è abilitata, vedrai il selettore Immagine/Video qui sotto.
Pulsanti
Attiva on Pulsanti per aggiungere una chiamata all'azione.
Fare clic su pulsante Aggiungi +, quindi impostare la Etichetta e il Tipo di collegamento (pagina, sezione, e-mail, 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.
Il menu a discesa Overlay regola quanto scura o chiara sia la sovrapposizione 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.
Testo secondario: scegli Piccolo, Medio, o Grande.
Spaziatura
Top e Bottom padding (Piccolo, Medio, Grande).
Altezza min.: seleziona Contenuto (si adatta al testo) o Schermo (riempie il viewport 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.
Carosello Banner Completo
Carosello Banner Completo
Scegli Banner Carousel Full quando hai più messaggi chiave o immagini che desideri mostrare in sequenza. Gli scenari ideali includono:
Evidenziazione delle caratteristiche: Scorrendo tra i vantaggi del prodotto, le offerte di servizio o le istantanee dei case-study, ciascuno con il proprio titolo e sottotitolo.
Narrazione per capitoli: Raccontare una storia a più fasi, come “Plan → Build → Grow”, con ogni diapositiva dedicata a una fase.
Massimizzare lo spazio disponibile: Utilizzare diapositive a tutta larghezza per mantenere la sezione hero dinamica e coinvolgente, soprattutto quando si hanno 3–5 immagini d'impatto da condividere.
Scheda Contenuti
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.
Fai clic sulla icona della matita su qualsiasi diapositiva per modificare l'immagine, la didascalia o il testo alternativo.
Fare clic sull'icona del cestino per rimuovere una diapositiva.
Pulsanti
Attiva on per mostrare un pulsante di invito all'azione sotto il tuo carosello.
Fare clic su Pulsante Aggiungi +, quindi imposta la tua Etichetta e il Tipo di collegamento (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 immagine
Overlay: Regola l'oscurità/luminosità dell'overlay su ogni diapositiva.
Sfuocatura immagine: Applica una leggera sfocatura dietro il testo per migliorarne la leggibilità.
Dissolvenza: Attiva per applicare una sottile dissolvenza incrociata tra le diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra grande.
Sottotesto: seleziona Piccolo, Medio o Grande.
Spaziatura
Superiore e Inferiore padding: Piccolo, Medio, Grande.
Altezza min.: Contenuto (si adatta al testo) o Schermo (riempie la viewport del visitatore).
Allineamento del contenuto
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.
Bordo
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 del banner (Orizzontale)
Slider di immagini del 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: Consente agli utenti di scorrere o di fare clic attraverso una galleria di 6–10 immagini—ideale per portfolio, testimonianze dei clienti o gallerie prima-&-dopo.
Messaggistica stratificata: Sovrapponendo titoli concisi e CTAs su ogni slide, mantenendo l'altezza dello slider moderata per un accesso più rapido alla pagina.
Scoperta interattiva: Incoraggia il coinvolgimento degli utenti tramite controlli di scorrimento manuale, ideale quando i visitatori devono sfogliare le opzioni al proprio ritmo.
Scheda Contenuti
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.
Sottotesto
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.
Fai clic sull'✎ icona di modifica su una diapositiva per sostituirne l'immagine, aggiornare il testo alternativo o modificare la didascalia.
Fare clic su 🗑️ icona del cestino per rimuovere una diapositiva indesiderata.
Per aggiungere altro, fare clic su Aggiungi immagine +.
Pulsanti
Attiva on per visualizzare un pulsante di invito all'azione sotto il tuo slider.
Fare clic su Pulsante Aggiungi +, quindi specificare:
Etichetta (ad es. “Explore Our Services”)
Tipo di collegamento (sezione, pagina, URL esterno, telefono o e-mail)
Suggerimento: 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 a Sinistra, Centro, o Destra sulle diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra Grande.
Testo secondario: 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 completa della viewport).
Animazioni
Scegli come animare le diapositive: Dal tema, In dissolvenza, Scorrimento, o Zoom.
Separatore
Attiva on per inserire un divisore SVG decorativo sotto lo slider.
Bordo
Attiva on per aggiungere un contorno sottile attorno a ciascuna diapositiva.
Consiglio professionale: Una velocità di auto-scroll moderata con un semplice pulsante “Explore” spesso produce il miglior coinvolgimento.
Banner slider a doppia immagine (verticale)
Banner slider a doppia immagine (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:
Giustapporre prima/dopo o problema/soluzione elementi visivi.
Evidenziazione delle funzionalità abbinate (ad es. “On-site Support” accanto a “24/7 Monitoring”).
Mantenere l'altezza della hero-section pur offrendo ai visitatori più immagini ad alto impatto.
Scheda Contenuti
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 della 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 testo e pulsanti Sinistra, Centro o Destra sulle diapositive.
Dimensione del testo
Intestazione: scegli Piccolo, Medio, Grande o Extra grande.
Testo secondario: seleziona 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.
Carosello di banner
Carosello 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:
Narrazione per fasi (ad es., “Our Process” in 3 fasi)
Evidenziare studi di caso in primo piano o elementi del portfolio
Presentare diverse offerte di servizi in un hero compatto
Scheda Contenuto
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 collegamento (sezione della pagina, URL esterno, telefono, email), l'etichetta e la 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.
Sottotitolo: seleziona 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 ingresso (ad es. Dal tema (Fade in)) per il titolo e il sottotesto.
Griglia Banner Bento
Griglia Banner Bento
Usa Banner Bento Grid quando vuoi un layout pulito a tre immagini che bilancia un forte blocco titolo/testo secondario con tre elementi visivi di supporto. Questo stile è perfetto per:
Mostrando Tre Servizi Core: Presenta le tue tre migliori offerte affiancate.
Evidenziazione dei casi di studio: Dedica lo stesso spazio alle immagini del progetto “before,” “during,” e “after”.
Presentazione dei membri del team o delle testimonianze: Abbina ogni foto a un riquadro evidenziato in una griglia uniforme.
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 della pagina, URL esterno, telefono, email), l'etichetta e la 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 destra.
Dimensione del testo
Intestazione: scegliere Piccolo, Medio, Grande o Extra grande.
Testo secondario: scegli 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 bilanciamento.
Animazioni
Stile di inserimento (ad es. Dal tema (Sfumare in)) per il titolo e il sottotesto.
Griglia Banner
Griglia Banner
Usa questo stile quando desideri presentare un singolo titolo + sottotitolo accanto a una griglia compatta di fino a 3 immagini, tutti visibili contemporaneamente.È perfetto per:
Mostrare più pilastri di servizio affiancati sotto un messaggio unitario
Presentare i membri del team o i 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 maniglia di trascinamento, scambia tramite icona della matita, rimuovi tramite icona del cestino, o Aggiungi immagine + per caricare/selezionare nuove
Pulsanti
Attiva Aggiungi un pulsante per visualizzare un CTA (ad es. “Potenzia il tuo IT”
Personalizza il tipo di collegamento (sezione della pagina, URL esterno, telefono, email), l'etichetta e il target
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: a sinistra, al centro o a destra rispetto alla griglia
Immagine senza bordi: disattiva/attiva 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.
Testo secondario: seleziona 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)
Separatore / Bordo
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 dimentichi la nuova barra degli strumenti di accesso rapido nella parte superiore della sua sezione
Nota che questa barra degli strumenti appare solo quando passi il cursore sulla sezione nell'editor della pagina semplicemente sposta il cursore sulla sezione per mostrare 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 consentono di sperimentare e riorganizzare al volo, senza bisogno di accedere a impostazioni più approfondite.