Zero Block: Jak utworzyć blok niestandardowy

Aby dodać stronę Zero Block do strony, kliknij Zero na samym dole strony. Można go również znaleźć na dole Biblioteki bloków, tuż pod kategorią "Inne".

Strona Zero Block zachowuje wszystkie zwykłe funkcje bloku - można ją kopiować, usuwać, usuwać i ukrywać. Ma ustawienia, ale zamiast przycisku "Zawartość" ma przycisk "Edytor bloków". Kliknij go, jeśli chcesz edytować blok, a otworzy się edytor bloków.

Strona Zero Block ma dwa obszary robocze lub kontenery: Grid Container i Window Container, które wskazują granice ekranu przeglądarki.

Grid Container obsługuje tę samą siatkę, co Tilda- 12kolumn (1200 px). Jeśli wyrównasz obiekty do siatki i umieścisz elementy wewnątrz kontenera siatki, zawsze pozostaną one w granicach 12 kolumn, niezależnie od rozmiaru ekranu.

Kliknij przycisk plusa w lewym górnym rogu edytora bloków, aby dodać element do strony. Możesz dodać tekst, obraz, kształt, przycisk, wideo, podpowiedź, HTML, formularz, galerię lub wektor.

Strona Zero Block obsługuje wszystkie podstawowe operacje myszy: elementy można przesuwać, zmieniać ich rozmiar, kopiować (przytrzymując klawisz Alt) i zaznaczać wiele elementów.

Można zmienić rozmiar elementu obrazu bez zmiany jego proporcji.

Wysokość elementów tekstowych zmienia się automatycznie w zależności od objętości tekstu.

Rozmiary przycisków i kształtów można zmieniać we wszystkich kierunkach.

Po wybraniu kilku elementów można je wyrównać w poziomie lub w pionie względem siebie lub względem kontenera.

Edycja elementów blokowych za pomocą klawiatury znacznie przyspiesza proces pracy, dlatego zalecamy korzystanie ze skrótów klawiszowych.

Dostęp do listy skrótów klawiaturowych można również uzyskać z menu kontekstowego w edytorze bloków.

Możesz uzyskać dostęp do pełnych ustawień dowolnego elementu, klikając Ustawienia w prawym dolnym rogu ekranu.

Domyślnie panel ustawień jest ukryty, aby zachować przejrzystość obszaru roboczego.

Użyj górnego wiersza przycisków, aby szybko wyrównać element w pionie lub poziomie do kontenera.

Współrzędne elementu można zobaczyć poniżej. Można je podać w pikselach lub procentach. Poniżej szczegółowo omówimy tę funkcję.

Punkt początkowy jest oznaczony niebieskim krzyżykiem.

Można również wyświetlić parametry elementu: szerokość i wysokość, mierzone w pikselach.

Po przesłaniu obrazu przyjmuje on rozmiar ramki, w której został przesłany. Kliknij na Oryginalny rozmiar w panelu Ustawienia elementu, aby przywrócić oryginalny rozmiar obrazu.

Jeśli chcesz przyciąć obraz w kształcie koła, ustaw promień zaokrąglenia.

Aby utworzyć równe koło, oryginalny obraz powinien mieć kształt kwadratu, a promień zaokrąglenia powinien być równy połowie boku. Na przykład, jeśli rozmiar obrazu wynosi 100×100 px, ustaw promień równy 50.

Do obrazu można dodać cień. Aby to zrobić, wybierz kolor cienia, krycie, przesunięcie x i y, stopień rozmycia i rozproszenia w panelu Ustawienia elementu.

Każdy obraz może mieć tekst alternatywny (tag alt). Wyszukiwarki interpretują tekst alternatywny jako słowa kluczowe i używają ich do indeksowania strony, więc upewnij się, że tekst alternatywny jest ogólnie związany z treścią Twojej witryny i odzwierciedla zawartość obrazu.

Dowolny obraz można przekształcić w link, dzięki czemu po kliknięciu na niego użytkownik zostanie przeniesiony na inną stronę. Przejdź do panelu ustawień elementu i określ link oraz to, czy ma być otwierany w tym samym oknie, czy w nowym.

