Создание всплывающих окон Elementor в WooCommerce

Мы все большие поклонники WooCommerce. Его легко настроить и настроить. В пакет включены функции, упрощающие создание и управление динамичным и мощным интернет-магазином.

Однако создание успешной страницы электронной коммерции — это нечто большее, чем просто добавление популярных продуктов. Все страницы также должны быть визуально привлекательными. Чем привлекательнее и удобнее ваш веб-сайт, тем выше вероятность привлечения большего количества клиентов.

• Настройка всплывающего окна
• Вы также можете создавать всплывающие окна с помощью визуального конструктора в Elementor.
• Настройки публикации

Хотя WooCommerce создает для вас корзину покупок и страницу оформления заказа, когда вы создаете свой сайт, Elementor делает их более привлекательными, настраивая их.

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

Создав теплую страницу благодарности и обновив страницы «Моя учетная запись» и «Условия обслуживания», вы сможете завоевать сердца и умы своих клиентов.

Функциональность перетаскивания Elementor в сочетании с этим руководством обеспечит вам бесперебойную работу при создании страниц.

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

 Чтобы создать всплывающее окно, выберите «Шаблоны» > «Всплывающие окна» в строке меню. Вам будет представлен список всех ваших всплывающих окон, и если вы еще не создали его, вы увидите что-то похожее на следующее:

После того, как вы нажмете «ДОБАВИТЬ НОВОЕ ПОПУП» (что говорит само за себя), вам будет предложено дать ему имя, а затем выбрать шаблон из отображаемых готовых amp . Доступны различные шаблоны для разных целей; некоторые подходят для объявлений, другие — для продвижения скидок, третьи идеально подходят для поощрения пользователей подписаться на что-то. Есть даже amp предупреждения пользователей об использовании файлов cookie или других уведомлений GDPR. Как только вы найдете что-то, что вам нравится, нажмите на него, чтобы просмотреть его в увеличенном виде, а затем нажмите кнопку «Вставить».

После нажатия этой кнопки вы попадете в конструктор всплывающих окон в бэкэнде WordPress.

Если вы работали с Elementor в прошлом, вы почувствуете себя как дома благодаря интерфейсу, опциям и тому, как все устроено для вас. По сути, это тот же процесс, что и создание шаблонов страниц Elementor в WordPress.

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

Настройка всплывающего окна

 В этот момент вы должны увидеть предварительный просмотр всплывающего окна — либо чистый лист, либо выбранный вами шаблон.

Настройки всплывающих окон, всегда открытые по умолчанию, позволяют вам настроить функционирование самого всплывающего полотна. Они заключаются в следующем:

• Именно здесь вам захочется провести больше всего времени, потому что именно здесь вы сможете создавать различные типы всплывающих окон. Другими словами, регулируя эти настройки, вы сможете добиться следующих эффектов:

• Модальные всплывающие окна — это тип модального окна.
• Слайды, панели уведомлений и т. д.

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

«Настройки» доступны следующие параметры :

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

«Стиль» вы можете выполнить следующие действия :

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

Наконец, вкладка «Дополнительно» содержит некоторые различные настройки импорта, которые позволяют вам делать такие вещи, как следующее:

• Отображение кнопки закрытия или автоматическое закрытие всплывающего окна через определенное время.
• Нажав на наложение или нажав клавишу escape, вы можете предотвратить закрытие окна.

• Отключите возможность прокрутки страницы вниз.
• Избегайте нескольких всплывающих окон (если вы нацелили несколько всплывающих окон на одну и ту же страницу, это предотвратит раздражение ваших посетителей).

Чтобы дать вам представление о том, как эти настройки повлияют на ваше всплывающее окно, вот как оно выглядит, когда вы меняете положение в правом нижнем углу окна:

Посмотрите, как всплывающее окно теперь постоянно зафиксировано в правом нижнем углу. Используя триггер прокрутки в сочетании с анимацией входа, вы можете добиться приятного, незаметного эффекта скольжения.

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

Как только вы выполнили базовые настройки всплывающих окон, вы можете приступить к разработке фактического содержимого всплывающего окна, перетаскивая элементы в визуальный интерфейс перетаскивания.

