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

плавающая кнопка

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

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

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

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

пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 1. Устанавливаем плагин Easy FancyBox
  2. 2. Переходим в меню «Настройки» => «Медиафайлы»
  3. 3. Находим настройки Easy FancyBox, снимаем галочку возле пункта «images» и ставим возле пункта «Inline content», после чего сохраняем изменения.
настройка загрузки медиафайлов

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

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

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

внешний вид всплывающей формы

Я там добавила ещё внутренний отступ в 20 пикселей и серую рамку для блока всплывающей формы с id= «form_pop_up»

В итоге весь добавленный CSS код выглядит так:

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

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

14 комментариев

  1. Добрый день, Юлия
    Огромное спасибо за информацию, это именно то, чего не хватало в вашей предыдущей статье про «всплывающую форму обратной связи».
    Пошел эксперименторовать на своих сайтах :)

    • Алексей! И Вам большое спасибо за комментарий! Надеюсь у Вас всё получится!

  2. Доброго времени суток.
    Меня интересует один пункт из вашей статьи, а именно:

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

    Я вставил шоркод http://prntscr.com/c05sag и при нажатии на кнопку, появляется просто текст http://prntscr.com/c05skr

    Статью перечитал уже раз 5. Подскажите пожалуйста что не так я делаю?

  3. Здравствуйте, Юлия. Поясните, пожалуйста, что должно находиться на месте <!—Блок со скрытым контентом—> ? У меня всплывающая форма обратной связи, я шорткод написала вместо >Здесь сам контент, который будет отображаться во вплывающем окне<.

    • Здравствуйте, Надежда!
      Вместо < !—Блок со скрытым контентом—> ничего не нужно ставить! Это просто комментарий в HTML коде чтобы было понятно что это за блок и зачем он нужен. Чтобы не сбивать людей с толку я удалила эту строку из кода :)

  4. Большое спасибо Юленька! Очень помогла ваша статья! http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    • Александр! И Вам спасибо за комментарий! :)

  5. Юлия, доброй ночи!

    Подскажите, пожалуйста, а как вместо кнопки «Заказать звонок» вставить картинку?

    Допустим, трубку телефона.

  6. Юлия, добрый день!

    Подскажите, пожалуйста:

    — как вместо кнопки с надписью «Заказать звонок» вставить кнопку в виде картинки, например, трубки телефона

    — добавить кнопке прозрачности

    — сделать эффект появления кнопки при прокрутке страницы

    Если вопросы обширные, подскажите в каком направлении вообще копать эти вопросы?

    Заранее спасибо! У Вас потрясающий сайт.

    • Здравствуйте, Кирилл!
      1. Для того чтобы вставить картинку вместо надписи нужно в коде вместо «Заказать звонок» вставить тег картинки
      Вместо «/images/coll.png» у Вас будет идти путь к вашей картинке. Картинку можно добавить через медиафайлы WordPress, а затем скопировать её ссылку и вставить в предложенный код.
      2. Для добавления прозрачности используется CSS свойство opacity. В коде это будет выглядеть так:
      .call_back a{
      opacity:0.5;
      }

      Если вместо надписи будет картинка, то нужно написать так:
      .call_back a img{
      opacity:0.5;
      }

      Значение прозрачности задаётся от 0 до 1, где 1 это непрозрачное изображение.

      3. Плавное появление — это отдельная тема. Если хотите я напишу в ближайшее время статью по ней и скину Вам ссылку. Хорошо?

      • Юлия, огроменное спасибо! Да, напишите, пожалуйста, и такую статью.

  7. А у меня что-то не пашет(((

    • Что именно не работает?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif