Оставить комментарий
В статье рассказывается:
- Пользу плавающей кнопки для сайта и посетителей
- О создании плавающей кнопки на сайте Wordpress
- Как сделать плавающую кнопку на сайте HTML
- О картинке для плавающей кнопки на сайте
- 8 оригинальных примеров дизайна плавающей кнопки для мобильных приложений
- О мультикнопке от EnvyBox как альтернативе плавающей
-
Чек-лист: Как добиваться своих целей в переговорах с клиентамиСкачать бесплатно
Плавающая кнопка для сайта – еще одна возможность приблизить клиента к совершению целевого действия. В отличие от всплывающих окон, она не раздражает пользователя и исключительно функциональна.
Подобная кнопка может быть запрограммирована сразу на несколько действий. В нашем материале мы разобрали несколько способов ее создания на сайте. Рабочие коды можете использовать в качестве примера или шаблона.
Польза плавающей кнопки для сайта и посетителей
С целью облегчить посетителям сайта навигацию, а также привлечь новых пользователей используется весьма эффективный, но при этом легкий, динамичный, элегантный и быстрый помощник – плавающая кнопка. Как правило, это небольшой элемент, располагающийся в правой части экрана, который не привязан к конкретной станице, а перемещается вместе с пользователем, делая программу более удобной, а экран функциональнее.
Согласно спецификациям Google, кнопка должна соответствовать определенным требованиям, таким как приятный вид, простота, яркий и живой дизайн, понятная и интуитивная графика, обеспечение быстрого доступа к важным инструментам, отсутствие деструктивных функций.
Если говорить честно, то многие сайты вполне обходятся и без плавающей кнопки. Однако она приносит немало пользы как для самого ресурса, то есть для его владельца, так и для посетителей.
Польза для посетителей
Как правило, страницы сайтов содержат очень много контента. Читая большие статьи, посетитель опускается все ниже и ниже, особенно если в конце есть еще и немало комментариев. А когда человек и сам хочет что-то написать, то процесс усложняется еще больше.
До тех пор, пока пользователь не дошел до конца страницы и увлечен чтением контента, его не утомляет прокрутка, однако когда приходит время возвращаться в начало для того, чтобы посмотреть, что еще интересного есть на сайте, все становится не так весело. Чаще всего в этот момент посетитель закрывает ресурс.
И здесь помочь пользователю быстро и комфортно вернуться к началу страницы сайта поможет плавающая кнопка со стрелкой вверх.
Польза для сайта
Что касается пользы для самого сайта, то плавающая кнопка позволяет сделать навигацию более простой, пользователи начинают активно интересоваться контентом, то есть активируются поведенческие факторы.
Все это приводит к тому, что ресурс становится привлекательным для поисковых систем и начинает занимать более высокие позиции в результатах поиска.
Создание плавающей кнопки на сайте Wordpress
Чтобы сделать на сайте плавающую кнопку, необходимо для начала открыть файл, в котором содержится код страницы. Для ресурса, сделанного на WordPress, нужно найти файл footer.php, спуститься в самый низ и перед закрытием тега вставить код:
|
<div class="call_back"><a href="#">ваш текст</a></div> |
Вместо слов «ваш текст» необходимо написать то, какое действие будет происходить при нажатии на кнопку, например, заказать звонок.
Чтобы этот блок стал похож на плавающую кнопку, следует прописать определенные CSS свойства. Для этого потребуется файл, в котором содержатся стили сайта. Для WordPress это файл style.css, расположенный по адресу:
wp-content/themes/название вашей темы/style.css
Опустившись в самый конец, прописываем такие свойства:
|
.call_back{ -webkit-transform: rotate(-90deg); /*Поворот блока с текстом кнопки на 30 градусов*/ -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); position:fixed; /*фиксированная позиция кнопки при прокрутке*/ z-index:999; right: 0px; /*отступ с права*/ top: 35%; /*отступ сверху*/ margin-right:-50px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/ } /*Стили для ссылки*/ .call_back a{ color:#fff!important; /*цвет ссылки*/ display:block; background:#DC3522; /*цветфонакнопки*/ font-size:1.2em; /*размершрифта*/ text-align:center; /*выравнивание по центру*/ padding:10px 20px; /*внутренние отступы*/ font-weight:bold;/*жирныйшрифт*/ border-radius:5px; /*радиусскругленияуглов*/ border:1px solid #fff; /*рамкавокругкнопки*/ } |
Чтобы повернуть блок на 90 градусов, следует прописать следующие свойства:
|
-webkit-transform: rotate(-90deg); /*Поворот блока с текстом н 30 градусов*/ -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); |
Вообще, это одно и то же свойство, однако для того, чтобы оно поддерживалось не только новыми версиями браузеров, но и более старыми, его следует писать с кроссбраузерными префиксами. Таким образом, вместо одной строки выходит пять.
В зависимости от дизайна сайта подбирается и стиль плавающей кнопки. В коде есть комментарии, по которым можно понять, что и в каком месте следует менять.
Для создания плавающей кнопки, при нажатии на которую происходит переход на другую страницу, в коде пишется следующее:
|
<a href="#">Заказать звонок</a> |
На месте знака # размещаем ссылку на страницу.
Если требуется всплывающая форма, то добавленный код нужно немного изменить и установить один плагин.
Как сделать плавающую кнопку на сайте HTML
Очень часто на сайтах можно увидеть плавающие кнопки, которые передвигаются вместе с прокруткой страницы. Самые распространенные – это заказ звонка, акция либо стрелка, нажав на которую можно вернуться в начало.
Если сайт простой и на него невозможно подключить Javascript или дополнительные библиотеки либо владелец ресурса просто не хочет этого делать, то способ создания плавающей кнопки на сайте сбоку HTML подойдет как нельзя лучше.
Чтобы ее сделать, потребуется стандартный набор функций языка разметки HTML, дополненный стилями CSS. Плавающая кнопка будет являться той же ссылкой, которая перенаправляет пользователя ресурса на начало страницы.
Плюсы:
-
легкая и простая настройка;
-
отсутствие необходимости в скриптах и поддержке библиотек.
Минусы:
-
постоянная видимость кнопки, даже при нахождении в начале страницы;
-
резкое (мгновенное) перемещение вверх.
Читайте также!
Чтобы создать плавающую кнопку для сайта, потребуется два элемента, а именно HTML-ссылка, которая прописывается в коде ресурса и CSS-стиль кнопки, отвечающий за внешний вид и расположение и размещающийся в файле стилей.
В основе принципа действия плавающих кнопок лежит свойство position: fixed. Возьмем следующую структуру HTML:
|
<div class="fixedbut">Бонус!</div> <style> .fixedbut { position: fixed; bottom: 20px; right: 20px; display: block; background: #2db700; color: #fff; text-decoration: none; padding: 6px 23px; font-size: 17px;} .fixedbut:hover { background: #222; } </style> |
В данном случае была создана кнопка класса fixedbut с назначенным стилем, в котором особое внимание следует уделить свойству position: fixed;, благодаря которому она и становится плавающей. На расположение, то есть снизу и справа страницы указывают bottom: 20px; right: 20px; Если нужно, чтобы она была слева, тогда right заменяем на left. Все остальные стили используются для красоты.
Однако это еще не все, поскольку сейчас кнопка есть, но на клик она не отвечает. Попробуем добавить переход на любую страницу сайта. К примеру:
|
<divclass="fixedbut" onclick="location.href='/o-nas/'">Бонус!</div> либо используя обычную ссылку: <a class="fixedbut" href="/o-nas/">Бонус!</a> |
Разница между ними заключается в том, что в первом случае это JavaScript, а во втором разметка HTML.
Для создания кнопки, которая бы перемещала пользователя вверх, значение ссылки следует заменить на #. Таким образом, при нажатии на нее страница будет пролистываться в начало.
Еще несколько хитростей, которые могут оказаться полезными не только при создании плавающей кнопки для сайта:
-
Если добавить в класс fixedbut свойство -webkit-transition: 0.33s allease-out; -o-transition: 0.33s allease-out; transition: 0.33s allease-out;, то элемент (в том числе и кнопка), на который назначается псевдокласс :hover, будет плавно менять цвет.
-
Если добавить свойство pointer-events: none;, это позволит запретить срабатывание скрипта или клика по ссылке. Таким образом, если будет осуществляться клик по ссылке <aclass="fixedbut" style="pointer-events: none;" href="/o-nas/">Бонус!</a>, то ничего не произойдет, то есть перехода по указанной ссылке не будет.
-
Если нужно, чтобы при нажатии на ссылку происходило открытие страницы в новой вкладке, следует добавить атрибут target="_blank".
Картинка для плавающей кнопки на сайте
Чтобы кнопка, а точнее, изображение на ней менялось, в файле картинки должно быть две части, в одной – обычная стрелка, в другой – активная (такой она становится при наведении курсора). Пользователь видит какую-то одну половину. Сделать можно таким образом, что первая стрелка будет полупрозрачная, а вторая – яркая непрозрачная.
В данном случае цифры соответствуют картинке 88х250 px, а стрелки высотой по 125 px. Если вам потребуется изображение с другими размерами, то в коде нужно будет изменить значения width и height на подходящие именно под ваш проект.
Смещение картинки, то есть значение background-position следует сделать таким, чтобы оно было немного больше половины высоты картинки.
Отступ от нижнего края экрана определяется значением bottom, от левого – left. Оно может быть задано в процентах, как в данном случае, и в пикселях, как в примере с HTML (right был задан в px).
Удалив из кода следующую строку, его можно немного упростить:
+ '.scrollTop:hover{ background-position:0 -133px;}'
Благодаря ей изображение на кнопке может меняться при наведении на него курсора, при ее отсутствии оно всегда будет одинаковым. Теперь картинка с двойным изображением вам уже не потребуется, можно поставить любую стрелку.
8 оригинальных примеров дизайна плавающей кнопки для мобильных приложений
Далее рассмотрим коллекцию новых концепций пользовательского интерфейса для мобильных устройств, освоивших эту тенденцию.
РедизайнInstagramMaterial
В этом дизайне плавающая кнопка, которая сопровождает многие экраны, имеет круглую форму с небольшой тенью и темно-синий цвет, соответствующий общему тону. С ее помощью пользователь может быстро получить доступ к фото, а также воспользоваться некоторыми дополнительными функциями.
Android&WearAppEcosystem
Этот дизайн разработал Стефан Кастро. Здесь плавающая кнопка имеет круглую форму и резкий контрастный красный цвет. При нажатии на нее появляются маленькие иконки с подсказками такого же тона, расположенные снизу вверх.
Magnet.me
В данном случае прием использован тот же, что и в предыдущем варианте. Плавающая кнопка представлена в виде кружка, который находится в нижней части страницы. При нажатии на нее появляются еще три иконки, располагающиеся друг над другом вертикально.
Coloring UI
В этом случае цветовая палитра для плавающей кнопки выбрана идеально, а проделал эту работу дизайнер Лоис Ян. На фоне достаточно тяжелого по содержанию интерфейса интернет-ресурса – сплошная яркая кнопка, дополненная тонкими тенями, выделяется и ненавязчиво привлекает внимание пользователей.
Плавающая кнопка в этом дизайне дополнена полупрозрачным и при этом элегантным экраном, который ее подкрепляет. Он выполняет функцию привлечения внимания к заголовкам сайта и иконкам, поскольку основа ресурса содержит большие яркие картинки. Изюминку дизайну добавляет небольшое отклонение от траектории.
Плавающие кнопки AddMedia
Расположенная внизу страницы кнопка в виде буквы О, включает четыре расположенных по кругу СТА, что значительно упрощает доступ к ним. Все иконки с понятными символами, яркого цвета и достаточно большого размера.
Daily UI 010
В этом дизайне плавающая кнопка находится сбоку сайта, то есть она привязана к боковой панели, которая, смещая содержимое страницы влево, вытекает с правой стороны. Она включает в себя самые популярные социальные порталы, к примеру, Facebook, Pinterest, Google, Twitter и т. д.
UX Exploration
Кнопка с входящими в ее состав СТА занимают всю нижнюю часть экрана. Они располагаются горизонтально и обладают эстетичным внешним видом благодаря твердым монохромным полотнам, двухцветной окраске, теням и четким глифам, отличающимся пиксельной точностью.
Мультикнопка от EnvyBox как альтернатива плавающей
Чем мультикнопка полезна для сайта?
В 2,4 раза:
-
увеличивается количество обращений с интернет-ресурса после установки;
-
повышаются продажи за счет оповещения о спецпредложениях;
-
активируется распродажа определенных услуг или товаров;
-
повышается лояльность потребителей благодаря большому выбору способов связи;
-
увеличивается сбор клиентской базы с предложением подписаться на канал в социальных сетях (группах), Telegram.
Читайте также!
Принцип работы мультикнопки заключается в следующем.
Шаг 1. Устанавливается код на сайт.
Установка выполняется очень легко и быстро, работа занимает около трех минут. Сделать это можно как самостоятельно, используя видеоуроки или инструкцию, так и воспользоваться услугами специалистов.
Шаг 2. Появляется красивая кнопка
Нажав на кнопку, посетителю предлагается несколько способов связи, выбрав один из которых он переходит на страницу, где его ждет специальное предложение.
Шаг 3. Клиент связывается с вами.
Менеджеры вашего ресурса отвечают на вопросы потребителей либо по звонку, либо в личном кабинете, либо в социальных сетях.
Шаг 4. Клиент покупает.
В итоге все довольны: клиент тем, что нашел вас, а вы тем, что продажи растут вместе с клиентской базой.
Стоит заметить, что возможности не ограничены. Можно воспользоваться услугами программиста, который пропишет необходимые скрипты при нажатии (открыть сторонний виджет, вызвать всплывающее окно и т. д.). Другими словами, все то, что может быть прописано в Java-скрипте.
