Створення галереї портфоліо.

Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

Тут ви створюєте сторінку портфоліо: центрований заголовок, три проєкти поруч із фото обкладинки й однорядковим результатом кожен, і заклик до дії. Використовуйте її, щоб показати роботи одним поглядом і дати кожному проєкту посилання на його історію. Щоб детально описати один проєкт, виконайте посібник Створення кейса.

Відео створює сторінку агенції під назвою «Our work».

Перед початком

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Медіабібліотека містить фото обкладинки для кожного проєкту, обрізані в однакових пропорціях.
  • Сторінка відкрита в конструкторі. Для нової перейдіть до Content > Add content > Landing Page (/node/add/landing_page) і натисніть Save.
  • Нові елементи стають угорі свого стовпця, тож кожне фото обкладинки додавайте після свого тексту.

Крок 1: додавання заголовка

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings. У розділі HTML classes виберіть Align text center, потім натисніть Save.
  3. Натисніть + на розділі й виберіть Text на вкладці Content.
  4. Введіть «Our work» як Heading 2, додайте один рядок вступу й натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання сітки проєктів

  1. Наведіть курсор на розділ і натисніть Add Section Below. Відкрийте More > Settings нового розділу, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Text. Введіть назву проєкту як Heading 3, додайте однорядковий результат і натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Image; він стане над текстом. Натисніть Select Image, позначте фото обкладинки й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.
  5. Повторіть для другого й третього стовпця.

Крок 3: додавання заклику до дії

  1. Додайте третій розділ за допомогою Add Section Below і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім фіолетовий Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Contact us», Link на /contact, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Let's work together» як Heading 2 і додайте один рядок. Установіть Font color на білий на панелі Style і натисніть Save.

Крок 4: збереження й попередній перегляд

  1. Натисніть Save на панелі інструментів конструктора.
  2. Відкрийте меню перегляду (піктограма ока) і виберіть Preview.

Далі

Не показано у відео:

  • Link each project: установіть Image link на фото обкладинки на сторінку кейса.
  • Lift on hover: на панелі Style кожного зображення встановіть Border radius на 4, а Drop shadow на 1. У розділі Hover style підніміть Drop shadow до 3.
  • More projects: додайте ще один Row із тим самим пресетом під першим.

Додавання фільтрів до сітки

Статична сітка пасує жменьці проєктів. Щоб відвідувачі фільтрували за типом, зберігайте кожен проєкт як вміст і показуйте їх виглядом із відкритим фільтром. Views це частина ядра Drupal.

1. Створення типу вмісту Portfolio

  1. Перейдіть до Structure > Content types > Add content type (/admin/structure/types/add).
  2. Назвіть його «Portfolio» й збережіть.
  3. На вкладці Manage fields додайте поле Image з міткою «Cover image».
  4. Додайте поле List (text) з міткою «Project type» зі значеннями, як-от web|Web, branding|Branding і campaign|Campaign.
  5. Створіть кілька матеріалів Portfolio в розділі Content > Add content > Portfolio.

2. Створення вигляду

  1. Перейдіть до Structure > Views > Add view (/admin/structure/views/add).
  2. Назвіть його «Portfolio grid»; у розділі View settings показуйте Content типу Portfolio.
  3. Позначте Create a block, установіть формат відображення на Grid із fields і збережіть.
  4. У редакторі вигляду додайте поля Cover image і Title і встановіть сітку на 3 стовпці в її налаштуваннях формату.
  5. У розділі Filter criteria натисніть Add, виберіть Project type і позначте Expose this filter to visitors. Підпишіть його «Filter by type».
  6. У розділі Advanced установіть Use AJAX на Yes. Відкриті фільтри на сторінці конструктора працюють лише через AJAX.
  7. Збережіть вигляд.

3. Вставлення вигляду на сторінку

  1. Назад у DXPR Builder: спорожніть три статичні стовпці або додайте новий Row.
  2. Натисніть +, відкрийте вкладку Drupal Views і виберіть View: Portfolio grid (Block).
  3. У діалоговому вікні налаштувань позначте Show exposed filters і натисніть Save. Сітка покажеться з розкривним списком «Filter by type» над нею, а нові матеріали Portfolio з’являтимуться самі.
  4. Натисніть Save на панелі інструментів конструктора.

Що ви бачите

Центрований заголовок «Our work» відкриває сторінку. На сірій смузі під ним три проєкти стоять поруч, кожен це фото обкладинки над назвою й результатом. Фіолетова смуга завершує сторінку кнопкою Contact us.

Якщо сторінка виглядає не так, як показано

  • Фото обкладинки опинилося під своїм текстом. Фото додано перед текстом, а нові елементи стають угорі свого стовпця. Перетягніть фото над текст за ручку перетягування на його панелі керування.
  • Обкладинки мають різну висоту. Їхні пропорції різняться. Обріжте їх в однакових пропорціях, завантажте знову й виберіть нові копії.
  • Portfolio grid немає на вкладці Drupal Views. Вигляд вимкнено або ваш профіль користувача DXPR Builder його ховає. Увімкніть його в розділі Structure > Views або попросіть адміністратора позначити його в розділі Views вашого профілю користувача.
  • Редактор показує «Turn on Ajax on this view to use exposed filters.» Вигляд не використовує AJAX. Установіть Use AJAX на Yes у розділі Advanced редактора вигляду; див. Елемент виглядає чи поводиться неправильно.
  • Розкривного списку «Filter by type» бракує. Show exposed filters вимкнено на елементі. Відкрийте налаштування елемента вигляду, позначте його й натисніть Save.

Що далі?