Zero Block: Jak utworzyć blok niestandardowy

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

Zero Block zachowuje wszystkie zwykłe funkcje blokowe — można je 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 bloku.

Zero Block ma dwa obszary robocze lub kontenery: Kontener siatki i Kontener okna, które wskazują granice ekranu przeglądarki.

Kontener siatki obsługuje tę samą siatkę co Tilda — 12 kolumn (1200 pikseli). Jeśli obiekty zostaną wyrównane do siatki i umieszczone 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 bloku, aby dodać element do strony. Możesz dodać tekst, obraz, kształt, przycisk, wideo, podpowiedź, kod HTML, formularz lub galerię.

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

Rozmiar elementu obrazu można zmieniać 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ć poziomo lub pionowo względem siebie lub do kontenera.

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

Możesz także uzyskać dostęp do listy skrótów klawiaturowych z menu kontekstowego w Edytorze bloku.

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

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

Użyj górnego rzędu przycisków, aby szybko wyrównać element w pionie lub poziomie względem kontenera.

Poniżej możesz zobaczyć współrzędne elementu. Mogą być podane w pikselach lub procentach. Poniżej szczegółowo omawiamy tę funkcję.

Pochodzenie jest oznaczone niebieskim krzyżykiem.

Możesz także zobaczyć parametry elementu: szerokość i wysokość, mierzone w pikselach.

Gdy przesyłasz obraz, przyjmuje on rozmiar ramki, w której został przesłany. Kliknij Rozmiar oryginalny 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ówny okrąg, oryginalny obraz powinien mieć kwadratowy kształt, a promień zaokrąglenia powinien być równy połowie boku. Na przykład, jeśli rozmiar obrazu wynosi 100×100 pikseli, ustaw promień równy 50.

Możesz dodać cień do obrazu. Aby to zrobić, wybierz kolor cienia, krycie, przesunięcie x i y, stopień rozmycia i rozmycia w panelu Ustawienia elementu.

Każdy obraz może mieć alternatywny tekst (znacznik alt). Wyszukiwarki interpretują tekst alternatywny jako słowa kluczowe i używają go 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 przez użytkownika zostanie on przeniesiony na inną stronę. Przejdź do panelu Ustawienia elementu i określ łącze oraz określ, czy ma być otwierane w tym samym oknie, czy w nowym.

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

Prostokąt: zmień długość boków, przeciągając punkty kontrolne.

Lub określ wartości w ustawieniach elementu.

Koło. Aby zrobić 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 zrobisz linię.

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

Możesz zmienić rozmiar, kolor i promień zaokrąglenia przycisku. Możesz także dodać do niego cień i obramowanie.

Możesz ustawić podpis przycisku i link w panelu Ustawienia elementu. Tam możesz również ustawić jego rozmiar, typ, krycie i kolor czcionki.

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

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

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

Pamiętaj, aby sprawdzić położenie podpowiedzi na wszystkich rozdzielczościach ekranu po ułożeniu elementów w bloku tak, aby etykieta nie była obcinana na krawędziach bloku.

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

Aby edytować pola wprowadzania, przejdź do panelu Ustawienia elementu i kliknij Pola wprowadzania. Tutaj możesz dostosować pola wprowadzania, 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 połączyć usługi przechwytywania danych z formularzem.

Tilda obsługuje responsywne projektowanie dla wszystkich podstawowych typów ekranów:
1200—maks. (komputery stacjonarne)
980—1200 (tablica pozioma)
640—980 (tabliczka pionowa)
480–640 (smartfon poziomy)
320–480 (smartfon pionowy)

To wystarczy, aby Twój projekt wyświetlał się poprawnie na wszystkich urządzeniach.

Po dostosowaniu Zero Block w głównym obszarze roboczym przełącz typy ekranu i w razie potrzeby dokonaj korekt, takich jak szerokość kolumny tekstu, rozmiar obrazu, rozmiar czcionki, wysokość obszaru roboczego lub układ elementu.

Podświetlane są te ustawienia, które zostały zmienione dla danego typu ekranu. Ustawienia odzwierciedlające ustawienia innego typu ekranu są szare. W ten sposób łatwo sprawdzić, 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 i dla poprzedniego.

Jeśli zmienimy rozmiar czcionki i współrzędne elementu dla danego typu ekranu, wartości przestaną być wyświetlane na szaro. Oznacza to, że nowe ustawienia są unikalne dla tego typu ekranu.

Jeśli klikniesz puste miejsce, zobaczysz Ustawienia obszaru roboczego.

Możesz określić wysokość kontenera siatki w pikselach za pomocą klawiatury. Możesz zmienić wartość, przeciągając krawędź kontenera. Szerokość kontenera siatki jest ustalona na 1200 pikseli.

Możesz dostosować kolor tła całego bloku w Ustawieniach obszaru roboczego.

Możesz przesłać obraz tła dla całego bloku w ustawieniach obszaru roboczego.

Możesz także dostosować renderowanie obrazu tła (Początek filtru/Koniec filtru) i zachowanie zawartości w odniesieniu do obrazu tła: Jeśli ustawisz wartość "Fixed", zawartość (tekst i kształty) będzie się przesuwać podczas przewijania, a obraz pozostanie na swoim miejscu.

Aby blok wyskoczył po kliknięciu przycisku lub łącza, dodaj blok modyfikatora T1093 z kategorii „Inne”.

Na karcie Zawartość bloku określ identyfikator potrzebnego Zero Block (lub wybierz go ręcznie, klikając łącze "Wybierz Zero Block"). Domyślnie link do wyskakującego okienka to link #zeropopup, możesz to zmienić dla dowolnej nazwy, ale na początku należy zachować znak krzyżyka. Wtedy 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 okienka, w artykule "Wyskakujące okienka".

W ustawieniach bloku T1093 możesz wybrać parametry tła (kolor, przezroczystość), kolor ikony zamykania, szybkość animacji,
własny indeks Z i inne parametry.