Як зробити односторінковий сайт

Сайти односторінники чудово підходять, щоб розповісти про свій бізнес, красиво оформити портфоліо або прорекламувати захід: курси, вебінар, майстер клас чи конференцію.

У конструкторі SitePro на нашому хостингу ви можете зібрати сайт по шматочках у простому візуальному редакторі, навіть якщо раніше ніколи не робили сайти. У цій покроковій інструкції показуємо, як це зробити.

Зміст

1. Початок роботи
2. Секція №1. Титульний банер
3. Секція №2. Іконки
4. Секція №3. Послуги та ціни
5. Секція №4. Галерея
6. Секція №5. Відгуки
7. Секція №6. Про нас
8. Секція №7. Контакти
9. Секція №8. Підвал сайту
10. Секція №9. Шапка сайту

Що вийде в результаті

Ось приклад односторінного сайту, який ми будемо створювати в цій інструкції. Роздивитися його у детилях ви можете за адресою sitepro.hostiq.tk.

У якості теми для односторінника ми обрали барбершоп, але ця інструкція підійде і для інших схожих бізнесів (які продають послуги за записом). Наприклад, тату-студії, салону манікюру, пірсингу чи масажу, студії вокалу, школи або курсів тощо.

У односторінника в інструкції будуть універсальні розділи: титульний банер, прайс-лист на послуги, галерея, відгуки, контакти. Ви навчитеся створювати розділи з нуля і, якщо потрібно, зможете за таким же принципом додати інші блоки. Наприклад, блок з акціями або популярними запитаннями до вашого бізнесу.

У майбутньому, якщо знадобиться розширити сайт і додати додаткові сторінки, магазин чи версію ще однією мовою, це теж можна буде зробити. Про це ви можете прочитати в інших інструкціях у нас на сайті.

Початок роботи

Після того як ви замовите хостинг, на вашу пошту прийде лист із темою «Доступи до вашого конструктора та сайту». У ньому буде посилання на редактор сайту. Додайте це посилання у вибране у браузері, щоб у вас був швидкий доступ до редактора.

1. Оберіть шаблон

Коли ви вперше зайдете до редактора, вам запропонують обрати шаблон односторінника. Ви можете обрати готовий сайт і просто замінити його вміст на власний, але ми в цій інструкції покажемо, як зробити односторінковий сайт з нуля. Тому обираємо «Порожній шаблон».

Створення односторінкових сайтів з нуля — довше і трохи складніше, ніж за допомогою готових шаблонів, але так ви краще зрозумієте принцип побудови сторінок. Якщо в майбутньому знадобиться додати або переробити якусь секцію, вам буде легше це зробити.

2. Запам’ятайте основні моменти роботи з конструктором

Після вибору порожнього шаблону відкриється редактор. У його шапці ви побачите блоки для створення сайту, трохи нижче буде область із вмістом, куди ці блоки потрібно перетягувати, а праворуч — бічна панель, де можна редагувати параметри блоків.

Щоб перевірити перед публікацією, як виглядає односторінник, натисніть кнопку «Попередній перегляд» у верхньому лівому куті конструктора.

Щоб зберегти прогрес, наведіть курсор на кнопку «Опублікувати» у лівому верхньому куті конструктора та виберіть у випадаючому списку «Зберегти чернетку».

Щоб побачити, як виглядає сайт на різних пристроях, перемкніться на режим перегляду з потрібного пристрою у рядку між шапкою конструктора та областю для роботи із вмістом сайту.

І насамкінець ще один момент — не відкривайте конструктор одночасно у двох вкладках або з кількох пристроїв, інакше зміни можуть не зберегтися і все доведеться робити заново.

3. Створіть стилі для тексту

Мова про шрифт, розмір тексту та інші параметри. Стандартні стилі вам швидше за все не підійдуть. Змінити все це простіше одразу, перш ніж переходити до створення односторінника. Так вам не доведеться відволікатися на це по ходу інструкції, просто одразу обиратимете потрібний стиль і все.

Робиться це у налаштуваннях сайту. У верхньому правому куті конструктора натисніть на значок шестерні і перейдіть в розділ «Стилі».

У вікні, що відкриється, зліва будуть перераховані всі стилі, які зараз є в конструкторі, а праворуч будуть три вкладки з налаштуваннями обраного стилю.

• На вкладці «Стандарт» змінюється все найголовніше: шрифт, розмір тексту та його колір. А також висота рядка, відстань між літерами та вирівнювання. Результат буде видно одразу ж — у вікні «Перегляд» трохи нижче.
• На вкладці «Посилання» змінюється зовнішній вигляд посилань, оформлених обраним стилем. Тут ви можете обрати, якого кольору вони повинні бути за замовчуванням та при наведенні, а також додати підкреслення.
• На вкладці «Додатково» змінюється регістр та масштаб тексту. Можна зробити так, щоб усі літери були великими, а також обрати, скільки відсотків від основного розміру текст має займати на комп’ютерах, планшетах та смартфонах.

Хоча в меню ліворуч і багато стилів, на практиці зазвичай використовуються лише чотири з них: звичайний текст та перші три рівні заголовків. Покажемо, які параметри для цих стилів ми використовували, на випадок, якщо ви захочете використовувати такі ж. Інші стилі відредагуйте самі за потреби.

Звичайний текст. Використовуватиметься найчастіше на сайті. Ось значення, які ми використовували для цього стилю на демонстраційному сайті.

Заголовки H1. Використовуйте цей заголовок лише один раз на сторінці для оформлення титульного заголовка. Так правильніше з точки зору SEO.

Ми використовували білий колір, тому що у титульного банера темний колір. Налаштування на вкладці «Посилання» не змінювали, тому що в заголовках зазвичай посилання не ставлять.

Заголовки H2. Цим стилем добре оформляти заголовки розділів. Він не такий великий як H1, але все одно виглядає солідно.

Заголовки H3. Цей стиль підійде для підзаголовків у колонках. Більше, ніж звичайний текст, але майже вдвічі менше, ніж заголовок H2 (не перетягуватиме з нього увагу).

