Кнопка та значки

За допомогою функції «Кнопка та посилання» ви можете додати будь-який тип посилання (1) до розділу. Ви можете додати кнопку/текстове посилання/посилання на зображення/піктограму/роздільник.

Ви можете дублювати (2), редагувати (3) або видаляти (4) існуючу кнопку/посилання.

У цій статті:

1. Додати кнопки/посилання
2. Кнопки/посилання стилю

---

Додати кнопки/посилання

• Щоб додати будь-який тип посилання до розділу, натисніть на + Додати кнопку варіант.

Опція «+ Додати кнопку» пропонує чотири способи додавання посилання. Окрім цього, ви також можете додавати роздільники , щоб додати пробіл між кнопками/посиланнями. Нижче наведено варіанти:

• Button
• Стиль кнопки
• Текстове посилання
• зображення
• Іконка
• сепаратор

---

Button

Додати кнопку до елемента списку.

Ви зможете оновити:

1. Етикетка кнопки – Вкажіть видимий текст на вашій кнопці. Це те, що користувачі побачать і на що натиснуть.
2. Посилання на кнопку – Вкажіть URL-адреса або дія кнопка повинна спрацьовувати при натисканні.
3. Цільове вікно – Виберіть, чи має посилання відкриватися в та сама вкладка або Нова вкладка.
4. Стиль кнопки – Виберіть стиль кнопки за замовчуванням (встановлюється в Кнопки та посилання розділу «Дизайн»), «Суціль», «Контур» або текстове посилання.

• • За умовчанням: Відповідає налаштуванням теми вашого сайту.
  • Суцільний: Жирна, заповнена кнопка.
  • Outline: Прозорий фон з рамкою.
  • Текстове посилання: Простий, чистий текстовий стиль (без блоку кнопок).

5. Форма кнопки – Встановити a індивідуальна форма для кожної окремої кнопки у розділі. Це дозволяє вам змінити глобальну форму кнопки, визначену в Налаштування дизайну, що дає вам більше контролю над тим, як виглядає кожна кнопка. Доступні форми: квадратна, закруглена та таблеткоподібна.
6. Кнопка Колір – Налаштуйте колірну схему кнопки:

• • За умовчанням: Успадковує налаштування теми.
  • Інвертувати: Змінює кольори тексту/фону кнопки на протилежні.
  • Митниця: Дозволяє вибрати певні кольори тексту та фону.

7. Текст кнопки - Якщо використовується Колір кнопки на замовлення, ви можете встановити колір тексту (мітки) звідси.
8. Фон кнопки – Також доступно в розділі «Налаштування», це встановлює колір фону кнопки. Поєднайте це з кольором тексту для максимальної читабельності та стилю.
9. Кнопка значок – Додайте значок поруч із підписом кнопки. Ви можете вибрати один із різних варіантів значків.
10. макет – Керуйте розміщенням значка відносно підпису. Доступні варіанти макета:

• • Мітка + значок: Спочатку з’являється текст, а потім значок.
  • Значок + Мітка: Спочатку з'являється значок, потім текст.
  • Мітка + значок (широкий формат): Текст та значок розташовані з більшим відступом, що підходить для ширших кнопок.
  • Значок + Мітка (широкий): Спочатку значок, ширше відступи.

11. Колір значка – Виберіть колір значка кнопки. Ви можете встановити його таким, що Текст кнопки колір або Марка колір

---

Налаштування стилю кнопок

Ви знайдете ці налаштування на вкладці «Стиль» у розділах. Ці налаштування дозволяють вам точно налаштувати зовнішній вигляд, інтервал між ними та розташування кнопок на вашому сайті Pixpa для кращого контролю дизайну та адаптивності:

1. Розмір кнопки – Виберіть розмір кнопки (наприклад, Маленька, Середня, Велика). Це налаштовує відступи та розмір шрифту відповідно до вашого дизайну.
2. Простір між кнопками – Керує горизонтальним інтервалом між кількома кнопками. Ви можете використовувати одиниці вимірювання vw (ширина області перегляду) для адаптивного інтервалу.
3. Простір над кнопками – Додає вертикальний інтервал над кнопкою(ами). Це допомагає відокремити їх від вмісту вище, вимірюється у відсотках.
4. Текстове посилання – Налаштовує розмір шрифту для текстових посилань кнопок (особливо корисно, якщо замість традиційної кнопки використовується стиль «Текстове посилання»).
5. Зображення як кнопка (розмір) – Якщо ви використовуєте зображення замість традиційної кнопки, цей параметр визначає розмір відображення зображення (у пікселях).
6. Ширина кнопки – Виберіть ширину кнопки:

• • За умовчанням: Стандартна ширина залежить від вмісту кнопки
  • Великий / Дуже великий: Ширші кнопки для більшої акцентованості
  • Повна ширина: Кнопка розтягується по всій ширині контейнера

---

Текстове посилання

Додайте текстове посилання до елемента списку.

Ви зможете оновити:

1. Встановіть текстовий ярлик.
2. Вкажіть текстове посилання.
3. Цільове вікно – Виберіть відкриття сторінки в тому ж або новому вікні.

---

зображення

Додайте зображення та зв’яжіть його з будь-якою сторінкою.

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

• Звідси ви можете:
  1. Завантажити/Змінити зображення.
  2. Посилання на кнопку – Вкажіть посилання.
  3. Цільове вікно – Виберіть відкриття сторінки в тому ж або новому вікні.

---

Соціальна ікона

• Додайте піктограму соціальної мережі до елемента списку.

Ви можете керувати:

1. Значок соціальної мережі, який потрібно зв’язати.
2. Укажіть відповідний шлях до профілю в соціальній мережі.
3. Цільове вікно – Виберіть відкриття сторінки в тому ж або новому вікні.

---

сепаратор

Параметр «Роздільник» дозволяє вставляти інтервали між кнопками або посиланнями.

Це корисно для створення візуального розділення між кнопками, розташованими поруч. Ви можете додати роздільник на панелі «Кнопки та посилання» так само, як ви додаєте інші кнопки.

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

 

---

Параметри стилю для кнопок і посилань

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

Ви матимете кілька варіантів стилю для кнопки та посилань, як описано нижче.

Кнопка та посилання

1. Вкажіть Пробіл між кнопками/посиланнями які були додані.
2. Вкажіть Пробіл над кнопкою/посиланнями.
3. Виберіть Наведіть ефект для кнопки/посилань.

Розмір кнопки 

---

Приклад

Наприклад, припустимо, що ви додали посилання на соціальну мережу Amazon у розділі «Кнопка/Посилання» та вказали колір значка як червоний , а колір фону значка як зелений, тоді значок відображатиметься так, як показано нижче: