Плавающий виджет в сайдбаре на WordPress

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

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

Создаем подвижный виджет с помощью плагина

Нам нужен плагин под названием Q2W3 Fixed Widget. Скачайте его с официального сайта WordPress и установите. Установка данного плагина ничем не отличается от установки других дополнений. После установки нужно выбрать виджет, который должен быть подвижным. Для этого нужно зайти в админку сайта, нажать на нужный виджет и отметить галочкой пункт “Зафиксировать виджет”.

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

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

Создаем подвижный виджет с помощью кода

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

Код самого скрипта:

<script> $(window).scroll(function() { if ($(this).scrollTop()>3150) $('#scrollable').css({'position':'fixed','top':'40px'}); else $('#scrollable').css({'top':'3150px','position':'static'}); }); </script>
<div id='scrollable' style="width:298px";> контент </div>

Вместо слова “контент” вставляете то, что хотите разместить в плавающем виджете.

В седьмой строке подгоняете ширину под дизайн вашего сайта. Также можно задать блоку свой стиль, внеся поправку в style.css, добавив туда следующий ID:

#scrollable{ тут ваши стили };

Понравилась статья? Поделись с друзьями:
Комментариев: 5
  1. Как хозяйка блога я заинтересована в таком плагине, подписчики нужны. Но как же меня это раздражает как пользователя! Мне этот плагин напоминает голодную собаку, тыкающуюся постоянно носом в мою руку в надежде на подачку. Так думаю, кто заинтересован в подписке, тот найдет нужную кнопочку, гавное, чтобы она была. А с этим плавающим назойливым сервисом, по-моему, скорее отпугнуть можно, чем привлечь.

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

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

  3. Тут ещё многое зависит, от того, где расположен этот сайдбар, и какого он размера. Если правильно подобрать дизайн и местоположение, то раздражать не будет.

  4. как это сделать?

  5. Mvuser

    [QUOTE="Sergey1984, post: 649, member: 375"]как это сделать?[/QUOTE]

    Берешь и устанавливаешь плагин, потом настраиваешь виджет.

Добавить комментарий
Screenshot.png
Общаясь и проявляя активность в Клубе по WordPress

можно зарабатывать монеты и получить доступ в закрытый раздел