Створюйте спливаючі вікна 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 секунд бездіяльності як тригер. Ось як це вийшло зрештою:

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