Как сделать всплывающую кнопку на сайте

Делаем кнопку “Наверх” для сайта без плагинов

Приветствую дорогие друзья. Сегодня я покажу, как сделать кнопку наверх на сайте. Так уж получилось, что шаблон моего блога не был изначально снабжен этой полезной функцией, и посетители не могли быстро переместиться из нижней части статьи в верхнюю. Поэтому, одновременно с созданием такой кнопки у себя, я расскажу как это сделать вам (Может быть у вас такая же проблема и вы не знали как ее решить).

В статье будут следующие части:

Для чего нужна эта кнопка?

Сказать откровенно, миллионы сайтов живут без подобной кнопки. Ничего критичного в её отсутствии нет, но применение этого элемента может принести определенную пользу, как для посетителей, так и для вас, как для владельца ресурса.

Польза для посетителей

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

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

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

Польза для сайта

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

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

Простая кнопка наверх для сайта html

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

Для реализации будет достаточно стандартного функционала языка разметки HTML, дополненного CSS стилями. Кнопка вверх будет действовать как обычная ссылка, отправляющая посетителя к началу страницы.

Код кнопки будет состоять из двух элементов. Первый – это HTML ссылка, размещаемая в коде сайта. Второй – это CSS стиль кнопки, он размещается в файле стилей и отвечает за расположение кнопки и ее внешний вид.

Следующий код разместите внутри тела сайта (внутри тега body, лучше, прямо перед его закрытием). Обратите внимание, что вам потребуется картинка, которая послужит кнопкой (замените участок кода на ваш путь к картинке и ее название).

Дальше вам необходимо прописать стили созданного нами класса кнопки buttonup. Для этого открываем файл style.css и добавляем в конец следующий код:

Этот код отвечает за положение кнопки, редактируя цифры, вы можете его изменить. Как только вы сохраните файл, кнопка начнет действовать. Параметр width ставьте равным ширине картинки, bottom – отступ от нижнего края экрана, right – от правого края экрана.

Плавающая кнопка наверх для сайта

Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:

Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).

В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:

1. Подключение библиотеки jQuery

Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.

Для подключения библиотеки jQuery, вам нужно прописать в разделе вашего сайта следующую строку:

Читайте также:  Как в экселе сделать формулу суммы столбца

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

Первый вариант проще, второй, на мой взгляд, удобнее.

Вот сам скрипт (автор Тимур Камаев wp-kama.ru):

Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.

Источник

Плавающая кнопка на сайте

Приветствую вас, дорогие друзья!

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

Её использование поможет сэкономить место на сайте, а также привлечь внимание посетителей, ведь она всегда остаётся у них на виду. Короче полезная штука, которую можно использовать для реализации разных задач.

Выглядеть эта кнопка будет как то так:

Как создать плавающую кнопку?

Для этого нужно открыть файл с кодом страницы вашего сайта. Если ваш сайт сделан на WordPress, то открываем файл footer.php и в самом конце перед закрытием тега добавляем следующий код:

Вместо «Заказать звонок» вы вписываете любой нужный вам текст.

Далее нам нужно прописать определённые CSS свойства для этого блока, чтобы он был похож на плавающую кнопку.
Для этого открываем файл стилей сайта. В случае с WordPress это будет файл style.css, который находится по адресу:

В самом конце данного файла нам нужно прописать следующие свойства:

За поворот блока на 90 градусов отвечает вот этот набор свойств:

По сути это одно и то же свойство, но так как оно само по себе может не поддерживаться более старыми версиями браузеров, пишем его с кроссбраузерными префиксами. Поэтому получается 5 строк вместо одной.

Стиль плавающей кнопки вы можете корректировать под дизайн вашего сайта. Я поставила комментарии в коде, чтобы было понятно где что менять.

Если вы хотите чтобы по нажатию на плавающую кнопку осуществлялся переход на другую страницу, то в коде

вместо # ставим ссылку на страницу.

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

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

О том, как создать всплывающую форму обратной связи на сайте WordPress я писала в этой статье. Аналогично создаётся всплывающее окно для любого другого контента.

Если в двух словах, то вот что нужно сделать:

Теперь нам нужно немного доработать наш код, а именно: добавить ссылке класс inline-content, затем добавить скрытый блок со всплывающим контентом и поставить ссылку на этот блок.
На практике это будет выглядеть так:

Источник

Плавающая кнопка для сайта: незаменимый инструмент продаж

В статье мы расскажем:

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

Подобная кнопка может быть запрограммирована сразу на несколько действий. В нашем материале мы разобрали несколько способов ее создания на сайте. Рабочие коды можете использовать в качестве примера или шаблона.