Після зміни параметрів стилю тексту не забудьте натиснути кнопку «Застосувати».

На цьому підготовку до роботи закінчено. Стилі для тексту створили, саме час створити односторінник 🙂

Секція №1. Титульний банер

Титульний банер це перше, що побачить людина, коли зайде на сайт. Зазвичай на ньому розміщують привабливе зображення, назву та опис сайту. Можливо, також логотип і кнопку прокручування до наступного розділу або можливість зробити замовлення/записатися на прийом.

Крок 1: Створити контейнер

Це робиться за допомогою блоку «Макет». Перетягніть його з шапки конструктора в область для роботи з сайтом, трохи нижче зони для шапки сайту (її межі позначені пунктиром). Для зручності місце, куди приземлиться блок підсвічується синім.

У спливаючому вікні оберіть структуру з однієї колонки.

Одразу додайте відступи усередині секції. Вони потрібні, щоб на екранах смартфонів вміст секцій не прилипав до меж екрана або до кордонів іншої секції. Уявіть, що ці відступи це як поля у книзі — невелика рамка заради естетики.

Знайдіть на бічній панелі розділ «З інтервалом» та замініть стандартні значення у блакитних полях. Можете використовувати перевірені стандартні значення: 60 пікселів зверху та знизу, 20 пікселів з боків.

І останній нюанс — додайте для секції назву та якірне посилання. Робиться це також на бічній панелі у розділі «Додатково». В опції «Зробити якорем» впишіть «home», а в опції «Ім’я» впишіть «Титульний банер». Як на скріншоті нижче.

Назва якоря потрібна для майбутнього меню у шапці сайту — щоб прив’язати якір до кнопки «Головна» і відвідувач сайту міг повернутися до початку односторінника, натиснувши на цю кнопку.

Ім’я секції необхідне для порядку. Зверніть увагу на розділ «Структура сторінки» у верхній частині бічної панелі. Розкривши його, ви побачите всі елементи на вашому сайті у їхній ієрархії. Поки тут майже нічого немає, але в кінці інструкції тут будуть десятки рядків. Ім’я секції допоможе не заплутатися і в майбутньому швидше знаходити конкретні блоки у конкретній секції.

Крок 2: Додати зображення

Як титульне зображення може бути фотографія вашого робочого місця, ви за роботою або гарна композиція ваших робочих аксесуарів. Пам’ятайте, що це фото — перше, що побачить відвідувач. Для фотографій на сайт не гріх найняти навіть професійного фотографа.

На бічній панелі знайдіть розділ «Макет» і в самому його верху клацніть по опції «Фон».

У спливаючому вікні клацніть по опції «Зображення/Відео».

З’явиться ще одне спливаюче вікно, де буде кнопка «Додати». Натисніть і оберіть зображення у себе на комп’ютері. Потім закрийте спливаюче вікно, натиснувши кнопку «Вибрати» у нижньому правому кутку.

Перше спливаюче вікно все ще буде відкрито. У ньому можна змінити параметри доданого щойно зображення:

• Опція «Непрозорість» накладає на фото колір, який можна обрати трохи лівіше. Це підвищить читабельність тексту, який буде поверх зображення.
• Опція «Позиція» регулює, на якій частині зображення буде акцент на маленьких екранах. Бо на них зображення зазвичай обрізається. Щоб перевірити, як це буде виглядати, закрийте спливаюче вікно і під шапкою конструктора, де знаходяться блоки, переключіться на режим перегляду з екрану смартфона.
• Опція «Повторити» робить так, що зображення починає повторюватися по заданій осі, якщо розмір зображення менший за розмір екрана. Якщо поставите галочку в пункті «Не прокручувати фон», додасться цікавий ефект: при прокручуванні сайту зображення не рухатиметься, натомість на нього ніби наїжджатиме контент, який розташований нижче.
• Опція «Розмір» регулює розмір зображення. У випадаючих списках замість варіанта «авто» ви можете зазначити конкретний розмір у пікселях або відсотках. Якщо зняти галочку з пункту «Авто», замість випадаючих списків з’явиться два шаблонні варіанти розміру: 1) заповнити зображення по висоті контейнера; 2) заповнити зображення по ширині контейнера.

На скріншоті зверху вказані параметри за замовчуванням. А нижче ви побачите як ми їх змінили для нашого демонстраційного сайту. Спробуйте наші налаштування та подивіться, чи подобається вам, як зображення виглядає на різних екранах. Може, у вашому випадку доведеться спробувати дещо інші параметри.

Наступний момент — висота зображення. За замовчуванням вона дорівнюватиме висоті блоку «Макет», а вона не така вже й велика. Титульний банер навпаки часто роблять на весь перший екран.

Щоб збільшити висоту блоку «Макет», знайдіть на бічній панелі знайдіть розділ «Розмір» і в опції «Висота» змініть значення «Мін.» — мінімальну висоту. Для демонстраційного сайту ми обрали 650 пікселів. Майже весь екран.

Крок 3: Додати логотип

Найкраще на титульному банері виглядатиме світлий логотип. Якщо у вас він чорного кольору, можете спробувати перевести його у світлі тони або додати світлу плашку у фотошопі.

Коли будете готові, перетягніть на банер із верхньої панелі конструктора блок «Картинка». Після цього з’явиться спливаюче вікно, де потрібно обрати стиль зображення. Оберіть перший.

На наступному екрані натисніть кнопку «Додати» та оберіть логотип на комп’ютері. Після цього натисніть «Вибрати» у нижньому правому кутку.

Якщо після додавання логотип буде занадто великого розміру, це можна змінити у розділі «Розмір» на бічній панелі. Замініть значення у клітинках «Мін» та «Макс» для висоти та ширини.

Крок 4: Додати назву сайту

Перетягніть блок «Текст» із верхньої панелі конструктора та розмістіть його під логотипом. У спливаючому вікні оберіть один із стандартних стилів конструктора. Обирайте будь-який, бо через хвилину ви все одно застосуєте стиль, який створили раніше.

