Kompletny przewodnik po Zero Block

Kontroluj każdy element. Możesz kontrolować każdy element bloku, w tym tekst, obraz, przycisk lub tło. Możesz również decydować o ich położeniu, rozmiarze i rozdzielczości ekranu, na którym będą wyświetlane.

Warstwy. Jest to wygodne narzędzie do tworzenia głębi za pomocą technik nakładania i krycia.

Krawędzie ekranu i wyrównanie siatki. Każdy element strony internetowej można ustawić względem siatki układu lub krawędzi ekranu.

Niestandardowe rozdzielczości ekranu. Zdefiniuj niestandardowe wartości rozdzielczości ekranu, aby układ idealnie pasował do konkretnego urządzenia. Punkty przełamania można ustawić w dowolnym miejscu między 320 a 1920 pikseli, aby uzyskać pełną kontrolę nad responsywnością.

Zaawansowana typografia. Projektanci mają pełną swobodę twórczą, aby tworzyć unikalne rozwiązania typograficzne.

Prowadnice. Użyj prowadnic wizualnych, aby uzyskać precyzyjną kontrolę nad układem. Możesz ustawić je tak, aby pojawiały się tylko przy wybranych rozdzielczościach ekranu, dzięki czemu nie będziesz tracić czasu na ukrywanie ich, gdy nie są potrzebne.

Powiększanie obszaru roboczego od 20 do 300%. Ten zakres ułatwia pracę z elementami na obszarze roboczym. Powiększ, aby dostosować drobne szczegóły, lub pomniejsz, aby zobaczyć cały obszar roboczy — na przykład podczas pracy z wieloma elementami jednocześnie.

Elastyczne pozycjonowanie obrazów w kształtach. Ręcznie dostosuj, która część obrazu jest widoczna wewnątrz kształtu. Daje to większą kontrolę nad układem bloku, gdy domyślne opcje pozycjonowania nie pasują do projektu.

Grupy jako obiekty. Łącz wiele elementów w grupy, aby uprościć konfigurowanie animacji, edytowanie i obracanie elementów i nie tylko.

Krycie. Ustaw poziom krycia dowolnego elementu i efektów cienia pod nim. Dostosuj każdy parametr, taki jak kompozycja lub widoczność elementu, dla każdej rozdzielczości ekranu.

Płytki. Dodaj kolorowe płytki, karty treści lub umieść obrazy wewnątrz kształtów.

Wideo. Dodaj filmy z YouTube lub Vimeo do swojej strony internetowej. W Zero Block możesz dostosować ich rozmiar i położenie na stronie.

Dodawanie kodu HTML. Dodaj dowolny element do Zero Block kod HTML i dostosowując położenie tych elementów na każdym ekranie.

Podpowiedź. Użyj tego interaktywnego narzędzia, aby dodać krótkie wyskakujące podpowiedzi. Możesz spersonalizować kolor, cień, rozmiar, wybrać i przesłać ikonę wewnątrz okręgu lub obraz nad tekstem.

Formularz opinii. Dodaj pola wprowadzania danych i usługi przechwytywania danych. Ustaw styl formularza i animuj go.

Edytor wektorowy. Twórz i edytuj obrazy wektorowe bezpośrednio w Zero Block. Za pomocą edytora wektorowego Tilda możesz tworzyć wszelkiego rodzaju kształty i edytować importowane pliki SVG.

Animacja wyglądu elementów. Animuj sposób wyświetlania elementów internetowych na stronie, np. pojawianie się, powiększanie lub przesuwanie z góry, dołu, lewej lub prawej strony ekranu.

Animacja krok po kroku. Użyj animacji krok po kroku, aby Twoja strona była bardziej atrakcyjna i dynamiczna. Animacje można uruchamiać po kliknięciu, przewinięciu, najechaniu kursorem lub pojawieniu się elementu na ekranie. Można również dostosować płynność każdego kroku, aby kontrolować płynność. Wybierz odpowiednie ustawienie i dostosuj płynność za pomocą krzywych Béziera.

Przewijanie paralaksowe. Użyj efektu przewijania paralaksowego lub stwórz efekt paralaksowy podczas ruchu myszą.

