Napisz studium przypadku..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu opiszesz jeden projekt klienta w trzech częściach: wyzwanie, rozwiązanie i wyniki. Skończysz z siedmioma pasami: hero ze zdjęciem, przegląd z główną liczbą, wyzwanie, rozwiązanie obok zdjęcia, trzy liczniki, cytat i wezwanie do działania. Wiele projektów na jednej stronie pokaż zamiast tego według galerii portfolio.

Film opisuje pracę agencji dla Northwind Retail.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma szerokie zdjęcie do hero i zdjęcie efektu prac.
  • 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. Kolor widać, gdy zdjęcie się ładuje.
  5. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Visit the site”, Link na URL klienta, Type na Light, a Size na Large, a potem kliknij Save.
  6. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz nazwę klienta jako Heading 2 i jednolinijkowe podsumowanie pod nią. 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 przegląd

  1. Najedź na hero i kliknij Add Section Below. Dodaj Row do nowej sekcji, kliknij jej ikonę siatki (Column layout), wybierz preset 2/3 + 1/3 i kliknij Save.
  2. Kliknij + w szerokiej kolumnie i wybierz Text. Wpisz „Overview” jako Heading 2, dodaj podsumowanie i kliknij Save.
  3. Kliknij + w wąskiej kolumnie i wybierz Text. Wpisz etykietę wskaźnika, „More online orders”, i kliknij Save.
  4. Kliknij + w wąskiej kolumnie jeszcze raz i wybierz Number counter; ląduje nad etykietą. Ustaw End na 32, Suffix na %, Thousands separator na Comma, Speed na 2500, a potem kliknij Save.

Licznik nie ma własnego pola etykiety; robi to za niego element Text pod nim.

Krok 3: dodaj wyzwanie

  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 Text. Wpisz „The challenge” jako Heading 2, opisz problem i kliknij Save.

Krok 4: dodaj rozwiązanie

  1. Dodaj czwartą sekcję, potem Row; powstaje z dwiema równymi kolumnami.
  2. Kliknij + w lewej kolumnie i wybierz Text. Wpisz „The solution” jako Heading 2, opisz zbudowane rozwiązanie i kliknij Save.
  3. Kliknij + w prawej kolumnie i wybierz Image. Kliknij Select Image, zaznacz zdjęcie dostarczonego produktu i kliknij Insert selected. Wpisz Alt attribute w panelu SEO i kliknij Save.

Krok 5: dodaj wyniki

  1. Dodaj piątą sekcję i otwórz jej More > Settings. Wybierz Align text center w HTML classes, potem granatowy Background i biały Font color w panelu Style. Kliknij Save.
  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. W każdej kolumnie dodaj najpierw etykietę Text, a potem licznik Number counter nad nią, jak w kroku 2: End 32 z Suffix %, End 2 z Suffix s oraz End 15000.

Krok 6: dodaj cytat

  1. Dodaj szóstą sekcję.
  2. Kliknij + na sekcji i wybierz Block quote. Wpisz słowa klienta, wypełnij Cite ich imieniem i rolą, a potem kliknij Save.

Krok 7: dodaj wezwanie do działania

  1. Dodaj siódmą 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 „Contact us”, Link na /contact, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Ready to get started?” jako Heading 2 i dodaj jedną linijkę. Ustaw Font color na biały i kliknij Save.

Krok 8: zapisz i podejrzyj

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

Efekt

Nazwa klienta i przycisk Visit the site stoją wyśrodkowane na zdjęciu. Przegląd pokazuje 32% obok podsumowania; odwiedzający widzą liczenie, gdy wjeżdża w widok. Wyzwanie stoi na szarym pasie, a rozwiązanie obok zdjęcia.

Na granatowym pasie trzy wyniki liczą w górę, gdy wjeżdżają w widok: 32%, 2s i 15 000. Stronę zamykają cytat klienta i fioletowy pas Contact us.

Jeśli nie widzisz strony jak na filmie

  • Zdjęcie hero nie wypełnia sekcji. Background style wciąż stoi na Theme defaults. Otwórz panel Style sekcji i ustaw na Cover.
  • Ostatni licznik pokazuje 15000 bez przecinka. Thousands separator wciąż stoi na None. Otwórz ustawienia licznika i wybierz Comma.
  • Etykieta stoi nad licznikiem. Licznik wszedł przed etykietą, a nowe elementy lądują na górze kolumny. Przeciągnij etykietę pod licznik 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?