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

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

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

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

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

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

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

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

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

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

После того, как вы нажали на ADD NEW POPUP (что довольно очевидно), вам будет предложено дать ему имя , а затем выберите шаблон из Premade ех amp ле отображается. Доступны различные шаблоны для разных целей; одни подходят для объявлений, другие - для продвижения скидки, третьи идеально подходят для поощрения пользователей подписаться на что-то. Есть даже бывшие amp ль для предупреждения пользователей использования печенья или других уведомлений GDPR. Как только вы найдете что-то, что вам нравится, щелкните по нему, чтобы просмотреть увеличенное изображение, а затем нажмите кнопку «Вставить».

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

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

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

Конфигурация всплывающего окна

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

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

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

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

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

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

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

На вкладке " Стиль" можно выполнять следующие действия :

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

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

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

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

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

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

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

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

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

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

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

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

Опубликовать настройки

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

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

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

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

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

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

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

Мы вернулись на этап ADD NEW POPUP процесса, где мы можем указать заголовок и еще раз выбрать шаблон.

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

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

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

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

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

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

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

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

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