Strona „o nas"..

Poznaj DXPR BuilderBuduj stronySamouczek

Tu zbudujesz stronę „o nas”: nagłówek z misją, twoją historię obok zdjęcia, trzy rosnące liczby, karty zespołu i zamykające wezwanie do działania. Użyj jej, gdy jedna strona ma powiedzieć odwiedzającym, kim jesteś. Stronę z listą wszystkich współpracowników zbuduj zamiast tego według katalogu zespołu.

Film buduje stronę dla studia projektowego w Rotterdamie.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma zdjęcie twojego biura, zespołu albo produktu.
  • Strona istnieje: przejdź do Content > Add content > Landing Page (/node/add/landing_page), wpisz „About Us” jako Title i kliknij Save. Strona otwiera się z kreatorem.
  • Na DXPR CMS ukryj tytuł strony motywu na tej stronie: w jej formularzu edycji otwórz DXPR Theme Settings i zaznacz Page Title w DXPR Hide Regions. Title elementu Jumbotron jest wtedy jedynym nagłówkiem Heading 1 na stronie, jak wyjaśnia projektowanie stron przyjaznych SEO.
  • Nowe elementy lądują na górze sekcji albo kolumny. Dodawaj wiersze sekcji albo elementy kolumny w odwrotnej kolejności, albo przeciągnij je potem na miejsce.

Krok 1: dodaj nagłówek misji

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings. Otwórz panel Style, wybierz ciemny odcień Background i kliknij Save.
  3. Kliknij + na sekcji i wybierz Jumbotron z karty Content.
  4. Wpisz misję jako Title: „We build websites people enjoy using”.
  5. Wpisz zdanie wspierające w polu Lead: „A 24-person studio in Rotterdam working with brands across Europe since 2012.”
  6. Ustaw Type na Primary, aby mieć biały tekst na podstawowym kolorze, a potem kliknij Save.

Krok 2: opowiedz historię firmy

  1. Najedź na sekcję i kliknij Add Section Below, + pod nią.
  2. Kliknij + na nowej sekcji i wybierz Row; powstaje z dwiema równymi kolumnami. Kliknij ikonę siatki (Column layout) na wierszu, wybierz preset 2/3 + 1/3 i kliknij Save.
  3. Kliknij + w szerszej kolumnie i wybierz Text. Wpisz „Our story” jako Heading 2, potem dwa krótkie akapity: jak zaczęliście i jak przebiega projekt. Kliknij Save.
  4. Kliknij + w węższej kolumnie i wybierz Image.
  5. Kliknij Select Image, przeszukaj bibliotekę mediów opcją Apply filters, zaznacz zdjęcie biura albo zespołu i kliknij Insert selected.
  6. Otwórz panel SEO, wypełnij Alt attribute i kliknij Save.

Wskazówka

Historię pisz krótko i podziel ją podnagłówkiem. Odwiedzający najpierw skanują, a potem czytają.

Krok 3: dodaj kluczowe liczby z licznikami

  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. W każdej kolumnie dodaj element Text z etykietą liczby: „Projects delivered”, „Years in business”, „Clients who return”.
  4. W każdej kolumnie kliknij + jeszcze raz i wybierz Number counter; ląduje nad etykietą. Ustaw:
    • End: liczba (140, 12, 98)
    • Suffix: „+” albo „%” tam, gdzie pasuje
    • Thousands separator: Comma
    • Speed: 2500, milisekundy liczenia
  5. Kliknij Save na każdym liczniku.

Licznik nie ma własnego pola etykiety, dlatego pod nim stoi element Text.

Krok 4: zbuduj sekcję zespołu

  1. Dodaj czwartą sekcję opcją Add Section Below.
  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 kliknij + i wybierz Card. Otwórz jej More > Settings, ustaw Header na imię i nazwisko osoby („Sofia Andersen”), a Title na jej rolę („Creative Director”), a potem kliknij Save.
  4. Kliknij + na samej sekcji i wybierz Text; ląduje nad wierszem kart. Wpisz „Meet the team” jako Heading 2, wyśrodkuj i kliknij Save.

Krok 5: dodaj sekcję zamykającą

  1. Dodaj ostatnią sekcję opcją Add Section Below i otwórz jej More > Settings. W HTML classes wybierz Align text center, aby tekst i przycisk wyśrodkowały się razem. W panelu Style wybierz kolor marki jako Background i biały jako Font color, a potem kliknij Save.
  2. Kliknij + na sekcji i wybierz Button. Ustaw Title na „Get in touch”, Link na /contact, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + na sekcji jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Want to work with us?” jako Heading 2, potem „We take on a handful of new clients each quarter.” W panelu Style ustaw Font color na biały, a potem kliknij Save.

Krok 6: zapisz i podejrzyj

  1. Kliknij Save na pasku narzędzi DXPR Builder.
  2. Otwórz menu widoku (ikona oka) i wybierz Preview.
  3. Przewiń stronę, aby sprawdzić każdą sekcję.

Idź dalej

Niepokazane w filmie, ale warte dodania:

  • Biogram Text i zdjęcie portretowe Image w każdej karcie oraz Social links pod nią
  • 100% height w ustawieniach pierwszej sekcji, aby nagłówek wypełnił ekran

Efekt

Podgląd pokazuje pięć pasów. Ciemny nagłówek niesie twoją misję i jej wprowadzenie na biało. Twoja historia stoi obok zdjęcia. Na szarym pasie trzy liczby liczą od zera, gdy wjeżdżają w widok.

Nagłówek zespołu stoi wyśrodkowany nad trzema kartami, każda z imieniem i rolą. Pas zamykający centruje biały nagłówek nad jasnym przyciskiem Get in touch. Aby pracować dalej, wybierz Edit w menu oka.

Jeśli nie widzisz strony jak na filmie

  • Na pustej stronie nie ma przycisku Add Elements. Asystent tworzenia stron jest wyłączony, więc strona oferuje tylko Choose a template. Kliknij pusty obszar, aby otworzyć selektor elementów.
  • Nowy element siada nad tym dodanym wcześniej. Kreator wstawia nowe elementy na górze sekcji albo kolumny. Przeciągnij go na miejsce za uchwyt na pasku sterowania.
  • W selektorze brakuje Number counter albo Card. Twój profil użytkownika DXPR Builder je ukrywa. Poproś administratora o zaznaczenie ich w Elements w DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • 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?