Strona docelowa..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz stronę docelową jednej oferty: hero ze zdjęciem z przyciskiem Request a demo, trzy funkcje z ikonami, dwie opinie i zamykające wezwanie do działania. Użyj jej do strony kampanii albo produktu z jednym celem. Całą witrynę na jednej przewijanej stronie zbuduj zamiast tego według jednostronicowej witryny.

Film buduje stronę produktu analitycznego o nazwie Insight.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma szerokie zdjęcie do hero.
  • Strona jest otwarta w kreatorze. Nową utworzysz w Content > Add content > Landing Page (/node/add/landing_page) przyciskiem Save.
  • Nowe elementy lądują na górze sekcji albo kolumny. Dodawaj elementy kolumny w odwrotnej kolejności albo przeciągnij je potem na miejsce.

Krok 1: dodaj hero

  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.
  3. Otwórz panel Style. W Background image kliknij Select Image, zaznacz zdjęcie i kliknij Insert selected. Ustaw Background style na Cover.
  4. Wybierz ciemny granatowy Background i biały Font color, a potem kliknij Save.
  5. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Request a demo”, Link na /demo, Type na Light, a Size na Large, a potem kliknij Save.
  6. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz nagłówek jako Heading 2, a podtytuł pod nim. Ustaw Font color na biały w panelu Style i kliknij Save. 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.

Krok 2: dodaj funkcje

  1. Najedź na hero i kliknij Add Section Below. Nadaj nowej sekcji klasę Align text center.
  2. Kliknij + na sekcji i wybierz Row. Kliknij jej ikonę siatki (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Kliknij + w pierwszej kolumnie i wybierz Text. Wpisz nazwę funkcji jako Heading 3, dodaj jedną linijkę i kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Icon; ląduje nad tekstem. Wybierz zestaw Font Awesome Free Solid, wyszukaj bolt i kliknij ikonę. Ustaw Size na Very Large (3x), otwórz Icon utilities, ustaw Style na Circle i kliknij Save.
  5. Powtórz w drugiej kolumnie z chart-line, a w trzeciej z shield.

Krok 3: dodaj opinie

  1. Dodaj trzecią sekcję opcją Add Section Below. Otwórz jej More > Settings, wybierz jasnoszary Background w panelu Style i kliknij Save.
  2. Kliknij + na sekcji i wybierz Row; powstaje z dwiema równymi kolumnami.
  3. Kliknij + w każdej kolumnie i wybierz Block quote. Wpisz cytat, wypełnij Cite imieniem osoby i rolą, a potem kliknij Save.

Krok 4: dodaj wezwanie do działania

  1. Dodaj czwartą sekcję i otwórz jej More > Settings. Wybierz Align text center w HTML classes, potem fioletowy Background i biały Font color w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Book a walkthrough”, Link na /demo, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „See Insight on your own data” jako Heading 2 i dodaj jedną linijkę. Ustaw Font color na biały i kliknij Save.

Krok 5: zapisz i podejrzyj

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

Idź dalej

Niepokazane w filmie:

  • Formularz leadów: wstaw blok webform z karty Drupal Blocks zamiast ostatniego przycisku; zobacz dodawanie formularzy do stron
  • Ciemniejsze zdjęcie: w panelu Background effects hero ustaw Background effect na Gradient. Wybierz ten sam ciemny kolor przy kryciu około 60% jako Start color i End color
  • Wyższe hero: daj sekcji hero 100 pikseli górnego i dolnego wypełnienia w panelu Style.
  • Zacznij od szablonu: na pustej stronie kliknij Choose a template i wybierz układ strony docelowej; zobacz szablony stron

Efekt

Nagłówek, podtytuł i przycisk Request a demo stoją wyśrodkowane na biało na zdjęciu. Za nimi następują trzy funkcje, każda z ikoną w okręgu nad krótkim nagłówkiem i linijką. Dwa cytaty stoją obok siebie na szarym pasie, a fioletowy pas zamyka stronę przyciskiem Book a walkthrough.

Jeśli nie widzisz strony jak na filmie

  • Ikony nie mają okręgu. Style stoi w panelu Icon utilities, nie w General. Otwórz ustawienia ikony, otwórz Icon utilities i ustaw Style na Circle.
  • Zdjęcie hero nie wypełnia sekcji. Background style wciąż stoi na Theme defaults. Otwórz panel Style sekcji i ustaw na Cover.
  • Ikona siada pod tekstem funkcji. Ikona weszła przed tekstem, a nowe elementy lądują na górze kolumny. Przeciągnij ikonę nad tekst za uchwyt na jej pasku sterowania.
  • Twoje zmiany zniknęły po przeładowaniu. Stronę opuszczono przed kliknięciem Save na pasku narzędzi kreatora. Jeśli Save pokazuje błąd, zobacz Zmiany nie zapisują się.

Co dalej?