Створюйте спливаючі вікна Elementor у WooCommerce

Ми всі великі шанувальники WooCommerce. Його легко налаштувати та налаштувати. Функції, які спрощують створення та керування динамічним і потужним магазином електронної комерції, включені в пакет.

Однак для створення успішної сторінки електронної комерції потрібно більше ніж просто додавати популярні продукти. Усі сторінки також мають бути привабливими. Чим візуально привабливішим і зручнішим є ваш веб-сайт, тим більша ймовірність залучити більше клієнтів.

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

Хоча WooCommerce створює для вас кошик для покупок і сторінку оформлення замовлення, коли ви створюєте свій сайт, Elementor робить їх привабливішими, налаштовуючи їх.

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

Створивши теплу сторінку подяки та оновивши сторінки «Мій обліковий запис» і «Умови обслуговування», ви можете завоювати серця й уми своїх клієнтів.

Функція перетягування та скидання Elementor у поєднанні з цим посібником забезпечить безпроблемне створення ваших сторінок.

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

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

Після того, як ви натиснули «ДОДАТИ НОВЕ СПЛИВНЕ ВІКНО» (це досить зрозуміло), вас попросять дати йому ім’я, а потім вибрати шаблон із відображених готових amp файлів. Різноманітні шаблони доступні для багатьох цілей; одні підходять для оголошень, інші для реклами знижок, треті ідеально підходять для заохочення користувачів підписатися на щось. Є навіть amp попереджень користувачів про використання файлів cookie або інших повідомлень GDPR. Щойно ви знайшли те, що вам подобається, клацніть на ньому, щоб побачити більший попередній перегляд, а потім натисніть кнопку «Вставити».

Після натискання цієї кнопки ви перейдете до конструктора спливаючих вікон у серверній частині WordPress.

Якщо ви працювали з Elementor у минулому, ви почуватиметеся як вдома з інтерфейсом, параметрами та тим, як усе викладено для вас. По суті, це той самий процес, що й створення шаблонів сторінок Elementor у WordPress.

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

Конфігурація спливаючого вікна

 Саме тоді ви маєте побачити попередній перегляд вашого спливаючого вікна – або чистого листа, або шаблону, який ви вибрали.

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

• Саме тут вам захочеться проводити найбільше часу, оскільки саме тут ви зможете створювати різні типи спливаючих вікон. Іншими словами, регулюючи ці параметри, ви зможете досягти наступних ефектів:

• Модальні спливаючі вікна є типом модального вікна.
• Слайди, панелі сповіщень тощо.

Крім того, ви можете налаштувати кілька інших важливих параметрів.

Налаштування доступні такі параметри :

• Змініть висоту та ширину зображення.
• Змініть вертикальну або горизонтальну орієнтацію об’єкта ( amp , ви можете зафіксувати його вгорі або внизу, щоб створити панель сповіщень)
• Прийміть рішення щодо використання накладання (це дозволяє, amp , зробити фон сірим, коли спливаюче вікно активне)
• Вимкніть кнопку закриття в браузері.
• Включіть анімацію для входу.

«Стиль» можна виконувати такі дії :

• Ви можете змінити колір фону, зробити його градієнтним або використати зображення як фон.
• Якщо накладання ввімкнено, налаштуйте його.
• Якщо у вас увімкнено кнопку закриття, її потрібно налаштувати.

Нарешті, вкладка «Додатково» містить кілька різноманітних налаштувань імпорту, які дозволяють виконувати такі дії:

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

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

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

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

Ви також можете створювати спливаючі вікна за допомогою візуального конструктора в Elementor

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

Ви можете використовувати будь-який віджет Elementor, який дає вам великий контроль над остаточним дизайном. Віджет «Форма» — це єдине, що вам обов’язково потрібно включити, оскільки це єдиний, який дозволяє вам створити форму для підключення до електронної пошти.

За допомогою віджета «Форма» ви маєте повний контроль над полями, які ви хочете запропонувати, а також над текстом і зовнішнім виглядом кнопки «Надіслати». amp :

Крім того, я настійно раджу вам ознайомитися з усіма віджетами та параметрами дизайну Elementor.

Як зазначалося раніше, ви маєте великий контроль над зовнішнім виглядом свого веб-сайту, а також маєте доступ до деяких корисних віджетів, які можуть допомогти вам підвищити рівень конверсії.

Налаштування публікації

Коли ви будете задоволені тим, що створили, ви захочете поділитися цим зі світом. Після натискання кнопки ПУБЛІКУВАТИ вам буде запропоновано низку запитань. Як ілюстрація:

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

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

І останнє, але не менш важливе: ви побачите деякі розширені правила, як-от показ спливаючого вікна лише відвідувачам, що повертаються, показ спливаючого вікна лише певну кількість разів або, можливо, лише показ спливаючого вікна, коли відвідувач переходить на ваш веб-сайт із певного URL. Є ще декілька. Ці параметри можуть суттєво покращити взаємодію з вашим спливаючим вікном, дозволяючи створити його з істинною цілісністю та увагою до ваших користувачів.

Завершіть налаштування у спосіб, який ви бажаєте, а потім натисніть «ЗБЕРЕГТИ І ЗАКРИТИ». Ви amp , як виглядатиме ваше спливаюче вікно після натискання цієї кнопки.

Спливаючі вікна можна налаштовувати та додавати до них динамічний вміст.

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

Ми повернулися до етапу процесу ДОДАТИ НОВЕ СПЛИВНЕ ВІКНО, де ми можемо вказати заголовок і знову вибрати шаблон.

Після цього ми можемо вибрати його, внести необхідні зміни до основних налаштувань і ще раз натиснути ПУБЛІКАЦІЮ.

Гаразд, тут все починає ставати цікавим. Ми можемо використовувати Elementor, щоб отримати динамічні дані з нашої інсталяції WordPress і вставити їх у спливаюче вікно. Ми можемо включити таку інформацію, як ім’я користувача, назва сторінки тощо.

Розглянемо наступний сценарій: ми використовуємо WooCommerce і хочемо повідомити користувача, що на певний продукт, який він зараз переглядає, діє знижка. Для початку виберіть частину тексту з шаблону, а потім натисніть Динамічний на бічній панелі:

У нас є широкий спектр варіантів на вибір, включаючи інформацію з самого допису, інформацію з сайту в цілому, медіа-інформацію, інформацію про автора та навіть інформацію WooCommerce. Ми виберемо назву продукту, і вона буде додана до нашого блоку текстового вмісту в результаті нашого вибору.

Припустімо, деталі бази даних не отримано належним чином. У такому випадку можна вказати деякі перед текстом, деякі після тексту та резервний текст (якщо деталі бази даних не отримано належним чином).

Тож давайте продублюємо цей процес для кнопки, яка відображатиме ціну товару. Ми можемо сформулювати попередній текст як КУПИТИ ЗАРАЗ, щоб надати нам переконливий заклик до дії:

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

Коли ми натискаємо ПУБЛІКАЦІЮ, нам знову відкриваються параметри публікації, що дозволяє нам вказати, що ми хочемо, щоб спливаюче вікно з’являлося лише на сторінках WooCommerce. Ми встановимо таймер на 15 секунд бездіяльності, який стане тригером. Ось як це вийшло в підсумку:

Хоча дизайн можна покращити, ви бачите, що ми відображаємо назву продукту, його ціну та зображення продукту як фон спливаючого вікна. геніально!