Jak stworzyć własny projekt za pomocą edytora stron internetowych Zero Block

Kontroluj każdy element. Możesz kontrolować każdy element bloku, w tym tekst, obraz, przycisk lub tło. Możesz także 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. Każdy element strony może być pozycjonowany względem siatki lub krawędzi ekranu.

Złożona typografia. Projektanci mają pełną swobodę tworzenia unikalnych rozwiązań typograficznych.

Przezroczystość. Ustaw poziom przezroczystości na dowolnym elemencie i efekty cienia pod nimi. Możliwość dostosowania. Zmień każdy parametr, taki jak kompozycja, zestaw widocznych elementów, w zależności od rozdzielczości ekranu.

Panele. Dodaj kolorowe panele, karty treści lub prześlij obrazy wewnątrz geometrycznych kształtów.

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

Dodawanie kodu HTML. Dodaj dowolny element do witryny Zero Block , wstawiając kod HTML (użyj własnego kodu lub widżetów IFrame, które umożliwiają wstawianie treści od dostawców zewnętrznych). Dostosuj położenie tych elementów na każdym ekranie.

Tooltip. To interaktywne narzędzie służy do dodawania krótkich wyskakujących podpowiedzi. Możesz zmienić ustawienia. Obejmują one kolor, cień, rozmiar, przesyłanie ikony wewnątrz okręgu lub obrazu nad tekstem.

Formularz opinii. Dodaj pola wejściowe i integracje przechwytywania danych. Ustaw styl formularza i animuj go.

Animowanie elementów strony internetowej. Dodaj animację, gdy elementy internetowe pojawiają się na stronie: krycie, skalowanie w górę, gdy elementy pojawiają się z dołu, z góry, z lewej lub z prawej strony.

Animacja krok po kroku. Spraw, by Twoja strona była bardziej dynamiczna i wciągająca. Animuj po kliknięciu, przewinięciu, najechaniu kursorem i pojawieniu się elementu na ekranie.

Parallax scrolling. Użyj przewijania paralaksy lub utwórz efekt paralaksy z ruchu myszy.

Stałe elementy podczas przewijania. Określ odległość, dla której element powinien pozostać nieruchomy i jego lokalizację.

Jeśli rysujesz układy w edytorze graficznym przed zrobieniem czegokolwiek, użyj Zero Block , aby przenieść go na swoją stronę internetową w takiej postaci. W tym celu Zero Block oferuje 12-kolumnową siatkę i konfigurowalne specyfikacje 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 Interfejs jest podobny do edytora graficznego. Wystarczy dodać niezbędne elementy i nadać im odpowiednie współrzędne. Jest to łatwe do zrobienia w Zero Block, zwłaszcza jeśli robiłeś to już wcześniej. Użyj Zero Block , aby szybko przenieść swój pomysł z edytora graficznego na swoją stronę internetową bez konieczności pisania jakiegokolwiek kodu.

Jeśli tworzysz stronę internetową lub landing page i nie możesz znaleźć odpowiedniego bloku w bibliotece Tilda, przyda Ci się Zero Block . Oto kilka konkretnych przykładów.

Strony internetowe wykonane na Tildzie są często tworzone z bloków, więc odwiedzający przewijają ich sekcje. Jest to ujednolicony trend 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 świetnie nadaje się do zbierania elementów o nierównych krawędziach w jedną kompozycję, sprawiając, że wszystkie odległości są wizualnie takie same.

Zero Block działa dobrze z warstwami, w tym z nakładającymi się obrazami, tekstami nad panelem i przyciskami na obrazach. Twórz dodatkowe efekty, bawiąc się ich pozycjonowaniem.

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

Aby otworzyć Warstwy, użyj następujących skrótów klawiaturowych: ⌘+ L lub Ctrl + L (dla komputerów Mac) lub Ctrl + L
(dla systemu Windows).

Zero Block umożliwia użytkownikom tworzenie złożonych kompozycji z wielu elementów, takich jak teksty, obrazy, linie, panele i przyciski.

Ta nowa strona docelowa czcionek stworzona na Tilda składa się z bloków zawierających wiele elementów.

Efekt hover zmienia wygląd elementu, gdy użytkownik najedzie na niego myszką. Można go wykorzystać jako dodatkowy element projektu lub jako funkcjonalny element artykułu lub infografiki.

Idealny w sytuacjach, w których niemożliwe jest wprowadzenie zmian w zwykłym bloku poprzez modyfikację ustawień.