Польза плавающей кнопки для сайта и посетителей

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

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

Если говорить честно, то многие сайты вполне обходятся и без плавающей кнопки. Однако она приносит немало пользы как для самого ресурса, то есть для его владельца, так и для посетителей.

Польза для посетителей.

Как правило, страницы сайтов содержат очень много контента. Читая большие статьи, посетитель опускается все ниже и ниже, особенно если в конце есть еще и немало комментариев. А когда человек и сам хочет что-то написать, то процесс усложняется еще больше.

До тех пор, пока пользователь не дошел до конца страницы и увлечен чтением контента, его не утомляет прокрутка, однако когда приходит время возвращаться в начало для того, чтобы посмотреть, что еще интересного есть на сайте, все становится не так весело. Чаще всего в этот момент посетитель закрывает ресурс.

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

Читайте также:  Выкройка мягких букв своими руками

Что касается пользы для самого сайта, то плавающая кнопка позволяет сделать навигацию более простой, пользователи начинают активно интересоваться контентом, то есть активируются поведенческие факторы.

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

Создание плавающей кнопки на сайте WordPress

Чтобы сделать на сайте плавающую кнопку, необходимо для начала открыть файл, в котором содержится код страницы. Для ресурса, сделанного на WordPress, нужно найти файл footer.php, спуститься в самый низ и перед закрытием тега вставить код:

Вместо слов «ваш текст» необходимо написать то, какое действие будет происходить при нажатии на кнопку, например, заказать звонок.

Чтобы этот блок стал похож на плавающую кнопку, следует прописать определенные CSS свойства. Для этого потребуется файл, в котором содержатся стили сайта. Для WordPress это файл style.css, расположенный по адресу:

wp-content/themes/название вашей темы/style.css

Опустившись в самый конец, прописываем такие свойства:

-webkit-transform: rotate(-90deg); /*Поворот блока с текстом кнопки на 30 градусов*/

position:fixed; /*фиксированная позиция кнопки при прокрутке*/

right: 0px; /*отступ с права*/

top: 35%; /*отступ сверху*/

margin-right:-50px; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/

color:#fff!important; /*цвет ссылки*/

text-align:center; /*выравнивание по центру*/

padding:10px 20px; /*внутренние отступы*/

border:1px solid #fff; /*рамкавокругкнопки*/

Чтобы повернуть блок на 90 градусов, следует прописать следующие свойства:

-webkit-transform: rotate(-90deg); /*Поворот блока с текстом н 30 градусов*/

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

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

Для создания плавающей кнопки, при нажатии на которую происходит переход на другую страницу, в коде пишется следующее:

На месте знака # размещаем ссылку на страницу.

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

Как сделать плавающую кнопку на сайте HTML

Очень часто на сайтах можно увидеть плавающие кнопки, которые передвигаются вместе с прокруткой страницы. Самые распространенные – это заказ звонка, акция либо стрелка, нажав на которую можно вернуться в начало.

Если сайт простой и на него невозможно подключить Javascript или дополнительные библиотеки либо владелец ресурса просто не хочет этого делать, то способ создания плавающей кнопки на сайте сбоку HTML подойдет как нельзя лучше.

Чтобы ее сделать, потребуется стандартный набор функций языка разметки HTML, дополненный стилями CSS. Плавающая кнопка будет являться той же ссылкой, которая перенаправляет пользователя ресурса на начало страницы.

легкая и простая настройка;

отсутствие необходимости в скриптах и поддержке библиотек.

постоянная видимость кнопки, даже при нахождении в начале страницы;

резкое (мгновенное) перемещение вверх.

Чтобы создать плавающую кнопку для сайта, потребуется два элемента, а именно HTML-ссылка, которая прописывается в коде ресурса и CSS-стиль кнопки, отвечающий за внешний вид и расположение и размещающийся в файле стилей.

В основе принципа действия плавающих кнопок лежит свойство position: fixed. Возьмем следующую структуру HTML:

В данном случае была создана кнопка класса fixedbut с назначенным стилем, в котором особое внимание следует уделить свойству position: fixed;, благодаря которому она и становится плавающей. На расположение, то есть снизу и справа страницы указывают bottom: 20px; right: 20px; Если нужно, чтобы она была слева, тогда right заменяем на left. Все остальные стили используются для красоты.

Однако это еще не все, поскольку сейчас кнопка есть, но на клик она не отвечает. Попробуем добавить переход на любую страницу сайта. К примеру:

либо используя обычную ссылку:

