Як налаштувати кнопку на сайті
У конструкторі сайтів SendPulse ви можете додати елемент Кнопка, який забезпечує перехід за посиланням на інші сайти, сторінки, блоки або для зв’язку через телефон або email.
Додайте елемент
Додайте віджет Кнопка (Buttons) в потрібну частину сайту.
Налаштуйте кнопку
У панелі редагування віджету Кнопка (Button) можна додати додаткові кнопки або вирівняти елемент відносно простору в колонці.
Щоб додати додаткову кнопку до рядка колонки, натисніть Додати (Add). Щоб налаштувати кнопку, натисніть значок редагування.
Оберіть тип та додайте посилання
Напишіть текст для кнопки. Виберіть тип: посилання, телефон, email або якір, а потім введіть потрібні дані.
Розглянемо призначення кожного типу посилання:
| Посилання (Link) | Використовується для вставки повного посилання подібного до https://example.com. Рекомендуємо додавати захищені посилання. Якщо ви активуєте опцію Відкривати в новому вікні, то для відвідувача сайту посилання розгорнеться в новій вкладці браузера. |
| Телефон (Phone) | Використовується для вставки телефону як +380501234567. Під час натискання на таке посилання користувач зможе зателефонувати на вказаний номер, використовуючи вбудовані програми браузера або пристрою. Рекомендуємо додавати номер у міжнародному форматі, щоб програми для дзвінків вірно визначали, куди телефонувати. |
Використовується для вставки адреси електронної пошти подібної до user@example.com. Рекомендуємо перевіряти коректність адреси, щоб відвідувач сайту міг зв’язатися з вами. |
|
| Якір (Anchor) |
Використовується для вставки якоря на інший блок. Після натискання на посилання відвідувач відразу перейде на вказаний блок. Ви можете взяти ID якоря в налаштуваннях блоку. Якщо ви приховуєте блок на мобільному, посилання з якорем на цей блок з мобільних пристроїв не працюватиме. Аналогічно, якщо ви приховуєте блок для десктопної версії. Вам потрібно додати варіант блоку та посилання на нього для мобільної та для декстопної версії окремо. |
Виберіть тип відкриття
Ви можете налаштувати перехід за посиланням кнопки: у новому вікні чи у поточному. Активуйте перемикач Відкривати в новому вікні (Open in new window), щоб посилання кнопки відкривалось на окремій вкладці браузера.
Скопіюйте ID
Кожна кнопка має ідентифікатор (ID), який визначає елемент на сторінці. З його допомогою можна застосовувати стилі та скрипти, налаштувати показ попапів і відстежувати події по цьому елементу.
Ви можете скопіювати ID для всього елемента з кнопками або для кожної кнопки окремо:
- Щоб скопіювати ID для всього елемента, у налаштуваннях віджета прокрутіть вниз до секції ID та натисніть назву.
- Щоб скопіювати ID для певної кнопки, натисніть іконку олівця навпроти потрібної кнопки та перейдіть в редагування самої кнопки.
Щоб відредагувати ID, натисніть значок олівця.
Читайте детальніше: ID блоку та віджета.
Налаштуйте зовнішній вигляд кнопки
Налаштуйте розташування та анімацію
Перейдіть до меню редагування елементу та виберіть його розміщення.
Ви можете обрати відстань між кнопками в полі Відступ між (Indent between).
Ви можете налаштувати відображення елементу окремо для мобільної версії. Читайте докладніше: Як редагувати елементи в мобільній версії.
Виберіть розташування кнопки щодо секції чи блоку: зліва, у центрі або справа.
Також ви можете додати анімацію під час гортання сторінки, для цього активуйте перемикач Анімація при прокручуванні (Animation on scroll) та виберіть тип, напрямок та швидкість анімації.
Читайте докладніше: Анімація елементів.
Виберіть стиль кнопки
Перейдіть в налаштування кнопки.
За замовчуванням стилі підтягуються із загального стилю сторінки: основний та вторинний. Але можна створити для кожної кнопки свій стиль — для цього виберіть опцію Настроюваний (Custom). Також ви можете вибрати розмір кнопки: маленький (S), середній (M) або великий (L).
Кнопки також налаштовуються під час роботи з дизайном сайту.
Читайте детальніше: Як налаштувати стиль сторінки.
Також ви можете редагувати ширину: автоматична, на всю ширину контейнера або фіксована.
| Автоматична (Auto) | Ширина кнопки виставляється відповідно до обраного розміру: маленький (S), середній (M) або великий (L). Ви не можете її відрегулювати. |
| На всю ширину контейнера (Full width of the container) | Ширина кнопки буде відповідає ширині секції чи колонки, де додана кнопка. |
| Фіксована (Fixed) | Ширина колонки редагується вручну в пікселях. |
Додайте іконку
Щоб додати зображення-піктограму до кнопки, активуйте перемикач Додати іконку (Add icon). Після активації виберіть потрібну іконку та налаштуйте її розташування: праворуч або ліворуч від тексту кнопки.
Додайте ефекти
Активуйте перемикач Додаткові ефекти (Additional effect), щоб додати анімацію та ефект під час наведення на кнопку.
У полі Умова (Condition) виберіть дію відвідувача з кнопкою, яке запустить ефект, а в полі Ефект (Efect) виберіть анімацію, доступну для заданої умови.
| Умова (Condition) | Опис | Доступні ефекти (Effect) |
| По наведенню (Hover) | Ефект запускається, коли відвідувач сайту наводить курсором на кнопку. | Bounds — кнопка рухається вверх та вниз.
Shake — кнопка рухається в різні боки. Decrese — кнопка стає меншою. Increase — кнопка стає більшою. |
| Завжди (Static) | Ефект запускається, коли відвідувач розгорнув сторінку або зупинив прокручування, а кнопка є у видимій області. | Shine — колір кнопки переливається.
Twinkle — кнопка спочатку напівпрозора та менша за розміром, але потім стає чітка та стандартна. |
Налаштуйте аналітику
Ви можете налаштувати передачу цілей з форми до подій Google Analytics та Facebook Pixel. Натисніть Налаштувати аналітику (Analytics settings).
Якщо у вас не активована аналітика, перейдіть за посиланням Як налаштувати (How to set it up).
Для активації передачі даних, в налаштуваннях сайту повинні бути додані коди пікселя Facebook та Google Analytics. Читайте докладніше: Як підключити Google Analytics до сайту та Як підключити піксель Facebook до сайту.
Якщо у вас активована аналітика, ви побачите два перемикача.
Якщо ви активували перемикач Передавати ціль у Google Analytics, введіть дані для полів Категорія (Category), Дія (Action), Ярлик (Label) — ці параметри будуть передаватися до аналітики у розділі Події.
Якщо ви активували перемикач Передавати ціль у піксель Facebook, автоматично буде сформована подія Complete Registration. Її ви зможете переглядати в Events Manager вашого бізнес-акаунту Facebook.
Оновлено: 30.10.2024
або