Вы можете использовать любой виджет Elementor, который вам нужен, что дает вам полный контроль над окончательным дизайном. Виджет «Форма» — единственное, что вам обязательно необходимо включить, поскольку только он позволяет вам создать форму подписки на рассылку по электронной почте.

С помощью виджета «Форма» вы имеете полный контроль над полями, которые хотите предложить, а также над текстом и внешним видом кнопки отправки. amp :

Помимо этого, я настоятельно советую вам ознакомиться со всеми виджетами и вариантами дизайна Elementor.

Как уже говорилось ранее, у вас есть широкие возможности контроля над внешним видом вашего веб-сайта, а также у вас есть доступ к некоторым полезным виджетам, которые могут помочь вам повысить коэффициент конверсии.

Настройки публикации

Когда вы будете удовлетворены тем, что создали, вам захочется поделиться этим со всем миром. После нажатия кнопки «ПУБЛИКОВАТЬ» вам будет предложен ряд вопросов. В качестве иллюстрации:

Можно ли указать условия, при которых вы хотите, чтобы всплывающее окно появлялось? Вы можете выбрать, какие страницы включить или исключить из результатов поиска. У вас может быть столько условий, сколько вы пожелаете.

Что же тогда за событие вызывает появление всплывающего окна? Среди других возможностей вы можете выбрать, отображать ли всплывающее окно сразу при загрузке страницы, при прокрутке или когда пользователь прокручивает страницу до определенного элемента. Все эти параметры имеют свои настройки, позволяющие полностью настроить их.

И последнее, но не менее важное: вы увидите некоторые расширенные правила, такие как показ всплывающего окна только вернувшимся посетителям, показ всплывающего окна только заданное количество раз или, возможно, показ всплывающего окна только тогда, когда посетитель переходит на ваш сайт с определенного сайта. URL-адрес. Есть еще несколько. Эти параметры могут значительно улучшить взаимодействие с пользователем вашего всплывающего окна, позволяя вам создать его с истинной целостностью и вниманием к вашим пользователям.

Заполните настройки желаемым образом, затем нажмите СОХРАНИТЬ И ЗАКРЫТЬ. После нажатия этой кнопки вы увидите amp информацию о том, как будет выглядеть ваше всплывающее окно.

Всплывающие окна можно настраивать и добавлять в них динамический контент.

Поднимем ситуацию на новый уровень, ладно? До этого момента мы выбрали шаблон и подправили одно-два сеанса, вот и все. Рассмотрим сценарий, в котором мы хотим дополнительно настроить наше всплывающее окно.

Мы вернулись на этап «ДОБАВИТЬ НОВОЕ ПОПУП», где мы можем указать заголовок и еще раз выбрать шаблон.

После этого мы можем выбрать его, внести необходимые изменения в основные настройки и еще раз нажать «ОПУБЛИКОВАТЬ».

Ладно, тут начинается самое интересное. Мы можем использовать Elementor для получения динамических данных из нашей установки WordPress и вставки их в само всплывающее окно. Мы можем включить такую ​​информацию, как имя пользователя, заголовок страницы и т. д.

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

У нас есть широкий выбор вариантов, включая информацию из самой публикации, информацию с сайта в целом, информацию о СМИ, информацию об авторе и даже информацию WooCommerce. Мы выберем название продукта, и оно будет добавлено в наш блок текстового контента в результате нашего выбора.

Предположим, что данные базы данных не получены должным образом. В этом случае можно указать некоторые значения перед текстом, некоторые после текста и резервный текст (если данные базы данных не получены должным образом).

Итак, давайте продублируем этот процесс для кнопки, на которой будет отображаться цена продукта. Мы можем сформулировать предыдущий текст как «КУПИТЬ СЕЙЧАС», чтобы получить убедительный призыв к действию:

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

Когда мы нажимаем «ПУБЛИКОВАТЬ», нам снова открываются настройки публикации, что позволяет нам указать, что мы хотим, чтобы всплывающее окно появлялось только на страницах WooCommerce. Мы установим таймер на 15 секунд бездействия в качестве триггера. Вот как это получилось в итоге:

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