Як створити та відобразити спливаюче вікно за тегом публікації в WordPress

Ви хочете створити та відобразити одне спливаюче вікно для кожного тегу публікації в WordPress? Тож продовжуйте читати цю статтю.

Ми впевнені, що ви вже знайомі з маленьким віконцем, яке з’являється під час перегляду веб-сайту. Ну, це називається спливаюче вікно або спливаюче вікно. Спливаючі вікна можуть відображатися в різних розмірах і на екрані веб-сайту.

У WordPress є багато плагінів для створення спливаючих вікон, таких як Elementor Pro, JetPopup, Brizy Pro тощо.

Важливо пам’ятати, що спливаючі вікна не повинні дратувати відвідувачів вашого сайту. Тому створюйте спливаюче вікно максимально простим і привабливим.

Зміст

Деякі плагіни WordPress для створення спливаючих вікон

Elementor Pro

Elementor Pro — це розширення Elementor із сотнями преміум-функцій. Він надає вам потужні професійні інструменти, які прискорюють робочий процес і дизайн. Elementor Pro дає вам повний контроль над макетом і дизайном вашого сайту. У цьому випадку ви можете вільно налаштувати дизайн спливаючого вікна.

використання Elementor Pro створити спливаюче вікно за тегом публікації дуже просто та легко у використанні. Ви можете легко визначити умови відображення вашого спливаючого вікна дуже точним способом.

JetPopup від Crocoblock є розширенням для Elementor . Ви можете придбати його як окремий плагін або придбати в комплекті з іншими плагінами Crocoblock. Перевага використання JetPopup для створення спливаючого вікна полягає в тому, що він має багато цікавих функцій.

Ви можете пограти з тригерами спливаючого вікна.
Ви можете створити анімацію для спливаючого вікна.
Доступна велика кількість спливаючих шаблонів.

Читайте також: 22 найкращі преміум-додатки для Elementor

Brizy Pro

Конструктор спливаючих вікон Brizy Pro пропонує вам два варіанти. Перше — спливаюче вікно, яке активується клацанням, а друге — автоматичні тригери та умови.

Відкриття після натискання: спливаюче вікно можна відкрити, просто натиснувши на елементи вашої сторінки.
Автоматичні тригери та умови: ви можете налаштувати дії відвідувачів, які визначатимуть, коли відображатимуться спливаючі вікна.

Як згадувалося раніше, у вас є кілька варіантів створення спливаючого вікна в WordPress. У цьому посібнику ми покажемо вам, як створити та відобразити спливаюче вікно для кожного тегу публікації за допомогою версії Elementor Pro, тому переконайтеся, що у вас уже є.

Перше, що потрібно зробити, це створити новий шаблон Popup. Щоб створити новий шаблон спливаючого вікна, перейдіть до Шаблони > Спливаючі вікна на інформаційній панелі WordPress і натисніть кнопку Додати новий.

Далі додайте назву спливаючого вікна та натисніть кнопку СТВОРИТИ МОДЕЛЬ.

Вас буде спрямовано до бібліотеки шаблонів, ви можете вибрати шаблон у вікні бібліотеки або створити власний шаблон спливаючого вікна. Щоб використати шаблон із бібліотеки, просто натисніть кнопку вставити.

Але в цьому підручнику ми збираємося створити шаблон Popup з нуля. Натисніть значок X щоб закрити бібліотеку шаблонів.

Перш ніж почати створювати шаблон спливаючого вікна, нам потрібно внести деякі зміни в налаштування спливаючого вікна. Ви можете знайти найкращі налаштування для свого сайту. У цьому посібнику ми покажемо вам параметри спливаючих вікон на ваш вибір.

Натисніть значок шестірні в нижньому лівому куті. У налаштуваннях спливаючого вікна змініть Ширина на 90% ширини огляду (VW) Et становище en Центр-Внизу.

Далі розробіть свій шаблон Popup. Додайте новий розділ і виберіть структуру з 5 стовпців. У розділі налаштувань встановіть Ширина на 950. Ви можете грати зі своїми налаштуваннями.

Наприклад, можна перейти на вкладку стиль щоб встановити фон, перейдіть на вкладку просунутий налаштувати маржу та багато іншого.

Тепер повернемося до ваших колонок. У лівій колонці встановіть ширину 33%, а для інших чотирьох – 16%.

У лівій колонці ми додамо віджет «Заголовок» із текстом. Ви можете додати текст, що запрошує відвідувачів вашого веб-сайту переглянути інший вміст, який відповідає поточному вмісту, або будь-який інший текст на ваш вибір.

Праворуч ми додамо віджет Image. Ви можете додавати зображення з ескізів/вибраних зображень дописів або завантажувати їх вручну.

Тепер конструкція готова. Повернутися до Параметри спливаючого вікна для налаштування анімації входу, виходу та полів. У цьому підручнику ми встановили значення введення Згасати і вихід на Зникати. Потім перейдіть на вкладку просунутий і встановіть маржу на 30 (загальне значення для посилань).

Тепер, коли дизайн готовий, натисніть кнопку ПУБЛІЕР щоб встановити умови відображення та тригери. Щоб визначити умови відображення, натисніть кнопку ДОДАТИ УМОВУ і виберіть потрібний варіант із розкривного списку.

Оскільки ви хочете відобразити тег Popup by post, ви можете встановити наступні умови відображення (див. анімацію).

Натисніть Далі. У вкладці тригери, встановіть тригер на На прокручуванні перемикання перемикача на да. Дайте визначення Керівництво на Bas і Ширина понад 95%. Оскільки ми хочемо, щоб спливаюче вікно з’являлося, коли відвідувачі досягають кінця нашої статті.

У цьому посібнику ми не будемо давати визначення Додаткові правила. Тож натисніть ЗБЕРЕГТИ І ЗАКРИТИ. Ну, тепер ми закінчили.

Давайте подивимося, як це виглядає.

Ось ви щойно завершили створення спливаючого вікна. Дивіться також наші пов’язані статті:

Завантажте Elementor Pro

Поділіться цією статтею:

Міхось Гартнер

Міхось Гартнер — експерт із цифрових інструментів, який купує, тестує та перевіряє інструменти SAAS для малого бізнесу. Спираючись на багаторічний досвід у галузі технологій, він дає глибокі огляди. Його вміст широко використовується, обслуговуючи мільйони користувачів щомісяця.