Після вибору стилю двічі клацніть по тексту або натисніть на спливаючій панелі кнопку «Редагувати текст». Далі замініть шаблонний текст на свій та оберіть стиль «Heading 1» у каруселі.

Далі назва сайту з новим стилем, швидше за все, прилипне до логотипу. Додайте перед заголовком відступ, щоб це виправити. Для цього знайдіть на бічній панелі розділ «З інтервалом» і змініть зверху в помаранчевому полі замість значення з нуля на кілька десятків пікселів. Як на скріншоті.

Крок 5: Додати кнопку

Перетягніть з верхньої панелі конструктора блок «Кнопка» та розмістіть його під назвою сайту. У спливаючому вікні оберіть перший із стандартних стилів кнопки. Далі розкажемо, як його змінити.

Зверніть увагу, що для кнопки автоматично додасться такий самий відступ, як і для заголовка. Ш — штучний інтелект! 🙂

На бічній панелі в розділі «Button» можна змінити текст на кнопці, його шрифт, розмір і колір (звичайний і при наведенні). А також додати посилання, яке має відкритися при натисканні кнопки.

Використовуйте шрифт, який обрали для заголовка Heading 1. У нашому випадку — класичний Open Sans. На скріншоті ви можете бачити решту параметрів, які ми використовували.

Колір фону на вкладці «Стандартний» ми змінили на білий, а колір тексту на чорний. Щоб кнопка була помітною на темному тлі. На вкладці «При наведенні» ми обрали оранжеве тло (як у посилань при наведенні) та білий шрифт. Код помаранчевого кольору вказано на скріншоті.

Щоб змінити розмір кнопки, просто збільшіть відступи всередині кнопки в розділі «З інтервалом». Для свого сайту ми просто подвоїли значення у блакитних полях.

У помаранчевій секції ми також додали відступ кнопки від назви сайту заради оптичної компенсації. На попередньому перегляді вона виглядала надто близько до нього.

Секція №2. Іконки з базовою інформацією: адреса, телефон, час роботи

Це важлива інформація, яку не зайве повідомити одразу. На випадок, якщо відвідувач вже чув про ваш бізнес і зайшов на сайт за номером телефону або інформацією, як вас знайти.

Крок 1: Створити контейнер

Перетягніть блок «Макет» з верхньої панелі конструктора та розмістіть його одразу під титульним банером. Будьте обережні, щоб випадково не розмістити блок у зоні підвалу сайту. Його межі вказані пунктирною лінією.

Місце, куди приземлиться блок, підсвічується блакитним кольором. Якщо підсвічування виглядає так, блок опуститься в зону підвалу.

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

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

Конструктор одразу ж додасть відступи всередині, як у попередньої секції. Запам’ятовує, намагається.

Далі відкрийте на бічній панелі розділ «Додатково», щоб вказати назву якоря та ім’я секції. У полі «Зробити якорем» впишіть «icons», а в полі «Ім’я» впишіть «Іконки».

Тепер перетягніть ще один блок «Макет» і розмістіть його всередині щойно створеної секції.

У спливаючому вікні оберіть структуру з трьох колонок.

На екранах смартфонів ці колонки розташовуватимуться одна над одною. Щоб вони візуально не були надто близько одна до одної, є сенс збільшити відступи зверху та знизу кожної колонки.

Для цього оберіть одну з колонок і на бічній панелі у розділі «З інтервалом» змініть стандартні значення у верхньому та нижньому помаранчевому полях. Потім зробіть те саме і для інших колонок.

Далі — змініть фон секції на світло-сірий. Це варто зробити, щоб трохи урізноманітнити зовнішній вигляд односторінника. Декілька наступних секцій будуть з білим тлом.

Оберіть основний контейнер секції та клацніть по кнопці «Фон» у розділі «Макет» на бічній панелі.

У спливаючому вікні оберіть світлий відтінок сірого, щоб не заважав читати текст. Наприклад, введіть значення F1F1F1 у комірку праворуч від палітри.

Крок 2: Додати іконки

Додатково завантажувати іконки не знадобиться, у конструкторі є вбудована бібліотека від Font Awesome. Там є все, що нам потрібно: телефон, локація та годинник. Якщо вам захочеться якісь інші іконки, в інтернеті багато сайтів, де їх можна знайти. Просто загуглить «безкоштовні іконки».

Перетягніть в одну з колонок з верхньої панелі блок «Картинка». У спливаючому вікні перейдіть стандартні стилі зображень і під ними побачите іконки. Тут вони не всі, вам потрібно вибрати будь-яку, потім замініть на потрібну.

На бічній панелі у розділі «Зображення» змініть колір іконки, якщо потрібно. А в розділі «Розмір» зменшніть мінімальну/максимальну висоту та ширину. Наприклад, до 100 пікселів.

Після цього додайте іконки до інших колонок. Щоб не відтворювати розмір та колір іконки заново, клацніть по блоку із вже доданою іконкою правою кнопкою миші та у спливаючому меню виберіть «Дублікат». Потім перетягніть дублікат у нову колонку.

Щоб змінити іконку, оберіть її та на бічній панелі клацніть на її зображенні у розділі «Картинка». Відкриється спливаюче вікно з усіма іконками. У рядку пошуку ви можете ввести ключові слова англійською, щоб знайти потрібну. Наприклад, «map» чи «clock».

Крок 3: Додати заголовки

Перетягніть під іконку блок «Текст» та оберіть будь-який стиль у спливаючому вікні.

Клацніть по тексту двічі або натисніть кнопку «Редагувати текст» на спливаючій панелі. Замініть шаблонний текст на свій та оберіть стиль «Heading 3» у каруселі.

Після цього додайте відступ перед заголовком. На бічній панелі в розділі «З інтервалом» змініть стандартне значення у верхньому помаранчевому полі. 10-20 пікселів буде достатньо.

Таким самим чином продублюйте заголовки для інших колонок.

Крок 4: Додати текст

Перетягніть ще один блок «Текст» під створений заголовок в одній з колонок. У спливаючому вікні знову виберіть будь-який стиль зі стандартних.

Клацніть по тексту двічі або натисніть кнопку «Редагувати текст» на спливаючій панелі. Замініть шаблонний текст на свій та оберіть стиль «Normal» у каруселі.

Зверніть увагу, що при виборі цього стилю на спливаючій панелі в лівому верхньому куті горить буква «B». З цієї причини текст виходить жирним, хоча в параметрах стилю цього не вказано.

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

Далі подібним чином додайте описи до інших колонок.

Секція №3. Послуги та ціни

Ціна — один із головних критеріїв при виборі послуг. Якщо ціна не влаштовує, все інше відвідувачу може бути вже не цікаво. Тому блок з цією інформацією слід розмістити близько до початку сторінки.

Крок 1: Створити контейнер

Як завжди, спочатку додайте блок «Макет» прямо за попереднім макетом. Оберіть структуру з однієї колонкою. На бічній панелі перейдіть до розділу «Додатково», щоб вписати ім’я блоку та якірне посилання. У полі «Зробити якорем» впишіть «services», а в полі «Ім’я» впишіть «Послуги та ціни».

Крок 2: Додати заголовок

Перетягніть у макет блок «Текст». У спливаючому вікні зі стилями тексту оберіть будь-який із стандартних стилів. Потім клацніть по тексту двічі або натисніть кнопку «Редагувати текст» на спливаючій панелі. Замініть шаблонний текст на «Наші послуги» та оберіть стиль «Heading 2» у каруселі.

Крок 3: Додати список послуг з цінами

Перетягніть під заголовок блок «Макет» і оберіть структуру з двох колонок у спливаючому вікні.

Далі, щоб макет не прилипав до заголовка, знайдіть на бічній панелі розділ «З інтервалом» і додайте до макету відступ зверху — змініть стандартне значення верхнього помаранчевого поля з нуля на 50.

Тепер почнемо створювати прайс-лист. Спочатку перетягніть у ліву колонку блок «Фігура». Це буде розділова лінія між послугами.

У спливаючому вікні з фігурами оберіть фігуру з лінією із крапок.

У розділі «Line» на бічній панелі конструктора можна змінити стиль лінії, її колір і товщину. У розділі «Розмір» змінюється висота цього блоку. Це потрібно, щоб лінія була трохи ближче до тексту. Параметри, які ми використовували, вказані на скріншоті нижче.

Далі перетягніть у ліву колонку блок «Текст» і розташуйте його над розділовою лінією. Це буде назва однієї з ваших послуг.

У спливаючому вікні оберіть будь-який із стандартних стилів, клацніть двічі по тексту, щоб замінити шаблонний текст на свій, потім оберіть на плашці стиль «Normal».

Після цього перетягніть ще один блок «Текст» та розмістіть його праворуч від блоку з назвою послуги. Це буде її ціна. Так само оберіть будь-який із стандартних стилів, замініть шаблонний текст і застосуйте стиль «Normal».

Як бачите, після додавання другого блоку з текстом, ця композиція із трьох блоків поки що виглядає некрасиво. Два блоки з текстом розташувалися в одному контейнері, а роздільник в іншому.

Щоб виправити положення блоків, розкрийте розділ «Структура сторінки» на бічній панелі. Ви побачите, що блок «Лінія» стоїть не на одному рівні з двома блоками «Текст». Його треба вручну перетягнути під нижній блок «Текст», щоб він також опинився вкладеним у «Горизонтальний макет».

Тепер розведемо блоки з текстом по різним бокам колонки. Для цього оберіть контейнер, де знаходяться блоки з текстом. На спливаючій плашці над контейнером натисніть кнопку, на якій два елементи розташовані поруч із вертикальними межами. При наведенні на цю кнопку з’явиться її назва — «Простір між».

І останній штрих — виправимо зовнішній вигляд цього блоку на мобільних телефонах. Для цього перейдіть на вигляд з мобільного в рядку між робочою областю конструктора та його шапкою.

Як бачите, на екранах смартфонів назва послуги та її ціна розташовуватимуться не поруч одна з одною, а одна над одною.

Щоб зробити так, щоб блоки відображалися в один рядок навіть на смартфонах, знайдіть на бічній панелі розділ «Макет» і зніміть галочку в пункті «Переключіться на вертикальне розміщення на менших екранах».

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

Оберіть цей контейнер у лівій частині екрана. Клацніть десь у ньому правою кнопкою миші та натисніть «Дублікат» у спливаючому вікні. Далі змініть текст із ціною та продовжуйте дублювати контейнери, доки не перерахуєте всі послуги.

Крок 4: Додати відступи навколо колонок

В результаті, коли ви додасте всі послуги, у вас має вийти щось подібне.

На вигляд все нормально, єдине — вміст колонок розташовується якось надто близько до країв сайту і один до одного. Щоб виправити це, оберіть ліву колонку, на бічній панелі знайдіть розділ «З інтервалом» та змініть стандартні значення у помаранчевих полях. Зліва зробіть 50 пікселів, праворуч — 20.

Потім те саме зробіть з іншою колонкою, тільки навпаки зліва зробіть 20 пікселів, праворуч — 50.

Після цього у попередньому перегляді секція виглядатиме краще.

Секція №4. Галерея

Припустимо, відвідувачу сподобався ваш сайт на перший погляд, ви працюєте для нього у зручному місці та у зручний час, ціна підходить. Покажіть йому результат своєї роботи, щоб допомогти скласти подальшу думку.

Крок 1: Створити контейнер

За традицією спочатку додайте блок «Макет» одразу за попереднім макетом. Оберіть структуру з однієї колонки у спливаючому вікні. Потім перейдіть до розділу «Додатково» на бічній панелі, щоб вписати ім’я блоку та якірне посилання. У полі «Зробити якорем» впишіть «gallery», а в полі «Ім’я» впишіть «Галерея».