Elementy stałe podczas przewijania. Określ odległość, na której element powinien pozostać stały, oraz jego położenie.
Zastosuj elementy przyklejone podczas przewijania. Możesz ustawić odległość, na której element będzie stały, oraz jego położenie. Możesz również ustawić Zero Block całego Zero Block . Pozwoli to na przykład na stworzenie stałego menu z niestandardowym układem elementów.

Auto Layouts. Uprość swoją pracę, automatyzując wyrównywanie elementów w grupie. Auto Layouts pomaga szybciej tworzyć projekty, łatwo zamieniać treści i automatycznie dostosowywać układy do różnych urządzeń.

Jeśli przed przystąpieniem do pracy projektujesz układy w edytorze graficznym, użyj Zero Block przenieść je na swoją stronę internetową w niezmienionej formie. W tym celu Zero Block 12-kolumnową siatkę i konfigurowalne parametry dla każdego elementu. Obejmują one współrzędne, rozmiar, położenie względem siatki lub ekranu, parametry krycia i cień. Użyj tych narzędzi, aby odtworzyć swój układ w Zero Block.

Zero Block InterfejsZero Block jest podobny do interfejsu edytora graficznego. Po prostu dodaj niezbędne elementy i nadaj im odpowiednie współrzędne. W Zero Block jest to łatwe, zwłaszcza jeśli robiłeś to już wcześniej. Użyj Zero Block szybko przenieść swój pomysł z edytora graficznego na swoją stronę internetową bez konieczności pisania kodu.

Jeśli tworzysz stronę internetową lub stronę docelową i nie możesz znaleźć odpowiedniego bloku w bibliotece Tilda, Zero Block będzie Zero Block . Oto kilka przykładów.

Strony internetowe wykonane na Tildzie są często tworzone z bloków, więc odwiedzający przewijają ich sekcje. Jest to trend unifikacji w projektowaniu stron internetowych, w którym treść wyprzedza projekt.

Jeśli chcesz zmienić sposób, w jaki odwiedzający czytają informacje na Twojej stronie, Zero Block jest do tego doskonałym narzędziem.

Zero Block doskonale Zero Block w łączeniu elementów o nierównych krawędziach w jedną kompozycję, sprawiając, że wszystkie odległości są wizualnie podobne.

W Zero Block korzystanie z warstw jest dziecinnie proste. Możesz z łatwością nakładać obrazy, teksty na panel i przyciski na obrazy. Twórz dodatkowe efekty, eksperymentując z ich pozycjonowaniem.

Aby uprościć pracę z wieloma elementami, użyj warstw. To narzędzie pozwala zarządzać każdym elementem — zmieniać jego położenie, ukrywać lub blokować.

Aby otworzyć panel warstw, użyj skrótów klawiaturowych: ⌘+ L lub Ctrl + L (w przypadku komputerów Mac) lub Ctrl + L (w przypadku komputerów z systemem Windows).

Zero Block użytkownikom tworzenie wieloelementowych kompozycji niestandardowych, takich jak teksty, obrazy, linie, panele i przyciski. Można również łączyć kilka elementów w jeden obiekt. Na przykład można zaprojektować kartę artykułu i dodać do niej link. Tego rodzaju grupa elementów może być animowana, rozdzielona marginesami, opatrzona cieniem i dostosowana za pomocą innych ustawień. Aby utworzyć grupę obiektów, należy zaznaczyć kilka elementów, zgrupować je, a następnie w ustawieniach grupy wybrać opcję Obiekt.

Ta strona docelowa prezentuje funkcje Tildy, które są szczególnie przydatne dla firm i składa się z bloków zawierających wiele elementów.

Efekt najechania zmienia wygląd elementu, gdy użytkownik najeżdża na niego kursorem myszy. Można go wykorzystać jako dodatkowy element projektu lub jako element funkcjonalny artykułu lub infografiki.

Idealne rozwiązanie w sytuacjach, gdy nie można zmodyfikować gotowego bloku zgodnie z własnymi wyobrażeniami za pomocą jego ustawień.

