03  мая

Как создать подвижный сайдбар на wordpress

Как создать подвижный сайдбар на wordpress Сайдбар редко интересует пользователя, пришедшего на сайт из поисковика. Как правило, все тут же спускаются вниз или начинают листать страницы в поисках нужной информации. Заинтересовать пользователя в информации на сайдбаре — высший пилотаж, поскольку здесь можно разместить массу полезной информации, подписку, рекламные ссылки и так далее. Оптимально создать плавающий виджет — он будет «назойливо» преследователь пользователя на всех посещаемых страницах на сайте.

Польза кошельку вебмастера и владельца сайта от сайдбара просто неоценима — размещенная контексная реклама будет собирать больше кликов (имейте в виду, Google не очень положительно, скорее отрицательно относится к любым подвижным элементам сайта, размещать в подвижном сайдбаре блок от AdSense не рекомендуется), прикрученная подвижная форма подписки соберет в разы больше пользователей, самое оптимальное — продавать место на сайдбаре под рекламные баннеры. В общем, включайте смекалку и используйте подвижный виджет как можно чаще.

Создать такой виджет можно двумя способами:
- плагином
- с помощью кода.

Плавающий виджет с помощью плагина.

Скачали плагин, распаковали и установили. Если возникли проблемы с распаковкой или открытием файлов любого формата или расширения, очень рекомендуем посетить openext.ru, где размещены все программы для открытия файлов любого расширения. После того, как плагин установлен, настраивайте виджет, который требуется сделать подвижным.

Как создать подвижный сайдбар на wordpress


После этого заходите в админку Wordpress - раздел “внешний вид”, выбираете пункт “фикс. виджет”и настраиваете виджет, что называется, под себя. С учетом того, что использование плагина всегда сказывается на скорости работы сайта, лучше использовать код.

Плавающий виджет с помощью кода.

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

Код скрипта:

$(window).scroll(function() { if ($(this).scrollTop()>3150) $('#scrollable').css({'position':'fixed','top':'40px'}); else $('#scrollable').css({'top':'3150px','position':'static'}); });
контент


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

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

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



Обнаружили ошибку в тексте или не рабочую ссылку? Выделите ошибку или ссылку мышкой и нажмите Ctrl+Enter!


1 августа 2016 11:14


Как сообщает компания Oculus VR, команда тесно работает с инженерами виртуальной реальности и разработчиками игры для создания гибридного опыта повествования. Данная история создает ощущение чего-то большего, чем просто история. Человек попадает в виртуальный мир, который что-то знает о нем самом. Герои знали как не столкнуться и не пройти сквозь друг друга.

Цитировать
Добавление комментария

Ваше Имя:
Ваш E-Mail:

Вопрос: Слово "привет" наоборот

Введите ответ: