Katalog zespołu..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz stronę zespołu: wyśrodkowany nagłówek, trzy karty kierownictwa z linkiem LinkedIn pod trzecią oraz siatkę czterech kart zespołu. Użyj jej, gdy każdy współpracownik ma być łatwy do znalezienia. Krótką sekcję zespołu na stronie firmy zbuduj zamiast tego według strony „o nas”.

Film buduje stronę zespołu firmy logistycznej.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • 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. Dlatego linki społecznościowe wchodzą przed kartą nad nimi.

Krok 1: dodaj nagłówek

  1. Kliknij Add Elements na pustej stronie i wybierz Section z karty Layout.
  2. Najedź na sekcję i otwórz More > Settings. W HTML classes wybierz Align text center, a potem kliknij Save.
  3. Kliknij + na sekcji i wybierz Text z karty Content.
  4. Wpisz „Our team” jako Heading 2, dodaj jedną linijkę wprowadzenia 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 karty kierownictwa

  1. Najedź na sekcję i kliknij Add Section Below. Otwórz More > Settings nowej sekcji, 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 pierwszej kolumnie i wybierz Card. Otwórz jej More > Settings, ustaw Header na rolę, a Title na imię, a potem kliknij Save.
  4. Dodaj Card do drugiej kolumny tak samo.
  5. Kliknij + w trzeciej kolumnie i wybierz Social links. Powstaje z dwoma przykładowymi wierszami. Wpisz linkedin nad „Facebook” w pierwszym wierszu i wpisz URL profilu obok. Usuń drugi wiersz jego krzyżykiem ×, ustaw Style na Circle, a Size na 2x, a potem kliknij Save.
  6. Kliknij + w tej samej kolumnie i wybierz Card; ląduje nad linkami. Ustaw jej Header i Title tak samo i kliknij Save.
  7. Kliknij + na sekcji i wybierz Text; ląduje nad wierszem. Wpisz „Leadership” jako Heading 2 i kliknij Save.

Krok 3: dodaj siatkę zespołu

  1. Dodaj trzecią sekcję opcją Add Section Below, potem Row. Kliknij jej ikonę siatki (Column layout), wybierz preset 1/4 + 1/4 + 1/4 + 1/4 i kliknij Save.
  2. Dodaj Card do każdej kolumny. Otwórz jej More > Settings, ustaw rolę jako Header, a imię jako Title, i kliknij Save.
  3. Kliknij + na sekcji i wybierz Text; ląduje nad wierszem. Wpisz „The team” jako Heading 2 i kliknij Save.

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:

  • Zdjęcia i biogramy: kliknij + na karcie i dodaj biogram Text. Potem kliknij + na karcie jeszcze raz i dodaj Image; ląduje nad tekstem. Wypełnij Alt attribute imieniem osoby.
  • Zaokrąglone zdjęcia: na każdym zdjęciu ustaw Border radius w panelu Style. Wartość jest w pikselach, do 100.
  • Uniesienie po najechaniu: w panelu Hover style karty ustaw Drop shadow na 2.
  • Zespół aktualizujący się sam: utwórz rodzaj treści „Team member” i widok Grid z wyświetlaniem blokowym. Wstaw widok z karty Drupal Views, a redaktorzy dodają osoby bez dotykania strony.

Efekt

„Our team” stoi wyśrodkowane na górze. Na szarym pasie trzy karty kierownictwa pokazują rolę w nagłówku i imię pod nim, z okrągłą ikoną LinkedIn pod trzecią. Za nimi „The team” z czterema kartami obok siebie.

Jeśli nie widzisz strony jak na filmie

  • 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.
  • 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.
  • Ikona LinkedIn siada nad kartą. Karta weszła przed linkami, a nowe elementy lądują na górze kolumny. Przeciągnij kartę nad linki 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?