Плавающая кнопка wordpress: WordPress плагин Click to Contact

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

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

Для примера возьмем стандартную wordpress тему – Twenty Eleven.

Вот так будет выглядеть создаваемая нами кнопка:

Демо-пример можно посмотреть тут:

http://mnogoblog7.p.ht/

 

Приступим:

1. Заходим в файл стилей style.css – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

После в самый низ файла style.css вставим следующий код:

.add_comment {
  display:block;
  width:30px;
  height:150px;
  position:fixed;
  left:0;
  top:200px;
  z-index: 99999;
}

Где:
width:30px; – ширина кнопки.

height:150px; – высота кнопки.
left:0; – отступ слева, если вы поменяете данную строчку на right:0;  – то кнопка будет располагаться справа, также можно указать отступ в пикселях, например: left:20px;
top:200px; – верхний отступ.
z-index: 99999; – задает расположение элемента поверх всех остальных, например у картинки шапки в теме Twenty Eleven данный параметр имеет значение 9999 и если ваша кнопка будет иметь значение ниже данного параметра, то она будет располагаться под ней.

Также можно добавить строчку:

background:#2B96C6; – она задает фон кнопки, можно задать как цвет, так и картинку.

 

2. Заходим в файл header.php – – для этого входим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл header.php.

В нем сразу после тега body вставляем вывод нашей кнопки:

<a href="ссылка на открываемую страничку">Текст кнопки</a>

Как видите это код обычной ссылки, только для нее задан особый класс –
class=”add_comment”, стиль оформления которого мы прописали в пункте 1 данной статьи.

 

3.Чтобы придать дизайн кнопке, нужно создать для нее изображение

.

Можно скачать кнопку в интернете и подкорректировать ее в Photoshope (или другом графическом редакторе), как я и сделал для данной кнопки, незабываем, что размер кнопки мы задаем в файле стилей style.css (пункт 1 данной статьи), в данном примере она имеет размеры: 30*150 px, следовательно и изображение для кнопки должно быть 30*150 px.

У меня получилось следующее изображение:

Можете скачать ее и попробовать вставить ее к себе на сайт или на тестовый сайт на каком-нибудь бесплатном хостинге (я так пользуюсь hostinger.ru).

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

<a href="ссылка на открываемую страничку"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

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

<a href="https://mnogoblog. ru/ob-avtore"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.gif" /></a>

Все готово!

PS: Как сделать, чтобы кнопка была не видна на конкретной страничке.

В файл header.php нужно прописать следующее.
В данном примере, кнопка будет не видна на записи с id=1 – как посмотреть какой id у записи? – достаточно в панели управления wordpress зайти в пункт “Записи”, подпункт “Все записи”, открыть в Редакторе нужную запись и в адресной строке браузера у вас отобразиться id записи, например, если в адресной строке видим следующее “https://mnogoblog.ru/wp-admin/post.php?post=1&action=edit”, соответственно id странички равен 1.

<?php
if(is_single(1)) {
// если запись имеет ID=1
include 'single-290.php';
} else {

?>
<a href="https://mnogoblog.ru/ob-avtore"><img alt="buttons" src="https://mnogoblog.ru/wp-content/uploads/2013/04/buttons.
 gif" /></a>


<?php } ?>

плавающее действие Plugin Для WordPress

Обновлено: 12 ноября 2022 г.

Партнерское раскрытие: Полная прозрачность — некоторые ссылки на нашем веб-сайте являются партнерскими ссылками, и если вы используете их для совершения покупки, мы будем получать комиссию без дополнительных затрат для вас (вообще никакой!).

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

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

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

 

О батонайзере!

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

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

Что можно делать с помощью Buttonizer?

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

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

• Звонок по клику
• Общайтесь с WhatsApp
• Социальные сети
• Посланник facebook
• Открыть URL
• Открыть Pop-up Maker
• Открыть функцию Javascript

**И многое другое!

Еще нужно сделать!

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

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

• Пользовательский класс (скоро)
• Индивидуальное позиционирование
• Label Styling (скоро)
• Цвет кнопки, цвет при нажатии и цвет значка
• Выберите форму плавающего меню

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

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

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

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

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

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

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

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

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

• Показывать по таймауту
• 3 кнопки анимации
• Показать глубину прокрутки

Как только ваше программное обеспечение Google Analytics будет установлено на вашем веб-сайте, каждый ключ будет отслеживаться на вашей странице. Если он у вас не включен или Google Диспетчер тегов вместо этого включен, но по-прежнему хотите контролировать свои летающие кнопки с помощью кликов? Тогда вы можете случайно прикрепить программное обеспечение Google Analytics к папке конфигурации Buttonizer.

Самое лучшее во всем — название, которое вы вводите для своей кнопки, — также отображается в разделе действий Google Analytics, поэтому вы всегда понимаете, какие кнопки работают лучше других.

• Автоматическое отслеживание Google Analytics
• Уведомления об использовании кнопки Buttonizer (скоро)
• Добавить программное обеспечение GA вручную
• Имена настраиваемых событий Google Analytics

Проверьте Buttonizer сейчас

Планы и цены

Пуговица в настоящее время предлагает пользователям выбирать из 4 различных пакетов, цена которых зависит от количества веб-сайтов, для которых вы хотите использовать Buttonizer. Замечательно то, что все пакеты, кроме «Безлимитного», предлагают варианты как годовой подписки, так и пожизненной подписки (разовая оплата).

• Один сайт

Цена: 19 долларов в год ИЛИ 59 долларов один раз

 

• 2 сайтов

34 доллара в год ИЛИ 104 доллара один раз

 

• 10 сайтов

99 доллара в год ИЛИ 299 доллара один раз

 

• Безлимитный

199 долларов в год

 

Предлагаемые функции и инструменты:

 

 

· Добавить неограниченное количество плавающих кнопок действий

· Сделайте плавающее меню

· Click Action: Open URL

· Click-to-Call

· Click-to-E-mail

· Click-to-WhatsApp

· Открыть функцию Javascript

· Кнопки социальных сетей

· Пользовательское расположение кнопок

· Выберите значок кнопки

· Загрузить изображение вместо значка

· Добавить метку кнопки

Почему вы должны использовать Buttonizer?