ℹ️ Note: Questo articolo è stato tradotto automaticamente utilizzando AI e può contenere imprecisioni. Se qualcosa sembra sbagliato, si prega di contattare il nostro team di supporto.

La scheda Design ti dà il pieno controllo su come il tuo popup sembra e si sente sul negozio. Dai modelli e dalla tipografia alle animazioni, ai colori, ai pulsanti, allo styling coupon e persino al CSS personalizzato, quasi ogni elemento visivo può essere personalizzato per abbinare la tua identità di marca.

Questa guida spiega ogni opzione di progettazione disponibile in modo da poter creare con fiducia popup lucido e ad alta conversione.

⚠️ Prima di iniziare

Per configurare le impostazioni di progettazione:

→ Aprire un popup esistente
→ O creare un nuovo popup prima

Poi passare al Design scheda all'interno dell'editor popup.

ℹ️ Alcune sezioni di design appaiono solo per tipi di popup specifici o funzioni abilitate.

Esempi

• Timer conto alla rovescia solo per Countdown PopUps
• Coupon styling appare solo quando il display coupon è abilitato
• Slice styling appare solo per Spin Wheel PopUps

🎨 Template

I modelli consentono di applicare istantaneamente stili visivi pre-disegnati al popup. Questo aiuta i commercianti lanciare popup professionalmente stile rapidamente senza configurare manualmente ogni impostazione di progettazione individuale.

Questo è utile quando si desidera un popup professionale senza personalizzare manualmente ogni impostazione.

Esempi disponibili

• Dawn
• Venerdì nero
• Bellezza
• Festivo
• Foresta
• Oceano
• Aqua
• Elettricità
• Partito

È inoltre possibile personalizzare il modello selezionato in seguito.

👀 Visibilità

Controlli su quali dispositivi il popup dovrebbe apparire. Questo aiuta a creare esperienze popup più mirate a seconda che i clienti stiano navigando da dispositivi desktop o mobili.

Opzioni disponibili

• Desktop e mobile — visibile ovunque
• Solo Desktop — nascosto su dispositivi mobili
• Solo mobile — nascosto su dispositivi desktop

Questo è utile quando si creano campagne specifiche del dispositivo.

🖼️ Sfondo di popup

Questa sezione controlla lo stile di sfondo della finestra popup. Lo stile di sfondo gioca un ruolo importante nel modo in cui visivamente attraente e l'attenzione-grabbing il popup si sente sul negozio.

Sfondo di colore singolo

Utilizza un colore di sfondo solido per il popup.

Potete:

• Scegli un colore visivamente
• O incollare manualmente un codice colore HEX

Sfondo gradito

Crea un effetto gradiente bicolore.

Quando abilitata, vengono visualizzate impostazioni aggiuntive:

• Grado di angolo gradiente
• Colore gradiente iniziale
• Colore gradiente finale

ℹ️ I controlli graduali diventano attivi solo dopo aver abilitato lo sfondo gradiente.

🌫️ Sfondo di sovrapposizione

Controlla l'overlay del negozio mostrato dietro il popup. L'overlay aiuta a spostare l'attenzione del cliente verso il popup separandolo visivamente dal resto del contenuto del negozio.

Per esempio, quando si apre un popup, il resto del negozio può apparire dimmerso con un overlay scuro trasparente per attirare l'attenzione verso il popup.

Opzioni disponibili

• Nessun sfondo — il popup appare senza sovrapposizione
• Sfondo Dim — aggiunge un sovrapposizione semitrasparente dietro il popup

📐 Popup Layout & Border

Queste impostazioni controllano la struttura e la forma del popup generale. Regolazione di spaziatura, bordi e dimensionamento correttamente aiuta il popup sentire più pulito, più equilibrato, e visivamente lucido.

📏 Popup Size

Controlla le dimensioni generali del popup.

Opzioni disponibili

• Piccolo
• Media
• Grande
• Pagina completa

Le dimensioni più grandi del popup forniscono più spazio per immagini, prodotti e contenuti aggiuntivi.

🎨 Colore sfondo finestra popup

Imposta il colore di sfondo del contenitore popup stesso.

Potete:

• Utilizzare il raccoglitore di colore
• O inserire manualmente un codice colore HEX

🟦 Radiatore ad angolo

Controlla come arrotondato gli angoli popup appaiono.

Esempi

• Valori inferiori → angoli più nitidi
• Valori più elevati → angoli più morbidi arrotondati

🧱 Dimensione del bordo

Controlla lo spessore del bordo popup.

Il valore è misurato in pixel.

🎨 Colore di confine

