Crea pagine moderne e accattivanti con gradienti multicolore e sfocatura dello sfondo nel Page Builder di GoHighLevel / Squadd. Questo articolo mostra come progettare gradienti lineari, radiali e angolari, perfezionare i punti di colore e aggiungere sfocatura per ottenere profondità o effetti glassmorphism.
Cosa sono i Gradienti e la Sfocatura dello Sfondo?
I gradienti ti permettono di sfumare due o più colori in modo uniforme per creare profondità visiva, mentre la sfocatura dello sfondo ammorbidisce il contenuto sotto un elemento per migliorare il contrasto e la leggibilità. Insieme, questi strumenti riducono la necessità di app di design esterne e ti aiutano a costruire layout curati direttamente in GoHighLevel / Squadd.
Principali vantaggi di Gradienti & Sfocatura dello Sfondo
Controllo Multicolore: Crea gradienti con fino a 10 punti di colore per sfumature sottili o vivaci.
Varietà di Stili: Scegli tra gradienti Lineare, Radiale o Angolare per adattarti al tuo layout.
Modifica di Precisione: Trascina i punti di colore su uno slider visivo e imposta gli angoli per risultati esatti.
Profondità Immediata: Attiva la Sfocatura dello Sfondo e regola l'intensità per creare morbidi effetti "glass" professionali.
Workflow Pulito: Passa rapidamente tra le schede Colore, Immagine e Video dello sfondo per scegliere la sorgente migliore.
Dove puoi applicare questi sfondi
Gli sfondi si trovano a livello di contenitore. Usali a livello di sezione, riga o colonna per controllare come gli effetti si propagano e come i contenuti si posizionano sopra di essi.
Applica gradienti o sfocatura alle Sezioni per aree hero a piena larghezza.
Usa le Righe per creare sfondi a fasce su più colonne.
Applica la sfocatura o un gradiente sottile alle Colonne 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 al tuo sfondo. Puoi anche creare gradienti multicolore!
Passo 1: Vai al Page Builder
- Vai su Siti (Sites) > Funnel / Siti Web.
- Apri il Funnel/Sito Web e seleziona la pagina che desideri modificare.
Passo 2: Vai alle Impostazioni Colore
- Clicca sulla Sezione/Riga/Colonna e scorri fino a Sfondo (Background) nella barra laterale destra.
- Sotto Sfondo, seleziona la scheda Colore per aprire le impostazioni del colore.
Passo 3: Attiva e Seleziona il Gradiente
- Sotto Colore, attiva il toggle Gradiente
- Usa il menu a tendina Tipo per selezionare il tipo di gradiente (Lineare, Angolare, Radiale)
Passo 4: Configura il Gradiente
- Seleziona i colori per il tuo gradiente cliccando su + Aggiungi Colore oppure cliccando direttamente sullo slider del gradiente
- Regola i colori usando il selettore di colori
- Personalizza il gradiente usando lo slider del gradiente
- Usa lo slider Angolo per regolare l'angolo del gradiente (disponibile solo per i tipi di gradiente Lineare e Angolare)
Come aggiungere una Sfocatura allo Sfondo
Segui questi passaggi per ammorbidire lo sfondo usando la sfocatura. Funziona ottimamente con colori semi-trasparenti!
Passo 1: Vai al Page Builder
- Vai su Siti > Funnel / Siti Web.
- Apri il Funnel/Sito Web e seleziona la pagina che desideri modificare.
Passo 2: Attiva la Sfocatura dello Sfondo
- Clicca sulla Sezione/Riga/Colonna e scorri fino a Sfondo nella barra laterale destra.
- Sotto Sfondo, seleziona la scheda Colore per aprire le impostazioni del colore.
- Sotto Colore, attiva il toggle Sfocatura Sfondo (Background Blur)
Passo 3: Scegli la Sfocatura
Usa lo Slider Intensità Sfocatura per impostare il livello di sfocatura desiderato.
Domande Frequenti
D: Quanti colori posso usare in un gradiente?
Fino a 10 punti di colore.
D: Le immagini e i video di sfondo esistenti verranno modificati?
No. Le impostazioni precedenti rimangono invariate; gradienti e sfocatura sono opzioni aggiuntive.
D: La sfocatura influenza il 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 Angolo.
D: Come elimino un punto di colore o torno a un colore solido?
Clicca sulla X accanto a un punto per eliminarlo. Per tornare a un colore solido, disattiva il toggle Gradiente e scegli un singolo colore nella scheda Colore.