Chcesz zaprojektować pop-up, który zrobi świetne pierwsze wrażenie na odwiedzających – ale chcesz także zrobić to szybko, a co najważniejsze łatwo?
W takim razie masz szczęście! Z naszym Custom Pop-up edytorem tworzenie pop-upów jest jak bułka z masłem.
Kliknij linki poniżej, poniżej, aby przejść bezpośrednio do sekcji, która Cię interesuje lub czytaj dalej, aby dowiedzieć się wszystkiego po kolei.
UWAGA: Ten artykuł dotyczy wyłącznie pop-up edytora. Jeśli potrzebujesz informacji na temat całego procesu tworzenia pop-upów, KLIKNIJ TUTAJ.
Przegląd
Edytor znajduje się w kroku 2 procesu kreacji Custom Pop-up.
Interfejs edytora składa się z dwóch głównych części: sekcja treści i ustawień po lewej stronie i panelu widoków po prawej.
Kilka ważnych informacji o naszym pop-up edytorze:
Wszystkie pop-upy są automatycznie responsywne, ale każda wersja (desktop i mobile) może mieć inne ustawienia. Możesz sprawdzić, jak każda z nich będzie wyglądać. W tym celu kliknij ikony po lewej stronie panelu widoku.
Edytor jest typu WYSIWYG (what you see is what you get). To znaczy, że wszystkie zmiany dokonane w panelu treści i ustawień są odzwierciedlane na panelu widoku w czasie rzeczywistym.
Znajdziesz tu kilka gotowych szablonów zgodnych z Twoim celem, jednak nie jesteś do nich ograniczony. Wszystkie szablony są w pełni konfigurowalne, dlatego je również z łatwością dostosujesz do swoich potrzeb!
Teraz gdy omówiliśmy już ogólny interfejs, przejdźmy przez kolejne części.
Ustawienia ogólne
Zacznijmy od zakładki ustawienia ogólne. Tutaj określisz ogólną strukturę pop-upu, a także niektóre globalne ustawienia wizualne.
Układ
Możesz wybrać jeden z czterech typów układów dla Twojego pop-upu. Te układy odzwierciedlają sposób, w jaki obrazy będą w nim wyświetlane.
Wybierz układ
Bez tła – wybierz tę opcję jeśli nie chcesz żadnego obrazu w pop-upie
Z tłem – obraz będzie użyty jako tło
Zdjęcie z lewej – obraz będzie umieszczony po lewej stronie
Zdjęcie z prawej – obraz będzie umieszczony po prawej stronie
Dodaj swoje zdjęcie:
Kliknij przycisk Prześlij zdjęcie, aby załadować obraz z Twojego urządzenia
Max rozmiar pliku: 2 MB
Ustawienia zdjęcia:
Wybierz dopasowanie zdjęcia
Wypełnienie – obraz wypełni całkowicie dostępną przestrzeń
Wzór – rozmiar nie zostanie zmieniony, a obraz zostanie automatycznie powielony w pionie i w poziomie
Wyśrodkowanie – obraz zostanie dopasowany do dostępnego miejsca, zarówno na wysokość, jak i szerokość
Wybierz proporcje zdjęcia (50% / 33% / 25%)
Wyświetlaj zdjęcie na urządzeniach mobilnych (ON / OFF)
Jeśli wybierzesz ON, będziesz mógł wybrać pomiędzy "nad", "pod" i "obok".
UWAGA: Układ odzwierciedla Twój wybór dotyczący głównego obrazu, jako strukturalnej części Twojego pop-upu. Możliwe jest także dodanie obrazów, jako elementów na tej samej stronie, co inne elementy, takie jak tekst i formularze.
Główne ustawienia pop-upu
Margines wewnętrzny pop-upu – przestrzeń pomiędzy obramowaniem całego pop-upu a elementami wewnątrz.
Zaokrąglenie pop-upu – zostaw 0 px dla kąta prostego lub zwiększ wartość dla zaokrąglonych kątów.
Szerokość pop-upu – maksymalna szerokość, jaką będzie miał Twój pop-up na dowolnym urządzeniu.
Maksymalna szerokość dla urządzeń mobilnych zawsze wynosi 480 px.
Kolor tła pop-upu – kolor całej sekcji z elementami (tekst, formularze, itp.)
Wybierz z góry ustalony kolor lub określ własny, korzystając z próbnika kolorów, kodu HEX lub wartości RGB.
Kolor tła pod pop-upem – kolor i krycie całego obszaru poza pop-upem (pokrywające stronę)
Krycie możesz określić za pomocą suwaka znajdującego się poniżej selektora kolorów.
Cień pop-upu – wybierz typ efektu cienia dla swojego pop-upu.
Brak
Ciemny
Jasny
Lekko ciemny
Lekko jasny
Prostokąt
Przycisk zamknięcia
Ikona przycisku zamknięcia – wybierz typ ikony zamknięcia
Rozmiar przycisku zamknięcia – określ rozmiar ikony zamknięcia
Kolor przycisku zamknięcia – określ kolor ikony zamknięcia
Pozycja ikony przycisku zamknięcia (oś X) – określ odstęp pomiędzy ikoną zamknięcia a prawą krawędzią pop-upu
Pozycja ikony przycisku zamknięcia (oś Y) – określ dystans pomiędzy ikoną zamknięcia a górną krawędzią pop-upu
UWAGA: Ikona zamknięcia zawsze będzie umieszczona w prawym górnym rogu, he close icon will always be on the top right corner, niezależnie od wybranego typu układu (zdjęcie z lewej, zdjęcie z prawej, z tłem, bez tła).
Konfiguracja Google Fonts
Oprócz domyślnych czcionek, które są dostępne w systemie edrone, możesz skorzystać także z wcześniej ustalonej listy Google Fonts lub wybrać dowolną inną czcionkę dostępną w Google Fonts.
Jak zaimportować niestandardową czcionkę z Google Font
1. Przejdź do rozwijanego menu w Google Fonts i wybierz "Custom"
2. W nowej karcie otwórz stronę rodziny czcionek w Google Fonts. W tym przykładzie używamy Playfair Display.
 3. Wybierz z listy konkretną czcionkę. Dla tego przykładu wybierzmy Regular 400.
