Как зафиксировать виджет и повысить конверсию формы в sidebar

Здравствуйте, уважаемые читатели и гости LediSeo! О Боже, я, практически год, не писала в своем любимом блоге. Возможно, кто-то уже решил, что проект закрылся, автор изменил свои взгляды и так далее. Не стройте иллюзий, проект не то что не закрывается, он наоборот развивается и выходит на новые высоты. Если проследить историю публикации материалов на сайте, то за последние четыре года было написано всего 5 статей. Мало! Но зато за это время я получила столько практики и опыта, что мало не покажется: продавец талантов, создатель страниц и сайтов, тренер.  Успела реализовать свою идею и открыла Школу Бизнеса. Кажется, это такие разные ниши, но если заглянуть в суть, то у них найдется одно общее звено — умение технически правильно создавать проекты и принимать креативные решения в нестандартных ситуациях. Именно решение одной такой ситуации и подтолкнуло меня на написание этого материала. Сегодня я расскажу о том, как создать плавающий или фиксированный виджет в боковой колонке (sidebar) на WordPress. Такой виджет может стать очень эффективным инструментом для повышения конверсии вашей формы захвата.

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

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

Преобразовать любой статический блок в плавающий виджет мы можем двумя способами: при помощи плагина Q2W3 Fixed Widget, либо же при помощи специального скрипта. Но при этом следует учитывать одну немаловажную деталь: для того чтобы информация корректно отображалась на ресурсе, мы можем зафиксировать, то есть, превратить в плавающий виджет, только тот блок в sidebar, который размещается самым последним.

Как установить фиксированный виджет в сайдбаре при помощи плагина

Итак, для того чтобы добавить плавающий виджет, нам необходимо установить специальный плагин wordpress — Q2W3 Fixed Widget из репозитория. Для этого переходим в административной панели нашего сайта к пункту «Плагины» и нажимаем на кнопку «Добавить новый»

В появившейся строке поиска следует ввести название «Q2W3 Fixed Widget» и нажать на Enter. В результате мы попадем на страницу, где будут отображаться все расширения, в названии которых содержится «Q2W3 Fixed Widget».

Для установки этого плагина кликаем по «Установить» и далее нажимаем на кнопку «Активировать». После успешной активации плагина в пункте «Внешний вид» появляется новая панель «Фикс. Виджеты», которая содержит несколько блоков с гибкими настройками для отображения плавающего виджета.

Блок «Основные настройки» фиксированного виджета содержит в себе несколько параметров:

• Верхний отступ — благодаря данной настройке мы можем установить отступ плавающего виджета от верхней области сайта;
• Нижний отступ — позволяет установить расстояние от плавающего виджета до нижней области сайта;
• Интервал обновления — задаем период времени, через который будут пересчитываться настройки положения блока: нижний и верхний отступы. Главное помним, чем чаще плагин будет пересчитывает положение блока, тем больше нагрузка на сервер сайта;
• Ширина отключения — при помощи данного параметра мы можем указать при каких размерах экрана монитора будет отключаться от показа плавающий виджет. Дело в том, что фиксированный блок некорректно отображается на экранах смартфонов и планшетов, поэтому данную настройку обязательно используем. Я указала 800рх;
• Высота отключения — работает аналогично параметру «Ширина отключения»

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

• Автоматически исправлять id виджетов — у некоторых шаблонов виджеты могут не иметь уникальные идентификаторы (html-атрибут id) или же они могут присваиваться некорректно. При помощи данного параметра можно исправить этот баг;
• Только зарегистрированные пользователи — этот параметр актуален только тогда, когда на сайте есть возможность регистрации пользователей. Поставив галочку в данном пункте вы указываете, что плавующий виджет будет отображаться только для зарегистрированных пользователей, а для обычных посетителей он будет статичным.
• Наследовать ширину фиксированного виджета — поставив галочку в данном пункте вы тем самым указываете, что ширина фиксированного блока будет изменяться вместе с шириной области sidebar;
• Вкл. jQuery(window).load() — активируем данный пункт, если скрипты JavaScript работают некорректно;
• Приоритет хука widget_display_callback — можем задать приоритет для выполнения функции, которая выводит на экран панель виджетов в sidebar.

И последний блок с настройками — это блок «Произвольные идентификаторы»

Этот блок более подойдет опытным веб-мастерам, которые применяют нестандартные элементы для вывода sidebar.

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

Открыть на редактирование самый последний виджет и  поставить галочку в пункте «Зафиксировать виджет». Сохраняем произведенные изменения.

Как зафиксировать виджет без плагина

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

Для этого используем код, который следует разместить в файле footer.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!--всплывающий виджет начало-->
<script type="text/javascript">// <![CDATA[
if (typeof(jQuery) == 'function') {
$j = jQuery.noConflict();
var $float_block = $j('#asbseo');
var $float_bottom = $j('#footer');
var sdb_float_fixtop = 5;
var float_bottom_limit = $float_bottom.offset().top-20;
setTimeout(function(){ float_bottom_limit = $float_bottom.offset().top-20; }, 2000); // Пересчитаем спустя время
var float_top_init = $float_block.offset().top;
var sdb_float_position = $float_block.position();
var float_block_height = $float_block.height()+sdb_float_fixtop;
var sdb_move_last = false;
var float_lift = 0; // поднимает блок, когда он упирается во float_bottom
var float_lift_complete = false;
$j(window).bind('scroll resize', function () {
if (float_bottom_limit - float_top_init - float_block_height < 100) return; var sdb_move = ($j(window).scrollTop() > float_top_init - sdb_float_fixtop);
if (sdb_move) {
float_lift = float_bottom_limit - $j(window).scrollTop() - (float_block_height-sdb_float_fixtop);
if (float_lift < 0) { $float_block.css('top', float_lift); float_lift_complete = true; } // когда поднимать не надо, устанавливается начальное значение верхнего отступа else if (float_lift_complete) { $float_block.css('top', sdb_float_fixtop); float_lift_complete = false; } } if (sdb_move_last != sdb_move) { sdb_move_last = sdb_move; if (sdb_move) { $float_block.css({'position':'fixed', 'top':sdb_float_fixtop}); } else { $float_block.css('position', 'static'); } } }); $j(window).scroll(); } // ]]></script>
<!--всплывающий виджет конец-->

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

1
2
3

<!--всплывающий виджет начало-->
<div id="asbseo" class="widgetblok">Текст информации блока</div>
<!--всплывающий виджет конец-->

Вместо текста «Текст информации блока» размещаем код формы подписки, банер со ссылкой и так далее. Все что теперь остается сделать — это прописать css стили отображения зафиксированного виджета и медиа запрос в файле style.css

1
2

.widgetblok{margin-top:40px;}
@media only screen and (max-width:740px) {.widgetblok{display:none;}}

То есть, я указала верхний отступ при помощи параметра margin-top:40px; и прописала, что при размере экрана менее 740рх плавующий виджет появляться не будет вообще.

Теперь остается проверить как отображается фиксированный виджет — откройте главную страницу сайта на wordpress или самую длинную запись вашего ресурса и пролистайте ее в самый низ. Главное, при создании такого плавующего виджета соблюдать простые правила:

1. фиксируем только последний виджет в sidebar;
2. не стоит фиксировать несколько блоков одновременно, тем самым уменьшая конверсию одного из них;
3. не допускаем некорректное отображение блока — соблюдаем отступы сверху и снизу, блок не должен наезжать на footer или отображаться полностью сверху;

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

С уважением, Наталья Яшина

Вам понравилась статья? Расскажите о ней друзьям!