Sekcja hero..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz hero wypełniające ekran: zdjęcie tła, nagłówek, jedną linijkę wspierającą i przycisk, przy czym zdjęcie przesuwa się wolniej niż strona, gdy odwiedzający przewijają. Użyj go na górze każdej strony. Całą stronę wokół niego zbuduj potem według marketingowej strony docelowej.

Film buduje hero produktu do raportowania.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma szerokie zdjęcie, co najmniej 1920 pikseli szerokości.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.

Krok 1: dodaj sekcję

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout. Najedź na nią i otwórz More > Settings.
  2. W HTML classes wybierz Align text center, aby nagłówek, tekst i przycisk wyśrodkowały się razem.
  3. Włącz 100% height, aby hero wypełniło ekran, oraz Vertical centering, aby treść siadła pośrodku.
  4. Otwórz panel Style. W Background image kliknij Select Image, zaznacz szerokie zdjęcie i kliknij Insert selected.
  5. Ustaw Background style na Cover, aby zdjęcie wypełniło sekcję.
  6. Wybierz ciemny kolor Background, widoczny, gdy zdjęcie się ładuje. Ustaw Font color na biały, a potem kliknij Save.

Wskazówka

Skompresuj zdjęcie poniżej 500 KB, aby hero ładowało się szybko.

Krok 2: dodaj przycisk

  1. Kliknij + na sekcji i wybierz Button z karty Content.
  2. Ustaw Title na „Start free trial”, Link na /trial, Type na Light dla kontrastu na zdjęciu, a Size na Large, a potem kliknij Save.

Krok 3: dodaj nagłówek

  1. Kliknij + na sekcji jeszcze raz i wybierz Text z karty Content. Ląduje nad przyciskiem, bo nowe elementy lądują na górze.
  2. Wpisz swój nagłówek, „Reporting that keeps up with your team”, i wybierz Heading 2 z listy nagłówków. Motyw drukuje tytuł strony jako jej nagłówek Heading 1. Aby ten nagłówek stał się nagłówkiem Heading 1, zobacz projektowanie stron przyjaznych SEO.
  3. Dodaj jedną linijkę wspierającą: „Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required.”
  4. W panelu Style ustaw Font color na biały, a potem kliknij Save.

Krok 4: dodaj paralaksę

  1. Najedź na sekcję i otwórz More > Settings jeszcze raz.
  2. Otwórz panel Background effects i ustaw Background effect na Parallax image. Parallax speed startuje od 20; przeciągnij do 35 dla mocniejszego efektu i kliknij Save.

Krok 5: dodaj treść pod hero

  1. Najedź na hero i kliknij Add Section Below, aby strona miała treść do przewijania.
  2. Kliknij + na nowej sekcji i wybierz Text z karty Content. Wpisz nagłówek i krótki akapit, ustaw pierwszą linijkę na Heading 2 i kliknij Save.

Krok 6: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka), wybierz Preview i przewiń w dół.

Idź dalej

Niepokazane w filmie:

  • Nakładka: ustaw Background effect na Gradient i wybierz ciemny Start color i End color przy kryciu około 50%. Tekst zostaje czytelny na każdym zdjęciu. Efekt trzyma jedną wartość, więc nakładka zastępuje paralaksę.
  • Krótsze hero: wyłącz 100% height i daj sekcji własne górne i dolne wypełnienie w panelu Style, na przykład 100 pikseli.
  • Szeroki przycisk: włącz Block button, aby przycisk był szeroki jak kolumna.

Warianty

Alternatywy dla budowy z filmu:

Hero z tłem wideo

  1. W panelu Background effects ustaw Background effect na YouTube video.
  2. Wklej URL filmu w YouTube video URL.
  3. W Video options zaznacz Loop i Disable on mobile devices; dźwięk zostaw wyłączony.

Hero tylko z gradientem

Pomiń obraz tła i użyj efektu Gradient z dwoma jednolitymi kolorami marki, aby hero ładowało się szybko.

Dzielone hero

  1. Dodaj Row w sekcji; powstaje z dwiema równymi kolumnami.
  2. Umieść tekst i przycisk w lewej kolumnie, a zdjęcie w prawej.

Efekt

Zdjęcie wypełnia ekran, a twój nagłówek, linijka wspierająca i przycisk Start free trial stoją wyśrodkowane na biało na nim. Gdy przewijasz w dół do drugiej sekcji, zdjęcie przesuwa się wolniej niż strona.

Jeśli nie widzisz hero jak na filmie

  • Hero jest wysokie tylko na swój tekst. 100% height jest wyłączone. Włącz je w ustawieniach sekcji i kliknij Save.
  • Zdjęcie stoi w miejscu, gdy przewijasz. Background effect wciąż stoi na Simple image, Parallax speed to 0 albo pod hero nie ma nic do przewijania. Ustaw Parallax image, przeciągnij Parallax speed powyżej 0 i dodaj drugą sekcję z kroku 5.
  • Nagłówek zostaje ciemny na zdjęciu. Element Text nie ma własnego Font color. Otwórz jego panel Style i ustaw Font color na biały.

Co dalej?