Привіт, шановні читачі і гості 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> <! - спливає віджет кінець ->
<! - спливає віджет початок -> <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> <! - спливає віджет кінець ->
<! - спливає віджет початок -> <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;}}
.widgetblok {margin-top: 40px;} @media only screen and (max-width: 740px) {.widgetblok {display: none;}}
Тобто, я вказала верхній відступ за допомогою параметра margin-top: 40px; і прописала, що при розмірі екрану менше 740рх плаву віджет з'являтися не буде взагалі.
Тепер залишається перевірити як відображається фіксований віджет - відкрийте головну сторінку сайту на wordpress або найдовшу запис вашого ресурсу і перегорніть її в самий низ. Головне, при створенні такого плаву віджета дотримуватися простих правил:
- фіксуємо тільки останній віджет в sidebar;
- не варто фіксувати кілька блоків одночасно, тим самим зменшуючи конверсію одного з них;
- не допускаємо некоректне відображення блоку - дотримуємося відступи зверху і знизу, блок не повинен наїжджати на footer або відображатися повністю зверху;
На цьому у мене все! Сподіваюся у вас вийшло виконати рекомендації з цієї статті і створити плаваючий блок на своєму ресурсі. І звичайно ж, якщо інформація була для вас корисною, я не буду проти лайка в соцмережах.
Успіху і швидкої зустрічі!
З повагою, Наталя Яшина
