Проєктування макета списку блогу.

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

Тут ви створюєте сторінку, що перелічує ваші дописи в блозі: рекомендований допис угорі, список із вигляду Drupal із бічною панеллю й смугу розсилки. Нові дописи з’являються на ній без редагування сторінки. Щоб детально розповісти одну історію клієнта, натомість виконайте посібник Створення кейса.

Відео створює блог звітного продукту.

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

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

Крок 1: додавання рекомендованого допису

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці. Натисніть його піктограму сітки (Column layout), виберіть пресет 2/3 + 1/3 і натисніть Save.
  3. Натисніть + у широкому стовпці й виберіть Image на вкладці Content. Натисніть Select Image, позначте фото й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.
  4. Натисніть + у вузькому стовпці й виберіть Button. Установіть Title на «Read more», Link на допис і лишіть Type на Primary, потім натисніть Save.
  5. Натисніть + у вузькому стовпці знову й виберіть Text; він стане над кнопкою. Введіть заголовок допису як Heading 2, додайте уривок під ним і натисніть Save.

Крок 2: додавання списку й бічної панелі

  1. Наведіть курсор на розділ і натисніть Add Section Below. Додайте до нього Row із пресетом 2/3 + 1/3.
  2. Натисніть + у широкому стовпці й відкрийте вкладку Drupal Views. Виберіть View: Blog (Blog) і натисніть Save; він виведе ваші дописи.
  3. Натисніть + у вузькому стовпці й відкрийте вкладку Drupal Views. Виберіть View: Blog (Featured posts) і натисніть Save.
  4. Натисніть + у вузькому стовпці знову й відкрийте вкладку Drupal Blocks. Виберіть Block: Forms: Search form і натисніть Save; він стане над рекомендованими дописами.

Крок 3: додавання смуги розсилки

  1. Додайте третій розділ за допомогою Add Section Below. Відкрийте його More > Settings, виберіть темно-синій Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Subscribe to the newsletter», Link на /newsletter, а Type на Light, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Stay updated» як Heading 2 і один рядок про розсилку під ним. Установіть Font color на білий на панелі Style і натисніть Save.

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

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

Далі

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

  • Signup form: додайте блок форми розсилки з вкладки Drupal Blocks замість кнопки; див. Додавання форм на сторінки
  • Categories: додайте до бічної панелі вигляд категорій вашого блогу
  • Sidebar tint: відкрийте налаштування вузького стовпця й задайте йому світло-сірий Background і трохи відступів на панелі Style.

Що ви бачите

Рекомендований допис відкриває сторінку: широке фото ліворуч, його заголовок, уривок і кнопка Read more праворуч. Під ним ваші дописи заповнюють широкий стовпець, а в бічній панелі містяться форма пошуку й рекомендовані дописи. Темно-синя смуга завершує сторінку заголовком Stay updated і кнопкою Subscribe to the newsletter.

Якщо дописи не відображаються

  • Вигляду Blog немає на вкладці Drupal Views. Вигляд вимкнено або ваш профіль користувача DXPR Builder його ховає. Увімкніть його в розділі Structure > Views (/admin/structure/views) або попросіть адміністратора позначити його в розділі Views вашого профілю користувача.
  • Стовпець списку лишається порожнім. Вигляд не має опублікованих дописів для показу. Опублікуйте допис у розділі Content > Add content > Blog post, потім перезавантажте сторінку.
  • Форми пошуку немає на вкладці Drupal Blocks. Модуль ядра Search надає цей блок. Увімкніть його в розділі Extend (/admin/modules).
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?