Jeśli wybrałeś gotowy blok Tilda i chcesz wprowadzić w nim pewne zmiany, skorzystaj z opcji Konwertuj na Zero Block. Umożliwi to edycję bloku tak, jakby byłZero Block. Opcja ta jest dostępna dla większości bloków Tilda.

Rozbijmy ten proces na etapy. Na przykład zmieńmy blok cenowy, umieszczając ikony poza panelami informacyjnymi.

Przykład bloku przekształconego w Zero Block:

Gotowe bloki Tilda oferują wiele ustawień. Dodaj najbardziej odpowiednie z biblioteki. Otwórz panel ustawień i sprawdź, czy możesz dostosować szablon do swoich potrzeb. Być może nie będziesz potrzebować Zero Block ogóle Zero Block .

Poniższe przykłady zostały zaprojektowane przy użyciu gotowych bloków Tilda.

W Tilda można osobno określić wypełnienia dla komputerów stacjonarnych i urządzeń mobilnych.

W Tilda gotowe bloki są rozmieszczone w siatce składającej się z 12 kolumn. Możesz ustawić wcięcia na dowolną liczbę kolumn. Jeśli zaprojektowałeś swój blok w Zero Block uwzględnienia siatki, nie będziesz mógł ustawić takich samych wcięć dla gotowych bloków (będziesz musiał przekonwertować je do Zero Block).

Załóżmy, że w układzie swojej strony internetowej stosujesz naprzemiennie gotowe bloki i bloki Zero Block. Chociaż w Zero Block można umieszczać elementy w dowolnym miejscu, nie jest to możliwe w przypadku gotowych bloków. Należy więc pamiętać, że gotowe bloki można umieszczać tylko na siatce.

Podczas projektowania strony internetowej w Zero Block zalecamy korzystanie z siatki. Umieść główne elementy względem siatki. W ten sposób projekt można łatwo połączyć z wszystkimi innymi blokami Tilda.

Wybierz preferowany motyw interfejsu edytora — standardowy, jasny lub ciemny. Możesz również zmniejszyć rozmiar interfejsu dla każdego z nich, aby zajmował mniej miejsca na ekranie. Gdzie włączyć: Zero Block kliknij „Tab” → Zero Block → Motyw.

W Zero Block można dodawać elementy bardziej złożone niż teksty, obrazy, kształty i przyciski.

Dodaj i skonfiguruj filmy z serwisów YouTube, Vimeo, Kinescope, iFrame lub prześlij plik MP4 lub WebM. Zmodyfikuj rozmiar i proporcje filmu, jego przezroczystość, utwórz cienie i zastosuj animację.

W ustawieniach wideo można ustawić automatyczne odtwarzanie, włączyć i wyłączyć zapętlenie, ustawić czas rozpoczęcia i zakończenia każdego filmu oraz przesłać własną okładkę.

Dodaj dowolny element poprzez osadzenie kodu HTML. Na przykład elementy interaktywne, nagrania online, odtwarzacze muzyki, kalendarze, kalkulatory i posty w mediach społecznościowych. Możesz dostosować położenie tych elementów na każdym ekranie.

Podpowiedź to interaktywny komunikat, który pojawia się po najechaniu kursorem myszy na element strony internetowej. Może być przydatna, jeśli opisujesz złożony temat i chcesz opisać jego poszczególne części na zdjęciu. Na przykład, jeśli sprzedajesz domki letniskowe w osiedlu mieszkaniowym, możesz narysować mapę i zaznaczyć na niej każdy budynek.

Podpowiedź posiada kilka przydatnych ustawień: dostosuj kolor, cień i rozmiar, prześlij ikonę, która pojawi się w okręgu, lub prześlij obraz, który pojawi się po najechaniu kursorem.

Po umieszczeniu elementów/podpowiedzi na stronie nie zapomnij sprawdzić położenia każdej podpowiedzi dla wszystkich rozdzielczości. W przeciwnym razie istnieje ryzyko, że podpowiedź zostanie ucięta od góry, od dołu lub z boków bloku.

