Galeria portfolio..

Learn DXPR BuilderBuild pagesVolg een tutorial

Tu zbudujesz stronę portfolio: wyśrodkowany nagłówek, trzy projekty obok siebie ze zdjęciem okładki i jednolinijkowym wynikiem każdy oraz wezwanie do działania. Użyj jej, aby pokazać prace w skrócie i podlinkować każdy projekt do jego historii. Jeden projekt w głębi opisz zamiast tego według studium przypadku.

Film buduje stronę agencji o nazwie „Our work”.

Zanim zaczniesz

  • Twoja rola ma uprawnienie Edit with DXPR Builder.
  • Biblioteka mediów trzyma zdjęcie okładki każdego projektu, przycięte do tych samych proporcji.
  • 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 kolumny, więc każde zdjęcie okładki wchodzi po swoim tekście.

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 work” 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 siatkę projektów

  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; 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 nazwę projektu jako Heading 3, dodaj jednolinijkowy wynik i kliknij Save.
  4. Kliknij + w tej samej kolumnie i wybierz Image; ląduje nad tekstem. Kliknij Select Image, zaznacz zdjęcie okładki i kliknij Insert selected. Wpisz Alt attribute w panelu SEO i kliknij Save.
  5. Powtórz dla drugiej i trzeciej kolumny.

Krok 3: dodaj wezwanie do działania

  1. Dodaj trzecią sekcję opcją Add Section Below 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 „Contact us”, Link na /contact, Type na Light, a Size na Large, a potem kliknij Save.
  3. Kliknij + jeszcze raz i wybierz Text; ląduje nad przyciskiem. Wpisz „Let's work together” jako Heading 2 i dodaj jedną linijkę. Ustaw Font color na biały w panelu Style 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:

  • Podlinkuj każdy projekt: ustaw Image link na zdjęciu okładki na stronę studium przypadku.
  • Uniesienie po najechaniu: w panelu Style każdego zdjęcia ustaw Border radius na 4 i Drop shadow na 1. W Hover style podnieś Drop shadow do 3.
  • Kolejne projekty: dodaj kolejny Row z tym samym presetem pod pierwszym.

Siatka z filtrem

Statyczna siatka sprawdza się przy kilku projektach. Aby odwiedzający filtrowali według rodzaju, przechowaj każdy projekt jako treść i pokaż je widokiem z odsłoniętym filtrem. Views jest częścią rdzenia Drupala.

1. Utwórz rodzaj treści Portfolio

  1. Przejdź do Structure > Content types > Add content type (/admin/structure/types/add).
  2. Nazwij go „Portfolio” i zapisz.
  3. Na karcie Manage fields dodaj pole Image o etykiecie „Cover image”.
  4. Dodaj pole List (text) o etykiecie „Project type” z wartościami takimi jak web|Web, branding|Branding i campaign|Campaign.
  5. Utwórz kilka elementów Portfolio w Content > Add content > Portfolio.

2. Zbuduj widok

  1. Przejdź do Structure > Views > Add view (/admin/structure/views/add).
  2. Nazwij go „Portfolio grid”; w View settings pokazuj Content rodzaju Portfolio.
  3. Zaznacz Create a block, ustaw format wyświetlania na Grid z fields i zapisz.
  4. W edytorze widoku dodaj pola Cover image i Title oraz ustaw siatkę na 3 kolumny w jej ustawieniach formatu.
  5. W Filter criteria kliknij Add, wybierz Project type i zaznacz Expose this filter to visitors. Nazwij go „Filter by type”.
  6. W Advanced ustaw Use AJAX na Yes. Odsłonięte filtry na stronie kreatora działają tylko przez AJAX.
  7. Zapisz widok.

3. Wstaw widok na stronę

  1. Wróć do DXPR Builder, opróżnij trzy statyczne kolumny albo dodaj nowy Row.
  2. Kliknij +, otwórz kartę Drupal Views i wybierz View: Portfolio grid (Block).
  3. W oknie ustawień zaznacz Show exposed filters i kliknij Save. Siatka renderuje się z listą „Filter by type” nad nią, a nowe elementy Portfolio pojawiają się same.
  4. Kliknij Save na pasku narzędzi kreatora.

Efekt

Wyśrodkowany nagłówek „Our work” otwiera stronę. Na szarym pasie pod spodem trzy projekty stoją obok siebie, każdy ze zdjęciem okładki nad nazwą i wynikiem. Fioletowy pas zamyka stronę przyciskiem Contact us.

Jeśli nie widzisz strony jak na filmie

  • Zdjęcie okładki siada pod tekstem. Zdjęcie weszło przed tekstem, a nowe elementy lądują na górze kolumny. Przeciągnij zdjęcie nad tekst za uchwyt na jego pasku sterowania.
  • Okładki mają różne wysokości. Ich proporcje się różnią. Przytnij je do tych samych proporcji, wgraj ponownie i wybierz nowe kopie.
  • Widoku Portfolio grid nie ma na karcie Drupal Views. Widok jest wyłączony albo twój profil użytkownika DXPR Builder go ukrywa. Włącz go w Structure > Views albo poproś administratora o zaznaczenie go w Views w twoim profilu użytkownika.
  • Edytor pokazuje „Turn on Ajax on this view to use exposed filters.” Widok nie używa mechanizmu Ajax. Ustaw Use AJAX na Yes w Advanced w edytorze widoku; zobacz Element wygląda albo działa źle.
  • Listy „Filter by type” nie ma. Show exposed filters jest wyłączone na elemencie. Otwórz ustawienia elementu widoku, zaznacz je i kliknij Save.

Co dalej?