Strona kontaktowa..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę kontaktową: mapę z twoim adresem, trzy sposoby kontaktu, każdy z ikoną, oraz formularz kontaktowy. Użyj jej do strony podlinkowanej w menu jako „Contact”. Sam formularz wewnątrz innej strony umieść zamiast tego według dodawania formularzy do stron.

Film buduje stronę kontaktową urzędu miasta.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Twój formularz kontaktowy istnieje jako blok, na przykład otwarty webform utworzony modułem Webform.
  • 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 mapę

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Kliknij + na sekcji i wybierz Map z karty Content.
  3. Wpisz swój Address, ustaw Map height na 400 i kliknij Save.

Mapa osadza Mapy Google wyśrodkowane na adresie.

Krok 2: dodaj dane kontaktowe

  1. Najedź na sekcję i kliknij Add Section Below. Otwórz More > Settings nowej sekcji, wybierz Align text center w HTML classes, a potem jasnoszary Background w panelu Style. Kliknij Save.
  2. Kliknij + na sekcji i wybierz Row; powstaje z dwiema równymi kolumnami. 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 „Visit us” jako Heading 3, dodaj adres i godziny otwarcia, a potem kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Icon; ląduje nad tekstem. Wybierz zestaw Font Awesome Free Solid, wyszukaj location-dot i kliknij ikonę. Ustaw Size na Extra Large (2x) i kliknij Save.
  5. Powtórz w drugiej kolumnie z „Call us” i ikoną phone, a w trzeciej z „Email us” i ikoną envelope.

Wybierz ten sam Size dla wszystkich trzech ikon, aby wiersz się wyrównał.

Krok 3: dodaj formularz

  1. Dodaj trzecią sekcję opcją Add Section Below i nadaj jej klasę Align text center.
  2. Kliknij + na sekcji i otwórz kartę Drupal Blocks.
  3. Wybierz blok swojego formularza kontaktowego i kliknij Save w jego oknie ustawień; formularz pojawia się w sekcji.
  4. Kliknij + na sekcji jeszcze raz i wybierz Text; ląduje nad formularzem. Wpisz „Send us a message” jako Heading 2, dodaj jedną linijkę i kliknij Save.

Formularze utworzone w Structure > Contact forms (/admin/structure/contact) nie mają bloku w rdzeniu Drupala. Moduł dodatkowy Contact Block dodaje Contact block do tej samej karty.

Krok 4: 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:

  • Dzwoń dotknięciem: zaznacz numer telefonu w tekście, kliknij przycisk linku na pasku narzędzi i wpisz tel:+31104001234
  • Pisz kliknięciem: zaznacz adres i podlinkuj go do mailto:info@example.com
  • Dowolny blok: karta Drupal Blocks osadza bloki twojej witryny, takie jak formularze wyszukiwania, zapisy do newslettera i własne bloki

Efekt

Mapa twojego adresu o wysokości 400 pikseli wypełnia górę strony. Pod nią szary pas pokazuje trzy wyśrodkowane kolumny, każdą z ikoną, nagłówkiem i twoimi danymi. Stronę zamyka formularz pod wyśrodkowanym nagłówkiem „Send us a message”.

Jeśli nie widzisz strony jak na filmie

  • Mapa pokazuje złe miejsce. Mapy Google szukają adresu tak, jak wpisany. Dodaj kod pocztowy, miasto i kraj do Address i zapisz ponownie.
  • Twojego formularza nie ma na karcie Drupal Blocks. Kreator wymienia tylko otwarte formularze webform, a formularze kontaktowe z rdzenia potrzebują modułu Contact Block. Ustaw status formularza webform na Open w Structure > Webforms (/admin/structure/webform).
  • Ikony mają różne rozmiary. Każda ikona trzyma własny Size. Otwórz ustawienia każdej ikony i wybierz ten sam.
  • 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?