ℹ️ Note: Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia.

Karta Design daje pełną kontrolę nad tym, jak wygląda i czuje się na sklepach. Od szablonów i typografii do animacji, kolorów, przycisków, kuponów stylizacji, a nawet niestandardowych CSS - prawie każdy element wizualny może być dostosowany do Twojej tożsamości marki.

Ten przewodnik wyjaśnia każdą dostępną opcję projektowania, dzięki czemu można z pewnością stworzyć polerowane, high-converting wyskakujące.

⚠️ Zanim zaczniesz

Konfigurowanie ustawień projektu:

→ Otworzyć istniejącą popup
→ Albo utworzyć nowe popup pierwszy

Następnie przełącz na Projekt tab inside the popup editor.

ℹ️ Niektóre sekcje projektowe pojawiają się tylko dla konkretnych typów wyskakujących lub funkcji włączonych.

Przykłady

• Stylizacja licznika pojawia się tylko dla Popups Countdown
• Stylizacja kuponu pojawia się tylko po włączeniu wyświetlania kuponu
• Splice styling pojawia się tylko dla Spin Wheel Popups

🎨 Szablon

Szablony pozwalają na natychmiastowe zastosowanie wcześniej zaprojektowanych stylów wizualnych do Twojego popup. Pomaga to handlowcom szybko uruchomić profesjonalnie stylizowane wyskakujące bez ręcznej konfiguracji każdego indywidualnego ustawienia.

Jest to przydatne, gdy chcesz profesjonalnie wyskakiwać bez ręcznego dostosowywania każdego ustawienia.

Dostępne przykłady

• Dawn
• Czarny piątek
• Piękno
• Uroczyste
• Las
• Ocean
• Aqua
• Elektryczne
• Strona

Następnie można dostosować wybrany szablon.

👀 Widoczność

Sterowanie urządzeniami, na których powinna się pojawić popup. Pomaga to tworzyć bardziej ukierunkowane doświadczenia wyskakujące w zależności od tego, czy klienci przeglądają na pulpicie czy na urządzeniach mobilnych.

Dostępne opcje

• Komputer stacjonarny i mobilny - widoczne wszędzie
• Tylko pulpit - ukryte na urządzeniach mobilnych
• Tylko mobilne - ukryte na pulpicie

Jest to przydatne przy tworzeniu konkretnych kampanii.

🖼️ Informacje ogólne

Ta sekcja kontroluje stylizację tła okna wyskakującego. Stylizacja tła odgrywa ważną rolę w tym, jak wizualnie atrakcyjny i uważny chwytanie wyskakuje czuje na ulicy.

Pojedyncze tło kolorów

Używa jednego stałego koloru tła dla wyskakujących.

Możesz:

• Wybierz kolor wizualnie
• Albo ręcznie wkleić kod koloru HEX

Tło gradientu

Tworzy dwukolorowy efekt gradientu.

Po włączeniu pojawiają się dodatkowe ustawienia:

• Stopień nachylenia gradientu
• Początkowy kolor gradientu
• Kolor gradientu końcowego

ℹ️ Sterowanie gradientem aktywuje się dopiero po włączeniu tła gradientu.

🌫️ Informacje ogólne

Kontroluje nakładkę sklepową pokazaną za wymiocinami. Nakładka pomaga przesuwać uwagę klienta w kierunku wyskakiwania poprzez wizualne oddzielenie go od reszty zawartości sklepu.

Na przykład, kiedy otwierają się wyskakiwanie, reszta sklepiku może się wydawać przyciemniona przezroczystą ciemną nakładką, aby zwrócić uwagę na wyskakiwanie.

Dostępne opcje

• Brak kontekstu - Popup pojawia się bez przyciemnionej nakładki
• Przyciemnianie tła - dodaje półprzezroczyste nakładki za wyskakującym

📐 Układ popup i granica

Te ustawienia kontrolują ogólną strukturę wyskakującą i kształt. Regulowanie odstępów, granic i prawidłowego rozmiaru pomaga wyskakującym czuć się czystszym, bardziej zrównoważonym i wizualnie wypolerowanym.

📏 Rozmiar populacji

Kontroluje ogólne wymiary wyskakujących.

Dostępne opcje

• Małe
• Średni
• Duże
• Pełna strona

Większe rozmiary wyskakujące zapewniają więcej miejsca na obrazy, produkty i dodatkowe treści.

🎨 Kolor tła okna popup

Ustawia kolor tła samego pojemnika.

Możesz:

• Użyj znacznika kolorów
• Lub ręcznie wprowadzić kod koloru HEX

🟦 Promień rogu

Steruje tym, jak pojawiają się zaokrąglone narożniki.

Przykłady

• Dolne wartości → ostrzejsze narożniki
• Wyższe wartości → miękkie narożniki zaokrąglone

🧱 Rozmiar granic

Kontroluje grubość wyskakującej granicy.

Wartość jest mierzona w pikselach.