Dodaj poziomy lub pionowy formularz online do Zero Block. Następnie spersonalizuj wszystkie ustawienia, takie jak pola wprowadzania danych lub usługi przechwytywania danych, komunikaty o powodzeniu i błędach, style formularzy lub animacje.

W Zero Block można tworzyć i edytować elementy wektorowe. Na przykład nietypowe kształty, ikony lub małe elementy rysunkowe, takie jak podkreślenia lub strzałki. Edytor wektorowy jest również wygodny do udoskonalania importowanych elementów SVG bezpośrednio w Tilda.

Każdemu elementowi można przypisać współrzędne względem czterech boków ekranu lub siatki, przezroczystość i cień; można również obracać elementy lub przypisywać do nich linki.

Linijki ułatwiają pracę z elementami układu. Są to poziome linie u góry i pionowe linie po lewej stronie ekranu, z których można „wyciągać” prowadnice. Linijki i prowadnice pomagają ustawić pożądany układ elementów w układzie, monitorować wcięcia i wyrównanie oraz zachować stałe rozmiary i proporcje elementów. Aby włączyć linijki, przejdź do Ustawień w Zero Block Pokaż linijki.

Każdemu elementowi można przypisać rozmiar w pikselach lub procentowy udział w rozmiarze ekranu. Na przykład, jeśli chcesz utworzyć element, który zajmie połowę ekranu niezależnie od jego rozmiaru, ustaw jego szerokość i wysokość w procentach, a nie w pikselach.

Odkryj wiele niespodzianek dzięki Zero Block. Oto lista efektów, które możesz wykorzystać na swojej stronie internetowej.

Użyj przycisku do efektów najechania kursorem w Zero Block. Możesz nadać mu dowolny rozmiar, a nawet zmienić jego kształt na okrągły, dostosowując ustawienia. Chcesz, aby był widoczny tylko po najechaniu kursorem? Ustaw jego przezroczystość, a dla efektu najechania kursorem wybierz 30% krycia i dowolny kolor.

Umieść przycisk nad elementami, które chcesz pokryć efektem najechania kursorem. Mogą to być obrazy lub tekst. W razie potrzeby przypisz do przycisku link URL.

Aby zablokować element podczas przewijania, zmień ustawienia obrazu na Zachowanie — Stałe. Ta funkcja jest dostępna dla obrazów tła i obrazów wewnątrz kształtu. Jeśli zastosujesz ją do obrazu wewnątrz panelu, obraz rozciągnie się na cały ekran. Będzie jednak widoczny tylko wewnątrz kształtu. Jeśli w bloku użyto kilku takich kształtów, obraz wewnątrz będzie kontynuacją samego siebie.

Możesz łączyć obrazy stałe i statyczne, aby uzyskać dodatkowe efekty i nietypowe kompozycje.

Jeśli chcesz, aby niektóre elementy były wyświetlane poza Zero Block nakładane na sąsiednie bloki, użyj funkcji Overflow. Znajdziesz ją w panelu ustawień w Zero Block.

W Zero Block można również ustawić różne parametry dla osi X i Y. Może to być przydatne, gdy chcesz tworzyć karty, które przewijają się w poziomie bez przesunięcia w pionie.

Jeśli ustawisz X na„Ukryte”, a Y na„Widoczne/Auto”, w Zero Block pojawi się pionowy pasek przewijania, a blok zostanie zablokowany do momentu wyświetlenia całej zawartości wzdłuż osi Y.

A jeśli ustawisz X na „Widoczne/Auto”, a Y na „Ukryte”, zawartość poza obszarem roboczym na osi X będzie wyświetlana podczas przewijania w poziomie.

Zero Block zablokować na stronie, aby pozostawał na górze lub na dole strony podczas przewijania. Jest to przydatne na przykład do tworzenia stałego menu o niestandardowym wyglądzie. Aby skonfigurować blokowanie, przejdź do Ustawienia → Położenie i przepełnienie.

Możesz również sprawić, że blok nie będzie wyświetlany od razu, ale po kilku przewinięciach (Appear Offset). W takim przypadku można użyć jednej z dwóch animacji wyglądu — Fade In lub Slide Up/Down.

