Спливаюче вікно підписки - створення спливаюче вікно на сайті
Відео: Як створити спливаюче вікно на канал youtube. кнопка підписки
Відео: Установка форми підписки у спливаючому вікні. Плагін WP Subscribe Pro
Кожен власник сайту тим або іншим способом збирає свою передплатну базу. Адже саме передплатна база, що говорять багато інфобізнесмени, є золотим активом. Суть збору підписаний бази полягає в тому, щоб відвідувач залишив вам свої контактні дані. Найчастіше це є адреса електронної пошти. Сьогодні ми розглянемо спливаюче вікно підписки на оновлення сайту. Це вікно буде з`являтися під час прокручування сторінки. Можливо ви бачили такі модальні вікна, але не знали як реалізувати біля себе на сайті - тоді цей урок для вас.
Відразу подивіться приклад спливаючого вікна підписки і зверніть увагу коли воно з`являється:
Подивитися прімерСкачать
Як користуватися? - Спливаюче вікно підписки на оновлення
HTML частина
Викачуємо бібліотеку jQuery (тут) І плагін jQuery.subscribe-better.js (тут або беремо з прикладу) зі стилями subscribe-better.css, потім підключаємо:
123 | lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.subscribe-better.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / subscribe-better.css" /gt; |
Створимо HTML структуру:
12345678 | lt;bodygt; ..lt;div class="Subscribe-me"gt;lt;a href="#close" class="Sb-close-btn"gt; xlt;/agt; ...lt;/divgt; ..lt;/bodygt; |
Все що знаходиться між блоком з класом subscribe-me буде відображатися у спливаючому вікні.
jQuery частина
Після чого необхідно лише викликати функцію появи спливаючого вікна:
Відео: Як створити спливаюче вікно підписки на youtube канал
12345678 | $(".subscribe-me").subscribeBetter({trigger: "Atendpage",animation: "Fade",delay: 0,showOnce: true,autoClose: false,scrollableModal: false})- |
У прикладах, які можете побачити вище, властивостей набагато менше, але для того щоб можна було більш гнучко налаштовувати спливаюче віконце, можна застосовувати додатково наступні властивості:
- trigger - це властивість є практично основним, тому що відповідає за те коли буде з`являтися спливаюче вікно підписки. В наявності є таке значення: «Atendpage» - поява коли прокрутка досягла кінця сторінки (воно стоїть за умовчанням), «onload» - поява одразу після завантаження сторінки, «Onidle» - поява після прокрутки сторінки.
- animation - задає анімацію появи вікна. Значення можуть бути наступні: «Fade», «FlyInLeft», «FlyInRight», «FlyInUp» і «FlyInDown». Тут кожен параметр ви можете подивитися самостійно, прописуючи кожне з значень для властивості animation. За замовчуванням значення задано «Fade».
- delay - відповідає за затримку перед появою спливаючого вікна. Здається в мілісекундах, тобто 3000 мс - це 3 секунди. За замовчуванням дорівнює «0».
- showOnce - якщо встановити це властивість в значення в «False», то вікно буде з`являтися кожен раз коли виконується умова (наприклад, кожен раз коли прокрутка сторінки сягатиме кінця). Якщо ви дійсно любите своїх відвідувачів, тоді залиште це значення в «True». За замовчуванням воно задано в значення «True».
- autoClose - якщо хочете щоб вікно автоматично закривалося коли користувач продовжує перекручувати сторінку, тоді встановіть значення для цієї властивості «True». Спочатку варто значення «False».
- scrollableModal - якщо у вас багато інформації в модальному вікні та вона не поміщається, тоді ви можете зробити спливаюче вікно з прокруткою, для цього значення цієї властивості має бути «True». За замовчуванням для цієї властивості встановлено значення «False».
Відео: Спливаючі PopUp вікна Сервис створення вікон JumpOut
висновок
Що стосується мене, то я не дуже люблю спливаючі вікна. Але багато інфобізнесмени їх успішно використовують, тому уважно подивіться в яких випадках у них з`являються спливаючі вікна. В іншому випадку можна відлякати відвідувача і не побачити його більше.
Бажаю вам успіхів у зборі своєї передплатної бази! А також хочу вам порадити більше експериментувати, тому що саме тоді ви зможете знайти той спосіб, який почне працювати і приносити прибуток # 128521; .
Успіхів!
джерело: https://onextrapixel.com/2014/08/19/create-customizable-subscription-modalnewsletter-signup-window-with-jquery-subscribe-better-js/