Крок 2: Додати заголовок

Перетягніть у макет блок «Текст». У спливаючому вікні оберіть будь-який із стандартних стилів. Потім клацніть по тексту двічі або натисніть кнопку «Редагувати текст» на спливаючій панелі. Замість шаблонного тексту впишіть «Галерея» та виберіть стиль «Heading 2» у каруселі.

Крок 3: Додати галерею

Перетягніть у макет блок «Галерея» та розмістіть його під заголовком. У спливаючому вікні із заготовленими стилями виберіть перший стиль.

Одразу після додавання галереї додайте відступ зверху, щоб вона не прилипала до заголовка секції. Для цього на бічній панелі знайдіть розділ «З інтервалом» і додайте у верхньому помаранчевому полі 50 пікселів.

Тепер завантажте фотографії замість шаблонних. Для цього на бічній панелі знайдіть розділ «Галерея» та клацніть по опції «Зображення».

У спливаючому вікні — Менеджері зображень галереї — видаліть всі шаблонні фото з галереї, потім натисніть «Додати фотографії» у нижньому лівому куті вікна.

Відкриється менеджер завантажень конструктора. У ньому ви побачите ті самі шаблонні зображення. Хоча ви щойно видалили їх із галереї, у пам’яті конструктора вони ще присутні. Якщо бажаєте, видаліть їх і звідси.

Далі натисніть нагорі кнопку «Завантажити фотографію», оберіть на комп’ютері фото, які мають бути в галереї, після чого натисніть у нижньому правому кутку кнопку «Застосувати».

Знову відкриється менеджер зображень галереї, але цього разу будуть лише завантажені вами фотографії. Отже, ви все зробили правильно. Натисніть «Застосувати» у нижньому правому кутку.

Фотографії у галереї оновляться. Тепер тут лише ваші фото. На бічній панелі розділу «Галерея» ви можете додати ще фото або навпаки видалити зайві. Також там можна змінити стиль галереї.

У розділі «Мініатюри» на бічній панелі можна збільшити ширину кожної з мініатюр, а також відступ між ними. Ми збільшили стандартну ширину до 100 пікселів, після чого у робочій області замість трьох колонок стало дві. Насправді колонок все одно буде три, вони просто не влазять. Якщо ви відкриєте сайт у попередньому перегляді, ви це побачите.

За великим рахунком, це всі розділи, які вам знадобляться. Хіба що ви плануєте додати до фотографій підписи — їхній вигляд налаштовується у розділі «Підписи» на бічній панелі.

Також є розділ «Анімація», де ви можете налаштувати для фотографій ефект за промовчанням (він буде видно, коли людина вперше доскроліт до галереї) або ефект при наведенні на якусь окрему фотографію.

Секція №5. Відгуки

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

Можна було, звичайно, вручну зібрати кожен відгук з блоків, але це довго і додавати нові відгуки у майбутньому буде запарно. Використаний нами спосіб швидше, простіше та все одно виглядає акуратно. Головне — знайти нормальні пропорції при обрізанні скріншотів, щоб не обрізати випадково якийсь із відгуків.

Крок 1: Створити контейнер

Вкотре додайте блок «Макет» відразу за попереднім макетом. Оберіть структуру з однієї колонки у спливаючому вікні. Потім на бічній панелі відкрийте розділ «Додатково» і в полі «Зробити якорем» впишіть «Reviews», а в полі «Ім’я» впишіть «Відгуки».

Крок 2: Додати заголовок

Перетягніть у макет блок «Текст». Оберіть будь-який із стандартних стилів у спливаючому вікні. Потім клацніть по тексту двічі, впишіть замість шаблонного тексту «Відгуки» та оберіть стиль «Heading 2» у каруселі.

Крок 3: Додати підзаголовок з вашим середнім рейтингом

Перетягніть у макет блок «Фігура» та розмістіть його прямо під заголовком секції. Оберіть горизонтальну лінію з точок у спливаючому вікні.

На боковій панелі налаштуйте стиль лінії. У розділі «Line» налаштовується товщина, колір та стиль. У розділі «Розмір» — ширина та висота блоку. Можна використовувати такі ж параметри, як і в блоку з послугами, але скоротити ширину до 25%.

Одразу після налаштування дублюйте цей блок, щоб лінія була перед та після заголовка. Для цього клацніть правою кнопкою миші по блоку та оберіть «Дублікат» в контекстному меню.

Додайте ще один блок «Текст» і розмістіть його між створеними лініями.

Замініть шаблонний текст на свій та виберіть у каруселі зі стилями стиль «Heading 3».

Тепер додайте піктограму зірочки. Для цього перетягніть блок «Картинка» і розмістіть його ліворуч від щойно доданого заголовка.

У спливаючому вікні виберіть у нижній частині іконку із заповненою зірочкою.

Перше, що потрібно зробити після додавання іконки, зменшити її величезний розмір. Це робиться в розділі «Розмір» на бічній панелі. 50 пікселів у полях «Мін» та «Макс» для ширини та висоти буде якраз.

Далі — додайте відступ праворуч від зірки, щоб вона не прилипала до заголовка. Це робиться у розділі «З інтервалом» на бічній панелі. 10 пікселів у правому помаранчевому полі має бути достатньо.

Як ви вже встигли помітити, блок із зіркою та текстом виходить занадто великим. Це тому, що блоки, які розташовуються поруч один з одним, формують загальний блок «Макет». І саме у цьому блоку «Макет» скопіювалися наші стандартні відступи всередині.

Оберіть «Макет» і побачите сині відступи. Видаліть їх на бічній панелі у розділі «З інтервалом». Після цього все знову стане компактним. Єдине, можна залишити відступ праворуч — для оптичної компенсації. Щоб заголовки розташовувалися більше один під одним.

Останній штрих — додайте відступ перед верхнім роздільником, щоб відсунути блок із рейтингом від заголовка секції. Для цього виберіть роздільник і на бічній панелі в розділі «З інтервалом» додайте 50 пікселів у верхньому помаранчевому полі.