Jeśli wybrałeś ogólny blok Tilda i chcesz wprowadzić w nim pewne zmiany, po prostu użyj opcji Konwertuj na Zero Block . Pozwoli ci to edytować go tak, jakby był to Zero Block. Opcja ta jest dostępna dla większości bloków Tilda.

Podzielmy ten proces na kroki. Na przykład, zmieńmy blok planów, umieszczając ikony poza panelami informacyjnymi.

Przykład konwersji innego bloku na Zero Block:

Standardowe bloki Tildy mają wiele ustawień. Dodaj najbardziej odpowiedni blok z biblioteki. Otwórz panel ustawień i sprawdź, czy możesz dostosować szablon do swoich potrzeb. Możliwe, że w ogóle nie będziesz potrzebować Zero Block .

Poniższe przykłady to projekty oparte na standardowych blokach Tilda.

Jeśli wcześniej trzeba było przekonwertować zwykły blok na Zero Block , nie trzeba już tego robić. Tilda ma teraz opcję definiowania wcięć osobno dla komputerów i urządzeń mobilnych.

W Tildzie zwykłe bloki są rozmieszczone na 12-kolumnowej siatce. Wcięcia dla każdego nagłówka można zdefiniować jako równe dowolnej liczbie kolumn. Jeśli zaprojektowałeś swój blok w Zero Block bez uwzględnienia siatki, nie będziesz w stanie ustawić tych samych wcięć dla zwykłych bloków (będziesz musiał przekonwertować je na Zero Block).

Na przykład, zakładając, że w projekcie witryny naprzemiennie używasz zwykłych i zerowych bloków. Podczas gdy możesz umieszczać elementy w dowolnym miejscu w Zero Block, nie będzie to możliwe do powtórzenia w zwykłym bloku. Warto więc pamiętać, że nasze zwykłe bloki mogą być umieszczane tylko na siatce.

Zalecamy korzystanie z siatki podczas projektowania witryny w Zero Block. Umieść główne elementy względem siatki. Teraz projekt można łatwo połączyć z innymi blokami Tilda.

Na stronie Zero Block można dodawać elementy, które są bardziej złożone niż teksty, obrazy, panele i przyciski.

Możesz dodawać lub edytować filmy z serwisów YouTube i Vimeo. Można zmienić rozmiar i proporcje filmu. Można także zmieniać jego krycie, tworzyć cienie i stosować animacje.

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

Dodaj dowolny element za pomocą HTML. Może to być Twój własny kod lub możesz osadzić iFrame widżetu innej firmy. Mogą to być na przykład elementy interaktywne, nagrania online, odtwarzacze muzyki, kalendarze, kalkulatory, posty w mediach społecznościowych. Możesz dostosować położenie tych elementów na każdym ekranie.

Tooltip to mała interaktywna podpowiedź, która pojawia się po umieszczeniu kursora myszy nad elementem strony internetowej. Może to być przydatne, jeśli opisujesz złożony temat i chcesz opisać jego części na zdjęciu. Na przykład, jeśli sprzedajesz domy na osiedlu, możesz narysować mapę i zaznaczyć na niej każdy budynek.

Podpowiedź ma wiele przydatnych ustawień: zmień kolor, cień i rozmiar. Prześlij ikonę, która pojawi się wewnątrz okręgu lub tekst, który pojawi się po najechaniu kursorem.

Po zakończeniu umieszczania elementów/tooltipów na stronie, nie zapomnij sprawdzić pozycji każdego z nich na ekranach o wszystkich rozdzielczościach. W przeciwnym razie istnieje ryzyko, że podpowiedź zostanie odcięta od góry, dołu lub krawędzi bloku.

Dodaj poziomy lub pionowy formularz opinii do Zero Block. Następnie zmień wszystkie ustawienia, takie jak dodawanie pól wejściowych lub integracje przechwytywania danych, komunikaty o powodzeniu lub błędzie, style formularzy lub animacje.

Każdemu elementowi można przypisać współrzędne względem czterech stron ekranu lub siatki. Zmień krycie i cień; możesz obrócić element lub nadać mu link jednym kliknięciem.

Każdemu elementowi można przypisać rozmiar w pikselach lub procent rozmiaru ekranu. Na przykład, jeśli chcesz utworzyć element, który zajmie połowę ekranu niezależnie od jego rozmiaru. W takim przypadku należy ustawić jego szerokość i wysokość w %, a nie w pikselach.