Zero Block pięć podstawowych rozdzielczości ekranu, które pozwalają modyfikować responsywność witryny: 320px, 480px, 640px, 960px i 1200px. Zakres ten można rozszerzyć, dodając punkty przełamania. Punkty przełamania umożliwiają uzyskanie idealnego układu wszystkich elementów strony internetowej przy określonych rozdzielczościach. Elastyczna konfiguracja może być przydatna na przykład, gdy użytkownicy odwiedzają stronę internetową na urządzeniach o nieregularnych rozdzielczościach ekranu.

Podczas projektowania Zero Block konieczne jest przetestowanie, jak strona internetowa wygląda na wszystkich ekranach. Można to zrobić bezpośrednio w Zero Block na obrazek odpowiedniego urządzenia.

Zero Block zaprojektowany tak, aby każdy element na każdym ekranie można było dostosować indywidualnie. Po zmianie kompozycji lub treści jednego z nich blok może wyglądać inaczej na ekranach o niższej rozdzielczości ze względu na różnice w długości linii lub rozmiarze elementów.

Tworząc Zero Block podstaw, pamiętaj o ręcznym dostosowaniu układów dla każdej rozdzielczości. Należy o tym pamiętać przed opublikowaniem strony internetowej.

Jeśli cała strona internetowa jest zaprojektowana w Zero Block, wygodniej jest podzielić ją na oddzielne bloki. W ten sposób można wyłączyć bloki dla ekranów o niskiej rozdzielczości lub tymczasowo wyłączyć je dla całej strony internetowej.

Jeśli na dużym ekranie używasz wielu szczegółów, możesz uprościć i skrócić układ na ekranach o niższej rozdzielczości, aby ułatwić postrzeganie.

Oto przykład unikalnej kompozycji wizualnej dla każdego rozmiaru ekranu:

Jeśli nie podoba Ci się projekt adaptacyjny i chcesz zacząć od nowa, możesz wyczyścić ustawienia elementów dla niższych rozdzielczości ekranu. Aby to zrobić, wybierz jeden lub więcej elementów → kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe → Wyczyść projekt adaptacyjny.

Automatyczne układy w Zero Block technika projektowania, która pozwala szybko tworzyć układy, zmieniać treść i dostosowywać projekt do różnych rozdzielczości ekranu. Jest to wygodne rozwiązanie do tworzenia elementów takich jak karty, przyciski z wieloma elementami, pozycje menu i inne. Zapoznaj się z przewodnikiem dotyczącym konfiguracji automatycznego układu w Centrum pomocy.

Automatyczne układy kontrolują rozmieszczenie elementów w grupie względem siebie. Po ustawieniu kierunku i odległości elementy są automatycznie wyrównywane zgodnie z tymi zasadami, niezależnie od zmian w zawartości grupy. Na przykład, jeśli podczas tworzenia galerii chcesz dodać kolejny obraz do grupy, zostanie on „dopasowany” zgodnie z określonymi zasadami — nie będziesz musiał ręcznie przesuwać innych elementów grupy.

Zapoznaj się z samouczkiem dotyczącym korzystania z automatycznych układów:

Każdy element można animować w taki sposób, w jaki pojawia się on na stronie Zero Block. Dostępnych jest sześć typów animacji:

Każdy rodzaj animacji ma swoje własne ustawienia. Przyjrzyjmy się im.

Czas trwania to długość animacji w sekundach. Im wyższa wartość, tym wolniejsza animacja.

Odległość to przestrzeń między początkową pozycją animowanego elementu a jego pozycją końcową. Jest ona określana tylko dla animacji, w których obiekty pojawiają się z boków.

Skala to rozmiar elementu na początku animacji jako procent pierwotnego rozmiaru. Ten parametr jest ustawiany, gdy następuje powiększenie lub pomniejszenie. Jeśli wartość jest większa niż 100, element jest większy od początku i jest pomniejszany do pierwotnego rozmiaru. Jeśli wartość jest mniejsza niż 100, element jest powiększany do pierwotnej skali.

Opóźnienie to opóźnienie odtwarzania animacji, wyrażone w sekundach. Jeśli wartość wynosi 0, animacja rozpocznie się natychmiast po pojawieniu się bloku na stronie.

