Edytor landing page – opcje na nowo!

Przez ostatnie kilka tygodni intensywnie pracowaliśmy nad zaprojektowaniem od nowa wyglądu i funkcjonalności panelu opcji w naszym edytorze. Efektem tych działań jest zupełnie nowa odsłona tej części aplikacji, zarówno wizualna, jak i funkcjonalna. Poznaj edytor landing page z nowymi możliwościami!

Wizja

Naszym celem było maksymalne uproszczenie wyglądu oraz ujednolicenie działań, które to Wy, drodzy użytkownicy podejmujecie, tworząc landing page’e w edytorze Landingi. Musieliśmy zatem stworzyć coś intuicyjnego, łatwego w użyciu, a zarazem spełniającego oczekiwania wszystkich użytkowników. Ogólne cechy nowej odsłony to:

  • Opcje pogrupowane są w odpowiednie działy, które dostosowują się do aktualnie edytowanego elementu.
  • Podstawowe cechy każdego elementu są domyślnie zawsze widoczne.
  • Dodaliśmy możliwość zmiany nazwy elementów, a dla bardziej zaawansowanych użytkowników definiowania identyfikatorów i klas.
  • Niektóre z opcji (jak np. tło, obramowanie, zaokrąglone rogi, cień) można odgórnie włączać i wyłączać za pomocą tylko jednego kliknięcia!
  • Do każdego pola, które zawiera wartość (np. grubość obramowania lub wielkość cienia) zostały dodane przyciski, dzięki którym można łatwo zwiększyć lub zmniejszyć daną wartość.

1. Opcje ogólne każdego elementu

Połączyliśmy opcje geometryczne (wysokość, szerokość, położenie) z informacjami dotyczącymi elementów. Dodatkowo powstała możliwość zmiany nazwy elementu, co pozwoli na sprawniejsze zarządzanie nimi. Dla bardziej zaawansowanych użytkowników przewidzieliśmy opcję nadawania identyfikatorów i klas oraz definiowania widoczności elementów na poszczególnych widokach.edytor landing page

2. Tło

W elementach takich jak sekcje lub boxy podstawową wartością jest tło. Zastosowaliśmy tutaj bardzo prosty mechanizm, gdzie najpierw wybiera się kolor tła, a później można dodatkowo zdefiniować obrazek lub gradient, czyli płynne przejście jednego koloru w drugi. Oczywiście tło można włączać i wyłączać za pomocą jednego kliknięcia w prosty przełącznik.

edytor landing page

3. Obramowanie

Zasada ustawiania obramowania elementu jest bardzo prosta. Na początku należy zaznaczyć krawędź, którą chcemy edytować (można również wszystkie na raz), a następnie wybieramy odpowiednio kolor, grubość oraz styl linii ramki. Schemat krawędzi odwzorowuje nam aktualny stan każdej z nich – kolorem błękitnym oznaczone są krawędzie aktywne. Dodatkowo każdą z nich można w łatwy sposób wyłączyć – najpierw zaznaczyć, a następnie kliknąć przycisk “Wyczyść”.

edytor landing page

4. Zaokrąglone rogi

Tutaj sprawa jest również bardzo prosta. Najpierw wybieramy, któremu z narożników chcemy nadać zaokrąglenie (można wszystkim jednocześnie), a następnie definiujemy odpowiednią wartość. Podobnie jak w powyższych grupach opcji, można usunąć zaokrąglenie z każdego z narożników lub wyłączyć je globalnie.

edytor landing page

5. Cień

Do takich elementów jak box, obrazek lub tekst niejednokrotnie chcemy dodać cień. Wystarczy wybrać kolor cienia, a następnie zdefiniować rozrzut oraz przesunięcie w poziomie (X) oraz w pionie (Y). Dwie ostatnie wartości możemy zrównoważyć i nadać im tą samą wartość.

edytor landing page

6. Tekst

Dla elementu tekstowego mamy dostępne dwie opcje w panelu po prawej stronie. Są to: interlinia, czyli odstępy pomiędzy wierszami oraz tracking, czyli odstępy pomiędzy znakami danego tekstu.

edytor landing page

Zotań wirtuozem landing page!

Zapisz się na webinar »

Dyrektor kreatywny w Landingi, ale przede wszystkim designer. Projektuje odkąd pamięta. Obecnie zajmuje się głównie projektowaniem doświadczeń użytkownika, użytecznością wprowadzanych rozwiązań oraz ich testowaniem i optymalizacją. Fan ogólnie pojętego tworzenia, nie tylko w wersji cyfrowej.