Odkryj wiele nieoczekiwanych 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 zaokrąglić, dostosowując ustawienia. Czy chcesz, aby był widoczny tylko po najechaniu? W takim razie niech będzie przezroczysty. A skoro już przy tym jesteś, wybierz 30% krycia i dowolny kolor dla przycisku najechania.

Umieść przycisk nad elementami, które mają być objęte efektem najechania kursorem. Mogą to być obrazy lub tekst. W razie potrzeby zmień przycisk w łącze.

Aby naprawić element podczas przewijania, zmień ustawienia obrazu na Zachowanie - Naprawiono. Ta funkcja jest dostępna dla obrazów tła wewnątrz kształtu. Jeśli zastosujesz tę opcję do obrazu wewnątrz panelu, rozmiar obrazu zostanie rozciągnięty do pełnego ekranu. Będzie on jednak widoczny tylko wewnątrz kształtu. Jeśli użyjesz kilku takich kształtów w bloku, obraz wewnątrz nich będzie kontynuacją tego samego obrazu.

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

Jeśli chcesz, aby niektóre elementy były wyświetlane poza Zero Block i nakładane na sąsiednie bloki, wybierz opcję Overflow. Można ją znaleźć w panelu ustawień na stronie Zero Block.

Zero Block można dostosować do pięciu najpopularniejszych typów ekranów. Twój blok będzie zawsze wyglądał dobrze na każdym urządzeniu.

Pamiętaj, aby sprawdzić, jak Twój Zero Block wygląda na wszystkich ekranach. Wystarczy kliknąć ikonę przedstawiającą potrzebne urządzenie w Zero Block.

Każdy element na każdym ekranie można dostosować w Zero Block. Tak więc, jeśli zmieniasz kompozycję lub zawartość na jednym z ekranów, blok w niższej rozdzielczości może wyglądać inaczej ze względu na różnicę w długości linii lub wielkości elementów.

Tworząc stronę Zero Block od podstaw, skonfiguruj możliwość dostosowania dla każdego urządzenia indywidualnie. Ważne jest, aby pamiętać o tym przed opublikowaniem witryny.

Jeśli projektujesz całą witrynę w Zero Block, wygodniej jest podzielić ją na osobne bloki. Pozwoli to na wyłączenie bloków dla ekranów o niskiej rozdzielczości lub tymczasowe wyłączenie ich dla całej witryny.

Jeśli używasz wielu szczegółów na dużym ekranie, uprość swój projekt dla ekranów o niższej rozdzielczości, aby był łatwiejszy dla oka.

Oto przykład indywidualnej kompozycji wizualnej na każdym ekranie:

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 typ animacji ma swoje własne parametry. Przyjrzyjmy się ich znaczeniu.

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 ostatecznym położeniem. Jest ona określana tylko dla animacji, w których obiekty pojawiają się z boku.

Skala to rozmiar elementu na początku animacji jako procent oryginalnego rozmiaru. Ten parametr jest ustawiany, gdy następuje skalowanie w górę lub w dół. Jeśli wartość jest większa niż 100, element jest większy od początku i skaluje się w dół do oryginalnego rozmiaru. Jeśli wartość jest mniejsza niż 100, element jest skalowany do oryginalnego rozmiaru.

Delay to opóźnienie odtwarzania animacji, w sekundach. Jeśli wartość wynosi 0, animacja rozpocznie się, gdy tylko blok pojawi się na stronie.

Kiedy należy go używać? Może to być przydatne, gdy inny obiekt nakłada się lub przekreśla znaczący element. Jeśli na jednej stronie znajduje się kilka animowanych obiektów, należy przypisać różne funkcje opóźnienia do każdego elementu. Pozwala to kierować wzrok widza, prowadząc go od jednego elementu do następnego.

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

Po ustawieniu niezbędnych parametrów można sprawdzić animację bez opuszczania edytora. Aktywuj element, który animowałeś, kliknij "Odtwórz element" dla pojedynczego elementu i "Odtwórz wszystkie", jeśli animowałeś kilka elementów i chcesz zobaczyć, jak działają razem.

Jeśli chcesz zobaczyć na swojej stronie interaktywne elementy, które użytkownicy będą chcieli wykorzystać, zaznacz element, który chcesz animować. Następnie przejdź do opcji Animacja krok po kroku w ustawieniach elementu.

