Jak skonfigurować sekcję bohaterów

Okładka to pierwsza rzecz, którą ludzie widzą na Twojej stronie. Wprowadza treść i zachęca do jej obejrzenia lub podsumowuje to, co czyni Twój projekt wyjątkowym. Okładka zazwyczaj zawiera obraz tła: stylowe zdjęcie, atrakcyjny film, kolor, gradient lub teksturę.

Oto kilka wskazówek, które pomogą ci wydajniej pracować z okładkami, tłami i filmami.

W przeciwieństwie do stron czasopism, strony internetowe nie mają stałego widocznego obszaru. Każde urządzenie ma inny rozmiar ekranu i proporcje. Co więcej, widoczne obszary różnią się w zależności od przeglądarki. Na przykład przeglądarki ze stałym paskiem zakładek zapewniają mniejszy widoczny obszar. Obraz okładki jest przycinany, aby wyglądał bez obramowania na ekranie.

Prześlij obraz tła okładki w panelu Zawartość bloku→Obraz tła.

Aby obraz wyglądał świetnie, postępuj zgodnie z poniższymi wskazówkami dotyczącymi najlepszych ustawień obrazu tła.

Jeśli nie jesteś zadowolony z jakości obrazu, edytuj go wcześniej w edytorze graficznym, korzystając z poniższego artykułu referencyjnego

Przed wybraniem zdjęcia, przeczytaj nasz artykuł "Jak stworzyć okładkę dla strony internetowej" na Tilda Education. Zawiera on wskazówki dotyczące tworzenia własnej strony tytułowej i linki do wysokiej jakości witryn z fotografiami stockowymi.

Tekst jest najważniejszą częścią każdej strony tytułowej, ponieważ jest to pierwsza wiadomość, jaką widzi odwiedzający witrynę. Strony tytułowe zawierają nagłówek, podtytuł, opis i górną notatkę, aby przekazać wiadomość i podkreślić to, co jest ważne.

Okładki można wypełnić tekstem na dwa sposoby: korzystając z panelu Zawartość bloku lub klikając tekst podczas edycji strony.

Tekst można formatować zarówno za pomocą panelu sterowania u góry, jak i poprzez zmianę rozmiaru, koloru lub innych parametrów tekstu w panelu Ustawienia bloku → Typografia.

Aby stworzyć fajną okładkę, zapoznaj się z artykułem Jak stworzyć okładkę dla strony internetowej z praktycznymi przykładami kombinacji tekstu i obrazu tła oraz przewodnikiem Tworzenie unikalnej propozycji sprzedaży (USP) dla strony internetowej, aby Twoja strona tytułowa była atrakcyjna dla odwiedzających w mniej niż dziesięć sekund.

Cienka okładka ma wysokość 60% lub 70%, a nie 100%. Pełni ona bardziej formalną funkcję, ponieważ uwaga użytkownika przenosi się na informacje znajdujące się za okładką.

Aby utworzyć taką okładkę, przejdź do pola "Wysokość" w ustawieniach bloku. Możesz ustawić wysokość w pikselach (np. 400px) lub jednostkach miary wysokości rzutni, procentach (1vh to 1% widocznego obszaru). Zalecamy ustawienie wysokości w vh.

Jak zmienić ton obrazu tła
Zmieniamy ton obrazu, gdy chcemy, aby tekst okładki był czytelny. Aby to zrobić, otwórz panel Ustawienia bloku okładki i dostosuj kolor filtra. Tutaj możesz zobaczyć obraz okładki, do którego zastosowano jeden kolor filtra. Czasami do tonowania używany jest kolor marki lub podstawowy kolor strony internetowej.

Jak wtopić kolor w kolor następnego bloku
Czasami pokrywa powinna delikatnie wtapiać się w następny blok. Aby osiągnąć ten efekt, kolor filtra końcowego powinien być ustawiony na 100% krycia. Kolor filtra powinien być taki sam jak kolor następnego bloku.

Dwukrotne zwiększenie wysokości pokrywy przy jednoczesnym zastosowaniu tych dwóch ustawień pomoże uzyskać efekt pokazany poniżej:

