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

Kontroluj każdy element. Możesz kontrolować każdy element bloku, taki jak tekst, obraz, przycisk lub tło. Decyduj 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ę w tworzeniu unikalnych rozwiązań typograficznych.

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

Panele. Dodawaj kolorowe panele, karty treści lub przesyłaj obrazy wewnątrz geometrycznych kształtów.

Wideo. Dodaj filmy z YouTube lub Vimeo do swojej witryny. W Zero Block możesz dostosować ich rozmiar i pozycję na stronie.

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

Podpowiedź. Użyj tego interaktywnego narzędzia, aby dodać krótkie podpowiedzi pop-up. Możesz zmienić ustawienia, takie jak kolor, cień, rozmiar, przesłać ikonę wewnątrz okręgu lub obraz nad tekstem.

Formularz zwrotny. Dodaj pola wejściowe, 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 i pojawieniu się elementu na ekranie.

Przewijanie paralaksy. Użyj przewijania paralaksy lub stwó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 wykonaniem jakichkolwiek czynności, użyj Zero Block, aby przenieść je na swoją stronę internetową w niezmienionej formie. W tym celu Zero Block oferuje 12-kolumnową siatkę i konfigurowalne specyfikacje dla każdego elementu, takie jak 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.

Interfejs Zero Block 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 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, użyj 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 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 świetnym 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, takimi jak nakładające się obrazy, teksty nad panelem, przyciski 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 pozwala użytkownikom tworzyć złożone kompozycje 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ą. Użyj go jako dodatkowego elementu projektu lub jako funkcjonalnego elementu artykułu lub infografiki.

Idealne rozwiązanie, gdy chcesz zmienić coś w zwykłym bloku, ale nie jest to możliwe poprzez zmianę ustawień.

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

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

Przykład konwersji innego bloku na blok zerowy:

Nasze standardowe bloki mają wiele ustawień. Dodaj najbardziej odpowiedni blok z biblioteki, otwórz zakładkę ustawień i po prostu sprawdź, czy możesz dostosować szablon do swojego celu. Możliwe, że w ogóle nie będziesz potrzebować Zero Block.

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

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.

Nasze zwykłe bloki są rozmieszczone na siatce składającej się z 12 kolumn. Możesz zdefiniować wcięcia dla każdego nagłówka 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, w projekcie witryny naprzemiennie używasz zwykłych i zerowych bloków. Podczas gdy w bloku Zero można umieszczać elementy w dowolnym miejscu, nie będzie to możliwe do powtórzenia w zwykłym bloku. Warto więc pamiętać, że nasze zwykłe bloki można umieszczać tylko na siatce.

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

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

Można dodawać lub edytować filmy z serwisów YouTube i Vimeo. Zmieniaj rozmiar i proporcje wideo, a także jego krycie, twórz cienie i stosuj animacje.

W ustawieniach wideo możesz ustawić automatyczne odtwarzanie, włączać i wyłączać zapętlanie, ustawiać czas rozpoczęcia i zakończenia każdego filmu oraz przesyłać własne okładki.

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ń, rozmiar lub wybierz i 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 tooltipa 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 i zmieniaj 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, zmienić krycie i cień; można obrócić element lub nadać mu link po kliknięciu.

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.

Użyj przycisku do efektów najechania kursorem w Zero Block Możesz nadać mu dowolny rozmiar, a nawet sprawić, by był okrągły, dostosowując ustawienia. Chcesz, aby był widoczny tylko po najechaniu kursorem? Uczyń go przezroczystym. 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 to do obrazu wewnątrz panelu, rozmiar obrazu zostanie rozciągnięty do pełnego ekranu, ale będzie widoczny tylko w obrębie 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 blokiem Zero i nakładane na sąsiednie bloki, wybierz opcję Przepełnienie. Można ją znaleźć w ustawieniach bloku.

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

Pamiętaj, aby sprawdzić, jak Twój Zero Block wygląda na wszystkich ekranach. Wystarczy nacisnąć przycisk przedstawiający urządzenie, którego potrzebujesz w Zero Block.

Każdy element na każdym ekranie można dostosować w Zero Block, więc jeśli zmienisz 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 rozmiarze elementów.

Tworząc Zero Block od zera, 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:

Możesz animować każdy element, który pojawia się w Zero Block. Udostępniliśmy sześć rodzajów animacji:

Każdy typ animacji ma swoje własne parametry. Przyjrzyjmy się ich znaczeniu.

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

Odległość - przestrzeń między początkową pozycją animacji a jej końcową lokalizacją. Jest określana tylko dla animacji, w których obiekty pojawiają się z boku.

Skala - 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 w górę do oryginalnej skali.

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

Kiedy należy jej używać? Może być przydatne, gdy inny obiekt nakłada się lub przekreśla znaczący element. Jeśli na jednym ekranie wyświetlanych jest kilka animowanych obiektów, przypisz inną funkcję opóźnienia do każdego elementu. Pozwala to kierować wzrokiem widza, prowadząc go od jednego elementu do następnego.

Przesunięcie wyzwalacza to odległość mierzona w pikselach od dolnej krawędzi ekranu, przy 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ż obiekt 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 dalej.

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ć interaktywne elementy na swojej stronie, które użytkownicy będą chcieli zaangażować, zaznacz element, który chcesz animować, i przejdź do animacji 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 przewijaniu:

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

Ten typ 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.

Blok na ekranie - jest uruchamiana, gdy blok zerowy zawierający element przekroczy dolną krawędź przeglądarki i pojawi się na stronie.

Animacja rozpocznie się po najechaniu kursorem na element.

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

Każdy typ animacji ma dodatkowe ustawienia:

Start Trigger (Wyzwalacz) -zdarzenie uruchamiające animację. Do wyboru jest Window Top, Window Centre 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ą przycisku Play Element / Play All. Ta opcja 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 Zero Block. Pamiętaj, aby zapisać wszystkie zmiany i odświeżyć stronę podglądu przed przetestowaniem strony.

Po wybraniu animacji krok po kroku możesz dodawać kroki i dostosowywać właściwości każdego kroku, które będą wyzwalać 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 - na przykład, jeśli chcesz, aby był niewidoczny na początku, ustaw krycie na zero 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żesz ustawić jego pozycję (Move), rozmiar (Scale), przezroczystość (Opacity) i kąt obrotu (Scale).

Przewijanie paralaksy. 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. Możesz ustawić prędkość jego ruchu w ustawieniach strony: 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 kierunku przeciwnym do ruchu wskaźnika. Obszar ruchu pionowego lub poziomego można ustawić w ustawieniach strony.

Ten typ animacji pozwala na unieruchomienie elementów podczas przewijania. W ustawieniach można określić odległość, w jakiej element pozostanie nieruchomy w jednym miejscu (zawsze w obrębie bloku). Odległość jest określona w pikselach. Po przewinięciu do określonej odległości element nie jest już stały i będzie kontynuował przewijanie wraz ze stroną.

Możesz ustawić wyzwalacze przewijania w ustawieniach: góra, dół lub środek okna. Trigger Offset 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ź, czy działa on w Zero Block, 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 kontener nie wykracza poza obszar siatki. Tworzenie schludnego układu jest dobrym nawykiem; w ten sposób unikniesz nieprzyjemnych niespodzianek po opublikowaniu bloku.