Крок 4: Додати галерею

Перетягніть блок «Галерея» у нижню частину макета. У спливаючому вікні зі стилями галереї оберіть стиль у нижньому лівому кутку — «Слайд-шоу».

Як і у випадку з галереєю з попередньої секції, клацніть по опції «Картинка» у розділі «Галерея» на бічній панелі. Далі видаліть поточні фото та додайте замість них свої.

Зніміть галочку у пункті «Автоматична обрізка» у розділі «Галерея». Через цю галочку частина ваших зображень обрізатиметься, щоб вони влазили в контейнер галереї. Без галочки зображення зберігатимуть свої початкові пропорції.

У розділі «Слайд-шоу» на бічній панелі налаштовуються параметри анімації слайд-шоу. Якщо хочете взагалі вимкнути анімацію, щоб відвідувача гортали вручну, виставте опцію «Зміна частоти» на нуль.

Ну і останнє в цій секції — додайте відступ зверху від галереї, щоб відсунути її від блоку із заголовком. Для цього розкрийте на бічній панелі розділ «З інтервалом» та додайте 50 пікселів у верхнє помаранчеве поле.

Секція №6. Про нас

Наприкінці сторінки можна розмістити невеликий блок із інформацією про ваш бізнес. Стисло напишіть тут щось, що викличе у читача довіру.

Можливо, у вас багаторічний досвід чи взагалі сімейний бізнес. Або ви відкрили бізнес з друзями, яких знаєте давно і як робота яких найбільше впевнені. Ну чи просто ви завжди мріяли робити те, що робите 🙂

Крок 1: Створити контейнер

Як ви вже зрозуміли, знову потрібно додати блок «Макет» до самого низу сайту. На цей раз виберіть структуру з двох колонок у спливаючому вікні. Потім розкрийте розділ «Додатково» на бічній панелі. У полі «Зробити якорем» впишіть «about», а в полі «Ім’я» впишіть «Про нас».

До цього у кількох секцій було біле тло. Для різноманітності зробіть фон цієї секції сірим. У розділі «Макет» на бічній панелі клацніть на опції «Фон» і замініть стандартний колір у комірці праворуч від палітри кольорів. Використовуйте такий самий відтінок сірого, як у секції з іконками.

Крок 2: Додати заголовок

Перетягніть у ліву колонку блок «Текст» і у спливаючому вікні оберіть будь-який зі стандартних стилів. Потім клацніть по тексту двічі, впишіть замість шаблонного тексту «Про нас» та виберіть стиль «Heading 2» у каруселі.

Після відредагування заголовка натисніть «Зроблено» у верхньому правому куті спливаючої панелі. З’явиться попередня спливаюча панель. Виберіть на ній вирівнювання по лівому краю. Оскільки в цій секціі дві колонки, вирівняти текст по лівому краю буде більш читабельним варіантом. З вирівнюванням по центру це все виглядатиме не дуже.

Крок 3: Додати текст про ваш бізнес

Перетягніть блок «Текст» під щойно доданий заголовок. Оберіть будь-який зі стандартних стилів і замініть шаблонний текст на свій. На панелі зі стилями виберіть стиль «Normal».

Крок 4: Додати зображення

Перетягніть блок «Картинка» у праву колонку та виберіть у спливаючому вікні перший із заготовлених стилів.

У менеджері завантажень, що відкрився, натисніть угорі «Завантажити фотографію», оберіть її на комп’ютері, потім натисніть в правому нижньому куті спливаючого вікна кнопку «Вибрати».

Крок 5: Додати відступи всередині колонки з текстом

Секція майже готова, залишається лише трохи попрацювати з відступами. Спочатку додайте відступ між абзацом тексту та заголовком. Оберіть блок з абзацом тексту та додайте 50 пікселів у верхній помаранчевій комірці у розділі «З інтервалом» на бічній панелі.

Далі зробіть всю колонку з текстом і заголовком трохи вужчою. Зараз вона виглядає надто розтягнутою. Оберіть колонку і в розділі «З інтервалом» на бічній панелі додайте по 50 пікселів з боків у помаранчевих осередках.

Додавайте відступи збоку саме в помаранчевих полях, тому що конструктор автоматично прибиратиме їх на маленьких екранах. Відступи в блакитних полях прибиратися не будуть, через що на смартфонах вміст блоків із такими відступами може виглядати погано.

Для симетричності оберіть другу колонку і додайте до неї теж відступ справа. Інакше буде так, що у лівої колонки поле більше, ніж у правої. Тільки обрати потрібно саме стовпчик, а не зображення. Найпростіше зробити це у розділі «Структура сторінки» на бічній панелі.

Потім у розділі «З інтервалом» змініть стандартний відступ у правому помаранчевому полі на 50 пікселів.

І останній момент — вирівнювання вмісту всієї секції центром. Завдяки йому текст і фотографія будуть розташовуватися гармонійно один до одного. Щоб увімкнути таке вирівнювання, оберіть основний макет секції та на бічній панелі у розділі «Макет» активуйте іконку, де горизонтальна лінія знаходиться по центру двох вертикальних ліній, як зазначено на скріншоті.

Секція №7. Контакти

Остання секція нашого односторінника — традиційно «Контакти» Перерахуйте тут усі способи, за допомогою якиз з вами зможуть зв’язатися для додаткових питань або дізнатися більше про те, що ви робите: телефон, пошту, соцмережі, канал на YouTube.

Крок 1: Створити контейнер

Знову додайте в кінець односторінника блок «Макет» та оберіть структуру з двох колонок у спливаючому вікні. В одній буде Google Карта, в іншій текст. Потім у розділі «Додатково» на бічній панелі в полі «Зробити якорем» впишіть «contacts», а в полі «Ім’я» впишіть «Контакти».

Одразу збільшіть стандартні відступи з боків від колонок, щоб їх вміст не прилипав один до одного не був дуже близьким до країв сторінки.

