Спливаюче вікно підписки - створення спливаюче вікно на сайті

Відео: Як створити спливаюче вікно на канал 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/

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!