Elementy pojawiają się i przesuwają, gdy użytkownik przewija stronę w górę lub w dół.

Przykłady animacji na scrollu:

Zachęcamy do wykorzystania tych przykładów animacji w swoich osobistych projektach.

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

Elementon Screen - animacja jest uruchamiana, gdy element przekroczy dolną krawędź przeglądarki i pojawi się na stronie internetowej.

Block on Screen - animacja jest uruchamiana, gdyblok zero block zawierający element przekroczy dolną krawędź przeglądarki i pojawi się na stronie internetowej.

Animacja rozpocznie się po najechaniu kursorem na element.

Animacja rozpocznie się, gdy użytkownik kliknie element.

Każdy typ animacji ma następujące dodatkowe ustawienia:

Start Trigger to zdarzenie, które uruchamia animację. Do wyboru jest Window Top, Window Center i Window Bottom.

Wyzwalacz Window Bottom jest ustawiony domyślnie; animacja rozpocznie się, gdy tylko przekroczy dolną część przeglądarki.

Przesunięcie wyzwalacza to odległość w pikselach od wybranego wyzwalacza, który rozpoczyna animację.

Pętla animacji to parametr, który kontroluje powtarzanie animacji w nieskończoność.

Możesz przetestować animację za pomocą przycisków "Odtwórz element" / "Odtwórz wszystko". Opcja ta jest dostępna dla wszystkich typów animacji z wyjątkiem animacji przewijania.

Dla wygody możesz użyć dwóch kart przeglądarki: jednej do edycji w Zero Block, a drugiej do otwarcia podglądu strony. W ten sposób można sprawdzić wynik bez opuszczania strony Zero Block. Pamiętaj, aby zapisać wszystkie zmiany i odświeżyć podgląd strony przed jej przetestowaniem.

Po wybraniu animacji krok po kroku można dodawać kroki i dostosowywać właściwości każdego z nich. Spowoduje to zmiany parametrów każdego wybranego elementu na stronie internetowej. Utwórz trajektorię i ruchy elementów na stronie w oparciu o liczbę kroków.

Aby zmienić początkowy stan elementu - jeśli chcesz, aby był niewidoczny na początku, możesz ustawić krycie na 0 i czas trwania na 0 sekund lub 0 pikseli (dla animacji podczas przewijania).

Za pomocą ustawień kroku można zmienić właściwości animowanego elementu.

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

Parallax scrolling. Po zastosowaniu tej animacji do elementu, prędkość, z jaką się porusza, będzie różnić się od prędkości ruchu innych elementów podczas przewijania strony. Prędkość ruchu można ustawić w panelu Ustawienia: przy niskiej prędkości od 0 do 100 element będzie poruszał się wolniej niż przewijanie, przy wysokiej prędkości od 100 do 200 będzie poruszał się znacznie szybciej.

Paralaksa podczas przesuwania wskaźnika myszy. Element z tym typem animacji porusza się w przeciwnym kierunku w stosunku do ruchu wskaźnika. Obszar ruchu pionowego lub poziomego można ustawić w Ustawieniach.

Ten typ animacji pozwala na unieruchomienie elementów podczas przewijania. W ustawieniach można określić odległość, w której elementy pozostają nieruchome w określonej pozycji (zawsze w obrębie bloku). Po przewinięciu do określonej odległości element nie będzie już nieruchomy, a przewijanie może być kontynuowane w obrębie strony.

W Ustawieniach można ustawić wyzwalacze przewijania: góra, dół lub środek okna. Przesunięcie wyzwalacza pozwala kontrolować margines między krawędzią okna a elementem. Jest to również przydatne, gdy chcesz naprawić kilka elementów w tym samym czasie w pewnej odległości od siebie.

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ć jego ustawień adaptacyjnych. Jeśli tłumaczysz tekst w Zero Block i po prostu go zmieniasz, sprawdź, jak wygląda 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 innych ekranach.

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

Jeśli pozycjonujesz tekst względem siatki i chcesz, aby zawsze pozostawał w obrębie ekranu, upewnij się, że jego zawartość 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 do tworzenia imponujących stron internetowych i innowacyjnych rozwiązań typograficznych. Stanie się on użytecznym narzędziem dla Twoich projektów. Dodaj osobowości swojej witrynie dzięki efektom specjalnym, typografii i nieszablonowemu projektowi. Teraz wszystko jest w twoich rękach!