Как создать попап-баннер и разместить его на сайте

Сначала предлагаем Вам ознакомиться со статьей о регистрации на сайте и добавлении проекта — «С чего начать».

А также: «Как вставить код на сайт»

Подробнее о возможностях и преимуществах баннера в нашем конструкторе Вы можете узнать в разделе «Всплывающий баннер для сайта».

Создание баннера

Для создания баннера, выберите виджет на странице проекта, во вкладке «Добавить виджеты».

Откроется страница с пустой областью просмотра.

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

Кнопки справа:

• «Сохранить» — сохранение изменений.
• «Запустить» — после запуска виджет появится на Вашем сайте, а вместо этой кнопки появится кнопка  «Остановить».
• «Закрыть» — возврат на страницу проекта без сохранения текущих изменений.

В мобильной версии блок слева скрыт, а правая панель с кнопками отображается в виде иконок. Чтобы открыть левый блок нажмите на кнопку «Панель инструментов».

Чтобы закрыть панель инструментов, нажмите на кнопку «Закрыть».

Выбор из готовых решений

Нажмите на кнопку «Библиотека готовых решений» в левой панели настроек. Откроется блок с готовыми баннерами.

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

Нажмите на кнопку «Да. Загрузить». После этого форма со всеми настройками появится в области просмотра. В левой панели подгрузятся элементы со всеми настройками.

Далее Вы можете изменить текст, добавить или удалить элементы и отредактировать виджет под свои цели и дизайн, согласно инструкции ниже.

Настройки и стили

1. Показывать баннер на мобильных или на компьютерах. Если вы хотите показывать виджет только на мобильных, то оставьте только галочку «На мобильных» и наоборот.

2. Тип размещения. На ваш выбор 4 типа размещения:

2.1 Всплывающий баннер. Виджет будет появляться на входе для новых посетителей или на выходе с сайта – для всех посетителей один раз.

2.2 Всплывающий + кнопка. Виджет также будет появляться при входе для новых посетителей или при выходе с сайта – для всех посетителей один раз. Но после его закрытия в выбранном Вами месте будет размещаться кнопка, при нажатии на которую виджет опять будет появляться.

2.3 Всплывающий при клике на кнопку. На всех страницах сайта будет размещена кнопка, дизайн и расположение которой вы ниже настроите. А при клике по кнопке будет появляться виджет колеса фортуны.2.4 Встроить в страницу. В таком случае форма, будет размещена только на тех страницах и  в том месте, где вы разместите код-отметку для виджета.

Код-отметка имеет вид: <div id=”in_1217”>Форма</div>, где 1217 – это номер Вашего виджета. Она нужна только для того, чтобы программа понимала, что вставить нужно именно в это место на этой странице. Скопируйте код и вставьте на вашу страницу в режиме html-кода.

3. Когда показывать виджет. Если выбран тип размещения «Всплывающий баннер» и «Всплывающий + кнопка», то появляется пункт «Когда показывать виджет».

«При входе на сайт» — виджет будет показан один раз новым посетителям сайта.

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

4. При выборе типов размещения «Всплывающий баннер + кнопка» или «Только при клике на кнопку», под пунктом появится поле с галочкой «Своя кнопка». Отметьте, если Вы хотите, чтобы виджет отображался при клике на кнопку, которая уже есть на Вашем сайте. Если проставить галочку, то ниже появятся блок «Укажите id кнопки или адрес ссылки» с 2 полями: «Id кнопки» и «Адрес ссылки».

Если Вы знаете id кнопки – укажите его. Если нет возможности назначить или узнать id, то Вы можете указать ссылку в Вашей кнопки в виде «#open_1217». Адрес ссылки может быть и другим, главное чтобы он был уникальным, начинался на «#» и был указан в этом поле.

Обратите внимание, что нужно заполнить только одно поле на выбор.

Далее идут настройки размеров и формы виджета.

5. Ширина виджета – фиксированная ширина виджета. Но не больше ширины родительского блока или окна сайта, в зависимости от типа виджета.

6. Высота виджета. Аналогично ширине.

7. Закруглить края. Мягкое оформление контура виджета. Можно оставить с острыми краями или сделать более закругленным.

Следующие поля – настройки фона виджета.

8. Цвет фона баннера. Как и в любом другом поле с выбором цвета, можно выбрать любой цвет из палитры. Для копирования цвета, нажмите на пипетку, подведите к нужному цвету и кликните на него. Если Вы знаете готовый код в формате HEX – можно вставить в текстовое поле слева от палитры.

