Створення сторінки послуг.

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

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

Відео створює сторінку послуг цифрової агенції.

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

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

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

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout. Наведіть на нього курсор, відкрийте More > Settings, виберіть темно-синій Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Jumbotron на вкладці Content.
  3. Установіть Title на «Our services», Lead на один рядок про ваші пропозиції, а Type на Primary, потім натисніть Save.

Крок 2: додавання огляду послуг

  1. Наведіть курсор на розділ і натисніть Add Section Below. Дайте новому розділу клас Align text center.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Text. Введіть «Design» як Heading 3, додайте один рядок і натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Icon; він стане над текстом. Виберіть набір Font Awesome Free Solid, знайдіть palette і натисніть піктограму. Установіть Size на Very Large (3x), відкрийте Icon utilities, установіть Style на Circle і натисніть Save.
  5. Повторіть для «Development» з code, а для «Marketing» з bullhorn.

Крок 3: додавання однієї послуги детально

  1. Додайте третій розділ за допомогою Add Section Below, потім Row; спочатку він має два рівні стовпці.
  2. Натисніть + у лівому стовпці й виберіть Image. Натисніть Select Image, позначте фото й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.
  3. Натисніть + у правому стовпці й виберіть Button. Установіть Title на «Get a quote», Link на /contact, а Type на Primary, потім натисніть Save.
  4. Натисніть + у правому стовпці знову й виберіть Text; він стане над кнопкою. Введіть «Design» як Heading 2, додайте опис і склад послуги й натисніть Save.

Крок 4: додавання логотипів клієнтів

  1. Додайте четвертий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes і світло-сірий Background на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Marquee. Видаліть три зразки зображень кнопкою × на кожному. Натисніть Select Image, знайдіть ваші логотипи, позначте чотири з них і натисніть Insert selected. Увімкніть Gray scale і натисніть Save.
  3. Натисніть + на розділі знову й виберіть Text; він стане над бігучим рядком. Введіть «Trusted by leading brands» як Heading 2 і натисніть Save.

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

  1. Додайте п’ятий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім фіолетовий Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Schedule a consultation», Link на /contact, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Ready to get started?» як Heading 2 і додайте один рядок. Установіть Font color на білий і натисніть Save.

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

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

Далі

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

  • One detail section per service: повторіть крок 3 для Development і Marketing. Увімкніть Mirror row у налаштуваннях кожного другого рядка, щоб фото чергували боки на планшетах і комп’ютерах.
  • Jump links: установіть HTML ID кожного детального розділу (design, development, marketing). Додайте Button під кожним оглядовим текстом із Link #design і так далі.
  • Testimonials: додайте Block quote для кожного клієнта над логотипами.

Що ви бачите

Темно-синя смуга відкриває сторінку, з «Our services» великим білим шрифтом над однорядковим підсумком. Далі йдуть три центровані послуги, кожна це піктограма в колі над назвою й рядком. Design отримує власну смугу з фото, описом і кнопкою Get a quote. Сірі логотипи клієнтів пропливають на світлій смузі, а фіолетова смуга завершує сторінку.

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

  • Бігучий рядок досі показує зразки логотипів. Три зразки зображень лишаються, доки ви їх не видалите. Відкрийте налаштування бігучого рядка, натисніть × на кожному зразку й збережіть.
  • Логотипи кольорові. Gray scale вимкнено. Відкрийте налаштування бігучого рядка, увімкніть його й натисніть Save.
  • Піктограми не мають кола. Style міститься на панелі Icon utilities, а не в General. Відкрийте налаштування піктограми, відкрийте Icon utilities і встановіть Style на Circle.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?