Po dodaniu kształtu na stronie pojawi się kwadrat, który można przekształcić w prostokąt, okrąg lub linię.

Prostokąt: zmiana długości boków poprzez przeciąganie punktów kontrolnych.

Można też określić wartości w ustawieniach elementu.

Okrąg. Aby utworzyć okrąg, ustaw promień zaokrąglenia równy połowie długości boku kwadratu.

Linia. Ustaw wysokość prostokąta na 1-5 px w ustawieniach elementu; w ten sposób utworzysz linię.

Kształty mogą mieć przypisany cień, obramowanie i link.

Możesz zmienić rozmiar, kolor i promień zaokrąglenia przycisku. Można również dodać do niego cień i obramowanie.

Podpis i link przycisku można ustawić w panelu Ustawienia elementu. Można tam również ustawić jego rozmiar, typ, krycie i kolor czcionki.

Można ustawić zachowanie przycisku. Na przykład kolor tła, kolor tekstu i kolor obramowania zmienią się po najechaniu na przycisk.

Tooltip to interaktywny element blokowy, który wyświetla podpowiedź tekstową i/lub obraz po najechaniu na niego wskaźnikiem.

Możesz dostosować kolor, cień i rozmiar podpowiedzi, ustawić ikonę wyświetlaną wewnątrz okręgu, przesłać obraz, który pojawi się po najechaniu na niego wskaźnikiem, a także utworzyć animację.

Po rozmieszczeniu elementów w bloku należy sprawdzić położenie etykietki narzędzia na wszystkich rozdzielczościach ekranu, aby nie została ona obcięta na krawędziach bloku.

Możesz dodać poziomy lub pionowy formularz do strony Zero Block. Będziesz mieć dostęp do wszystkich podstawowych ustawień formularza, takich jak dodawanie pól wejściowych, łączenie usług przechwytywania danych, ustawianie komunikatów o powodzeniu i błędach, zmiana jego wyglądu i tworzenie animacji.

Aby edytować pola wejściowe, przejdź do panelu Ustawienia elementu i kliknij Pola wejściowe. Tutaj możesz dostosować pola wejściowe, tak jak w zwykłym bloku formularza.

Aby połączyć usługi przechwytywania danych z formularzem, przejdź do panelu Ustawienia elementu i kliknij Usługi. Tam możesz podłączyć usługi przechwytywania danych do formularza.

Na stronie Zero Block można dodać galerię obrazów. Możesz zmienić szerokość i wysokość galerii, tak jak w przypadku elementu Shape.

Sprawdźmy ustawienia galerii:

Stretch: Ma dwa parametry: Cover i Contain.

W przypadku Cover obrazy będą całkowicie wypełniać obszar galerii, więc mogą zostać przycięte, jeśli ich format różni się od formatu galerii.

W przypadku Contain obrazy w galerii będą w oryginalnym formacie, więc nie zostaną przycięte w galeriach o dowolnym formacie.

Position. Określa pozycję obrazu względem obszaru galerii. Na przykład, jeśli wybrano parametr Left Top, obraz zostanie umieszczony względem lewego górnego rogu galerii.

Loop. To ustawienie powoduje zapętlenie slajdów (obrazów) w galerii. Ma dwa parametry: Loop (Pętla) i None (Brak).

W przypadku opcji Loop (Pętla) slajdy w galerii będą zapętlane w nieskończoność, tzn. pierwszy slajd pojawi się po ostatnim slajdzie.

W przypadku opcji None (Brak) nie będzie zapętlania, a galeria zatrzyma się na ostatnim slajdzie.

Slide Speed (Szybkość slajdów ) określa typ animacji zmiany slajdów. Ma trzy parametry: Brak, Wolno i Szybko.

Dla opcji Brak, podczas przełączania slajdów nie jest używana żadna animacja.

Dla opcji Wolno, slajdy są przełączane powoli.