9. Прозрачный фон. Если отмечен галочкой, то поле выше «Цвет фона баннера» будет игнорироваться и у баннера не будет фона. Это подходит в случае, если вы хотите загрузить фоновое изображение вместо цвета.

10. Текстура фона. На фон  можно разместить либо текстуру фона либо фоновое изображение.

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

Чтобы блоки исчезли, кликните на любое место за пределами списка с текстурами.

11. Изображение. Вы можете загрузить изображение, которое будет фоном баннера. Тогда элементы, которые Вы добавите после будут размещаться поверх данного изображения. После успешной загрузки изображение появится в области просмотра и маленькое превью рядом с кнопкой «Выберите файл».
Под кнопкой появится кнопка «Сбросить изображение». При нажатии на кнопку сброса, изображение будет удалено из области просмотра и из превью.

Следующие пункты настраивают фон за пределами баннера.

12. Цвет общего фона. Выберите цвет фона, который будет за пределами баннера.

13. Прозрачность. Чем меньше число, тем прозрачнее фон.

14. Матовость. Интересный эффект размытия фона за пределами виджета. Чем прозрачнее фон, тем лучше виден этот эффект.

15. Эффект появления. Баннер будет появляться с выбранным эффектом, попробуйте все – они сразу отобразятся в области просмотра.

16. Эффект при наведении. Анимация, которая будет проигрываться на сайте при наведении на баннер.

Параметры кнопки

Если выбран тип размещения «Всплывающий + кнопка» или «Только при клике на кнопку» и не отмечен галочкой пункт «Своя кнопка» в общих настройках, то под блоком «Настройки и стили» отобразится блок «Параметры кнопки».

1. Здесь Вы можете настроить ширину и высоту кнопки.

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

При клике на значок иконки откроется блок с различными иконками. Нажмите на понравившуюся – она появится в области просмотра и в окне выбора.

3. «Закругление краев» – чем больше число, тем более круглой будут края у иконки. Можно сделать полностью круглой.

4. Тип кнопки. На Ваш выбор 3 типа кнопки:

«Стандартная» — обычная кнопка без дополнительных эффектов.

«С переливом» —  спокойный эффект перелива кнопки.

«Пульсирующая» — мягкий эффект пульсирования, который будет привлекать внимание посетителей к кнопке.

5. В поле «Размещение на странице» выберите позицию кнопки на странице.

6. Отодвинуть от края. В зависимости от выбора расположения, кнопку можно отодвинуть от края. Например, если выбрать позицию «Нижний правый угол», то появляются ниже поля «Снизу» и «Справа». Чем больше число, тем дальше кнопка от края.

7. Последний пункт — Яндекс Цель для кнопки. Если вы хотите отслеживать сколько раз кликнули по кнопке, чтобы запустить виджет, создайте цель в Яндекс Метрике с типом «Javascript событие», укажите ее название и вставьте название в это поле.

Кнопка готова.

Далее Вы можете добавить блоки «Текст», «Изображение», «Обратный отсчет» и «Кнопка-ссылка».

«Изображение»

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

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

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

Для того, чтобы добавить изображение нажмите на кнопку «Добавить блок».

Появится список блоков. Выберите «Изображение».

Если Вы сделали изменения и не сохранили их, то в появившемся сообщении-подтверждении выберите «Да. Сохранить и добавить блок».

После перезагрузки блок появится в левой панели.

В можете изменить название блока для удобства. Для этого кликните на него.

1. Загрузка изображения.

Далее идет кнопка загрузки изображения с компьютера.  Выберите изображение и загрузите его.

После чего под кнопкой загрузки появится кнопка «Сбросить изображение» и превью загруженной картинки. А сама картинка появится в области просмотра.

Вы можете удалить изображение нажав на кнопку «Сбросить изображение» или перезагрузив новое используя кнопку «Выбрать файл».

Обратите внимание на четырехстороннюю стрелку, которая появляется, если навести курсор на изображение. Нажмите на нее и переместите изображение в нужное Вам место.

2. Адрес ссылки.

Здесь можно указать адрес страницы,  на которую Ваш посетитель будет переходить нажав на картинку.
После ввода ссылки появится кнопка «Удалить ссылку».

3. Ширина.

При помощи ползунка или ввода цифр справа от ползунка, можно увеличивать или уменьшать размер блока с изображением.

4. Цвет фона блока.

Задает цвет фона под изображением. Подойдет, если картинка на прозрачном фоне. Отметьте пункт «Прозрачный фон», если цвет нужно убрать.

5. Расстояние от картинки до края блока.  Позволяет уменьшить картинку, не уменьшая блок, увеличивая отступы от края блока до картинки.

