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

Share on Pinterest
Share with your friends










Отправить
5
Всего

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

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

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

Нам нужен плагин под названием 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{ тут ваши стили };
Share on Pinterest
Share with your friends










Отправить
5
Всего


Похожие записи

Комментарии к “Плавающий виджет в сайдбаре на WordPress”
  1. Elol 06.10.2016
  2. Natih 06.10.2016
  3. Celana 06.10.2016
  4. Sergey1984 06.10.2016
  5. Mvuser 06.10.2016

Напишите ответ