🎨 Kolor granic

Ustawia kolor wyskakującej granicy.

✨ Animacja popup

Kontroluje jak wyskakuje ekran. Animacje wejściowe pomagają wyskakującym czuć się łagodniej i bardziej interaktywnie, a jednocześnie czynią je bardziej zauważalnymi dla odwiedzających.

Dostępne opcje

• Fade
• Slide
• Odbić

Animacje pomagają sprawić, że wyskakiwanie będzie łatwiejsze i bardziej interaktywne.

🔘 Przycisk pływający

ℹ️ Ta sekcja pojawia się tylko wtedy, gdy Wpływający przycisk działania jest włączona w Zawartość Tab.

Ustawienia Floating Button pozwalają dostosować wygląd przycisku, który odwiedzający klikają, aby otworzyć swój program. Opcje te pomagają dopasować przycisk do marki sklepu przy jednoczesnym zachowaniu go zauważalnego i łatwego do interakcji.

Dostępne ustawienia

🔷 Kształt

Wybierz ogólny kształt płynącego przycisku.

Dostępne opcje

• Zaokrąglone
• Kwadrat
• Piłka
• Koło

🎨 Kolor przycisku

Kontroluje kolor ikony lub tekstu wyświetlanego na zmiennym przycisku.

Możesz:

• Wybierz kolor za pomocą wybieracza kolorów
• Wprowadź ręcznie kod koloru HEX

🖌️ Rozmiar czcionki

Kontroluje rozmiar ikony lub tekstu wyświetlanego wewnątrz płynącego przycisku.

Wartość jest mierzona w pikselach.

🟫 Kolor tła

Ustawia kolor tła płynącego przycisku.

Możesz:

• Wybierz kolor za pomocą wybieracza kolorów
• Wprowadź ręcznie kod koloru HEX

🌑 Cień

Dodaje opcjonalny efekt cienia wokół płynącego przycisku.

Dostępne opcje

• Brak
• Małe
• Średni
• Duże

🧱 Kolor granic

Kontroluje kolor pływającej granicy przycisku.

📐 Promień rogu

Kontroluje jak zaokrąglone są narożniki płynącego przycisku.

Wyższe wartości tworzą łagodniejszy, bardziej zaokrąglony wygląd.

🔤 Typografia

Ustawienia typograficzne kontrolują jak wszystkie elementy tekstowe pojawiają się wewnątrz wyskakującego. Te ustawienia pomagają zachować spójność wizualną między nagłówkami, opisami, przyciskami i komunikatami walidacyjnymi, dzięki czemu wyskakujące wydaje się profesjonalnie zaprojektowane i łatwiejsze do odczytania.

Aplikacja obsługuje czcionek built- in wraz z czcionkami motywu.

🏷️ Tytuł Typografia

Kontroluje styl wyskakującego tytułu.

Dostępne ustawienia

• Tytuł Czcionka
• Rozmiar tytułu
• Kolor tytułu

📝 Opis typograficzny

Kontroluje stylizację opisu.

Dostępne ustawienia

• Opis czcionki
• Opis
• Kolor opisu

⚠️ Błąd w typografii wiadomości

Komunikaty błędów uwierzytelniania kontroli pokazane dla obu:

• Pola e- mail
• Pola numeru telefonu

Dostępne ustawienia

• Błąd Czcionka
• Rozmiar wiadomości błędu
• Kolor komunikatu błędu

📝 Stylizacja pola wejściowego

Sekcja ta kontroluje wygląd pól wprowadzania poczty elektronicznej i numeru telefonu. Właściwa stylizacja wejścia poprawia czytelność i pomaga formom poczuć się bardziej godnym zaufania i wizualnie dopasowane do marki sklepu.

Dostępne ustawienia

• Kolor wejścia tekstu
• Kolor tła wejścia
• Kolor wejścia na granicę

Te ustawienia pomagają pola formularza dopasować markę sklepu.

🔘 Przycisk Styling

Steruje projektem wyskakującego przycisku wywołania do działania. Ponieważ przycisk jest zazwyczaj głównym elementem konwersji wewnątrz wyskakującej, stylizacja go prawidłowo może znacznie poprawić klik-through i wskaźnik zaangażowania.

🔤 Czcionka przycisku

Wybierz rodzinę czcionek używaną wewnątrz przycisku.

Możesz użyć:

• Czcionki motywu
• Built- in fonts

🎨 Kolor przycisku

Kontroluje kolor tła przycisku.

🔠 Rozmiar i kolor przycisku

To ustawienie steruje:

• Rozmiar tekstu (lewe pole)
• Wybór koloru tekstu (pole środkowe)
• Wartość koloru HEX (pole prawe)

Przykład

• Duży biały tekst na ciemnym przycisku
• Mały czarny tekst na jasnym przycisku

Promień rogówki

Steruje jak zaokrąglone narożniki guzików pojawiają się.