Разница между ними заключается в том, что в первом случае это JavaScript, а во втором разметка HTML.

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

Еще несколько хитростей, которые могут оказаться полезными не только при создании плавающей кнопки для сайта:

Если добавить свойство pointer-events: none;, это позволит запретить срабатывание скрипта или клика по ссылке. Таким образом, если будет осуществляться клик по ссылке Бонус!, то ничего не произойдет, то есть перехода по указанной ссылке не будет.

Если нужно, чтобы при нажатии на ссылку происходило открытие страницы в новой вкладке, следует добавить атрибут target=»_blank».

Картинка для плавающей кнопки на сайте

Чтобы кнопка, а точнее, изображение на ней менялось, в файле картинки должно быть две части, в одной – обычная стрелка, в другой – активная (такой она становится при наведении курсора). Пользователь видит какую-то одну половину. Сделать можно таким образом, что первая стрелка будет полупрозрачная, а вторая – яркая непрозрачная.

Читайте также:  Ariston abs vls pw 80 ремонт своими руками

В данном случае цифры соответствуют картинке 88х250 px, а стрелки высотой по 125 px. Если вам потребуется изображение с другими размерами, то в коде нужно будет изменить значения width и height на подходящие именно под ваш проект.

Смещение картинки, то есть значение background-position следует сделать таким, чтобы оно было немного больше половины высоты картинки.

Отступ от нижнего края экрана определяется значением bottom, от левого – left. Оно может быть задано в процентах, как в данном случае, и в пикселях, как в примере с HTML (right был задан в px).

Удалив из кода следующую строку, его можно немного упростить:

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

8 оригинальных примеров дизайна плавающей кнопки для мобильных приложений

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

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

Этот дизайн разработал Стефан Кастро. Здесь плавающая кнопка имеет круглую форму и резкий контрастный красный цвет. При нажатии на нее появляются маленькие иконки с подсказками такого же тона, расположенные снизу вверх.

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

В этом случае цветовая палитра для плавающей кнопки выбрана идеально, а проделал эту работу дизайнер Лоис Ян. На фоне достаточно тяжелого по содержанию интерфейса интернет-ресурса – сплошная яркая кнопка, дополненная тонкими тенями, выделяется и ненавязчиво привлекает внимание пользователей.

Плавающая кнопка в этом дизайне дополнена полупрозрачным и при этом элегантным экраном, который ее подкрепляет. Он выполняет функцию привлечения внимания к заголовкам сайта и иконкам, поскольку основа ресурса содержит большие яркие картинки. Изюминку дизайну добавляет небольшое отклонение от траектории.

Плавающие кнопки AddMedia.

Расположенная внизу страницы кнопка в виде буквы О, включает четыре расположенных по кругу СТА, что значительно упрощает доступ к ним. Все иконки с понятными символами, яркого цвета и достаточно большого размера.

В этом дизайне плавающая кнопка находится сбоку сайта, то есть она привязана к боковой панели, которая, смещая содержимое страницы влево, вытекает с правой стороны. Она включает в себя самые популярные социальные порталы, к примеру, Facebook, Pinterest, Google, Twitter и т. д.

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

Мультикнопка от EnvyBox как альтернатива плавающей

Чем мультикнопка полезна для сайта?

увеличивается количество обращений с интернет-ресурса после установки;

повышаются продажи за счет оповещения о спецпредложениях;

активируется распродажа определенных услуг или товаров;

повышается лояльность потребителей благодаря большому выбору способов связи;

увеличивается сбор клиентской базы с предложением подписаться на канал в социальных сетях (группах), Telegram.

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

Шаг 1. Устанавливается код на сайт.

Установка выполняется очень легко и быстро, работа занимает около трех минут. Сделать это можно как самостоятельно, используя видеоуроки или инструкцию, так и воспользоваться услугами специалистов.

Шаг 2. Появляется красивая кнопка

Нажав на кнопку, посетителю предлагается несколько способов связи, выбрав один из которых он переходит на страницу, где его ждет специальное предложение.

Шаг 3. Клиент связывается с вами.

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

Шаг 4. Клиент покупает.

В итоге все довольны: клиент тем, что нашел вас, а вы тем, что продажи растут вместе с клиентской базой.

Стоит заметить, что возможности не ограничены. Можно воспользоваться услугами программиста, который пропишет необходимые скрипты при нажатии (открыть сторонний виджет, вызвать всплывающее окно и т. д.). Другими словами, все то, что может быть прописано в Java-скрипте.

Источник

Оцените статью
Как сделать своими руками
Добавить комментарий
Adblock
detector