Dla opcji Szybko, slajdy są przełączane szybko.

Autoodtwarzanie definiuje szybkość automatycznej zmiany slajdów w sekundach.
Jeśli nie określono wartości w sekundach, nie ma automatycznej zmiany slajdów.

Opcja Zoomable umożliwia powiększanie obrazów galerii po kliknięciu. Ma ona dwa parametry: Zoom on click i None.

W przypadku opcji Zoom on click, obrazy będą powiększane po kliknięciu.

W przypadku opcji None, obrazy nie będą powiększane po kliknięciu.

Zakładka Arrows zawiera ustawienia określające wygląd strzałek (przycisków).

Zakładka Dots zawiera ustawienia określające wygląd kropek pod galerią. Kropki wyświetlają liczbę slajdów.

Każdy slajd (obraz) ma własne ustawienia:

Tutaj możesz dodać podpis obrazu, Alt tag dla SEO, dołączyć film z YouTube lub Vimeo, a także link, do którego można przejść po kliknięciu tego slajdu.

Tilda obsługuje projektowanie responsywne dla wszystkich podstawowych typów ekranów:
1200-max (komputery stacjonarne)
980-1200 (tablet poziomy)
640-980 (tablet pionowy)
480-640 (smartfon poziomy)
320-480 (smartfon pionowy)

To wystarczy, aby projekt był poprawnie wyświetlany na wszystkich urządzeniach.

Po dostosowaniu Zero Block na głównym obszarze roboczym, przełącz typy ekranów i dokonaj niezbędnych korekt, takich jak szerokość kolumny tekstu, rozmiar obrazu, rozmiar czcionki, wysokość obszaru roboczego lub układ elementów.

Ustawienia zmienione dla danego typu ekranu są podświetlone. Ustawienia odzwierciedlające ustawienia innego typu ekranu są wyszarzone. W ten sposób łatwo jest zobaczyć, które ustawienia zostały zmienione.

W poniższym przykładzie element tekstowy ma wszystkie ustawienia w kolorze szarym. Oznacza to, że są one takie same dla bieżącego typu ekranu, jak dla poprzedniego.

Jeśli zmienimy rozmiar czcionki i współrzędne elementu dla danego typu ekranu, wartości nie będą już pokolorowane na szaro. Będzie to oznaczać, że nowe ustawienia są unikalne dla tego typu ekranu.

Kliknięcie pustego miejsca spowoduje wyświetlenie ustawień obszaru roboczego.

Wysokość kontenera siatki w pikselach można określić za pomocą klawiatury. Wartość można zmienić, przeciągając krawędź kontenera. Szerokość kontenera siatki jest stała i wynosi 1200 pikseli.

Kolor tła całego bloku można dostosować w ustawieniach obszaru roboczego.

Obraz tła dla całego bloku można przesłać w ustawieniach obszaru roboczego.

Można również dostosować renderowanie obrazu tła (początek filtra/koniec filtra) i zachowanie zawartości w odniesieniu do obrazu tła: Jeśli ustawisz wartość "Stały", zawartość (tekst i kształty) będzie się przesuwać podczas przewijania, podczas gdy obraz pozostanie na swoim miejscu.

Aby blok wyskakiwał po kliknięciu przycisku lub łącza, dodaj blok modyfikatora T1093 z kategorii "Inne".

Na karcie Zawartość bloku określ identyfikator Zero Block , którego potrzebujesz (lub wybierz go ręcznie, klikając link "Wybierz Zero Block"). Domyślnie link do wyskakującego okienka to link #zeropopup, możesz go zmienić na dowolną nazwę, ale powinieneś zachować znak skrótu na początku. Następnie blok będzie działał jak zwykłe wyskakujące okienko i zostanie ukryty na stronie.

Przeczytaj więcej o tym, jak działają wyskakujące bloki w artykule "Wyskakujące okienka".

W ustawieniach bloku T1093 można wybrać parametry tła (kolor, krycie), kolor ikony zamknięcia, szybkość animacji,
własny indeks Z i inne parametry.