Crea pagine moderne e accattivanti con gradienti multicolore e sfocatura dello sfondo nel Page Builder di HITLEAD. Questo articolo mostra come progettare gradienti lineari, radiali e angolari, regolare i punti colore e aggiungere sfocatura per ottenere profondità o effetti glassmorphism.

INDICE DEI CONTENUTI

Cosa sono i Gradienti e la Sfocatura dello Sfondo?

I gradienti ti permettono di sfumare due o più colori in modo fluido per creare profondità visiva, mentre la sfocatura dello sfondo ammorbidisce il contenuto dietro un elemento per migliorare contrasto e leggibilità. Insieme, questi strumenti riducono la necessità di app di design esterne e ti aiutano a costruire layout curati direttamente in HITLEAD.

Vantaggi principali di Gradienti e Sfocatura dello Sfondo

  • Controllo multicolore: Crea gradienti con fino a 10 punti colore per sfumature sottili o vivaci.

  • Varietà di stili: Scegli tra gradienti di tipo Linear, Radial o Angular per adattarli al tuo layout.

  • Editing di precisione: Trascina i punti colore su uno slider visivo e imposta gli angoli per risultati precisi.

  • Profondità immediata: Attiva la Background Blur e regola l'intensità per creare effetti "glass" morbidi e professionali.

  • Flusso di lavoro pulito: Passa rapidamente tra le schede Color, Image e Video per scegliere la sorgente di sfondo migliore.

Dove puoi applicare questi sfondi

Gli sfondi si trovano a livello di contenitore. Usali a livello di section, row o column per controllare come gli effetti si propagano e come il contenuto si posiziona sopra di essi.

  • Applica gradienti o sfocatura sulle Sections per aree hero a larghezza piena.

  • Usa le Rows per creare sfondi a bande su più colonne.

  • Applica sfocatura o un gradiente sottile sulle Columns per migliorare la leggibilità del testo in un blocco di contenuto specifico.

Come aggiungere un Gradiente allo Sfondo

Segui questi passaggi per aggiungere un gradiente allo sfondo. Puoi anche aggiungere gradienti multicolore!

Passo 1: Vai al Page Builder

  • Naviga su Sites > Funnels / Websites.

  • Apri il Funnel/Website e seleziona la pagina che vuoi modificare.

Schermata 1 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Passo 2: Vai alle impostazioni colore

  • Clicca sulla Section/Row/Column, poi scorri fino a Background nella barra laterale destra.

  • Sotto Background, seleziona la scheda Color per aprire le impostazioni colore.

Schermata 2 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Passo 3: Attiva e seleziona il Gradiente

  • Sotto Color, attiva il Gradient toggle.

  • Usa il menu a tendina Type per selezionare il tipo di gradiente (Linear, Angular, Radial).

Schermata 3 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Passo 4: Configura il Gradiente

  • Seleziona i colori per il tuo gradiente cliccando su + Add Color oppure cliccando direttamente sullo slider del gradiente.

  • Regola i colori usando il selettore colore.

  • Personalizza il gradiente usando lo slider del gradiente.

  • Usa lo slider Angle per regolare l'angolo del gradiente (disponibile solo per i tipi Linear e Angular).

Schermata 4 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Come aggiungere una Sfocatura allo Sfondo

Segui questi passaggi per ammorbidire lo sfondo con una sfocatura. Funziona benissimo con colori semi-trasparenti!

Passo 1: Vai al Page Builder

  • Naviga su Sites > Funnels / Websites.

  • Apri il Funnel/Website e seleziona la pagina che vuoi modificare.

Schermata 5 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Passo 2: Attiva la Background Blur

  • Clicca sulla Section/Row/Column, poi scorri fino a Background nella barra laterale destra.

  • Sotto Background, seleziona la scheda Color per aprire le impostazioni colore.

  • Sotto Color, attiva il Background Blur toggle.

Schermata 6 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Passo 3: Scegli la sfocatura

Usa il Blur Intensity Slider per impostare il livello di sfocatura desiderato.

Schermata 7 — Gradienti e Sfocatura dello Sfondo nel Page Builder

Domande frequenti

D: Quanti colori posso usare in un gradiente?

Fino a 10 punti colore.

D: Le immagini e i video di sfondo esistenti cambieranno?

No. Le impostazioni precedenti rimangono invariate; gradienti e sfocatura sono opzioni aggiuntive.

D: La sfocatura influisce sul contenuto all'interno dell'elemento?

La sfocatura ammorbidisce ciò che si trova dietro l'elemento. Il contenuto all'interno dell'elemento (come il testo) rimane nitido.

D: Vedo bande/strisce nel mio gradiente. Come posso rimediare?

Prova una o più di queste soluzioni: aggiungi un punto intermedio aggiuntivo vicino alla transizione netta, scegli colori con luminosità più simile e regola leggermente lo slider Angle.

D: Come rimuovo un punto colore o torno a un colore solido?

Clicca sulla X accanto a un punto per eliminarlo. Per tornare a un colore solido, disattiva il Gradient toggle e scegli un singolo colore nella scheda Color.

Articoli correlati

  • Panoramica di Sites

  • Video Background

  • Impostazioni avanzate delle immagini per visualizzazione Mobile e Desktop

  • Personalizzazioni animazioni in Funnels e Websites

  • Elemento Image Slider per un Web Design coinvolgente