4. Kliknij przycisk View selected families w prawym górnym rogu ekranu. Spowoduje to otwarcie paska bocznego z większą ilością szczegółów.
 5. W sekcji Use on the web, pozostaw zaznaczoną opcję <link> i skopiuj kod. Nie zamykaj tej zakładki!
6. Wróć do pop-up edytora. W sekcji Link wklej kod.
 7. Wróć do zakładki Google Fonts i skopiuj kod z sekcji CSS rules to specify families.
 8. Wklej kod w sekcji Font Family.
 9. Zrobione! Ta niestandardowa czcionka Google Fonts będzie teraz dostępna podczas tworzenia elementu tekstowego w Twoim pop-upie. |
Zawartość
Teraz przejdźmy do zawartości – czyli wszystkich elementów, które możesz dodać do Twojego pop-upu, takich jak tekst, przyciski i formularze.
Wszystkie elementy prezentowane są w postaci listy, od góry do dołu. Jeśli chcesz zmienić ich kolejność – na przykład, zmienić położenie przycisku – możesz łatwo to zrobić ,przeciągając i upuszczając element.
Wszystkie elementy można usunąć, klikając ikonę kosza, a wszystkie elementy podstawowe można także powielać. Elementy formularza nie mogą być powielane.
Możesz również ustawić drugi Pop Up, który zostanie wyświetlony po zapisie do Newslettera. W tym celu kliknij na krok 2 w kreatorze:
Taki Pop-Up możesz wykorzystać do zbierania informacji o numerze telefonu oraz dacie urodzenia bez konieczności wpisywania po raz kolejny adresu mailowego przez klienta.
Jak dodać element
Aby dodać element, kliknij przycisk DODAJ ELEMENT. Zobaczysz 11 opcji, podzielonych na dwie sekcje: Dodaj podstawowe elementy and Dodaj elementy formularza.
Podstawowe elementy
| Elementy formularza
|
UWAGA: Gdy dodasz nowe elementy, to zawsze będą one widoczne na dole istniejącej już listy elementów.
Ustawienia elementów podstawowych
Tekst
Ustawienia tekstu
Kolor czcionki
Google Font
Rozmiar czcionki
Kolor tła czcionki
Wysokość linii
Pogrubienie / kursywa
Dodaj link
Wyrównanie tekstu
Obramowanie
Obramowanie wokół elementu
Kolor obramowania
Style obramowania (linia / kreskowane / kropkowane)
Zaokrąglenie krawędzi
Zaawansowane opcje (allows editing each side individually)
Marginesy
Margines wewnętrzny elementu (pusta przestrzeń wokół elementu)
Zaawansowane opcje (umożliwia edycję każdej strony osobno)
Ogólne ustawienia elementu
Kolor tła elementu (tło pola tekstowego)
Margines wewnętrzny elementu (pusta przestrzeń wokół elementu)
Zaawansowane opcje (umożliwia edycję każdej strony osobno)
Zdjęcie
Przycisk przesyłania (max. rozmiar pliku: 2 MB)
Pozycja (z lewej / wyśrodkowanie / z prawej)
Szerokość zdjęcia (%)
Odstęp
Opcje elementu
Wysokość odstępu
Szerokość odstępu
Kolor odstępu
Pozycja (z lewej / wyśrodkowanie / z prawej)
Ustawienia ogólne
Kolor tła pop-upu (tło pola tekstowego)
Ogólny wypełniacz (pusta przestrzeń wokół elementu)
Opcje zaawansowane (umożliwia edycję każdej strony osobno)
Przycisk
Tekst elementu przycisku
Kolor czcionki
Rodzina czcionek (wybierz "Domyślny" dla niestandardowej w Google Font)
Rozmiar czcionki
Pogrubienie / kursywa
Ustawienia elementu
Kolor przycisku
Automatyczna szerokość przycisku (ON / OFF)
Pozycja (z lewej / wyśrodkowanie / z prawej)
Typ akcji przycisku
Subskrypcja (zmiana statusu użytkownika z NIEZNANY na SUBSKRYBUJĄCY)
Zapis do programu poleceń (użytkownik zapisuje się, aby otrzymać kupon z programu poleceń Refer-a-fiend
Przekierowanie (określasz adres URL i decydujesz, czy ma być otwierany w nowej karcie)
API(określasz adres URL API)
Obramowanie
Obramowanie wokół elementu
Kolor obramowania
Styl obramowania (linia / kreskowane / kropkowane)
Zaokrąglenie krawędzi
Opcje zaawansowane (umożliwia edycję każdej strony indywidualnie)
Marginesy
Margines wewnętrzny elementu (pusta przestrzeń wokół elementu)
Zaawansowane opcje (umożliwia edycję każdej strony osobno)
Ustawienia ogólne
Kolor tła pop-upu (tło pola tekstowego)
Ogólny wypełniacz (pusta przestrzeń wokół elementu)
Opcje zaawansowane (umożliwia edycję każdej strony osobno)
Ustawienia elementu formularza
UWAGA: wszystkie pola są automatycznie połączone z Profilem Klienta użytkownika.
Wszystkie elementy formularza mają następujące możliwości ustawień:
Nagłówek formularza (tekst tuż nad polem formularza)
Ustawienia formularza
Placeholder (tekst w polu formularza)
Pozycja tekstu w środku (z lewej / wyśrodkowanie / z prawej)
Kolor tekstu w polu formularza
Kolor tła (kolor pola formularza)
Wymagane (z wyjątkiem imienia i nazwiska oraz adresy e-mail, które są zawsze wymagane)
Obramowanie
Obramowanie wokół elementu
Kolor obramowania
Styl obramowania (linia / kreskowane / kropkowane)
Zaokrąglenie krawędzi
Opcje zaawansowane (umożliwia edycję każdej strony indywidualnie)
Marginesy
Margines wewnętrzny elementu (pusta przestrzeń wokół elementu)
Zaawansowane opcje (umożliwia edycję każdej strony osobno)
Ustawienia ogólne
Kolor tła pop-upu (tło pola tekstowego)
Ogólny wypełniacz (pusta przestrzeń wokół elementu)
Opcje zaawansowane (umożliwia edycję każdej strony osobno)
Poza powyższymi, niektóre elementy formularza mają także specyficzne ustawienia:
Płeć
Płeć męska i żeńska są obowiązkowe, można też włączyć lub wyłączyć opcję "Nie chcę podawać", "nieznana", "inna" lub "unisex".
Data urodzenia
"Dzień" i "miesiąc" są obowiązkowe, możliwe jest także włączenie lub wyłączenie "roku".
Checkbox
Możliwe jest włączenie lub wyłączenie "zaznaczony domyślnie" i "automatyczna wysokość".
Potrzebujesz dodatkowej pomocy?
Jeśli masz jakiekolwiek dodatkowe pytania związane z Custom Pop-up, skontaktuj się z nami na hello@edrone.me