Prześlij film do serwisu YouTube lub znajdź tam już istniejący. Następnie przejdź do panelu Treść w bloku okładki i wklej link wideo w odpowiednim polu. W ten sposób można utworzyć okładkę wideo.

Możesz użyć konwerterów online, aby utworzyć filmy WebM i MPEG-4 i hostować je na swoim serwerze lub na stronie internetowej usługi konwertującej. Na przykład gfycat.com umożliwia zarówno konwersję, jak i hosting.

Otwórz panel ustawień bloku okładki i dodaj łącza wideo do odpowiednich pól.

Dlaczego warto używać obu formatów?
Przeglądarki używają różnych formatów, więc nie ma ujednoliconego formatu. Gdy użytkownik wejdzie na Twoją stronę, zobaczy wideo, które może odtworzyć jego przeglądarka. W przeciwnym razie okładka będzie pusta.

Ekrany mają szeroki zakres proporcji, a okładka może wyglądać inaczej na różnych urządzeniach. Podczas gdy zwykłe współczynniki proporcji nie wprowadzą dramatycznych zmian w obrazie okładki, urządzenia mobilne mogą zmienić go nie do poznania. Poświęć trochę czasu, aby dowiedzieć się, jak stworzyć okładkę przyjazną dla urządzeń mobilnych (lub dowolnego innego bloku), korzystając z tego kompleksowego przewodnika.

Dlaczego okładki wideo nie są odtwarzane na urządzeniach mobilnych

Ze względu na specyfikę mobilnego systemu operacyjnego, okładki wideo nie będą odtwarzane na urządzeniach mobilnych. Mobilny system operacyjny wyłącza autoodtwarzanie. Jeśli utworzyłeś okładkę wideo z autoodtwarzaniem, nie zapomnij dodać obrazu w panelu Treść bloku okładki. Obraz pojawi się, gdy wideo nie będzie można odtworzyć, tj. gdy odwiedzający uzyskają dostęp do Twojej witryny ze smartfonów lub tabletów.

Formularz wprowadzania danych można znaleźć na następujących okładkach: CR26 (Okładka z polem wprowadzania danych), CR26AN (Okładka z wieloma polami wprowadzania danych), CR32 (Okładka z formularzem wyrównanym do prawej), CR34 (Okładka z odliczaniem i formularzem subskrypcji), CR36 (Okładka z obrazem lub filmem YouTube i formularzem w dwóch kolumnach)

Możesz wyświetlić podgląd tego, jak będzie wyglądał formularz, odwiedzając Bibliotekę bloków → Okładka i wybierając ulubioną opcję.

Formularze na stronach tytułowych pełnią tę samą funkcję i można je dostosowywać w taki sam sposób, jak zwykłe formularze. Aby dostosować formularz, przeczytaj artykuł Jak skonfigurować formularze przechwytywania danych.

Strony tytułowe bloków CR34 i CR35 zawierają licznik odliczający czas do określonego momentu w przyszłości. Funkcja ta jest szczególnie przydatna w przypadku tworzenia strony promocji lub wydarzenia.

W panelu zawartości tych bloków można ustawić datę, godzinę i strefę czasową rozpoczęcia wydarzenia.

Jeśli data jest ustawiona prawidłowo, na okładce pojawi się zegar.

Bloki zawierające okładki to wypróbowane i przetestowane przykłady dobrego projektu, które automatycznie dostosowują się do wszystkich urządzeń. Czasami jednak trzeba dodać element lub utworzyć niestandardową okładkę. Można to zrobić za pomocą edytora Tilda' Zero Block .

Wiele bloków okładek można przekonwertować na Zero Block w celu dodatkowej edycji. Aby to zrobić, przejdź do ustawień bloku, przewiń w dół i kliknij przycisk "Konwertuj na Zero Block".

Następnie okładka zostanie przekonwertowana na format Zero Block. Format zostanie prawidłowo dostosowany. Jeśli wprowadziłeś już zmiany, nie zostaną one zapisane, więc zachowaj ostrożność podczas konwertowania okładki.