Wygląd i pozycja
Nadaj styl oknu sale popup i zdecyduj, gdzie ma się wyświetlać na komputerze i urządzeniach mobilnych.
Karta Design określa, jak wygląda okno sale popup i gdzie się pojawia. Jest podzielona na tło, pozycję, rozmiar i czcionki, a na końcu znajduje się pole na własny kod CSS.
Karta Design z podglądem okna popup obok.
Wygląd i tło
Dział zatytułowany „Wygląd i tło”Background style oferuje trzy rodzaje wypełnienia:
| Styl | Co ustawiasz |
|---|---|
| Solid fill | Background color i Opacity |
| Gradient fill | Gradient color 1, Gradient color 2 i Opacity |
| Image fill | Przesłany obraz – PNG, JPEG lub JPG, poniżej 1 MB |
Obok znajdziesz Border settings – Border style (Solid, Dashed, Dotted), grubość, promień i kolor obramowania oraz przełącznik Box shadow – a także Padding i Margin.
Position settings
Dział zatytułowany „Position settings”Miejsce, w którym okno się unosi. Komputer i urządzenia mobilne konfiguruje się osobno, na oddzielnych kartach.
Komputer
Dział zatytułowany „Komputer”- Show on desktop – włącza lub wyłącza wyświetlanie na komputerze
- Desktop position – Top left, Top middle, Top right, Bottom left, Bottom middle lub Bottom right
- Animation type – Slide from top, Slide from bottom, Slide from left, Slide from right lub Fade in-out
- Margin top/bottom (px) i Margin left/right (px) – odsuwają okno od krawędzi ekranu
Urządzenia mobilne
Dział zatytułowany „Urządzenia mobilne”Ten sam zestaw: Show on mobile, Mobile position, animacja i marginesy.
Wybór pozycji
Dział zatytułowany „Wybór pozycji”Bottom left to ustawienie domyślne i najbezpieczniejsze. Nie koliduje z nagłówkiem, koszykiem ani przyklejonym paskiem „Dodaj do koszyka”, który większość motywów umieszcza na dole strony produktu na urządzeniach mobilnych.
Zanim wybierzesz inną pozycję, warto wiedzieć, że:
- Bottom right w wielu sklepach koliduje z widżetami czatu na żywo.
- Pozycje Top mogą zasłaniać paski ogłoszeń i przyklejone nagłówki.
- Marginesy na urządzeniach mobilnych są ważniejsze niż na komputerze – okno ma znacznie mniej miejsca.
Size settings
Dział zatytułowany „Size settings”| Ustawienie | Opcje |
|---|---|
| Popup size | Small · Medium · Large |
| Image size | Small · Medium · Large |
| Use different size for mobile | Odblokowuje Mobile popup size i Mobile image size |
Włącz opcję dla urządzeń mobilnych przy każdym rozmiarze większym niż Small. Duże okno popup na telefonie może zasłonić większość ekranu, a to najszybszy sposób, by zostało zamknięte bez przeczytania.
Font family and font size
Dział zatytułowany „Font family and font size”- Use custom font – wybierz rodzinę i grubość czcionki albo odziedzicz je z motywu
- Heading font size (px) i Content font size (px)
Dopasowanie do czcionki motywu zwykle sprawia, że okno popup wygląda jak część sklepu, a nie dołączony na siłę element.
Własny kod CSS
Dział zatytułowany „Własny kod CSS”Pole Custom CSS (Developer Zone) na końcu karty przyjmuje zwykły kod CSS stosowany do tego okna popup. Obowiązują te same zastrzeżenia co w innych miejscach – zobacz Własny kod CSS.
Umieszczanie okna popup na stronie
Dział zatytułowany „Umieszczanie okna popup na stronie”Domyślnie okno popup unosi się nad stroną w pozycji ustawionej tutaj. Jeśli wolisz, aby znajdowało się wewnątrz strony – w sekcji, w stałym miejscu – karta Display zawiera do tego shortcode w sekcji Custom location to show popup:
<div class="samita-sales-popup" data-id="12345"></div>Skopiuj go, a następnie wklej do bloku aplikacji Samita Countdown w edytorze motywów. Kroki są takie same jak w przypadku liczników – zobacz Umieszczanie licznika za pomocą shortcode.