Створення односторінкового сайту з гортанням.

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

Тут ви створюєте цілий сайт на одній сторінці: hero-розділ на повну висоту, чиї кнопки стрибають до розділів About, Services і Contact нижче. Кожен розділ має HTML ID, ціль своєї кнопки. Використовуйте його для малого бізнесу, кампанії чи портфоліо. Для сторінки навколо однієї пропозиції натомість виконайте посібник Створення маркетингового лендингу.

Відео створює сайт дизайн-студії під назвою Studio Nord.

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

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

Крок 1: створення hero-розділу

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings. Установіть HTML ID на hero і в розділі HTML classes виберіть Align text center.
  3. Увімкніть 100% height, щоб розділ заповнив екран, і Vertical centering, щоб вміст був посередині.
  4. Відкрийте панель Style. У розділі Background image натисніть Select Image, позначте фото й натисніть Insert selected. Установіть Background style на Cover, виберіть темно-синій Background і білий Font color, потім натисніть Save.
  5. Натисніть + на розділі й виберіть Button. Установіть Title на «Contact», Link на #contact, а Type на Light, потім натисніть Save. Додайте ще дві кнопки так само: «Services» з #services, потім «About» з #about. Кожна стає над останньою.
  6. Натисніть + знову й виберіть Text; він стане над кнопками. Введіть «Studio Nord» як Heading 2 і додайте слоган. Установіть Font color на білий на панелі Style і натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання розділу About

  1. Наведіть курсор на hero-розділ і натисніть Add Section Below. Відкрийте More > Settings нового розділу, установіть HTML ID на about і натисніть Save.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці.
  3. Натисніть + у лівому стовпці й виберіть Image. Натисніть Select Image, позначте фото й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.
  4. Натисніть + у правому стовпці й виберіть Text. Введіть «About» як Heading 2, додайте вашу історію й натисніть Save.

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

  1. Додайте третій розділ за допомогою Add Section Below і відкрийте його More > Settings. Установіть HTML ID на services, виберіть Align text center у розділі HTML classes і світло-сірий Background на панелі Style. Натисніть Save.
  2. Додайте Row, натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Text. Введіть «Branding» як Heading 3, додайте один рядок і натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Icon; він стане над текстом. Виберіть набір Font Awesome Free Solid, знайдіть pen-nib і натисніть піктограму. Установіть Size на Very Large (3x), відкрийте Icon utilities, установіть Style на Circle і натисніть Save.
  5. Повторіть для «Websites» з laptop-code, а для «Analytics» з chart-pie.

Крок 4: додавання розділу Contact

  1. Додайте четвертий розділ і відкрийте його More > Settings. Установіть HTML ID на contact, виберіть Align text center у розділі HTML classes і натисніть Save.
  2. Натисніть + на розділі й виберіть Social links. Введіть linkedin як бренд першого рядка й вставте URL профілю, потім instagram і його URL у другому. Установіть Style на Circle, а Size на 2x, потім натисніть Save.
  3. Натисніть + знову й виберіть Button; він стане над посиланнями. Установіть Title на «Email us», Link на mailto:hello@studionord.example і лишіть Type на Primary, потім натисніть Save.
  4. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Get in touch» як Heading 2, а вашу адресу електронної пошти й номер телефону під ним, потім натисніть Save.

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

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

Далі

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

  • Fixed menu: створіть меню в розділі Structure > Menus > Add menu із одним посиланням на розділ, як-от /studio-nord#about, або <front>#about на головній сторінці. Розмістіть його в регіоні шапки в розділі Structure > Block layout. У DXPR Theme увімкніть Sticky Header у розділі Appearance > Settings > DXPR Theme.
  • Front page: зробіть сторінку головною в розділі Configuration > System > Basic site settings.
  • Contact form: вставте форму з вкладки Drupal Blocks замість вступного тексту; див. Додавання форм на сторінки.

Що ви бачите

Фото заповнює екран із «Studio Nord», слоганом і трьома світлими кнопками. Натискання кнопки плавно гортає сторінку вниз до її розділу. About показує фото команди поруч із історією, Services три піктограми в колах на сірому, а Contact заголовок «Get in touch» і кнопку Email us над двома круглими соціальними піктограмами.

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

  • Кнопка не стрибає до свого розділу. Її Link не відповідає HTML ID розділу. Посилання це # плюс точно той самий ID, наприклад #about для ID about.
  • Розділ стає під вашу фіксовану шапку. Конструктор не знає висоти шапки. У розділі Advanced Settings за адресою DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings) установіть Scroll offset selector на CSS-селектор вашої шапки.
  • Соціальне посилання показує «No matching brand icon found». Бренд не є відомим ім’ям піктограми. Введіть його малими літерами, наприклад linkedin або instagram.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?