Custom Pop-up edytor

Stwórz piękne i efektywne pop-upy, dzięki możliwościom, które masz w zasięgu ręki!

Aleksandra Stankowska avatar
Napisane przez Aleksandra Stankowska
Zaktualizowano ponad tydzień temu

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.

UWAGA: Możliwe jest użycie tylko jednej wagi jednego Google Font. Prosimy o wybranie tylko jednego wariantu rodziny czcionek.

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.

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

  • Tekst

  • Zdjęcie

  • Odstęp

  • Przycisk

Elementy formularza

  • Checkbox

  • Imię

  • Nazwisko

  • Email

  • Płeć

  • Telefon

  • Data urodzenia

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


Czy to odpowiedziało na twoje pytanie?