Strona wydarzenia..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę jednego wydarzenia. Ma hero ze zdjęciem z datą i przyciskiem Register now, szczegóły obok mapy, karty prelegentów i pas zapisów. Użyj jej do dni otwartych, wykładów i webinarów. Całą witrynę na jednej przewijanej stronie zbuduj zamiast tego według jednostronicowej witryny.

Film buduje stronę dnia otwartego uniwersytetu.

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 sekcji 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 „Register now”, Link na stronę rejestracji, Type na Light, a Size na Large, a potem kliknij Save.
  6. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz nazwę wydarzenia jako Heading 2, potem datę i hasło. 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 szczegóły i mapę

  1. Najedź na hero i kliknij Add Section Below. Kliknij + na nowej sekcji i wybierz Row; jej dwie równe kolumny to podział, jakiego potrzebujesz.
  2. Kliknij + w lewej kolumnie i wybierz Text. Wpisz „Event details” jako Heading 2, dodaj po jednej linijce na datę, miejsce i kontakt, a potem kliknij Save.
  3. Kliknij + w prawej kolumnie i wybierz Map. Wpisz Address miejsca, ustaw Map height na 320 i kliknij Save.

Krok 3: dodaj prelegentów

  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. Kliknij jej ikonę siatki (Column layout), wybierz preset 1/3 + 1/3 + 1/3 i kliknij Save.
  3. Kliknij + w każdej kolumnie i wybierz Card. Otwórz jej More > Settings, ustaw Header na sesję, a Title na imię prelegenta i rolę, a potem kliknij Save.

Krok 4: dodaj wezwanie do rejestracji

  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 „Sign up”, Link na stronę rejestracji, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Register today” 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:

  • Zdjęcia prelegentów: kliknij + na karcie i dodaj biogram Text, potem kliknij + na karcie jeszcze raz i dodaj Image; ląduje nad tekstem
  • 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
  • Program: dodaj element Text i wstaw tabelę przyciskiem Table na godzinę, sesję i prelegenta
  • Rejestracja na stronie: zobacz dodawanie formularzy do stron

Efekt

Nazwa wydarzenia, data i przycisk Register now stoją wyśrodkowane na biało na zdjęciu. Pod nimi szczegóły wypełniają lewą połowę, a mapę miejsca prawą. Trzy karty prelegentów stoją na szarym pasie, a fioletowy pas zamyka stronę przyciskiem Sign up.

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.
  • Mapa pokazuje złe miejsce. Mapy Google szukają adresu tak, jak wpisany. Dodaj kod pocztowy, miasto i kraj do Address i zapisz ponownie.
  • Karta nie pokazuje okna ustawień po dodaniu. Karty otwierają się puste, bez okna. Najedź na kartę i otwórz More > Settings, aby wypełnić Header i Title.
  • 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?