> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Come impostare CSS personalizzato per popup > ℹ️ **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. Vuoi che i tuoi popup corrispondano perfettamente al tuo negozio? 🎨 ♪ Hoppy Popups include ampie opzioni di personalizzazione di progettazione, **CSS personalizzato** ti dà il controllo completo sulle regolazioni di stile avanzate che vanno oltre le impostazioni standard. Che tu stia raffinando la tipografia, regolando la spaziatura, creando effetti visivi unici, o risolvendo conflitti di stile specifici a tema, Custom CSS ti permette di personalizzare i tuoi popup esattamente come vuoi. --- # **⚠️ Prima di iniziare** Prima di utilizzare Custom CSS: * Assicurati che il tuo popup sia già stato creato e salvato. * Avere una comprensione di base di CSS o l'accesso a uno sviluppatore. * Capire che Custom CSS può ignorare le impostazioni standard di progettazione. 💡 Le opzioni di stile standard come colori, font e spaziatura sono già disponibili nella scheda Design. Custom CSS è destinato a requisiti di styling più avanzati. --- # **🛠️ Passo 1 — Apri il tuo setup popup** Aprire **Hoppy Popups** da app Shopify Admin. Allora: ➡️ Aprire un popup esistente. ➡️ O creare un nuovo popup se non lo hai già fatto. Navigare al **Design** scheda. Scorrere verso il basso fino a trovare il **CSS personalizzato** sezione. --- # **🎨 Fase 2 — Aprire la sezione CSS personalizzata** All'interno **CSS personalizzato** sezione che troverai: * Editor CSS * Anonimo **Applicare** pulsante pulsante * A **Ripristino** pulsante pulsante * Un modello di avvio CSS Il modello include selettori popup comunemente usati, rendendo facile iniziare a personalizzare il popup senza dover identificare manualmente i nomi delle classi. --- # **✍️ Passo 3 — Aggiungi il tuo CSS personalizzato** L'editor fornisce diversi selettori pronti all'uso per lo styling di elementi popup. ### **Selettori disponibili** Selezionatore Descrizione `.futureblink-popup` Intero contenitore di popup `.futureblink-popup .title` Titolo popup `.futureblink-popup .description` Popup descrizione testo `.futureblink-popup .cta-button` Pulsante di chiamata a azione `.futureblink-popup .close-btn` Chiudi pulsante --- ### **Selettori mobili** Per lo styling specifico per dispositivi mobili, utilizzare `.mobile` variazione. Selezionatore Descrizione `.futureblink-popup.mobile` Contenitore di popup mobile `.futureblink-popup.mobile .title` Titolo mobile `.futureblink-popup.mobile .description` Descrizione mobile `.futureblink-popup.mobile .cta-button` Pulsante CTA mobile `.futureblink-popup.mobile .close-btn` Pulsante di chiusura mobile --- ### **Esempio CSS** Per personalizzare il titolo popup e il pulsante CTA: `.futureblink-popup .title {` `color: #ff6b6b;` `font-size: 24px;` `}` `.futureblink-popup .cta-button {` `box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);` `border-radius: 8px;` `}` 💡 È inoltre possibile aggiungere ulteriori selettori, animazioni, query multimediali e altre regole CSS valide come necessario. --- # **📱 Passo 4 — Aggiungi mobile-Specific Styling** Per applicare gli stili solo su dispositivi mobili, utilizzare `.mobile` Selettori. Esempio: `.futureblink-popup.mobile .title {` `font-size: 18px;` `}` L'app si avvolge automaticamente `.mobile` selettori all'interno di una query multimediale mobile quando li rende sul tuo negozio. Ciò significa che non è necessario creare manualmente i breakpoint mobili per questi selettori. --- # **✅ Passo 5 — Applicare il CSS** Una volta aggiunta la CSS: ➡️ Fare clic **Applicare**. L'anteprima aggiorna automaticamente in modo da poter rivedere immediatamente i cambiamenti di stile. ⚠️ Semplicemente incollare CSS nell'editor non lo attiva. Devi cliccare **Applicare** prima che gli stili diventino attivi. Se si desidera rimuovere lo stile personalizzato: ➡️ Fare clic **Ripristino**. Questo ripristina il modello predefinito e disabilita il CSS personalizzato. --- # **👀 Passo 6 — Recensione dell'anteprima** Dopo aver applicato il CSS: ➡️ Rivedere l'anteprima Desktop. ➡️ Recensione dell'anteprima Mobile. Verificare che: * Visualizzazione del testo correttamente. * I bottoni rimangono allineati. * Lo spazio sembra coerente. * Gli effetti visivi si comportano come previsto. Se sono necessarie modifiche: ➡️ Aggiorna il CSS. ➡️ Fare clic **Applicare** Ancora. L'anteprima si aggiorna automaticamente dopo ogni aggiornamento. --- # **💾 Passo 7 — Salvare e pubblicare** Una volta soddisfatti del design: ➡️ Fare clic **Salva**. ➡️ Fare clic **Pubblicazione**. ⚠️ Salvare da solo non aggiorna il tuo negozio. Il popup deve anche essere pubblicato prima che i clienti possano vedere i cambiamenti. --- # **⚠️ Note importanti** ### **Impostazioni di progettazione CSS personalizzate** Custom CSS ha la precedenza sulla maggior parte delle impostazioni standard di progettazione. Se un'impostazione di progettazione sembra essere ignorata, è probabile che sia sovraccaricato dal vostro CSS. --- ### **Mobile Handling è automatico** L'app converte automaticamente `.mobile` selettori in stili mobili reattivi. Questo rende facile mantenere disegni desktop e mobili separati senza scrivere query multimediali personalizzati. --- ### **Styling Scoped** Custom CSS è automaticamente indirizzato al popup specifico che viene modificato. Questo aiuta a prevenire lo styling conflitti con: * Altri popup * Elementi a tema * Altri contenuti storefront --- ### **Opzione di reset** Fare clic su **Ripristino** rimuove solo la CSS personalizzata. Non colpisce: * Impostazioni popup * Impostazioni di progettazione * Modelli * Configurazione dei contenuti --- ### **Convalida CSS** L'editor non convalida la sintassi CSS. Se uno stile non appare correttamente: ➡️ Controlla i nomi dei selettori. ➡️ Verificare bracci e semicoloni. ➡️ Rivedere il CSS per errori di sintassi. --- # **❓ Risoluzione dei problemi** Se i tuoi stili non appaiono correttamente: ➡️ Confermare che **Applicare** è stato cliccato. ➡️ Verificare che il popup sia stato **Salvataggio** e **Pubblicato**. ➡️ Controllare che i selettori corrispondono esattamente al modello fornito. ➡️ Prova in una finestra del browser Incognito o Privato. ➡️ Aggiorna il negozio per cancellare stili cache. --- # **🎉 Risultato finale** ✅ Il tuo popup può essere personalizzato oltre le impostazioni standard di progettazione. ✅ Le esperienze desktop e mobile possono essere modellate in modo indipendente. ✅ Gli effetti visivi avanzati e lo stile specifico del marchio diventano possibili. ✅ Gli stili personalizzati rimangono isolati al popup selezionato. Custom CSS offre la flessibilità di creare un'esperienza popup più lucida e coerente, mantenendo la semplicità degli strumenti di design incorporati dell'app. ✨