Kiedy należy stosować opóźnienie? Może to być pomocne, jeśli inny obiekt nakłada się na ważny element lub go zakrywa. Jeśli na jednej stronie znajduje się kilka obiektów animowanych, należy przypisać różne ustawienia opóźnienia do każdego elementu. Pozwala to kierować wzrok widza, prowadząc go od jednego elementu do następnego.

Przesunięcie wyzwalacza to odległość, mierzona w pikselach, od dolnej krawędzi ekranu, gdzie element pojawia się na stronie. Domyślnie animacja rozpoczyna się, gdy tylko element przekroczy dolną linię strony. Jeśli chcesz opóźnić animację do momentu, gdy element będzie widoczny dla widza (a nie na samym dole strony), ustaw odległość od dolnej krawędzi, w której animacja się rozpocznie. Jeśli obiekt znajduje się początkowo w odległości mniejszej niż wartość tego parametru, nie będzie widoczny, dopóki użytkownik nie przewinie strony w dół.

Po ustawieniu niezbędnych parametrów sprawdź animację bezpośrednio w edytorze. Aby zobaczyć animowany element w akcji, kliknij „Odtwórz element” dla pojedynczego elementu lub „Odtwórz wszystko” dla kilku elementów, aby sprawdzić, jak działają razem.

Dzięki animacji krok po kroku możesz przypisać sekwencyjne kroki transformacji do dowolnego elementu strony i umożliwić odwiedzającym interakcję z nimi.

Aby dodać animację krok po kroku do elementu w Zero Block, wybierz element, otwórz jego ustawienia i przejdź do sekcji Animacja krok po kroku (znajdującej się na końcu ustawień elementu).

Elementy pojawiają się i poruszają, gdy odwiedzający przewija stronę w górę lub w dół.

Wszystkie poniższe przykłady animacji są dostępne jako szablony, więc możesz je dodać do swoich projektów i używać ich według własnego uznania.

Przykłady animacji podczas przewijania:

Ten rodzaj animacji jest uruchamiany, gdy element pojawia się na ekranie.

Element na ekranie — animacja jest uruchamiana, gdy element przekroczy dolną krawędź przeglądarki i pojawi się na stronie internetowej.

Blok na ekranie — animacja jest uruchamiana, gdy Zero Block elementem przekroczy dolną krawędź przeglądarki i pojawi się na stronie internetowej.

Ten rodzaj animacji uruchamia się, gdy użytkownik najeżdża kursorem na dany element.

Ten rodzaj animacji uruchamia się, gdy odwiedzający kliknie na dany element.

Każdy rodzaj animacji ma dodatkowe ustawienia:

Start Trigger to zdarzenie, które uruchamia animację. Wybierz między Window Top, Window Center i Window Bottom.
Domyślnie ustawiony jest wyzwalacz Window Bottom; animacja rozpocznie się, gdy tylko przekroczy dolną krawędź przeglądarki.

Trigger Offset to odległość w pikselach od wybranego Start Trigger. Animacja rozpocznie się po przewinięciu tej odległości.

Loop to parametr, który pozwala na nieograniczone powtarzanie określonych kroków. Możesz powtarzać animację nieskończoną liczbę razy (ustaw Loop with Reverse) lub odtworzyć animację tylko raz (ustaw Loop Once).

Easing ustawia płynność animacji. W Tilda można wybrać jeden z 29 rodzajów wygładzania, które będą miały wpływ na wyświetlanie skonfigurowanej animacji. Wybrany rodzaj wygładzania można zmienić za pomocą krzywych Béziera.

Wynikową animację można przetestować za pomocą przycisków Play Element (zobacz animację wybranego elementu) / Play All (odtwórz animację wszystkich elementów w bloku). Ta opcja jest dostępna dla wszystkich rodzajów animacji z wyjątkiem animacji podczas przewijania.

Dla wygody można pracować nad animacją w dwóch kartach przeglądarki: edytować Zero Block jednej i otworzyć podgląd strony w drugiej. Pozwala to szybko sprawdzić wynik bez opuszczania Zero Block. Przed przetestowaniem wyniku nie zapomnij zapisać zmian w Zero Block odświeżyć stronę podglądu.