6. Закругление краев блока. При увеличении значения края становятся округлыми, вплоть до круга или овала.

Следующий блок отвечает за настройки анимации изображения.

7. Анимация при появлении.  Около 100 эффектов анимации при появлении картинки в баннере. При изменении значений, выбранная анимация сразу воспроизводится в области просмотра.

8. Повторять анимацию.  1раз, 2 раза, 3 раза, всегда. В зависимости от значения, анимация будет повторяться на странице.

9. Задержка при появлении анимации.  Актуально если разные элементы должны появляться в определенной последовательности.

10. Скорость анимации. Можно отрегулировать скорость воспроизведения выбранного эффекта. 11. Анимация при наведении. Также можно выбрать любое значение и навести курсор на изображение – анимация тут же сработает.

«Текст»

Для добавления текста на баннер, нажмите на «Добавить блок» и в выпадающем списке выберите «Текст».

В сообщении-подтверждении выберите «Да. Сохранить и добавить блок» или «Добавить без сохранения».

В левой панели появится блок для настройки текста.

1. Текст. Чтобы текст появился в области просмотра, кликните по тексту, чтобы перейти в режим редактирования, и напишите свой текст.

Для переноса текста на новую строку, в нужном месте нажмите «Enter». Чтобы вставить ссылку в тексте, выделите курсором текст, который будет ссылкой и нажмите кнопку «Вставить/Удалить ссылку».

В появившемся окне укажите ссылку и нажмите кнопку «Вставить».

Чтобы удалить ссылку, поставьте курсор внутри текста с ссылкой и нажмите опять на кнопку «Вставить/Удалить ссылку».

Появится окно с ссылкой и кнопкой «Удалить» посередине. Нажмите на нее и ссылка исчезнет.

2. Шрифт. Выберите шрифт из списка. На Ваш выбор большой выбор шрифтов стандартных и оригинальных.

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

4. Размер текста. При помощи ползунка или изменяя цифру справа от ползунка, можно изменить размер текста.

5. Выделить шрифт и Наклонный шрифт.

Выделить шрифт – сделать текст жирным.

Наклонный шрифт – сделать его курсивом.

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

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

Далее идут настройки текстового блока. 7. Фон блока. Чтобы задать фон текстовому блоку, сначала снимите галочку в пункте «Прозрачный фон».

Можно добавить фон для текста, выбрав его в палитре, либо используя пипетку.

7. Расстояние текста от края блока. Изменяйте значение, чтобы увеличить отступы от края блока до текста внутри.

8. Поворот текста. Изменяйте значение при помощи ползунка или поля справа от ползунка, чтобы повернуть текст.

9. Ширина блока. Задавайте любую ширину текстового блока.

Наведите курсор на сам блок в области просмотра – появится четырехсторонняя стрелка. Зажмите ее и перенесите блок в нужное место.

Следующий блок отвечает за настройки анимации изображения.

10. Анимация при появлении.  Около 100 эффектов анимации при появлении картинки в баннере. При изменении значений, выбранная анимация сразу воспроизводится в области просмотра.

11. Задержка при появлении анимации.  Актуально если разные элементы должны появляться в определенной последовательности.

12. Скорость анимации. Можно отрегулировать скорость воспроизведения выбранного эффекта.

13. Повторять анимацию.  1раз, 2 раза, 3 раза, всегда. В зависимости от значения, анимация будет повторяться на странице.

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

15. При помощи четырех сторонней стрелки в середине верхней части блока Вы можете перенести текстовой блок в нужное место.

«Обратный отсчет»

Нажмите на кнопку «Добавить блок» в панели слева и выберите значение «Обратный отсчет». В сообщении-подтверждении нажмите «Да. Сохранить и добавить блок».

Слева появится блок обратного отсчета.

1. Дата и время окончания. Укажите до какой даты будет идти отсчет. Например, до Нового года или 8 марта или любой другой даты окончания акции.

В области просмотра Вы сразу увидите сколько дней, часов, минут и секунд осталось до указанной Вами даты.

2. Часовой пояс. По умолчанию указан часовой пояс Москвы (+03:00). Но если Вы находитесь в другом часовом поясе, выберите его, чтобы не было расхождений в отсчете.

3.Показывать. Формат обратного отсчета: Дни-Часы-Минуты-Секунды, Часы-Минуты-Секунды, Минуты-Секунды. Если до окончания срока небольшое количество времени, то можно выбрать формат часов или минут.

4. Тип циферблата. Доступны 3 варианта перелистывания.

4.1 Перелистывание календаря. Имитирует перелистывающийся календарь.