Wyższe wartości tworzą bardziej miękkie przyciski.

🎟️ Kupon Styling

ℹ️ Ta sekcja pojawia się tylko wtedy, gdy wyświetlacz kuponu jest włączony wewnątrz zakładki Zawartość.

Ta sekcja kontroluje wygląd kontenera kodu kuponu. Wizualnie stylizowany odcinek kuponu sprawia, że rabaty wyróżniają się bardziej wyraźnie i zachęca odwiedzających do kopiowania i korzystania z oferty podczas wymeldowania.

🧾 Styl graniczny kuponu

Wybierz styl graniczny wokół obszaru kuponu.

Dostępne przykłady

• Stałe
• Pokryte

🎨 Kolor granic

Kontroluje kolor granic kuponu.

🔤 Kolor tekstu

Kontroluje kolor tekstu pokazany wewnątrz sekcji kupon.

🖼️ Kolor tła

Kontroluje kolor tła pojemnika kuponu.

❎ Zamknij styling ikon

Kontroluje wygląd ikony z bliska. Mimo że jest to mały element, dopasowanie stylizacji ikon do ogólnego projektu popup pomaga utrzymać czystsze i bardziej polerowane doświadczenie użytkownika.

Dostępne ustawienia

• Zamknij kolor ikon
• Rozmiar ikon

Dostępne opcje wielkości

• Małe
• Średni
• Duże

Rozliczanie Timer Styling

ℹ️ Ta sekcja pojawia się tylko dla Countdown Popups.

Kontroluje wizualny wygląd licznika. Właściwa stylizacja zegara pomaga stworzyć pilną potrzebę przy jednoczesnym zapewnieniu, że odliczanie pozostaje czytelne i zgodne wizualnie z resztą projektu wyskakującego.

Dostępne ustawienia

• Styl timera
• Czcionka czasu
• Rozmiar licznika
• Kolor zegara
• Kolor tła licznika
• Czcionka etykiety
• Rozmiar etykiety
• Kolor etykiety

Te ustawienia pomagają stworzyć pilną potrzebę przy jednoczesnym zachowaniu ustawionego wzrokowo zegara z Twoim sklepikiem.

🎡 Spin Wheel - Stylizacja cięcia

ℹ️ Ta sekcja pojawia się tylko dla Spin Wheel Popups.

Ta sekcja kontroluje wizualną stylizację plastrów kół obrotowych i elementów kół. Dokładne dopasowanie tych ustawień może sprawić, że koło będzie się czuć bardziej żywe, zabawne i uważne dla odwiedzających.

🎨 Kolory cięcia

Steruje zmiennymi kolorami tła plastra.

Dostępne ustawienia

• Kawałek 1 kolor
• Kawałek 2 kolor

Te kolory zmieniają się w całym kole.

🔤 Styling cięcia etykiety

Steruje stylem tekstu pokazanym na każdym kawałku koła.

Dostępne ustawienia

• Kolor etykiety
• Rozmiar etykiety
• Czcionka etykiety

💬 Style wiadomości Styling

Kontroluje stylizację plastra nagrody lub wygrywających wiadomości.

Dostępne ustawienia

• Czcionka wiadomości
• Rozmiar wiadomości
• Kolor fragmentu wiadomości

🎯 Kolory części koła

Kontroluje pozostałe elementy konstrukcyjne kół.

Dostępne ustawienia

• Kolor obramowania koła
• Kolor strzałki
• Wyśrodkuj kolor koła

💻 Niestandardowe CSS

💡 Zaawansowani użytkownicy mogą stosować własną stylizację CSS bezpośrednio w edytorze popup.

Pozwala to dostosować elementy poza standardowym sterowaniem konstrukcyjnym. Jest to szczególnie przydatne dla kupców, którzy chcą zaawansowanej stylizacji, dostosowania specyficzne dla komórek, lub głębszej wizualnej dostosowania.

🧩 Selektory wspólne

Edytor zawiera gotowe selekcje, takie jak:

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

✅ Stosowanie CSS

Po dodaniu CSS:

→ Kliknij Zastosuj natychmiast przetestować style.

ℹ️ Jeśli style nie są prawidłowo stosowane, dodaj !important do każdej deklaracji jest zalecane.

Przykład

.futureblink- popup .title
kolor: # 000! ważne;
¶

🚀 Wynik końcowy

Po skonfigurowaniu:

✅ Twój wyskakujący pasuje do twojej marki.
✅ Typografia, przyciski i wejścia są zgodne wizualnie
✅ Sekcje kuponowe i zegary wyglądają na polerowane
✅ Koła zakręcone wyskakujące stają się bardziej wizualnie angażujące
✅ Animacje i nakłady poprawiają koncentrację klientów
✅ Własny CSS daje zaawansowanym użytkownikom głębszą kontrolę
✅ Klienci doświadczają czystszego i bardziej profesjonalnego projektu popup 🎨

Aktualizowane na: 10/09/2026