Korzystając z funkcji animacji krok po kroku, możesz dodawać kolejne kroki i dostosowywać właściwości każdego z nich. Spowoduje to zmianę parametrów każdego wybranego elementu na stronie internetowej. Utwórz trajektorię i ruchy elementów na stronie w oparciu o kilka kroków.

Aby zmienić stan początkowy elementu — jeśli chcesz, aby był on na początku niewidoczny, ustaw przezroczystość na 0, a czas trwania na 0 sekund lub 0 pikseli (w przypadku animacji podczas przewijania).

Za pomocą ustawień kroków można zmienić właściwości elementu, do którego zastosowano animację.

Można ustawić położenie (Move), rozmiar (Scale), przezroczystość (Opacity) elementu oraz kąt obrotu elementu (Rotate).

Parallax podczas przewijania. Po zastosowaniu tej animacji do elementu jego prędkość ruchu będzie się różnić od prędkości innych elementów podczas przewijania strony. W ustawieniach można ustawić prędkość ruchu — przy niskiej prędkości od 0 do 100 będzie się poruszał wolniej niż przewijanie, przy wysokiej prędkości od 100 do 200 będzie się poruszał znacznie szybciej.

Parallax przy ruchu myszy. Element z tym typem animacji porusza się w kierunku przeciwnym do ruchu kursora. Zakres ruchu w pionie i poziomie można ustawić w ustawieniach.

Ten rodzaj animacji pozwala zablokować elementy podczas przewijania. W ustawieniach można określić odległość, w której elementy pozostają w stałej pozycji (blokowanie występuje tylko w obrębie bloku). Po przewinięciu do określonej odległości element nie będzie już stały i będzie przewijany wraz z innymi elementami na stronie.

Ustawienia pozwalają również określić, co spowoduje zablokowanie — górna krawędź okna, dolna krawędź lub środek. Przesunięcie wyzwalacza pozwala kontrolować odległość od krawędzi okna, zapewniając, że element nie przyklei się do niej. Jest to również przydatne, gdy chcesz zablokować kilka elementów jednocześnie w określonej odległości od siebie.

Jeśli używasz animacji w swoim projekcie, nie przeładowuj strony zbyt dużą ilością efektów; zazwyczaj wystarczy animować 20–30% treści. Nadmierna animacja wygląda nachalnie i irytująco, a także spowalnia ładowanie strony.

Jeśli tworzysz blok od podstaw, warto najpierw zaprojektować całą stronę, aby zobaczyć, jak ten blok wypada na tle innych. Gdy już to zrobisz, nie zapomnij skonfigurować ustawień adaptacyjnych. Jeśli tłumaczysz tekst w Zero Block po prostu go zmieniasz, sprawdź, jak wygląda on na każdej wersji ekranu, nawet jeśli wszystko wygląda dobrze na pierwszym ekranie. Ze względu na różne rozmiary czcionek i długość linii tekst może wyglądać inaczej na różnych ekranach.

Jeśli chcesz, aby dwa elementy pozostały w tej samej pozycji względem siebie, niezależnie od rozdzielczości ekranu, ustaw pozycjonowanie elementów jako Grid Container lub Window Container.

Dowiedz się więcej o ustawianiu pozycjonowania elementów w Centrum pomocy:

Jeśli pozycjonujesz tekst względem siatki i chcesz, aby zawsze pozostawał on w obrębie ekranu, upewnij się, że jego kontener nie wykracza poza obszar siatki. Tworzenie schludnego układu jest dobrym nawykiem: w ten sposób unikniesz nieprzyjemnych niespodzianek po opublikowaniu bloku.

Użyj Zero Block tworzenia imponujących stron internetowych i innowacyjnych rozwiązań typograficznych. Jest to przydatne narzędzie do tworzenia projektów. Dodaj osobowość swojej stronie internetowej dzięki efektom specjalnym, typografii i nieszablonowym projektom. Teraz wszystko zależy od Ciebie!