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

С помощью кнопок и ссылок вы можете добавить в раздел любой тип ссылки (1). Вы можете добавить кнопку/текстовую ссылку/ссылку на изображение/значок/разделитель.

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

В этой статье:

1. Добавить кнопки/ссылки
2. Стиль кнопок/ссылок

---

Добавить кнопки/ссылки

• Чтобы добавить ссылку любого типа в раздел, нажмите кнопку + Добавить кнопку опцию.

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

• Button
• Стиль кнопки
• Текстовая ссылка
• Фото товара
• Значок
• Разделитель

---

Button

Добавить кнопку к элементу списка.

Вы сможете обновить:

1. Ярлык кнопки: – Укажите видимый текст на вашей кнопке. Это то, что пользователи увидят и нажмут.
2. Кнопка Ссылка – Укажите URL или действие кнопка должна срабатывать при нажатии.
3. Целевое окно – Выберите, будет ли открываться ссылка в та же вкладка или Новая вкладка.
4. Стиль кнопки – Выберите стиль кнопки по умолчанию (устанавливается в Кнопки и ссылки вкладку раздела «Дизайн»), Solid, Outline или Text Link.

• • По умолчанию: Соответствует настройкам темы вашего сайта.
  • Solid: Кнопка с жирным шрифтом и заливкой.
  • Outline: Прозрачный фон с рамкой.
  • Текстовая ссылка: Простой, понятный стиль, состоящий только из текста (без кнопок).

5. Форма кнопки – Установить индивидуальная форма для каждой отдельной кнопки В разделе. Это позволяет переопределить глобальную форму кнопки, заданную в разделе Настройки дизайна, предоставляя вам больше контроля над внешним видом каждой кнопки. Доступные формы: квадратная, закруглённая и «таблетка».
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 в раздел «Кнопки/Ссылки» и указали цвет значка как красный , а цвет фона значка как зеленый. Тогда значок будет выглядеть следующим образом: