Приветствую вас, дорогие друзья!
В этой статье я хочу вам рассказать о том, как сделать плавающую кнопку на сайте. Данная кнопка будет оставаться на одном месте при прокрутке страницы и по нажатию на ней можно открыть либо форму заказа обратного звонка, либо форму отправки заявки, форму авторизации, форму подписки или что то ещё.
Навигация по статье:
Её использование поможет сэкономить место на сайте, а также привлечь внимание посетителей, ведь она всегда остаётся у них на виду. Короче полезная штука, которую можно использовать для реализации разных задач.
Выглядеть эта кнопка будет как то так:
Как создать плавающую кнопку?
Для этого нужно открыть файл с кодом страницы вашего сайта. Если ваш сайт сделан на WordPress, то открываем файл footer.php и в самом конце перед закрытием тега добавляем следующий код:
|
1 |
<div class="call_back"><a href="#">Заказать звонок</a></div> |
Вместо «Заказать звонок» вы вписываете любой нужный вам текст.
Далее нам нужно прописать определённые CSS свойства для этого блока, чтобы он был похож на плавающую кнопку.
Для этого открываем файл стилей сайта. В случае с WordPress это будет файл style.css, который находится по адресу:
В самом конце данного файла нам нужно прописать следующие свойства:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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 градусов отвечает вот этот набор свойств:
|
1 2 3 4 5 |
-webkit-transform: rotate(-90deg); /*Поворот блока с текстом н 30 градусов*/ -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); |
По сути это одно и то же свойство, но так как оно само по себе может не поддерживаться более старыми версиями браузеров, пишем его с кроссбраузерными префиксами. Поэтому получается 5 строк вместо одной.
Стиль плавающей кнопки вы можете корректировать под дизайн вашего сайта. Я поставила комментарии в коде, чтобы было понятно где что менять.
Если вы хотите чтобы по нажатию на плавающую кнопку осуществлялся переход на другую страницу, то в коде
|
1 |
<a href="#">Заказать звонок</a> |
вместо # ставим ссылку на страницу.
Если нужно чтобы открывалась всплывающая форма, то здесь нам нужно будет установить один плагин и внести небольшие корректировки в добавленный нами код.
Как создать всплывающее окно?
О том, как создать всплывающую форму обратной связи на сайте WordPress я писала в этой статье. Аналогично создаётся всплывающее окно для любого другого контента.
Если в двух словах, то вот что нужно сделать:
- 1. Устанавливаем плагин Easy FancyBox
- 2. Переходим в меню «Настройки» => «Медиафайлы»
- 3. Находим настройки Easy FancyBox, снимаем галочку возле пункта «images» и ставим возле пункта «Inline content», после чего сохраняем изменения.
Теперь нам нужно немного доработать наш код, а именно: добавить ссылке класс inline-content, затем добавить скрытый блок со всплывающим контентом и поставить ссылку на этот блок.
На практике это будет выглядеть так:
|
1 2 3 4 5 6 7 |
<div class="call_back"><a class="fancybox-inline" href="#form_pop_up">Заказать звонок</a></div> <div class="fancybox-hidden" style="display: none;"> <div id="form_pop_up">Здесь сам контент, который будет отображаться во вплывающем окне</div> </div> |
Вместо «Здесь сам контент, который будет отображаться во вплывающем окне» вы можете вставить свой текст, вывести шорткод формы обратной связи, добавить код формы подписки и так далее.
Вот как это будет выглядеть на сайте:
Я там добавила ещё внутренний отступ в 20 пикселей и серую рамку для блока всплывающей формы с id= «form_pop_up»
|
1 2 3 4 |
#form_pop_up{ border:1px solid #ccc; padding:20px; } |
В итоге весь добавленный CSS код выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.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; /*рамка вокруг кнопки*/ } #form_pop_up{ border:1px solid #ccc; padding:20px; } |
На этом у меня всё! Спасибо что дочитали до конца! Если статья была для вас полезной то не забудьте поделиться ею в соцсетях, также подписывайтесь на обновления блога и на канал YouTube.
С уважением Юлия Гусарь
Добрый день, Юлия
Огромное спасибо за информацию, это именно то, чего не хватало в вашей предыдущей статье про «всплывающую форму обратной связи».
Пошел эксперименторовать на своих сайтах :)
Алексей! И Вам большое спасибо за комментарий! Надеюсь у Вас всё получится!
Доброго времени суток.
Меня интересует один пункт из вашей статьи, а именно:
«Вместо «Здесь сам контент, который будет отображаться во вплывающем окне» вы можете вставить свой текст, вывести шорткод формы обратной связи, добавить код формы подписки и так далее.»
Я вставил шоркод http://prntscr.com/c05sag и при нажатии на кнопку, появляется просто текст http://prntscr.com/c05skr
Статью перечитал уже раз 5. Подскажите пожалуйста что не так я делаю?
Здравствуйте! А Вы весь этот код вставляли в шаблон, в запись или в виджет? Если в шаблон, то он не будет работать в том виде в котором Вы его вставили. Его нужно через специальную php функцию выводить. Вот ссылка на статью, где написано как это сделать Вставка шорткода в шаблон WordPress или почему не работает шорткод в файлах темы?
Здравствуйте, Юлия. Поясните, пожалуйста, что должно находиться на месте <!—Блок со скрытым контентом—> ? У меня всплывающая форма обратной связи, я шорткод написала вместо >Здесь сам контент, который будет отображаться во вплывающем окне<.
Здравствуйте, Надежда!
Вместо < !—Блок со скрытым контентом—> ничего не нужно ставить! Это просто комментарий в HTML коде чтобы было понятно что это за блок и зачем он нужен. Чтобы не сбивать людей с толку я удалила эту строку из кода :)
Большое спасибо Юленька! Очень помогла ваша статья!
Александр! И Вам спасибо за комментарий! :)
Юлия, доброй ночи!
Подскажите, пожалуйста, а как вместо кнопки «Заказать звонок» вставить картинку?
Допустим, трубку телефона.
Юлия, добрый день!
Подскажите, пожалуйста:
— как вместо кнопки с надписью «Заказать звонок» вставить кнопку в виде картинки, например, трубки телефона
— добавить кнопке прозрачности
— сделать эффект появления кнопки при прокрутке страницы
Если вопросы обширные, подскажите в каком направлении вообще копать эти вопросы?
Заранее спасибо! У Вас потрясающий сайт.
Здравствуйте, Кирилл!
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. Плавное появление — это отдельная тема. Если хотите я напишу в ближайшее время статью по ней и скину Вам ссылку. Хорошо?
Юлия, огроменное спасибо! Да, напишите, пожалуйста, и такую статью.
А у меня что-то не пашет(((
Что именно не работает?
Добрый день! Великолепная статья.
Однако, столкнулся со странной проблемой. Плавающая кнопка создаётся, отображается и работает во всех браузерах кроме Chrome. В chrome висит просто текстовая ссылка в подвале. CSS код — как в статье.
Что это может быть такое?
Добрый день. Спасибо!Великолепная статья!На у меня вот какая проблема возникла. Хотел сделать сделать эффект появления кнопки при прокрутке страницы. Все получилось, но только когда заходишь на сайт (или обновляешь страницу) кнопка уже видна, только начинаешь прокручивать страницу , кнопка исчезает и появляется на том уровне на котором я указал, в скрипте(что вообщем то так и должно быть) и далее работает исправно, до следующего обновления страницы.Как исправить появление кнопки при загрузке (обновлении ) страницы??
Вот скрипт появления:
<script type=»text/javascript»>
jQuery(function(f){
var element = f(‘.call_back’);
f(window).scroll(function(){
element[‘fade’+ (f(this).scrollTop() > 80 ? ‘In’: ‘Out’)](50);
});
});
</script>
Вот текст кнопики:
<div class=»call_back»><a class=»fancybox-inline» href=»#form_pop_up»><img src=»https://yugstomservice.000webhostapp.com/wp-content/uploads/2017/03/logotip_zvonok-e1490687731597.jpg» /></a>
</div>
<div class=»fancybox-hidden» style=»display: none;»>
<div id=»form_pop_up»><?php echo do_shortcode(«
«); ?>
</div>
</div>
В стилях код точно такой же, как и у вас на сайте.
Здравствуйте! А для класса call_back стоит в стилях display:none; ?
Юлия, добрый день, подскажите, как сделать появление формы через определенное время, очень нужно, большое спасибо!
Здравствуйте! Вам нужно в настройках Easy FancyBox, в разделе Настройки->Медиафайлы->Miscellaneous задать интервал в миллисекундах, по истечении которого будет открываться форма. А в коде использовать класс fancybox-auto.
Здравствуйте Юлия. Скажите пожалуйста как установить кнопку по центру?!
.call_back{
transform: rotate(0deg);
position:fixed;
z-index:999;
right: 50%;
top: 90%;
margin-right:-11%; }
.call_back a{
color:#fff;
display:block;
background:#e84545;
font-size:16px;
text-align:center;
padding:3px 60px;
font-weight:500;
border-radius:20px;
border:7px solid #e84545;
}
Если смотреть сайт с компьютера она по середине, а если с телефона или планшета она смещается относительно центра….
Попробуйте для .call_back убрать right: 50%; и добавить text-align:center!important;
Здравствуйте Юлия!
После настройки плагина w3 total cache перестало появляться всплывающие окно, может быть Вы знаете в какую сторону смотреть?
Разобрался. После включения пункта Minify, всплывающие окно перестаёт появляться.
А именно вот этот пункт https://yadi.sk/i/r-JlnU4X3SqXNv
Здравствуйте, очень полезная статья и все очень просто написано, понятно даже новичку! У меня такой вопрос, а можно ли сделать, чтобы эта плавающая кнопка была не на всех страницах сайта?
Здравствуйте, Жанна! Да, можно. Для этого нужно скрыть её при помощи CSS на тех страницах где она не нужна.
Самый простой способ — это на тех страницах где кнопка не нужна на вкладке «Текст» вставить код для скрытия кнопки
Есть и другие способы, но они сложнее
Ура, кнопка получилась!!! Спасибо! Всё так просто и понятно!
Рано обрадовалась… Мне была нужна кнопка для мобильной версии. Именно в мобильной версии кнопка не появилась.
Юлия, код для всплывающей кнопки принципиально не подходит для мобильных версий сайтов на WP? Мобильная версия создаётся с помощью Jet Pack.
Простите! Вечер приключений! Теперь всё есть и всё работает!
Пожалуйста, удалите эти мои страдания, оставьте только первый комментарий про «Всё просто и понятно».
Потому что реально всё просто. А если что-то не работает на хостинге или на движке, то Вы не виноваты!
Спасибо Вам!
Добрый день! А подскажите, пожалуйста, если по умолчанию на сайте есть всплывающая кнопка «Купить» (всплывает при наведении мыши на карточку товара), а нужно ее сделать фиксированной внизу карточки товара. Т.е. отменить всплывание. Как это сделать? Буду признателен за ответ.
Здравствуйте, Виталий! Трудно что то подсказать не видя сайта и его кода.