Голубой океан Вконтакте

Всплывающее окно в WordPress

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

Плагин Popup Maker

Речь пойдет о плагине Popup Maker. Плагин устанавливается из депозитария WordPress, установка стандартная. В левой панели своего блога зайдите ПлагиныДобавить новый и в строке поиска «вбейте» Popup Maker, выберите плагин, как показано на скриншоте. Жмите УстановитьАктивировать.

Всплывающее окно в WordPress

После активации, в правой панели появится пункт Popup Maker с подпунктами.

Всплывающее окно в WordPress

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

(1) – здесь пишем имя окна, это для себя, никто это имя видеть не будет
(2)
– Заголовок, можно не писать, заголовок мы напишем в самом окне для текста
(3)
– здесь можно вставит все, что угодно – текст, ссылку, картинку, кнопку, карту Google, шорт код, форму подписки.

Всплывающее окно в WordPress

Если прокрутить окно ниже, то вы увидите настройки всплывающего окна, здесь 5 пунктов, это:

Триггеры – это условие, по которому будет открываться окно, например, Нужно нажать кнопку, чтобы окно появилось или Автоматическое открытие окна.

Всплывающее окно в WordPress

Targeting – это условие, где, кому и на каких страницах показывать Всплывающее окно. Здесь у нас только 2 настройки — Отключать этот Popup на мобильных устройствах и Отключите это всплывающее окно на планшетных устройствах. Если хотите получить больше настроек, нажмите на ссылку …расширенного таргетинга?, но за это нужно будет заплатить.

Всплывающее окно в WordPress

Отображение – здесь находятся настройки отображения окна.

Advanced (Расширенные настройки) – здесь настраивать ничего не нужно.
Баннер

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

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

Можете вставлять все, что угодно.

Всплывающее окно в WordPress

Теперь переходим к настройкам.

Триггер

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

Всплывающее окно в WordPress

В окне 1, выбираем Auto Open (Отрывать автоматически) (1), нажимаем Добавить. В окне 2, ставим задержку (2), через сколько миллисекунд появится окно.

Всплывающее окно в WordPress

Таргетинг

Оставьте все по умолчанию или поставьте нужные галочки. Чуть выше я уже упоминал об этом пункте.

Всплывающее окно в WordPress

Отображение

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

Appearance (вид окна)

Здесь лишь нужно выбрать тему, их здесь шесть. Выберем – Тема по умолчанию (1) и после этого нажмите Настроить тему (2).

Всплывающее окно в WordPress

У вас откроется окно с настройками. Слева вы увидите все разделы настроек (советую их свернуть, как на скриншоте) и открывать по мере необходимости.

Всплывающее окно в WordPress

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

Всплывающее окно в WordPress

Настройки фона за всплывающими окнами

1-ая группа настроек – Настройки фона за всплывающими окнами. Жмем на на маркер треугольника справа, чтобы развернуть это окно. Здесь можно поменять Цвет фона (1), настроить Прозрачность (2) и можно купить платную версию плагина (3).Всплывающее окно в WordPress

Настройки контейнера

2-ая группа настроек – Настройки контейнера, здесь настроек побольше. Можно настроить:

  • Фон, под текстом
  • Прозрачность этого фона
  • Различные настройки границы (вид, толщина, цвет…)
  • Настроить тень (много настроек)

Всплывающее окно в WordPress

Настройка заголовков

3-ая группа настроек – Настройка заголовков. Здесь можно настроить:

  • Цвет заголовка
  • Размер заголовка
  • Высоту строки
  • Выбрать шрифт
  • Выравнивание
  • Различные настройки тени

Всплывающее окно в WordPress

Настройки содержания

3-ая группа настроек – Настройки содержания. Здесь всего две настройки:

(1) – Цвет шрифта
(2) – Семейство шрифта

Всплывающее окно в WordPress

Закрыть настройки

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

Всплывающее окно в WordPress

Эти настройки влияют всего лишь на внешний вид кнопки Закрыть. Настройте кнопку Закрыть сами, ориентируясь на дизайн вашего сайта (блога).

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

Всплывающее окно в WordPress

Размер

Продолжим рассматривать настройки Всплывающего окна. Во вкладке Размер, всего три настройки:

  • Размер — нужно выбрать размер из открывающегося списка.
  • Минимальная ширина – ставим 0%
  • Минимальная ширина – ставим 100%

Всплывающее окно в WordPress

Анимация

В этой вкладке, всего две настройки:

Тип анимации – имеется 3 типа анимации – Движение, Затухание и Затухание и движение.

Скорость анимации — установите скорость анимации всплывающего окна.

Всплывающее окно в WordPress

Позиция

Здесь настроек побольше.

(1) – Расположение – выберите, где будет отображаться всплывающее окно
(2)
– Верх – расположение от верхнего края экрана
(3)
– Лево – расположение от левого края экрана
(4)
– 2 чек-бокса оставьте по умолчанию

Всплывающее окно в WordPress

Во вкладке Advanced, я ничего не менял.

Закрыть

В этой вкладке 2 пункта, это Button (Кнопка) и Alternate Methods (Альтернативные Методы).

Button

Первая настройка, это Текст закрытия — переопределить текст закрытия по умолчанию.

Второй пункт, это Задержка кнопки закрытия — задерживает отображение кнопки закрытия.

Всплывающее окно в WordPress

Во вкладке Alternate Methods я ничего не менял, вы же можете поэкспериментировать.

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

А пока почитайте о плагине Shortcodes Ultimate, чтобы научится ставить кнопки и многое другое на свой блог. Статья называется «WordPress шорткод. Плагин Shortcodes Ultimate».

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

С уважением, Сергей Бурдин

RSS лента

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: