Текстовая кнопка “Наверх”

Еще один вариант использования HTML-виджета – создание кнопки “Наверх” на пролистывания страницы. Кнопка будет возвращать пользователя из подвала к первому экрану.

Готовый вариант можно посмотреть на странице: http://2e8mvbgo.plp7.ru/

Содержание:

Как установить виджет?

Шаг 1. Перейдем в “Настройки страницы

100093090
Шаг 2. Перейдем во вкладку “Метрика и скрипты”, нажимаем кнопку “Добавить плагин”

100093235

Выбираем плагин “Произвольный код” и вставим код в поле BODY”

 

 

100093236
Шаг 3. Перейдем в редактор.

100093237
Шаг 4. Спустимся в самый низ нашей страницы и установим виджет “HTML-виджет” на последнюю секцию.

1000303
Шаг 5. Перейдем в меню “HTML-виджета” и выберем “Импорт”.

1000304
Шаг 3. Скопируем код готового виджета:

Шаг 4. Вставим код во всплывающее окно и “Сохраним”.

1000305
Готово! Установка виджета завершена! Осталось настроить кнопку под стиль сайта.

Настройка виджета

Для начала настроек необходимо включить “Видимость кнопки”. По умолчанию кнопка будет скрыта и появляться при скролле, но для для её редактирования необходимо включить показ кнопки.

Видимость кнопки

Показать кнопку – используется для показа кнопки и её визуального редактирования.
Скрыть кнопку – после редактирования необходимо скрыть кнопку, иначе при входе на опубликованный сайт она будет видна, но при прокрутке скроется.

1000306gif

Текст кнопки

Задаем текст, который будет отображаться на кнопке. Например: “Наверх”.

1000307gif

Положение кнопки

Кнопка может находиться слева или справа.

1000315gif

Отступ от края

Кнопку можно отодвинуть от края экрана: перемещая ползунок, мы увеличим или уменьшим расстояние между кнопкой и краем экрана.

1000308gif

Скругление границ

Углы кнопки можно сделать с острыми или закруглить.

1000309gif

Цвет кнопки

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

1000310gif

Цвет текста

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

1000311gif

Отступ текста сверху и снизу

Отступ между текстом и границей кнопки можно увеличить или уменьшить.

1000312gif

Отступ текста слева и справа

 Данный параметр изменяет отступ между текстом и границей кнопки слева и справа.

1000313gif

Прозрачность кнопки

Задаем прозрачность кнопке, над которой нет курсора мышки. При наведении прозрачность будет убрана.

1000314gif
После всех настроек необходимо скрыть виджет для корректного отображения на опубликованном сайте.

Как виджет будет выглядеть так:

1000315gif.gif

Готовый вариант можно еще раз посмотреть на http://2e8mvbgo.plp7.ru/

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

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