Как создать всплывающее окно в HTML для вашего сайта
Работаете ли вы над дизайном посадочной страницы, оптимизацией путей конверсии или просто экспериментируете с функциями интерфейса, знание того, как создать всплывающее окно в HTML, является ценным навыком. В этом руководстве мы покажем вам два практических подхода к добавлению пользовательского всплывающего окна на ваш сайт — один с использованием HTML, CSS и JavaScript, а другой с использованием конструктора без кода, который выполняет задачу за считанные минуты.
Если вам нравится писать код вручную и иметь полный контроль над дизайном, вы оцените наше пошаговое руководство по ручному методу. А если вы предпочитаете избежать технической сложности, мы познакомим вас с Claspo — мощным инструментом без кода для создания адаптивных, высококонверсионных всплывающих окон всего за несколько кликов.
В качестве бонуса мы также поделимся экспертными советами по использованию всплывающих окон в Интернете, лучшими практиками дизайна и тем, как сделать ваше всплывающее окно естественной частью вашего сайта, а не помехой.
Как создать всплывающее окно в HTML и без кода
В этом разделе мы рассмотрим два основных метода: создание всплывающего уведомления в HTML, CSS и JavaScript и использование шаблона для упрощения процесса. Первый вариант всё еще используется из-за бесконечных возможностей настройки. Между тем, второй вариант касается решений без кода, которые набирают обороты и становятся спасением для пользователей без технических навыков и тех, кто не может себе позволить нанимать разработчика каждый раз, когда им нужно всплывающее окно.
Всплывающее окно в HTML и CSS: метод с кодом
Продвинутые навыки программирования позволяют вам создать индивидуальное всплывающее окно в HTML с нуля и адаптировать его внешний вид и поведение на сайте в соответствии с вашими потребностями. Итак, как создать всплывающее окно в HTML, если у вас есть такие навыки? Давайте рассмотрим это шаг за шагом.
Шаг 1: Подготовьте изображение
Прежде чем начать написание кода, убедитесь, что у вас есть изображение для вашего HTML всплывающего окна (не можете сделать сами? Поздравляем, вам нужен дизайнер тоже). Изображение должно быть размещено на сервере, чтобы его можно было открыть по URL. Вы можете загрузить ваше изображение на сервер вашего сайта или использовать внешний сервис хостинга изображений.
Шаг 2: Структура виджета с кнопкой вызова всплывающего окна в HTML
HTML-код для всплывающего окна формирует структуру вашего виджета. Вот объяснение кода всплывающего окна:
1. Объявление DOCTYPE: определяет тип документа и версию HTML.
<!DOCTYPE html>
<html lang="en">
2. Раздел head: содержит метаинформацию о документе, такую как набор символов и ссылки на таблицы стилей и скрипты.
<head>
<meta charset="UTF-8">
<title>Как создать всплывающее окно</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
3. Раздел body: содержит основное содержание документа, включая кнопку в HTML, чтобы вызвать всплывающее окно, и само всплывающее окно.
<body>
<div class="container">
<button type="submit" class="btn" onclick="openPopup()">Отправить</button>
<div class="popup" id="popup">
<img src="https://yourserver.com/path-to-image.png" alt="">
<h2>Спасибо!</h2>
<p>Ваши данные были успешно отправлены. Спасибо!</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</div>
</body>
</html>
- Блок контейнера: центрирует всплывающее окно в HTML и кнопку.
- Кнопка: активирует всплывающее окно при клике.
- Блок всплывающего окна: содержит содержание всплывающего окна, включая изображение, заголовок, сообщение и кнопку закрытия.
- Изображение: отображает изображение, которое вы подготовили. Атрибут src должен указывать на URL, где размещено ваше изображение.
Шаг 3: Стиль попапа с помощью CSS
Дизайн попапа с помощью CSS используется для оформления виджета и придания ему привлекательного вида. Вот что делает каждая часть CSS кода:
1. Импорт шрифта: импортирует пользовательский шрифт из Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
2. Глобальные стили: устанавливают стили по умолчанию для всех элементов.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
3. Стили контейнера: центрируют содержимое на странице.
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to right, #485563, #29323c);
display: flex;
align-items: center;
justify-content: center;
}
4. Стили кнопки: оформляют кнопку попапа и добавляют анимацию нажатия.
.btn {
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 10px;
transition: transform 0.2s;
}
.btn:active {
transform: scale(0.95);
}
5. Стили попапа: оформляют попап и управляют его видимостью и анимацией появления (например, затуханием или скольжением).
.popup {
width: 400px;
background: #fff;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.open-popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.popup img {
width: 100px;
margin-top: -50px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup h2 {
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background-color: #e02189;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
Советы по созданию запоминающегося попапа на HTML и CSS
При создании HTML попапа, важно не только функциональность — важен визуальный эффект. Хорошо продуманный виджет мгновенно привлекает внимание и вызывает интерес, если он ясно и целеустремлённо оформлен. Вот как улучшить ваш попап с помощью распространённых стратегий дизайна.
1. Используйте оверлей с измененной прозрачностью.
Оверлей — это полупрозрачный слой, который располагается за попапом. Он затемняет остальную часть экрана, позволяя пользователям сосредоточиться на вашем сообщении. Чтобы достичь этого эффекта, создайте отдельный div как контейнер для оверлея и установите его background-color с помощью rgba и соответствующим значением прозрачности (например, 0.6) в вашем CSS.
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* оверлей с прозрачностью */
z-index: 999;
display: none; /* переключается с помощью JS */
}
2. Держите HTML попап по центру и оформленным для визуального эффекта.
Когда вы создаете HTML попапы с использованием CSS, убедитесь, что ваш контейнер оформлен с отступами, максимальной шириной, лёгкой тенью и округленной границей. Оформите ваш контейнер попапа с белым или ярким фоном, нежной тенью и щедрыми отступами. Независимо от того, отображается ли он в верхней части экрана, в центре или рядом с меню, визуальный контраст важен. Используйте сильный призыв к действию и привлекательный шрифт (как Poppins или Montserrat) для увеличения видимости.
3. Добавьте плавные анимации с помощью CSS переходов.
Анимации, такие как fade-in или slide-down, могут улучшить впечатление. Примените класс с переходами и свойствами transform к вашему HTML и CSS всплывающему окну. Это делает его более интерактивным и современным, даже без тяжелых JavaScript-эффектов.
4. Адаптивность по умолчанию.
Не забудьте убедиться, что ваше всплывающее окно работает на всех размерах экранов. Используйте медиазапросы @media и ширину на основе процентов для вашего контейнера. Это делает ваш подход к всплывающему окну с помощью HTML дружественным к мобильным устройствам без дополнительных инструментов.
Комбинируя структуру, HTML и CSS, а также легкие анимации, вы можете создать всплывающее окно HTML, которое не только функционально, но и действительно привлекательно — разработано для того, чтобы выделяться и конвертировать.
Шаг 4: Функциональность JavaScript
JavaScript используется для оживления всплывающего экрана в HTML, контролируя его поведение. Вот что делают основные функции:
1. Получение элемента всплывающего окна: выбирает элемент всплывающего окна по его ID.
let popup = document.getElementById('popup')
2. Функция открытия всплывающего окна: добавляет класс для отображения всплывающего окна и запускает анимацию.
function openPopup() {
popup.classList.add('open-popup')
}
3. Функция закрытия всплывающего окна: удаляет этот класс, чтобы скрыть всплывающее окно и вернуть его в исходное состояние.
function closePopup() {
popup.classList.remove('open-popup')
}
Используя JavaScript, вы можете управлять тем, когда и где появляется ваше всплывающее окно — например, на конкретных страницах, таких как ваши страницы с ценами, блог или оформление заказа. Это обеспечивает уместность и своевременность вашего сообщения, а не его навязчивость.
if (window.location.pathname === "/pricing") {
popup.style.display = "block";
}
Метод без кода: шаблоны всплывающих окон
Основные преимущества решения без кода для создания всплывающего окна в HTML это экономия времени и гибкость. Когда у вас есть готовый шаблон, вы не тратите время на подготовку изображения всплывающего окна, а редактор с функцией drag-and-drop дает вам возможность настроить шаблон в соответствии с вашими потребностями. К этому списку можно добавить экономию денег, так как вам не нужен разработчик и дизайнер. Итак, как добавить всплывающее окно в HTML в этом случае? В общем, процесс сводится к следующим шагам, что значительно упрощает его по сравнению с кодированием всплывающего окна в HTML с использованием CSS с нуля:
- Выберите готовый шаблон, который соответствует вашей цели (например, opt-in pop-up, информаторы, предотвращение ухода из корзины и т.д.) из доступных опций в библиотеке.
- Настройте его в соответствии с вашим брендом, дизайном сайта и специфическими требованиями.
- Предпросмотрите, как ваше готовое всплывающее окно выглядит в мобильной и настольной версиях сайта.
- Настройте правила отображения всплывающего окна (когда, где, как часто, кому показывать и так далее).
- Встраивайте всплывающее окно на своем сайте и публикуйте его.
Этот вариант кажется намного проще, чем предыдущий, правда? Именно так, если вы выбрали Claspo. Ведь вы уже пришли к нам, поэтому смотрите ниже, как создать всплывающее окно в HTML с CSS (с использованием нашего интуитивного редактора, конечно!) и приступайте к делу сразу после прочтения статьи.
Как сделать всплывающее окно с Claspo: 8 шагов
Первое, что нужно знать, это то, что Claspo, один из лучших инструментов для всплывающих окон
, предоставляет вам те же обширные возможности настройки, что и метод, требующий кода. Однако, в отличие от последнего, Claspo подходит для тех, кто не обладает навыками программирования и дизайна. Он делает создание всплывающего окна в HTML простой и быстрой задачей. Давайте посмотрим, как сделать всплывающее окно, используя наш конструктор без лишних усилий.
Шаг 1. Зарегистрируйтесь и начните
Создайте бесплатную учетную запись в Claspo и нажмите кнопку "Новый виджет". Вам предлагается создать виджет с нуля или использовать галерею шаблонов. Чтобы сэкономить максимум времени, мы выберем второй вариант.
Шаг 2. Выберите ваш шаблон
Наша библиотека шаблонов содержит более 1000 готовых шаблонов, которые охватывают множество сценариев использования. Вы легко можете найти идеальный вариант с помощью фильтров на левой стороне экрана. Они позволяют выбрать сценарий использования, макет (HTML форма для подписки, плавающая панель, плавающее окно, виджет блокировки контента и др.), индустрию и тему. Как только вы найдете нужный вам пример, переходите в редактор.
Шаг 3. Настройте ваш шаблон
Поскольку эта статья посвящена тому, как создать всплывающее окно в HTML на вашем сайте, мы выбрали всплывающее окно в качестве макета и один из самых популярных вариантов использования — сбор данных пользователей. Как видно из примера ниже, наш шаблон можно изменить до неузнаваемости.
В данном случае мы заменили изображение, создав его с помощью ИИ, заменили текст всплывающей HTML-формы, удалили одно поле ввода, добавили чекбокс для согласия на обработку данных, чтобы сделать всплывающее окно совместимым с GDPR, и в итоге изменили цветовую схему, включая цвет кнопки CTA. Единственное ограничение — это ваше изображение, поэтому вы можете настроить шаблон еще более индивидуально.
Шаг 4. Просмотрите ваше всплывающее окно
Как только вы внесете все необходимые изменения, вы сможете просмотреть, как ваше всплывающее окно выглядит на десктопной и мобильной версиях вашего сайта. Для этого нажмите на иконку соответствующего устройства в верхней правой части экрана. Если что-то вас не устроит, всегда можно продолжить редактирование.
Шаг 5. Установите правила отображения
Если вы задумываетесь о том, как создать всплывающее окно в HTML на сайте, не раздражая пользователей, Claspo поможет вам в этом. Наша платформа предлагает расширенные возможности таргетинга и оптимальные правила отображения для комфортного взаимодействия с пользователем, которые установлены по умолчанию. Например, HTML-уведомление всплывает автоматически один раз за сессию после того, как пользователь провел 20 секунд на странице. Кроме того, оно автоматически перестает отображаться для тех, кто уже оставил свой email, что помогает эффективно охватить аудиторию вашего сайта. Логично, правда?
И в завершение, мы автоматически защищаем ваши всплывающие окна от одновременного появления и наложения. Это означает, что вы можете безопасно масштабировать свою стратегию генерации лидов с помощью попапов, не опасаясь отпугнуть посетителей.
Тем не менее, вы всегда можете настроить правила отображения в соответствии с вашими потребностями. Вы можете легко переключать различные опции для таргетинга на определенное поведение пользователей, например, включить триггеры на выход. В отличие от метода, требующего кода, вам нужно всего лишь нажать несколько кнопок в разделе «Триггеры», без необходимости загружаться в сложные CSS для попапов. Это означает, что попап в Claspo предлагает больше контроля и гибкости при создании всплывающего окна с использованием наших интуитивно понятных инструментов для сбора электронных адресов и других ценных данных.
Шаг 6. Интеграция Claspo с выбранной платформой
Помимо вопроса о том, как создать всплывающее окно на вашем сайте, вам нужно понять, как синхронизировать сообщение всплывающего окна в HTML с другими маркетинговыми инструментами. Но в Claspo эта задача также сводится к нескольким кликам.
- Интегрируйте Claspo с подходящей CRM, ESP или CDP из выпадающего списка. В этом случае вся информация о пользователях, собранная с помощью наших попапов, будет мгновенно передаваться на выбранную платформу для последующей сегментации и запуска ваших автоматических кампаний.
- Интегрируйте Claspo с Google Analytics. Это даст вам больше ценных инсайтов о том, как пользователи взаимодействуют с вашими попапами и поможет вам их оптимизировать для лучшей работы.
Шаг 7. Установите ваш попап
Как только ваш попап готов, вы получите готовый скрипт, который нужно встроить на ваш сайт. Наверняка вы думаете: "Постойте! Я думал, мы говорим о том, как создать попап на сайте без навыков кодирования попапов!" Это правда! В Claspo вам нужно лишь скопировать и вставить готовый код, следуя одному из наших пошаговых инструкций. Вы легко найдете их под вашим кодом скрипта в нашем редакторе.
Тем не менее, если вы не можете разобраться самостоятельно, не стесняйтесь обратиться в нашу службу поддержки, и мы установим HTML-сообщение всплывающего окна на ваш сайт абсолютно бесплатно!
Шаг 8. Анализ и оптимизация
Ваш попап создан и активно работает над увеличением ваших конверсий! Но насколько он успешен? Вы всегда можете отслеживать ключевые показатели эффективности каждого попапа, такие как количество уникальных просмотров, количество целевых действий и коэффициент конверсии прямо в Claspo. У вас есть идеи по улучшению работы вашего попапа? Используйте наше A/B тестирование, чтобы поэкспериментировать с любыми элементами и проверить, какой из них вызывает наибольший отклик у вашей аудитории.
Claspo стремится упростить вашу задачу и быстрее привести вас к желаемым результатам. С учетом этого, наша маркетинговая команда создала шаблон для A/B тестирования. Он содержит критические этапы рабочего процесса и позволяет воплотить любую гипотезу в жизнь. Получите его бесплатно и используйте для всех последующих A/B тестов (не только тех, что связаны с всплывающими окнами).
Как оформить поп-ап, чтобы он был удобен для пользователя
Отказ от ответственности: оптимальный внешний вид вашего поп-апа можно определить только с помощью A/B тестирования. Однако несколько основных правил помогут вам создать дизайн поп-апа, который будет привлекательным для пользователей и эффективным для вас.
- Брендинг жизненно важен, поэтому убедитесь, что все элементы дизайна поп-апа согласованы с цветовой схемой и стилем вашего бренда. Это поможет укрепить идентичность вашего бренда и сделать поп-ап естественной частью вашего сайта.
- Помните о принципе взаимности и предложите что-то взамен за их контактную информацию.
- Укрепляйте свое сообщение с помощью изображения, чтобы увеличить кликабельность до 25%. Используйте высококачественные изображения, чтобы они хорошо выглядели на всех устройствах. Размытые или пикселизированные изображения могут испортить профессиональный вид вашего поп-апа.
- Не добавляйте слишком много полей для ввода. Статистика показывает, что поп-апы с двумя полями для ввода имеют самый высокий коэффициент конверсии. Этого достаточно для уточнения контактных данных и имени перспективы, не надоедая им вашей формой поп-апа.
- Убедитесь, что каждое поле четко обозначено, чтобы пользователи знали точно, какая информация требуется. Используйте текст-подсказку для предоставления примеров или дополнительных инструкций.
- Разрабатывайте с учетом видимости и читабельности. Используйте высокий контраст между текстом и фоном для облегчения чтения своего сообщения. Выбирайте шрифты, которые легко читаются, и избегайте слишком декоративных шрифтов, которые могут быть трудными для восприятия.
- Оптимизируйте для мобильных устройств. Убедитесь, что ваша форма поп-апа адаптивна и выглядит хорошо на любом размере экрана, включая смартфоны и планшеты. Убедитесь, что кнопки и ссылки достаточно большие, чтобы их легко можно было нажать пальцем.
- Будьте осторожны с полноэкранными виджетами. Группа Nielsen Norman советует использовать виджеты, блокирующие контент, только тогда, когда нужно подтвердить возраст пользователей, получить их юридическое согласие и т.д. В противном случае они могут сделать вашу рекламу навязчивой и раздражать пользователей.
- Убедитесь, что есть четко видимая кнопка закрытия, чтобы пользователи могли легко закрыть поп-ап, если он им неинтересен. Позвольте пользователям закрывать поп-ап, нажимая за его пределами или кнопкой Escape.
Советы по настройке окна поп-апа
Даже самый визуально привлекательный поп-ап может быть навязчивым, отпугивая посетителей от вашего сайта. Поэтому, чтобы ответить на вопрос о том, как создать поп-ап, который конвертирует и не раздражает, важно обсудить не только дизайн, но и правила отображения.
Не заваливайте пользователей поп-апами. 45,6% посетителей жалуютсяо слишком большом количестве всплывающих окон на сайте. С Claspo вы можете избежать этого несколькими способами:
- Используйте предварительно настроенный тихий интервал, чтобы предотвратить одновременное появление всплывающих окон, и показывайте их раз в три минуты (интервал можно настроить).
- Выбирайте страницы с подходящим контекстом для определенного всплывающего окна, а не просто показывайте ту же форму на всем сайте.
- Персонализируйте ваши всплывающие окна, например, только для новых посетителей, пользователей из определенной геолокации или тех, кто пришел на сайт из определенного источника трафика или кампании.
- 28.6% пользователей ненавидят немедленное отображение всплывающих окон. Создайте всплывающее окно, которое появляется, когда пользователь провел на сайте хотя бы несколько секунд. Таким образом вы даете им время привыкнуть и узнать немного больше о вашей компании, прежде чем показать им ваше предложение. Это улучшает их опыт взаимодействия и увеличивает ваши шансы на конверсию. Наши предустановленные правила отображения задерживают всплывающие окна на 20 секунд, но вы всегда можете изменить это время.
- Используйте триггер прокрутки для вашей формы всплывающего окна. Это позволяет показывать всплывающее окно, когда пользователь прокрутил страницу на определенный процент, принося больше конверсий, чем временной триггер. Основная причина заключается в том, что ваше всплывающее окно появляется в подходящем контексте.
Например, если пользователь прочитал вашу статью в блоге до определенного момента, пригласите его подписаться на вашу рассылку для получения дополнительной полезной информации. Всплывающее окно также может появиться, когда пользователь прокрутит до раздела с ценами, чтобы предложить скидку на первый заказ или бесплатный пробный период.
- Остановите показ вашего всплывающего окна вовремя. 20% пользователей раздражаются, когда видят одни и те же формы всплывающих окон каждый раз, когда посещают сайт. Позаботьтесь об их опыте! Не показывайте всплывающее окно тем, кто уже закрыл его один или несколько раз и тем, кто уже оставил свои контактные данные. Это легко достижимо с Claspo.
Заключение
Вот и все! Вы узнали, как создавать HTML всплывающие окна и невероятно простой, безкодовый путь. Мы надеемся, что вы увидели, насколько Claspo может действительно упростить вашу жизнь и ваши проекты веб-дизайна. С Claspo вам не нужно иметь предварительный опыт работы с кодом, чтобы получить ваш первый виджет для сайта. Наша платформа позволяет создавать всплывающие окна, которые отлично выглядят на любом устройстве, от настольных компьютеров до смартфонов, обеспечивая бесшовный опыт для ваших посетителей.
Независимо от вашей цели, будь то увеличение списка email с использованием привлекательных примеров email всплывающих окон, сбор отзывов или объявление о специальном предложении, вы можете буквально создать впечатляющие всплывающие окна за считанные минуты. Как только вы откроете для себя успешные кейсы использования всплывающих окон, вы, естественно, хотите создать всплывающее окно для вашего сайта. Вот почему мы приглашаем вас воспользоваться нашим бесплатным пожизненным планом. Вы можете начать создавать и видеть реальные результаты для вашего бизнеса, не тратя ни копейки. Это идеальный способ использовать HTML (без необходимости кодирования!) для повышения эффективности работы вашего сайта. Почему бы не попробовать и увидеть, как легко создать эффективные виджеты для вашего сайта уже сегодня?