4.2 Уезжающие цифры. Цифры опускаются сверху вниз.

4.3 Исчезающие цифры.

Далее настраиваются параметры шрифта для цифр и подписей.

5. Шрифт. Выберите любой шрифт в списке.

6. Выделить шрифт. Сделать его жирным.

7. Наклонный шрифт. Сделать его крусивом.

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

За ними – размеры шрифтов.

В зависимости от размера шрифтов меняется и размер блока обратного отсчета.

8. Размер цифр. Меняет размер цифр в обратном отсчете.

9. Размер подписей.

10. Цвет цифр. Кликните по значку палитры и выберите любой цвет.

11. Цвет подписей. Аналогично предыдущему пункту.

Далее – настройки блока обратного отсчета.

12. Закругление краев элементов циферблата.

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

13. Закругление краев блока. Аналогично: если фон у блока непрозрачный, то можно закруглить его края.

Далее идут — фон блока и цифр.

14. Фон блока. Чтобы задать фон, снимите галочку у пункта ниже «Прозрачный» и выберите любой цвет, кликнув на значок палитры.

15. Фон цифр. Аналогично: чтобы задать фон, снимите галочку у пункта ниже «Прозрачный» и выберите любой цвет, кликнув на значок палитры.

И последняя часть пунктов в обратном отсчете: анимация при появлении.

16. Анимация при появлении.  Около 100 эффектов анимации при появлении картинки в баннере. При изменении значений, выбранная анимация сразу воспроизводится в области просмотра.

17. Задержка при появлении анимации.  Актуально если разные элементы должны появляться в определенной последовательности.

18. Скорость анимации. Можно отрегулировать скорость воспроизведения выбранного эффекта.

19. Повторять анимацию.  1раз, 2 раза, 3 раза, всегда. В зависимости от значения, анимация будет повторяться на странице.

«Кнопка-ссылка»

Вы можете добавить в баннере кнопку с ссылкой на страницу Вашего сайта.

Для этого нажмите на кнопку «Добавить блок» и в списке выберите пункт «Кнопка-ссылка».

В сообщении-подтверждении выберите пункт «Да. Сохранить и добавить блок». Или «Добавить блок без сохранения», если Вы не хотите сохранять последние действия.

После перезагрузки страницы появится блок «Ссылка» с настройками кнопки.

А в области просмотра появится кнопка с настройками по умолчанию.
Наведите курсор на кнопку – появится четырехсторонняя стрелка. Зажмите ее и перетащите курсор в нужное место.

Если кликните по тексту, то он перейдет в режим редактирования и можно изменить название кнопки прямо в области просмотра.

1. Текст на кнопке. Также можно изменить текст в левой панели в первом поле блока.

2. Адресс ссылки. Укажите полный адрес страницы, на которую будет переходить посетитель при клике на кнопку.

3. Выберите шрифт. Вы можете выбрать отдельный шрифт для кнопки.

4. Цвет текста. Выбирайте любой цвет текста на кнопке с помощью палитры цветов. Для этого кликните по цветному кругу справа.

5. Размер текста. При помощи ползунка меняйте размер текста на кнопке. Или меняйте число справа от ползунка.

6. Выделить шрифт и Наклонный шрифт.

Выделить шрифт – сделать текст жирным.

Наклонный шрифт – сделать его курсивом.

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

Далее идут настройки самой кнопки.

7. Ширина кнопки и Высота кнопки.

При помощи ползунка или изменения значений в поле справа от ползунка, можно изменить ширину и высоту кнопки.

8. Цвет кнопки.

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

9. Цвет кнопки при наведении. Аналогичным образом можно выбрать цвет для кнопки, когда на нее наведен курсор. Но изменения можно будет увидеть уже на сайте.

10. Закругление краев кнопки. Перемещая ползунок или изменяя значение, можно сделать кнопку более или менее округлой.

Последний блок в настройках кнопки-ссылки – анимация.

11. Анимация при появлении.  Около 100 эффектов анимации при появлении картинки в баннере. При изменении значений, выбранная анимация сразу воспроизводится в области просмотра.

12. Задержка при появлении анимации.  Актуально если разные элементы должны появляться в определенной последовательности.

13. Скорость анимации. Можно отрегулировать скорость воспроизведения выбранного эффекта. 14. Повторять анимацию.  1раз, 2 раза, 3 раза, всегда. В зависимости от значения, анимация будет повторяться на странице.

Добавляйте любой количество блоков: изображений, текстов и кнопок и настраивайте их по своему желанию.

После этого сохраните виджет и нажмите «Запустить».

Поздравляем! Вы сделали свой первый баннер!