Jednostronicowa witryna..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz całą witrynę na jednej stronie: hero na pełną wysokość, którego przyciski skaczą do sekcji About, Services i Contact poniżej. Każda sekcja niesie HTML ID, cel swojego przycisku. Użyj jej do małej firmy, kampanii albo portfolio. Stronę wokół jednej oferty zbuduj zamiast tego według marketingowej strony docelowej.

Film buduje witrynę studia projektowego o nazwie Studio Nord.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma szerokie zdjęcie do hero i zdjęcie zespołu.
  • 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, więc przyciski hero wchodzą od ostatniego do pierwszego.

Krok 1: zbuduj hero

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings. Ustaw HTML ID na hero, a w HTML classes wybierz Align text center.
  3. Włącz 100% height, aby sekcja wypełniła ekran, oraz Vertical centering, aby treść siadła pośrodku.
  4. Otwórz panel Style. W Background image kliknij Select Image, zaznacz zdjęcie i kliknij Insert selected. Ustaw Background style na Cover, wybierz granatowy Background i biały Font color, a potem kliknij Save.
  5. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Contact”, Link na #contact, a Type na Light, a potem kliknij Save. Dodaj tak samo dwa kolejne przyciski: „Services” z #services, potem „About” z #about. Każdy ląduje nad poprzednim.
  6. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskami. Wpisz „Studio Nord” jako Heading 2 i dodaj 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 sekcję About

  1. Najedź na hero i kliknij Add Section Below. Otwórz More > Settings nowej sekcji, ustaw HTML ID na about i kliknij Save.
  2. Kliknij + na sekcji i wybierz Row; powstaje z dwiema równymi kolumnami.
  3. Kliknij + w lewej kolumnie i wybierz Image. Kliknij Select Image, zaznacz zdjęcie i kliknij Insert selected. Wpisz Alt attribute w panelu SEO i kliknij Save.
  4. Kliknij + w prawej kolumnie i wybierz Text. Wpisz „About” jako Heading 2, dodaj swoją historię i kliknij Save.

Krok 3: dodaj sekcję Services

  1. Dodaj trzecią sekcję opcją Add Section Below i otwórz jej More > Settings. Ustaw HTML ID na services, wybierz Align text center w HTML classes i jasnoszary Background w panelu Style. Kliknij Save.
  2. Dodaj 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 „Branding” 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 pen-nib i kliknij ikonę. Ustaw Size na Very Large (3x), otwórz Icon utilities, ustaw Style na Circle i kliknij Save.
  5. Powtórz dla „Websites” z laptop-code i „Analytics” z chart-pie.

Krok 4: dodaj sekcję Contact

  1. Dodaj czwartą sekcję i otwórz jej More > Settings. Ustaw HTML ID na contact, wybierz Align text center w HTML classes i kliknij Save.
  2. Kliknij + na sekcji i wybierz Social links. Wpisz linkedin jako markę pierwszego wiersza i wklej URL profilu, potem instagram i jego URL w drugim. Ustaw Style na Circle, a Size na 2x, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Button; ląduje nad linkami. Ustaw Title na „Email us”, Link na mailto:hello@studionord.example i zostaw Type na Primary, a potem kliknij Save.
  4. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Get in touch” jako Heading 2, a pod nim swój adres e-mail i numer telefonu, a potem kliknij Save.

Krok 5: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka), wybierz Preview i kliknij przycisk hero, na przykład Contact.

Idź dalej

Niepokazane w filmie:

  • Przyklejone menu: utwórz menu w Structure > Menus > Add menu z jednym linkiem na sekcję, na przykład /studio-nord#about albo <front>#about na stronie głównej. Umieść je w regionie nagłówka w Structure > Block layout. W DXPR Theme włącz Sticky Header w Appearance > Settings > DXPR Theme.
  • Strona główna: ustaw stronę jako główną w Configuration > System > Basic site settings.
  • Formularz kontaktowy: wstaw formularz z karty Drupal Blocks zamiast tekstu wprowadzającego; zobacz dodawanie formularzy do stron.

Efekt

Zdjęcie wypełnia ekran z „Studio Nord”, hasłem i trzema jasnymi przyciskami. Kliknięcie przycisku przewija stronę płynnie w dół do jego sekcji. Sekcja About pokazuje zdjęcie zespołu obok historii, Services trzy ikony w okręgach na szarości, a Contact nagłówek „Get in touch” i przycisk Email us nad dwiema okrągłymi ikonami społecznościowymi.

Jeśli nie widzisz strony jak na filmie

  • Przycisk nie skacze do swojej sekcji. Jego Link nie pasuje do HTML ID sekcji. Link to # i dokładnie to samo ID, na przykład #about dla ID about.
  • Sekcja ląduje pod przyklejonym nagłówkiem. Kreator nie zna wysokości nagłówka. W Advanced Settings w DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings) ustaw Scroll offset selector na selektor CSS twojego nagłówka.
  • Link społecznościowy pokazuje „No matching brand icon found”. Marka nie jest znaną nazwą ikony. Wpisz ją małymi literami, na przykład linkedin albo instagram.
  • 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?