4. Виджет “Кнопка”

Содержание:

  1. Настройки виджета “Кнопка”
    1. Вкладка Содержимое
    2. Вкладка “Вид”
    3. Вкладка “Положение”
    4. Вкладка “Действие”
    5. Вкладка цели
  2. Как открыть всплывающее окно?

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

Все виджеты устанавливаются только на секции и на всплывающие окна.

2017-10-13_1242

 

  1. Кнопка с формой
  2. Кнопка с окном
  3. Кнопка – ссылка
  4. Кнопка – картинка
  5. Политика конфиденциальности

Все 5 виджетов представленные во вкладке кнопки – это один виджет настроенных под разные задачи, они были созданы для удобства и экономии времени на их настройку.

Чтобы установить виджет, необходимо перетащить его внутрь секции.

Oct-13-2017 12-44-39

 

Настройки виджета “Кнопка”

 

Вкладка Содержимое:

Отображение кнопки

1.Текст

image25 =

2.Иконка

2017-10-13_1246

 

3.Текст+ Иконка

2017-10-13_12461

 

4.Картинка
Вы можете загрузить нужное изображение и размер.

2017-10-13_12472

 

Вкладка “Вид”:

 

Раздел “Цвета”

Oct-13-2017 12-51-26

Цвет кнопки можно поменять на любой цвет из нашей библиотеки

image12 =

Ниже цвета можно выбрать внешнее оформление кнопки

image21 =

Подробные настройки

В подробных настройках есть 3 вкладки

image14 =

 

  • Обычное состояние
  • По наведению
  • По клику

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

image18 =

Раздел “Текст”

1000380

Стиль

1. Простой

2. Жирный

3. Курсив

4. Подчёркнутый

5. ПРОПИСНЫЕ

Шрифт

Можно задать нужный шрифт для текста внутри кнопки

Размеры и отступы

Можно изменить размер кнопки и отступы внутри кнопки

 

image02 =

Подробные настройки

В подробных настройках можно задать:

  1. Размер текста
  2. Отступы сверху
  3. Отступы снизу
  4. Отступы слева
  5. Отступы справа

image05 =

Раздел “Обводка”

 

Oct-13-2017 12-54-37

В данном разделе можно задать обводку кнопки. Выбрать обводку можно одну из готовых

image04 =

или задать свою обводку в подробных настройках.

image29 =

Раздел “Углы”

 

Oct-13-2017 12-59-21

Кнопке можно задать углы, сделать их более острыми или более круглыми

image22 =

также в подробных настройках можно закруглить каждый угол отдельно

image33 =

Раздел “Эффекты”

В данном разделе можно установить анимацию для кнопки.
Анимация цвета фона и движения кнопки.

Oct-13-2017 13-04-22

 

Раздел “Тень”

 

Oct-13-2017 13-08-21

Данный раздел отвечает за тень виджета “Кнопка”.

image11 =

Подробные настройки

Тень можно настроить индивидуально, вы можете указать нужные параметры смещение по горизонтали, смещение по вертикали, размытие, растяжение, цвет, непрозрачность.

image07 =

Вкладка “Положение”

Слева

image00 =

По центру

image15 =

Справа

image06 =

На всю ширину

image30 =

Также вы можете задать особое положение для телефонов: 

2017-10-13_1309

 

Вкладка “Действие”

Действие кнопки

1. Показать окно с формой
При нажатии кнопки будет открываться всплывающее окно с формой обратной связи.

 

13 октября - 13-2017 гг.

2. Показать окно без формы
При нажатии кнопки будет открываться пусто всплывающее окно.

Октябрь-13-2017 13-16-12

3. Прокрутить к форме
При нажатии кнопки, экран будет прокручен к первой форме на странице.

4. Открыть страницу
При нажатии кнопки, будет осуществлен переход по адресу который мы укажем в поле ссылка.
Важно! Перед адресом сайта обязательно писать http:// или https:// – если вы активировали функцию HTTPS (SSL).

5. Открыть страницу в новой вкладке
При нажатии кнопки, будет осуществлен переход по адресу который мы укажем в поле ссылка (при этом будет открыта новая вкладка браузера).
Важно! Перед адресом сайта обязательно писать http:// или https:// – если вы активировали функцию HTTPS (SSL).

6. Добавить товар в корзину
При нажатии кнопки, товар (который находится на “карточке товара”) будет добавлен в корзину.
Данное действие будет работать только, если правильно настроена карточка товара.
Более подробно можно ознакомиться в инструкции по работе с корзиной.

7. Выполнить JS код

При нажатии на кнопку с действием “Выполнить JS код”, будет выполнен Javascript код который был установлен.
Например: alert(“Кнопка была нажата”);

00000068

8. Ничего не делать
При нажатии кнопки, никаких действий не будут производиться.

 

Вкладка цели

Цель для Яндекс.Метрики

Цель для Яндекс.Метрики – Это слово на русском или английском языке, без использования пробелов.

Используется для сбора статистики по кликам и заявкам на сервисе Яндекс.Метрика

Чтобы цель отправлялась в настройках страницы необходимо указать код счетчика Метрики, и в самой Метрике необходимо добавить цель с таким же именем, как в этом поле.
Подробнее о настройке целей Яндекс.Метрики.

Цель для Google Analytics, категория

Это слово на русском или английском языке, без использования пробелов.

Цель для Google Analytics, действие

Это слово на русском или английском языке, без использования пробелов.

Подробнее о настройке целей GoogleAnalytics.

Как открыть всплывающее окно?

Всплывающее окно можно открыть 3-мя способами:

  1. Нажав на кнопку со всплывающим
  2. Создать ссылку на кнопку и установить ссылку в текст (создать гиперссылку)
  3. Создать ссылку и ввести ее в адресную строку вашего браузера

Создать ссылку на всплывающее окно можно в настройках виджета “Кнопка” (на которой установлено всплывающее окно с формой или без формы), во вкладке “Действия”, выбрав “Показать окно с формой” или “Показать окно без формы”. выбрав один из вариантов у нас появится поле “ID кнопки (не обязательно)”, в данном поле нам необходимо указать id, например okno.

Важно! id кнопки может содержать любые буквы и цифры, но не может содержать пробелы и повторяться с другими id (id должен быть уникальным).

 

2017-10-13_1341
Ссылка на всплывающее окно готова. Для открытия модального (всплывающего) окна нужно указать id виджта “Кнопка” через /#modal-id в конце ссылки на страницу.

Например: http://knopkasformoi.plp7.ru/#modal-okno
/#modal-  
это стандартное значение для вызова окна.
okno – это id виджета “Кнопка”, которое мы задали.

Данную ссылку можно установить в любую кнопку, текст и просто поделиться ей с окружающими.

image09 =

Была ли эта статья полезна?

Похожие статьи