Imposta il colore del bordo popup.

✨ Animazione popup

Controlla come il popup entra nello schermo. Le animazioni di ingresso aiutano il popup a sentirsi più fluido e più interattivo, rendendolo anche più evidente ai visitatori.

Opzioni disponibili

• Fase
• Scivolo
• Bounce

Le animazioni aiutano a rendere il popup più liscio e più interattivo.

🔘 Pulsante galleggiante

ℹ️ Questa sezione appare solo quando Pulsante d'azione galleggiante è abilitato nel Contenuto scheda.

Le impostazioni del pulsante Floating consentono di personalizzare l'aspetto del pulsante che i visitatori cliccano per aprire il popup. Queste opzioni ti aiutano a abbinare il pulsante con il branding del tuo negozio mantenendolo evidente e facile da interagire con.

Impostazioni disponibili

🔷 Forma

Scegli la forma complessiva del pulsante galleggiante.

Opzioni disponibili

• Arrotondato
• Piazza
• Pillola
• Circolo

🎨 Colore del pulsante

Controlla il colore dell'icona o del testo visualizzato sul pulsante galleggiante.

Potete:

• Scegli un colore usando il raccoglitore di colore
• Inserisci manualmente un codice colore HEX

🖌️ Dimensione del carattere

Controlla la dimensione dell'icona o del testo visualizzato all'interno del pulsante galleggiante.

Il valore è misurato in pixel.

🟫 Colore dello sfondo

Imposta il colore di sfondo del pulsante galleggiante.

Potete:

• Scegli un colore usando il raccoglitore di colore
• Inserisci manualmente un codice colore HEX

🌑 Ombra

Aggiunge un effetto ombra opzionale intorno al pulsante galleggiante.

Opzioni disponibili

• Nessuno
• Piccolo
• Media
• Grande

🧱 Colore di confine

Controlla il colore del bordo pulsante galleggiante.

📐 Radiatore ad angolo

Controlla come arrotondato gli angoli del pulsante galleggiante appaiono.

I valori più elevati creano un aspetto più morbido e arrotondato.

🔤 Tipografia

Le impostazioni della tipografia controllano come tutti gli elementi di testo appaiono all'interno del popup. Queste impostazioni aiutano a mantenere la coerenza visiva tra le voci, descrizioni, pulsanti e messaggi di convalida in modo che il popup si senta professionalmente progettato e più facile da leggere.

L'app supporta i font incorporati insieme ai caratteri tematici.

🏷️ Titolo Tipografia

Controlla lo stile del titolo popup.

Impostazioni disponibili

• Titolo Font
• Titolo Dimensioni
• Titolo Colore

📝 Descrizione Tipografia

Controlla lo stile della descrizione popup.

Impostazioni disponibili

• Descrizione Font
• Descrizione Dimensioni
• Descrizione Colore

⚠️ Tipografia del messaggio di errore

Controlla i messaggi di errore di convalida visualizzati per entrambi:

• Campi email
• Campi del telefono

Impostazioni disponibili

• Scheda di errore
• Dimensione del messaggio di errore
• Colore del messaggio di errore

📝 Styling di campo di input

Questa sezione controlla l'aspetto di e-mail e numeri di telefono campi di input. Il corretto stile di input migliora la leggibilità e aiuta le forme a sentirsi più affidabili e visivamente allineati con il tuo branding storefront.

Impostazioni disponibili

• Colore del testo in ingresso
• Colore dello sfondo dell'ingresso
• Colore del bordo dell'ingresso

Queste impostazioni aiutano i campi di forma a soddisfare il tuo branding storefront.

🔘 Pulsante Styling

Controlla la progettazione del pulsante popup call-to-action. Dal momento che il pulsante è di solito l'elemento principale di conversione all'interno del popup, lo styling correttamente può migliorare in modo significativo click-through e tassi di fidanzamento.

🔤 Button Font

Scegli la famiglia font utilizzata all'interno del pulsante.

È possibile utilizzare:

• Personaggi tematici
• Fonti integrate

🎨 Colore del pulsante

Controlla il colore di sfondo del pulsante.

🔠 Taglie di testo del pulsante & colore

Questa impostazione controlla:

• Dimensione del testo (campo sinistro)
• Selettore di colore di testo (campo medio)
• Valore di colore HEX (campo destro)

Esempio

• Grande testo bianco sul pulsante scuro
• Piccolo testo nero su pulsante luminoso

Raggio d'angolo

Controlla come arrotondato gli angoli del pulsante appaiono.

I valori più elevati creano pulsanti più morbidi.

🎟️ Coupon Styling

ℹ️ Questa sezione appare solo quando il display coupon è abilitato all'interno della scheda Contenuto.

Questa sezione controlla l'aspetto del contenitore codice coupon. Una sezione coupon di stile visivo rende gli sconti spiccano più chiaramente e incoraggia i visitatori a copiare e utilizzare l'offerta durante il checkout.

🧾 Buon compleanno stile

Scegli lo stile di confine che circonda la zona coupon.

Esempi disponibili

• Solido
• Dare

🎨 Colore di confine

Controlla il colore di confine coupon.

🔤 Colore del testo

Controlla il colore del testo mostrato all'interno della sezione coupon.

🖼️ Colore dello sfondo

Controlla il colore di sfondo contenitore coupon.

❎ Chiudi Icon Styling

Controlla l'aspetto dell'icona di chiusura popup. Anche se è un piccolo elemento, abbinando lo stile icona con il design popup generale aiuta a mantenere un'esperienza utente più pulita e più lucida.

Impostazioni disponibili

• Colore delle icone
• Dimensione dell'icona

Opzioni di dimensione disponibili

• Piccolo
• Media
• Grande

⏱️ Styling Timer conto alla rovescia

ℹ️ Questa sezione appare solo per Countdown PopUps.

Controlla l'aspetto visivo del timer conto alla rovescia. Il corretto stile timer aiuta a creare urgenza, assicurando che il conto alla rovescia rimanga leggibile e visivamente coerente con il resto del design popup.

Impostazioni disponibili

• Stile Timer
• Timer Font
• Dimensione del tempo
• Colore del timer
• Timer sfondo colore
• Etichetta Font
• Dimensione dell'etichetta
• Colore dell'etichetta

Queste impostazioni aiutano a creare urgenza mantenendo il timer visivamente allineato con il tuo negozio.

🎡 Ruota di rotazione — Slice Styling

ℹ️ Questa sezione appare solo per Spin Wheel PopUps.

Questa sezione controlla lo stile visivo delle fette della ruota di rotazione e dei componenti della ruota. Regolare attentamente queste impostazioni può rendere la ruota sentire più vibrante, giocoso, e attenzione-grabbing per i visitatori.

🎨 Colore della ferita

Controlla alternando colori di sfondo fette.

Impostazioni disponibili

• Taglia 1 colore
• Taglia 2 colori

Questi colori si alternano lungo la ruota.

🔤 Stilatura dell'etichetta

Controlla lo stile di testo mostrato su ogni fetta di ruota.

Impostazioni disponibili

• Colore dell'etichetta
• Dimensione dell'etichetta
• Slice etichetta carattere

💬 Stilatura del messaggio

Controlla lo stile di fetta ricompensa o messaggi vincenti.

Impostazioni disponibili

• Slice messaggio carattere
• Tagliare il messaggio
• Colore del messaggio

🎯 Colore dei componenti della ruota

Controlla gli elementi di design della ruota rimanenti.

Impostazioni disponibili

• Colore del bordo della ruota
• Colore della freccia
• Colore del cerchio centrale

💻 CSS personalizzato

💡 Gli utenti avanzati possono applicare il proprio stile CSS personalizzato direttamente all'interno dell'editor popup.

Questo consente di personalizzare gli elementi oltre i controlli standard di progettazione. È particolarmente utile per i commercianti che vogliono uno stile avanzato, regolazioni specifiche per dispositivi mobili, o una personalizzazione visiva più profonda.

🧩 Selettori comuni

L'editor fornisce selettori pronti come:

• .futureblink-popup
• .futureblink-popup .title
• .futureblink-popup .description
• .futureblink-popup .cta-button
• .futureblink-popup .close-btn

✅ Applicare CSS

Dopo aver aggiunto il tuo CSS:

→ Cliccare Applicare per testare immediatamente gli stili.

ℹ️ Se gli stili non si applicano correttamente, aggiungendo !important a ogni dichiarazione è raccomandato.

Esempio

.futureblink-popup .title {
colore: #000!importante;

🚀 Risultato finale

Una volta configurato con successo:

✅ Il tuo popup corrisponde alla tua identità di marca
✅ Tipografia, pulsanti e ingressi si sentono visivamente coerenti
✅ Coupon sezioni e timer guardare lucido
✅ Spin popup ruota diventare più visivamente coinvolgente
✅ Animazioni e sovrapposizioni migliorano l'attenzione del cliente
✅ Custom CSS fornisce agli utenti avanzati un controllo più profondo
✅ I clienti sperimentano un design più pulito e professionale popup 🎨

Aggiornato il: 10/09/2026