База знань

Колірна схема

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

Як користуватись палітрою?

Для кожного елемента у списку ви можете вибрати колір одним із наступних способів:

1. Вибрати із запропонованої палітри: Натисніть на кольоровий квадрат, щоб відкрити палітру та вибрати потрібний відтінок.

2. Ввести код кольору: Якщо у вас є точний код кольору (наприклад, у форматі HEX ​​— #FFFFFF), введіть його у текстове поле. Натисніть панель RGB, щоб змінити режим кольору.

1. Колір пунктів меню

Тут налаштовуються кольори тексту посилань у меню навігації вашого сайту.

2. Колір передзаголовка

Текст, розташований над основним заголовком H1. Часто використовується для додаткового привернення уваги.

3. Колір заголовка H1

Найголовніший заголовок на сторінці. Його колір повинен привертати увагу насамперед.

4. Колір підзаголовка

Пояснюючий текст під заголовком H1.

5. Колір кнопки (CTA)

CTA (Call to Action) – це кнопка виклику до дії (наприклад, "Купити", "Зареєструватися"). Її колір має бути контрастним та помітним, щоб мотивувати користувача натиснути на неї.

6. Текст на кнопці

Колір тексту на кнопці заклику до дії. Він повинен добре читатись на тлі самої кнопки.

7. Колір заголовка H2

Заголовки другого рівня використовуються для назв основних розділів лендингу.

8. Колір контент-тексту

Колір основного тексту на сторінці. Важливо, щоб він був добре читаним і не втомлював очі.

9. Колір заголовка H3

Заголовки третього рівня зазвичай це підзаголовки всередині розділів.

10. Основний фон

Це головний колір тла вашої сторінки. Він задає загальну атмосферу лендінгу.

11. Додаткове тло

Використовується для виділення окремих секцій або блоків на сторінці (наприклад, FAQ, блоку з перевагами або тарифами). Це допомагає візуально розділити контент та покращити його сприйняття.

12. Колір тексту FAQ

Колір тексту в секції "Часті питання".

13. Колір тексту (Футер)

Колір тексту в нижній частині сайту (підвалі), де зазвичай розміщується контактна інформація та додаткові посилання.

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

Шрифти

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

1. Шрифт для заголовків

Цей параметр застосовується до всіх заголовків на вашій сторінці (H1, H2, H3 тощо). Шрифт для заголовків зазвичай виразніший і акцентніший, його головне завдання — привернути увагу до ключових розділів лендингу.

2. Шрифт для основного тексту

Цей шрифт буде використовуватись для всього контентного тексту: параграфів, описів, списків та інших текстових блоків. Головна вимога до нього – максимальна читаність. Вибирайте простий і зрозумілий шрифт, який не стомлюватиме очі користувача під час читання.

Налаштування шапки (Header)

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

1. Управління логотипом

Логотип – це обличчя вашої компанії. Ви можете легко додати його до шапки сайту.

• Додати або видалити логотип: Використовуйте перемикач, щоб показати або приховати блок із логотипом. Для завантаження зображення просто натисніть на відповідну кнопку і виберіть файл на вашому комп'ютері.
• Налаштування розмірів логотипу: За допомогою полів «Ширина (px)» та «Висота (px)» ви можете задати точні розміри логотипу, щоб він виглядав акуратно та пропорційно.
• Посилання на логотип: Активуйте цю опцію, щоб зробити ваш логотип клікабельним. Зазвичай сюди вставляють посилання, що веде на головний екран (якірне посилання #top) або основний сайт.
• Alt текст для логотипу: Це обов'язкове поле для SEO. Напишіть тут назву вашої компанії. Цей текст побачать пошукові системи, а також користувачі, які не завантажили зображення.

2. Налаштування меню навігації

Меню допомагає користувачам швидко переміщатися розділами вашого лендингу. Можна налаштувати до 6 пунктів меню.

• Додавання та редагування пунктів меню: У цьому блоці можна змінити назви пунктів меню (наприклад, «Про нас», «Послуги», «Тарифи», «Контакти») та задавати їм якірні посилання.
• Що таке якірне посилання? Це посилання, яке веде не на іншу сторінку, а на певний блок на цій самій сторінці. При натисканні на такий пункт меню сторінка плавно прокручуватиметься до відповідного розділу.
• Як налаштувати якірне посилання? Кожен блок на вашому лендингу має унікальний ID (наприклад, id="mobile-app"). Щоб послатись на нього, у полі для посилання пункту меню потрібно написати цей ID зі знаком # на початку. Наприклад: #mobile-app.

Налаштування блоку "Перший екран" (Hero Section)

"Перший екран" - це візитна картка вашого лендінга. Це перше, що бачить користувач, заходячи на сайт. Ваше завдання – за 3-5 секунд захопити його увагу, ясно донести головну пропозицію (оффер) та мотивувати до дії.

1. Фонове зображення

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

URL фонового зображення: Вставте пряме посилання на зображення, яке ви хочете використовувати як фон.

2. Текстовий контент

Тексти на першому екрані повинні бути короткими, переконливими і бити точно в ціль.

• Предзаголовок: Коротка фраза над основним заголовком. Використовуйте її, щоб привернути увагу.
• Головний заголовок H1: Це найважливіший текст на всій сторінці як для користувача, так і для пошукових систем (SEO). Він повинен чітко та ясно відповідати на запитання «Що ви пропонуєте?». Використовуйте тут головні ключові слова.
• Підзаголовок: Розкриває або доповнює значення головного заголовка. Тут можна зазначити ключову перевагу, уточнити деталі пропозиції або зняти можливе заперечення клієнта.

3. Кнопка заклику до дії (Call to Action - CTA)

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

• Текст кнопки: Текст має бути дієсловом, що закликає до дії. Використовуйте більш конкретні та мотивуючі фрази: "Отримати безкоштовний розрахунок", "Завантажити прайс-лист", "Записатися на консультацію".
• Посилання для кнопки: Вкажіть, куди потрапить користувач після натискання на кнопку. Це може бути:
  1. Якірне посилання на інший блок на цій же сторінці (наприклад, на блок з тарифами: #tarify)
  2. Партнерське посилання на інший сайт.
  3. Посилання на файл для завантаження чи готовий apk.

Налаштування блоку «Контент-секція»

"Контент-секція" - це універсальний і найгнуткіший блок вашого конструктора. З його допомогою ви можете розповісти про ваш продукт, описати переваги, показати характеристики, додати прайс-лист та багато іншого. Ви можете додати на сторінку стільки контент-секцій, скільки вам потрібно.

1. Налаштування всієї секції

Перш ніж наповнювати секцію контентом, можна задати їй важливі параметри.

ID секції (якір): Це унікальне ім'я вашої секції, яке використовується для навігації. Наприклад, якщо ви створюєте секцію «Мобільний додаток», ви можете вказати їй ID app. Після цього в налаштуваннях шапки ви зможете створити пункт меню Mobile App і вказати для нього якірне посилання #app. При натисканні на цей пункт меню сторінка плавно прокручуватиметься до цієї секції.

Використання HTML-тегів для SEO: У текстових редакторах усередині секції ви можете використовувати спеціальні HTML-теги для покращення SEO та візуального виділення тексту. Просто виділіть потрібний фрагмент і застосуйте тег:

• Теги strong та b: Роблять текст жирним. Пошукові системи вважають текст усередині strong більш важливим.
• Тег a: Створює гіперпосилання на інший сайт чи сторінку.

2. Додавання елементів усередину секції

Всередині кожної контент-секції можна комбінувати різні елементи, щоб створити потрібну структуру.

• Заголовок H2: Основний заголовок секції (наприклад, «Наші переваги» або «Як ми працюємо»).
• Заголовок H3: Підзаголовок для розділення інформації всередині секції (наприклад, «Гарантія якості» під основним заголовком «Наші переваги»).
• Текстовий блок: Використовується для написання звичайних абзаців, описів та будь-якого суцільного тексту.
• Маркований список: Ідеально підходить для перерахування переваг, особливостей або пунктів, які не мають строгого порядку.
• Нумерований список: Використовується для опису покрокових інструкцій, етапів роботи або рейтингу.
• Таблиця: Відмінний інструмент для порівняння тарифів, відображення характеристик чи будь-яких структурованих даних. Ви можете налаштувати необхідну кількість рядків та стовпців.
• Малюнок: Візуалізуйте текст за допомогою зображень. Для кожної картинки ви можете і повинні прописати Alt текст - це короткий опис зображення, важливий для SEO та доступності сайту.
• Кнопка (CTA): Додайте кнопку виклику до дії в будь-якому місці секції, щоб направити користувача до цільової дії (наприклад, «Довідатися детальніше», «Перейти до тарифів»).

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

Налаштування блоку «Секція FAQ» (Часті питання)

Блок FAQ (Frequently Asked Questions) - це ефективний спосіб відповісти на найпопулярніші питання ваших потенційних клієнтів, зняти їх заперечення та сумніви ще до того, як вони їх поставлять. Добре опрацьована секція FAQ підвищує довіру до вашої пропозиції, скорочує кількість звернень на підтримку та допомагає користувачеві швидше прийняти рішення про покупку.

На вашому лендинг питання будуть представлені у вигляді інтерактивного списку (акордеону): користувач бачить питання, натискає на нього, і йому плавно відкривається відповідь.

1. Заголовок секції

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

2. Додавання та видалення запитань з відповідями

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

• Натисніть кнопку «Додати питання», щоб створити нову пару "запитання-відповідь".
• Введіть у перше поле саме питання.
• У другому полі напишіть розгорнуту та зрозумілу відповідь.
• Ви можете додати стільки пар, скільки потрібно.
• Щоб видалити непотрібне питання, просто натисніть на значок видалення (хрестик) поряд з ним.

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

Налаштування футера (Footer)

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

1. Текст копірайту (Copyright)

Це текстовий рядок у футері, який інформує про захист авторських прав. Вона також використовується для розміщення важливої ​​додаткової інформації.

2. Додавання посилань на соціальні мережі

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

Як це працює:

• Знайдіть у списку потрібну соціальну мережу (наприклад, Facebook).
• Вставте в поле навпаки повне посилання на ваш профіль або сторінку.
• Як тільки ви вставите посилання, відповідна іконка автоматично з'явиться у футері вашого сайту. Якщо ви залишите поле порожнім, іконка не відображатиметься.

Підтримувані соціальні мережі:

• Twitter
• Facebook
• YouTube
• Instagram
• LinkedIn

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

Налаштування SEO (Пошукова оптимізація)

SEO-налаштування - це ваш інструмент для спілкування з пошуковими системами, такими як Google та Яндекс. Заповнивши ці поля, ви допомагаєте пошуковим роботам правильно зрозуміти про що ваша сторінка і кому її варто показувати. Саме ця інформація використовується для формування виду вашої сторінки (сніппету) у результатах пошуку.

1. Title (Заголовок сторінки)

Що це таке? Це найголовніший SEO-елемент. Текст із цього поля відображається:

• Як основний синій заголовок, який натискають користувачі в результатах пошуку.
• У назві вкладки (Сніппет) в браузері.

Як наповнювати?

• Довжина: Намагайтеся вкладатися у 50-60 символів.
• Зміст: Заголовок має бути привабливим і містити ваш найголовніший пошуковий запит (ключове слово). Він повинен точно відображати суть вашої пропозиції.

2. Meta Description (Опис)

Що це таке? Це короткий текст (1-2 пропозиції), який відображається під синім заголовком у результатах пошуку. Його завдання - "продати" ваш сайт користувачеві та переконати його перейти саме до вас.

Як наповнювати?

• Довжина: приблизно 150-160 символів.
• Зміст: Коротко опишіть вашу пропозицію, згадайте ключові переваги та додайте заклик до дії (CTA). Використовуйте ключові слова, оскільки вони можуть підсвічуватись жирним у пошуку.

3. Canonical URL (Канонічний URL)

Що це таке? Це більш технічний параметр. Він вказує пошуковим системам "основну" або "переважну" версію сторінки, якщо її контент доступний за кількома різними URL-адресами (щоб уникнути проблем із дублюванням контенту).

Як наповнювати?

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

3. Атрибут Lang (Мова сторінки)

Що це таке? Це код, який повідомляє пошукові системи та браузери, якою мовою написаний контент вашої сторінки.

Як наповнювати?

Вкажіть дволітерний код мови ISO 639-1.

• ru - для російської мови
• en - для англійської мови
• uz - для узбецької мови

І так далі.

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

Налаштування Мікророзмітки

Мікророзмітка це спеціальний код, який ви додаєте на свою сторінку. Він невидимий для звичайних відвідувачів, але є своєрідним "перекладачем" для пошукових роботів (Google, Яндекс) та соціальних мереж (Facebook, Telegram, VK). Цей код пояснює їм, що означає той чи інший контент на вашому лендингу.

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

1. Розмітка FAQ (Автоматично)

Що це? Це спеціальна розмітка для вашого блоку «Часті питання». Вона повідомляє пошуковим системам, що цей блок є списком запитань та відповідей.

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

Як це працює?

Вам нічого не потрібно робити додатково! Якщо ви заповнили розділ FAQ у конструкторі, система автоматично створить для неї правильну мікророзмітку. Просто переконайтеся, що перемикач цієї функції активний.

2. Розмітка Open Graph (для красивих посилань у соцмережах)

Що це таке? Open Graph – це стандарт мікророзмітки, створений Facebook, який використовується всіма основними соціальними мережами та месенджерами (Telegram, WhatsApp, VK, Twitter та ін.). Заповнивши ці поля, ви самі вирішуєте, як виглядатиме посилання на ваш лендинг, коли хтось їй ділиться.

Замість звичайного синього посилання з'явиться гарна картка із заголовком, описом та картинкою.

Як заповнювати поля Open Graph:

• OG: Title (Заголовок для соцмереж): Жирний заголовок, який відображатиметься у картці посилання. Він може відрізнятися від вашого SEO-заголовка і бути більш рекламним або "чіпляючим".
• OG: Description (Опис для соцмереж): Текст під заголовком. Він повинен коротко описувати вашу пропозицію і мотивувати натиснути на посилання.
• OG: Image URL (URL зображення для превью): Найважливіший елемент. Це посилання на картинку, яка буде показана у прев'ю. Без картинки посилання втрачає до 80% привабливості.
• OG: URL (URL сторінки): Повна адреса вашої сторінки. Зазвичай, конструктор може підставляти його автоматично, але для надійності краще вказати його тут вручну.
• OG: Locale (Мова та регіон): Вказує соцмережам, для якої мовної аудиторії призначений ваш контент.

Професійна порада: Після заповнення полів Open Graph перевірте, як виглядатиме ваше посилання, за допомогою спеціальних сервісів, наприклад, Facebook Sharing Debugger. Це допоможе переконатися, що все відображається коректно.

3. Вставити свою мікророзмітку

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

При активації перемикача «Вставити мікророзмітку» на сторінці з'явиться спеціальне текстове поле. У це поле ви можете самостійно вставити готовий код мікророзмітки у форматі JSON-LD або іншому форматі, що підтримується. Це дозволяє додати на сторінку будь-яку необхідну схему (наприклад, FAQ Page, Product, Organization), навіть якщо для неї немає стандартних полів у конструкторі.

Важливо: Використовуйте цю функцію з обережністю. Некоректний або помилковий код мікророзмітки може негативно вплинути на те, як пошукові системи індексують вашу сторінку. Перед збереженням завжди перевіряйте свій код за допомогою спеціальних валідаторів (наприклад, Schema Markup Validator від Google).

Налаштування Аналітики

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

Підключення Google Search Console (GSC)

Google Search Console – це безкоштовний та обов'язковий інструмент від Google для власників сайтів. Він дозволяє:

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

Як підключити?

Щоб підключити GSC, потрібно підтвердити, що ви є власником сайту. І тому використовується спеціальний код верифікації.

Де взяти код верифікації Google?

1. Перейдіть на сайт Google Search Console і увійдіть до свого облікового запису Google.
2. Додати новий ресурс (сайт). Google запропонує два варіанти. Виберіть правий - "Ресурс із префіксом в URL" і введіть повну адресу вашого сайту.
3. Google запропонує кілька способів підтвердження прав. Прокрутіть вниз і виберіть спосіб під назвою "HTML-тег".
4. Ви побачите рядок коду, який виглядає приблизно так: meta name="google-site-verification" content="**abcdefg12345ABCDEFG**"
5. Скопіюйте лише той набір символів, який знаходиться всередині лапок content="...". У нашому прикладі це abcdefg12345ABCDEFG. Не потрібно копіювати весь тег повністю!
6. Поверніться в конструктор, у розділ "Аналітика", і вставте цей скопійований код у поле "Код верифікації Google".

Підключення Bing Webmaster Tools

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

Підключення Яндекс.Метрика

Один із найпопулярніших інструментів для аналізу поведінки користувачів на сайті. Для підключення просто вставте номер (ID) вашого лічильника Яндекс.Метрики у це поле. Це дозволить вам відстежувати відвідуваність, джерела трафіку, поведінку користувачів за допомогою Вебвізора, карт кліків та скролінгу, а також налаштовувати та відстежувати досягнення цілей (конверсій).

Підключення Microsoft Clarity

Це безкоштовний сервіс від Microsoft, який допомагає візуалізувати поведінку користувачів на лендингу. Скопіюйте ідентифікатор (ID) вашого проекту із Microsoft Clarity та вставте його сюди. Сервіс надає доступ до записів сеансів (відео візитів), теплових карт кліків та карт прокручування. З його допомогою ви зможете наочно побачити, з якими труднощами стикаються користувачі та які елементи на сторінці привертають найбільше уваги.