> ## 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). # 🎨 Pasek ogłoszeniowy — projekt i styl > ℹ️ **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** (Projekt) daje Ci pełną kontrolę nad wyglądem i charakterem paska ogłoszeniowego w całym sklepie. Od kolorów tła i typografii po animacje przycisków, styl ikon i własny CSS — niemal każdy wizualny szczegół można dostosować do marki. Możesz szybko uruchomić pasek, używając gotowego szablonu, lub dostosować każdy piksel ręcznie. W obu przypadkach pasek będzie wyglądał jak naturalna część witryny sklepu 🎨 Większość ustawień związanych z kolorem obejmuje: * **Color Picker** (Próbnik koloru) do wizualnego dobierania koloru * **Hex Code Input** (Pole kodu szesnastkowego) do dokładnych kolorów marki --- # **⚠️ Zanim zaczniesz** Aby skonfigurować ustawienia karty **Design** (Projekt): → Otwórz istniejący pasek ogłoszeniowy → Lub najpierw utwórz nowy Następnie kliknij kartę **Design** w edytorze. ℹ️ Niektóre opcje pojawiają się tylko dla określonych typów pasków lub konfiguracji. Na przykład animacje slajdów są widoczne tylko dla pasków **Multiple** (Wielokrotnych), a styl kuponu pojawia się tylko wtedy, gdy użyty jest przycisk CTA typu **Coupon** (Kupon). Warunkowe pola zostały opisane poniżej, dzięki czemu wiesz, kiedy można się ich spodziewać. --- # **🎨 Szablon** * **Co robi:** Natychmiastowo stosuje gotowy styl wizualny na pasku ogłoszeniowym. * **Jak używać:** Wybierz jeden z ponad 25 szablonów, aby szybko rozpocząć projektowanie bez ręcznego ustawiania każdego pola. Każdy szablon wstępnie wypełnia: * Typ tła, kolor i ustawienia gradientu * Kolory i rozmiary tytułu oraz podtytułu * Kolory przycisku, kolor tekstu i zaokrąglenie narożników * Styl obramowania, ikon i kuponu **Dostępne szablony obejmują:** Custom, Dawn, Black Friday, Beauty Dark, Beauty, Festiv, Forest, Dusk, Electric, Freeze, Aqua, Alert, Noon, Purple, Blue, Leaf, Party, Orange, Ocean, Yellow, Beauty Light, Greydient, Black, Navy ⚠️ **Ważne:** Wybranie szablonu nadpisze większość pól projektowych. Zachowane zostaną ustawienia **Visibility** (Widoczności) oraz **Position** (Pozycji) (skonfigurowanej w karcie **Placement** (Umiejscowienie)). 💡 *Szablony świetnie sprawdzają się w kampaniach sezonowych. Chcesz uzyskać wygląd Black Friday? Wybierz szablon Black Friday i dostosuj go według potrzeb.* --- # **👀 Widoczność** * **Co robi:** Kontroluje, na jakich urządzeniach wyświetla się pasek ogłoszeniowy. * **Opcje:** * *Desktop and Mobile* (Komputer i urządzenia mobilne) — Widoczny na wszystkich urządzeniach * *Only Desktop* (Tylko komputer) * *Only Mobile* (Tylko urządzenia mobilne) Przydaje się, gdy chcesz wyświetlać inny komunikat lub układ dla kupujących na komputerach i na urządzeniach mobilnych. --- # **🖼️ Styl tła** * **Co robi:** Zmienia wygląd tła paska ogłoszeniowego. * **Dostępne opcje:** * **Single Color** (Jeden kolor) — Jeden stały kolor tła * **Gradient** (Gradient) — Dwa kolory połączone pod dowolnym kątem * **Patterns** (Wzory) — Dekoracyjne wzory tła ## **🎨 Jeden kolor** * Wybierz kolor za pomocą **Color Picker** lub wprowadź ręcznie **Hex Code**. ## **🌈 Gradient** * **Gradient Angle Degree** (Kąt nachylenia gradientu): Kontroluje kierunek przejścia kolorów (0–360°) * **Initial Color** (Kolor początkowy): Kolor początkowy * **Final Color** (Kolor końcowy): Kolor końcowy 💡 *Subtelny gradient może dodać głębi, nie rozpraszając uwagi. Spróbuj niskokontrastowych kątów, aby uzyskać nowoczesny wygląd.* ## **✨ Wzory** Wybranie opcji **Patterns** odsłania listę rozwijaną z ponad 35 wbudowanymi opcjami tła: * **Dekoracyjne:** Wavy, Sale, Discount, Balloon, Girly, Party, Fresh * **Świąteczne i sezonowe:** Birthday, Easter Sunday, Thanksgiving, Veterans Day, Labor Day, Children's Day, Father's Day, Mother's Day, Women's Day, Carnival Monday * **Teksturowane:** Tiny Square, Random Grain, Puzzle, Flowers, Radial, Upholstery, Cheese ℹ️ Wzory są stosowane jako style CSS tła. Niektóre wykorzystują czysty CSS, inne zasoby graficzne. --- # **📐 Obramowanie i narożniki** Ta sekcja kontroluje kształt i kontur paska. * **Bar Corner Radius (px)** (Promień zaokrąglenia narożników paska (px)): Jak bardzo zaokrąglone są narożniki paska * **Bar Padding (px)** (Wewnętrzny odstęp paska (px)): Wewnętrzny odstęp między krawędziami paska a jego zawartością * **Border Size (px)** (Grubość obramowania (px)): Grubość zewnętrznego obramowania * **Border Color** (Kolor obramowania): Kolor obramowania 💡 *Promień zaokrąglenia równy 0 daje ostry, prostokątny pasek. Wyższe wartości tworzą bardziej miękkie, nowoczesne kształty.* --- # **🔤 Typografia** Ta sekcja kontroluje wygląd całego tekstu w pasku ogłoszeniowym. ## **📝 Styl tytułu** * **Title Size (px)** (Rozmiar tytułu (px)): Rozmiar głównej wiadomości * **Title Color** (Kolor tytułu): Kolor głównej wiadomości ## **📄 Styl podtytułu** * **Subheading Size (px)** (Rozmiar podtytułu (px)): Rozmiar tekstu uzupełniającego * **Subheading Color** (Kolor podtytułu): Kolor tekstu uzupełniającego ℹ️ Pole podtytułu jest ukryte przy użyciu typu paska **Running** (Przewijany), ponieważ paski typu marquee zazwyczaj zawierają jeden wiersz tekstu. ## **🔠 Czcionka** Wybierz spośród **63 dostępnych czcionek**, w tym: * **Czcionki systemowe:** Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI i inne * **Czcionki Google:** Roboto, Montserrat, Open Sans, Poppins, Playfair Display, Lato, Inter, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script i wiele innych Pierwszą opcją jest **Use your theme font** (Użyj czcionki motywu), która automatycznie dopasowuje się do istniejącej typografii Twojego sklepu. 💡 *Dla czytelności ogranicz się do 1–2 czcionek na pasek. Pogrubiona czcionka dekoracyjna na tytuł i czysty bezszeryfowy krój na podtytuł często sprawdzają się najlepiej.* --- # **🔘 Projekt przycisku** Ta sekcja pozwala dostosować przycisk zachęcający do działania (CTA). ℹ️ Te ustawienia są zawsze dostępne w karcie **Design**. Wpływają na witrynę sklepu tylko wtedy, gdy typ CTA jest ustawiony na **Button** (Przycisk), **Full Bar** (Cały pasek) lub **Trigger** (Wyzwalacz). ## **🎨 Kolor przycisku** * Zmienia kolor tła przycisku CTA. ## **🔤 Rozmiar i kolor tekstu przycisku** * **Size (px)** (Rozmiar (px)): Kontroluje rozmiar tekstu wewnątrz przycisku * **Color** (Kolor): Zmienia kolor tekstu przycisku ## **⭕ Promień zaokrąglenia i styl przycisku** Te dwa pola są ze sobą powiązane: * **Corner Radius (px)** (Promień zaokrąglenia (px)): Wprowadź wartość ręcznie, aby kontrolować zaokrąglenie * **Button Style** (Styl przycisku): Szybko przełączaj się między ustawieniami wstępnymi: * *Square* (Kwadratowy) → ustawia promień na 0 px * *Rounded* (Zaokrąglony) → ustawia promień na 10 px * *Fully Rounded* (W pełni zaokrąglony) → ustawia promień na 30 px Po wybraniu ustawienia wstępnego stylu promień zaokrąglenia aktualizuje się automatycznie. Po wpisaniu własnego promienia ustawienie wstępne stylu aktualizuje się odpowiednio: * 0–9 px → *Square* (Kwadratowy) * 10–29 px → *Rounded* (Zaokrąglony) * 30+ px → *Fully Rounded* (W pełni zaokrąglony) ## **💪 Grubość czcionki** * Kontroluje, jak pogrubiony lub cienki wydaje się tekst przycisku * Opcje: *Normal* (Normalna), *Bold* (Pogrubiona), 100–900 ## **✍️ Styl czcionki** * Przełączaj się między: *Normal* (Normalny), *Italic* (Kursywa), *Underline* (Podkreślenie) ## **✨ Animacja przycisku** Dodaje ciągłą animację do przycisku, aby wyróżniał się na tle paska. *Dostępne animacje:* None, Emitting, Bounce, Flash, Rubber Band, Swing, Tada, Wobble, Jello, Flip 💡 *Subtelne animacje, takie jak Bounce lub Emitting, przyciągają uwagę bez agresywnego efektu. Użyj Flip lub Tada w kampaniach o wysokiej pilności.* --- # **🏷️ Styl kuponu** Ta sekcja pozwala dostosować wygląd pola z kodem kuponu. ℹ️ Ta sekcja pojawia się tylko wtedy, gdy: * Dowolny slajd treści używa typu CTA **Coupon** (Kupon), **lub** * Typ paska jest ustawiony na **Email** (E-mail) ## **Dostępne ustawienia** * **Coupon Border Style** (Styl obramowania kuponu): *Dashed* (Kreskowany), *Solid* (Ciągły), *Dotted* (Kropkowany), *Double* (Podwójny), *Groove* (Wklęsły), *Ridge* (Wypukły), *Inset* (Wcięty), *Outset* (Wysunięty) lub *None* (Brak) * **Coupon Border Color** (Kolor obramowania kuponu): Kolor konturu pola kuponu * **Coupon Text Color** (Kolor tekstu kuponu): Kolor tekstu kodu kuponu * **Coupon Background** (Tło kuponu): Kolor tła pola kuponu (obsługuje przezroczyste tła) 💡 *Kreskowane obramowanie z kontrastującym tłem to klasyczny wygląd kuponu. Spróbuj półprzezroczystego tła, jeśli chcesz, aby wzór lub gradient paska był widoczny.* --- # **🎆 Animacje paska** ## **Przejście między wieloma paskami** *Dostępne tylko wtedy, gdy typ paska jest ustawiony na **Multiple** (Wielokrotny).* Kontroluje, jak slajdy przechodzą jeden w drugi: * *Slide* (Przesunięcie) — Przesuwa poziomo między ogłoszeniami * *Fade In* (Pojawienie się) — Płynnie zanika z jednego slajdu do drugiego * *Cube* (Sześcian) — Efekt obrotu w 3D * *Flip* (Obrót) — Efekt przewrócenia karty ℹ️ To ustawienie znajduje się w karcie **Design**, a nie w karcie **Content** (Treść). --- # **🎨 Ustawienia ikon** ## **🚪 Kolor ikony zamykania** * Zmienia kolor ikony przycisku zamykania (zamykania paska). * Widoczne tylko wtedy, gdy opcja **Close Icon** (Ikona zamykania) jest włączona w karcie **Content** (Treść). ## **➡️ Kolor ikony strzałki** * Zmienia kolor strzałek nawigacyjnych. * Widoczne tylko wtedy, gdy typ paska jest ustawiony na **Multiple** (Wielokrotny), ponieważ strzałki służą do nawigacji między slajdami. --- # **👥 Ikony baneru (ikony społecznościowe)** Ta sekcja pozwala stylizować ikony mediów społecznościowych wyświetlane wewnątrz paska. * **Social Icon Size (px)** (Rozmiar ikony społecznościowej (px)): Dostosowuje rozmiar ikony * **Social Icon Color** (Kolor ikony społecznościowej): Zmienia kolor ikony * **Social Icon Position** (Pozycja ikony społecznościowej): Umieszcza ikony po stronie *Left* (Lewej) lub *Right* (Prawej) paska * **Use Original Social Icon Color** (Użyj oryginalnego koloru ikony społecznościowej): Gdy włączone, każda platforma zachowuje swój markowy kolor (niebieski Facebooka, gradient Instagrama itp.) zamiast używać Twojego niestandardowego koloru ℹ️ Ikony społecznościowe są konfigurowane w karcie **Content** (Treść). Karta **Design** kontroluje tylko ich wygląd. --- # **💻 Własny CSS (dla zaawansowanych użytkowników)** 💡 **Funkcja zaawansowana:** Jeśli potrzebujesz stylów niedostępnych w standardowych ustawieniach, możesz napisać własny CSS bezpośrednio w edytorze. Po włączeniu dostępny jest szkielet CSS z predefiniowanymi klasami docelowymi: * Cały kontener paska: `.futureblink-announcement-bar` * Tekst tytułu: `.futureblink-announcement-bar .title` * Tekst podtytułu: `.futureblink-announcement-bar .subheading` * Tytuł mobilny: `.futureblink-announcement-bar.mobile .title` * Podtytuł mobilny: `.futureblink-announcement-bar.mobile .subheading` * Przycisk CTA: `.futureblink-announcement-bar .cta-button` * Mobilny przycisk CTA: `.futureblink-announcement-bar.mobile .cta-button` * Przycisk zamykania: `.futureblink-announcement-bar .close-btn` * Strzałki nawigacyjne: `.futureblink-announcement-bar .arrow` * Przyciski Poprzedni/Następny: `.futureblink-announcement-bar .button-prev` i `.button-next` **Jak działa własny CSS w witrynie sklepu:** * Wszystkie selektory są automatycznie ograniczone do konkretnego paska ogłoszeniowego * Każda deklaracja otrzymuje priorytet `!important`, aby nadpisać style motywu * Selektory mobilne (`.mobile`) są automatycznie owijane w zapytanie medialne dla urządzeń mobilnych * CSS jest wstrzykiwany jako tag `