Оберіть ліву колонку і в розділі «З інтервалом» на бічній панелі замість стандартних відступів з боків у помаранчевих комірках впишіть число 50. Потім оберіть праву колонку і так само змініть відступ з правого краю на 50 (для симетричності).

Крок 2: Додати картку з локацією

Перетягніть у ліву колонку блок «Карти». У спливаючому вікні ви побачите кілька стилів картки на вибір. Оберіть будь-який.

На бічній панелі в розділі «Google карти» знайдіть опцію «Адреса». У ній клацніть по іконці з локацією, щоб відкрити карту та вручну вибрати локацію вашого магазину.

Наступний момент — Ключ API. Це спеціальний набір символів, який ви зможете отримати після того, як зареєструєте бізнес у своєму обліковому записі Google. Це безкоштовно.

Наведіть курсор на знак питання у назві опції на бічній панелі, щоб побачити посилання на інструкцію — як отримати ключ API. Без ключа карта не працюватиме.

Далі — основні опції для налаштування карти. Крім уже згаданих опцій у розділі «Google карти» ви можете змінити тему карти та її тип, а також змінити масштабування. Чим вище число в полі «Масштабування», тим більшими будуть елементи на карті.

У розділі «Властивості» ви можете вибрати, які елементи керування мають бути присутніми на карті.

Крок 3: Додати заголовок

Перетягніть блок «Текст» у праву колонку та оберіть будь-який із стандартних стилів. Потім замініть шаблонний текст на контакти і виберіть стиль «Heading 2».

Далі натисніть «Зроблено» у верхньому правому куті панелі зі стилями. На панелі, що відкрилася, вирівняйте заголовок по лівому краю.

Крок 4: Додати адресу та телефон

Перетягніть під заголовок ще один блок тексту. Змініть текст шаблону та застосуйте стиль «Normal». Щоб зробити жирним лише частину тексту, використовуйте комбінацію клавіш Ctrl+B на виділеному тексті.

Далі натисніть «Зроблено» у верхньому правому куті панелі зі стилями. Потім на бічній панелі в розділі «З інтервалом» додайте 50 пікселів у верхній помаранчевий осередок.

Крок 5: Додати іконки соцмереж

Перетягніть під текст із контактною інформацією блок «Картинка». У спливаючому вікні виберіть іконку Facebook або іншої соцмережі, що вас цікавить.

Якщо потрібної іконки немає, можливо, її просто немає на спливаючому вікні. Оберіть іншу соцмережу, потім на бічній панелі клацніть по іконці в розділі «Картинка». З’явиться спливаюче вікно з усіма доступними іконками. Там їх більше, ніж на початковому спливаючому вікні.

Подібним чином додайте інші соцмережі, які вам потрібні. Щоб додати до іконки посилання, виберіть її та у розділі «Картинка» на бічній панелі знайдіть опцію «URL-адреса». Клацніть по тексту «Не вибрано жодного посилання» і з’явиться спливаюче вікно, де ви зможете все налаштувати.

Далі — налаштуйте відступи у блоці з іконками соцмереж. Оберіть загальний блок, де знаходяться всі іконки, і в розділі «З інтервалом» на бічній панелі виставте нулі у всіх помаранчевих полях.

Після відступів змініть вирівнювання іконок. У розділі «Макет» на бічній панелі виставте вирівнювання лівим краєм, як зазначено на скріншоті.

Також зніміть галочку з опції «Переключіться на вертикальне розміщення на менших екранах». Інакше на смартфонах іконки розташовуватимуться у стовпчику.

І останній нюанс — відступи між іконками. Виберіть першу іконку та додайте 20 пікселів у помаранчеву комірку праворуч у розділі «З інтервалом» на бічній панелі. Потім зробіть те саме з іншими іконками.

Щоб змінити розмір іконок, виберіть одну з них і знайдіть розділ «Розмір» на бічній панелі. Поекспериментуйте зі значеннями у комірках «Мін» та «Макс» для ширини та висоти.

Секція №8. Підвал сайту

Підвал не те щоб потрібен обов’язково, але без нього односторінник обривається раптово, з ним якось природніше.

Крок 1: Створити контейнер

Додайте в область підвалу блок «Макет» і виберіть структуру з однієї колонки у спливаючому вікні. На бічній панелі в розділі «Макет» одразу змініть його фон на чорний. Щоб візуально відрізнявся.

Крок 2: Додати текст копірайту

Перетягніть у підвал блок «Текст». Замініть шаблонний текст на назву свого сайту та фразу «© Всі права захищені» з нового рядка. Потім у спливаючому вікні оберіть стиль Normal. Трохи вище стилів у цьому ж спливаючому вікні можна також відрегулювати жирність тексту, вирівняти його по центру і змінити колір на білий.

Щоб розмістити блок «Текст» по центру секції, виберіть її та на бічній панелі у розділі «Макет» змініть вертикальний макет на горизонтальний. Після цього трохи нижче з’являться опції вирівнювання вмісту вертикальної осі. Натисніть кнопку з горизонтальною лінією по центру двох вертикальних, як зазначено на скріншоті.

Секція №9. Шапка сайту

В одному боці шапки розмістимо меню, щоб відвідувач міг одразу перескочити до потрібного розділу. Порожнечу в інший заповнимо посиланням на ваш профіль в інстаграмі, нехай люди заходять подивитися фото, підписуються, запитують.

Крок 1: Створити контейнер

В останній раз у цій інструкції перетягніть блок «Макет» в область шапки. Оберіть структуру з однієї колонки у спливаючому вікні.

На бічній панелі розкрийте розділ «З інтервалом» та додайте внутрішні та зовнішні відступи. Внутрішні відступи (сині поля) — 20 пікселів з боків, 10 зверху та знизу. Зовнішні (помаранчеві поля) — 50 пікселів з боків.

Крок 2: Створіть меню

Перетягніть у макет блок «Меню». У спливаючому вікні із заготовленими стилями виберіть перший стиль.

Спочатку відредагуємо елементи меню. Натисніть «Редагувати меню» на спливаючій панелі під меню або на бічній панелі у розділі «Меню».

З’явиться спливаюче вікно з усіма елементами, які є в меню. За замовчуванням елементи меню ведуть до інших сторінок, а не до секцій у межах поточної сторінки. Змінити це не можна, можна лише видалити елемент і створити його з правильними налаштуваннями.

Видаліть всі елементи, окрім «Головна». Для цього наведіть мишкою на потрібний елемент і поряд з’явиться піктограма хрестика. Тільки не видаляйте елемент «Головна», тому що це може все зламати.

Після видалення всіх елементів, крім «Головна», натисніть кнопку «Новий елемент» у тій самій колонці спливаючого вікна, але трохи нижче.

У новому спливаючому вікні введіть назву елемента меню в першому полі. Наприклад, «Послуги». Трохи нижче виберіть варіант «Посилання», а потім виберіть варіант «Прив’язка до». У списку, що випадає, виберіть рядок з назвою якоря, який відповідає створеному елементу. Для елемента «Послуги» це «services». Після цього натисніть «Застосувати».

Подібно додайте елементи для інших секцій вашого односторінника: «Галерея», «Відгуки», «Про нас», «Контакти». Для секції «Іконки» елемент меню можна і не створювати.

Після створення всіх елементів, натисніть на кожен з них і перевірте, чи не збилося налаштування в опції «Прив’язка до». Чомусь вона часто злітає відразу після створення нового елемента, але якщо наново вибрати правильний варіант, більше злітати не повинно.

На скріншоті нижче ви можете бачити, що у вибраного елемента злетіло налаштування і перемикач стоїть в опції «Пустий» замість «Прив’язка до». Якщо у вас така ситуація, встановіть перемикач назад на потрібний рядок для кожного елемента, потім натисніть «Застосувати».

Елементи меню готові. Тепер налаштуємо їхній зовнішній вигляд. На бічній панелі розкрийте розділ «Елементи меню». Тут налаштовується шрифт елементів меню, їх колір та відступи між елементами.

У опції «Шрифт» виберіть розмір шрифту, як у звичайного тексту в стилі «Normal» — 18 пікселів. У опції «Регістр» виберіть «Ніякий», тому що за замовчуванням елементи будуть написані великими літерами.

У цьому розділі знайдіть опцію «Стиль». Це кольори елементів меню. Зверніть увагу, що ця опція має три вкладки: «Стандартний», «При наведенні» та «Активний».

Перейдіть на вкладку «При наведенні». Тут замінимо стандартний жовтий колір на помаранчевий, який ми вже використовували в кнопці #ea7e2c.

На вкладці «При наведенні» клацніть на опції «Рамка». У лівій частині спливаючої панелі перейдіть на нижній центральний квадратик. Потім натисніть на опції «Колір» і зможете підставити своє значення.

Так само змініть колір на вкладці «Активний». Тільки там потрібно змінити як колір рамки, і колір тексту.

Тепер змінимо вирівнювання меню, щоб воно розташовувалося по центру шапки. Оберіть макет секції та розкрийте на бічній панелі розділ «Макет».

Змініть тип макету з «Вертикального» на «Горизонтальний». Після цього трохи нижче з’являться додаткові іконки, які дозволять вирівняти вміст по центру. Це робить іконка, на якій зображено горизонтальну лінію по центру двох вертикальних ліній.

Тепер змінимо висоту шапки. Поки вибрано саме будь-яку секцію, розкрийте на бічній панелі розділ «Розмір». В опції «Висота» ви побачите галочку біля комірки «Мін». Зніміть її.

Нічого не змінилося. Але це тому, що є ще одна секція, де потрібно зробити те ж саме. Розкрийте розділ «Структура сторінки» у верхній частині бічної панелі і виберіть там найперший елемент — рядок «Header».

Тепер у розділі «Розмір» також вимкніть мінімальну висоту. Після цього шапка автоматично зменшиться. Якщо нова висота вам не подобається, можете встановити її вручну. Наприклад, 50 чи 75 пікселів.

Залишається лише трохи змінити вигляд меню на смартфонах. Перейдіть на вигляд з мобільних телефонів у рядку між шапкою конструктора та вмістом сайту.

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

Оберіть перемикач меню і розкрийте розділ «Меню» на бічній панелі. Знайдіть там опцію «Стиль» та перейдіть на вкладку «Мобільний». Там ви побачите опцію «Фон», натиснувши яку зможете змінити колір. Змініть його на білому. Це вплине відразу і на іконку і на список з елементами меню.

Крок 3: Додати іконку інстаграма

Перетягніть у шапку блок «Картинка» та розмістіть його праворуч від блоку «Меню». У спливаючому вікні знайдіть та оберіть іконку з логотипом Інстаграм.

На бічній панелі у розділі «Розміри» можна трохи зменшити максимальну ширину та висоту іконки. Наприклад, до 50 пікселів, як у секції «Контакти».

Додати до іконки посилання можна у розділі «Макет».

Ну і насамкінець розведіть меню з іконкою по різних кінцях шапки. Для цього виберіть макет шапки і на панелі, що спливає, натисніть кнопку «Простір між», як вказано на скріншоті.

Що далі

На цьому все. Ми розповіли, як зробити односторінковий сайт самому, без програмування та спеціальних навичок. Сподіваємось, у вас все вийшло. Якщо є питання, поставте їх у коментарях до цієї статті, постараємось усім допомогти.

Щоб додати на сайт функціонал запису на прийом, можна скористатися сервісом Altegio. Ми бачили, що на багатьох сайтах використовують саме його. У них на сайті є інструкції щодо підключення онлайн-запису.

Ну і на цій інструкції робота над сайтом, звісно, не закінчується. Ось ще кілька статей, які можуть виявитися вам корисними в подальшій роботі з сайтом:

Як налаштувати мобільну версію сайту

Як продавати товари в конструкторі

Як налаштувати параметри SEO у конструкторі