Всплывающие (модальные) окна в теме Divi

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

63 комментария к “Всплывающие (модальные) окна в теме Divi”

  1. Спасибо, я обычно использую CodeLights Widgets ( https://codelights.com/elements/popup/ ) есть там очень красивая всплывашка и хорошо с CF7 сочетается. Но чаще все таки хочется обходиться минимумом плагинов и ваш способ идеален для этого. Появилась мысль попробвать этот способ с окошком Remodal ( http://vodkabears.github.io/remodal/ )

    Ответить
    • Доброго дня! На канале каждый месяц выходи обзор премиум темы. В марте уже занато все, а вот на апрель можно что-то посмотреть. Так что, следите за новостями)

      Ответить
    • Борис, Привет. а можно с этого места подробнее расписать как что? как соединить divi+CodeLights Widgets+cf7 можно в личку… ?

      Ответить
    • ставите коудлайтс, кф7, создаете модуль «текст» в диви билдере, создаете шорткод коудлайтс (синяя иконка в текстовом редакторе) «Всплывающее окно» и в содержимое шорткода вставляете шорткод контактной формы, всё. Посмотрите все ответы под мои комментарием, я там привел пример.

      Ответить
    • Скажите, можно вывести всплывающую форму при нажатии на один из пунктов главного меню?

      Ответить
  2. Рабочий костыль) Спасибо! И вопрос вдогонку: а yoast seo на divi работать-то будет?

    Ответить
  3. Здравствуйте! Собрал сайт на теме Zerif Lite. В футере есть электронная почта имеющая активную ссылку mailto:contact@site.com.
    Весь код темы перерыл, не могу найти как изменить на свою почту. В футере заменил, но при нажатии на ссылку открывается почтовый клиент и в адресной строке все равно отображается contact@site.com.
    Подскажите пожалуйста , где нужно поправить?

    Ответить
    • WPRUSe · Финты WordPress Спасибо, посмотрю ещё раз внимательнее, может найду.

      Ответить
    • Поиск по файлам темы не пробовали? в sublime это ctrl+shift+f? как вариант дочернюю тему создать и запилить свой футер.

      Ответить
    • Хороший совет, Может действительно стрим провести под такой теме….

      Ответить
    • Еще можно рассказать про вкладку дополнительные настройки в contact form 7, сегодня столкнулся, когда метрики привязывал на форму, там есть настройки on_sent_ok и on_submit куда можно жаваскрипт впихнуть свой.

      Ответить
  4. Добрый день Артем!
    Такой вопрос, как сделать боковое меню в WordPress чтобы там выводились категории и подкатегории товаров?
    Искал информацию, но толком ничего не смог найти.

    Ответить
  5. Артем, здравствуйте!
    Извините, что не по теме:
    Что делать если при переводе плагина через Loco Translate — текст не меняется на русский? Пробовал и через POedit — тоже самое: строки для перевода есть — перевожу, а отображается все равно английский. Может вы знаете в чем может быть дело.
    Заранее спасибо!

    Ответить
    • Доброго! Значит не те строки переводите. Бывает, что встречаются одинаковые строки, которые выводятся в разных местах сайта. Еще может быть, что нужные вам строки просто не подготовлены для перевода. Это надо тему смотреть

      Ответить
    • нет, строки перевожу именно те. Ладно, спасибо за ответ, буду думать 🙂

      Ответить
  6. Отличное видео Спасибо!
    1.а что скажите о Bloom? родной плагин для divi. Была практика использования?
    2.можно ли прикрутить родную форму из ДИВИ, а не брать плагин CF7 ?
    и если посоветуете уже готовые адаптивные формы(для cf7 или др плагин),то Спасибо!)

    Ответить
  7. А можно сделать так, чтобы эти скрипты, что прописаны в настройках диви загружались не на каждой странице сайта, а только на нужной? На той где кнопка?

    Ответить
  8. Привет. все сделал как в видео. ничег оне происходит и вылазит следующая ошибка:
    TypeError: b.find is not a function jquery-migrate.min.js:2:542

    чтобы могло быть?

    Ответить
    • Привет! Сложно сказать, но наверняка что-то где-то блокируется

      Ответить
  9. Добрый день! Помогите разобраться. Делала на тестовом сайте, там все получилось, затем купила лиценз тему , поставила на другом домене и попробовала повторить, не работает(( на 2 страницах пробовала, безрезультатно, при клике на кнопку просто ничего не происходит( в чем может быть дело? http://floorence-new.ru.xsph.ru/promyshlennye-poly/ в самом низу кнопка , подскажите пожалуйста!

    Ответить
    • Добрый! А что должно происходить? Там в кнопке ссылки нет, а если всплывашка должна быть, то проверьте чтобы скрипты подключались, может быть скрипт не подгружается на странице, вот и не работает

      Ответить
    • Прошу прощения, правила страницу, кнопка там не в самом низу, а предпоследняя под словом «Связаться». Скрипт я подключала

      Ответить
  10. а если после тех стилей еще и эти прописать то и красиво будет

    .wpcf7-form {padding-top:40px;}
    .wpcf7-form-control-wrap input {padding:12px 10px !important; border-radius:6px; font-size:16px;}
    .wpcf7-form-control-wrap textarea {width:300px; border-radius:6px; font:16px Arial !important; }
    input.wpcf7-form-control.wpcf7-submit{width:100%; padding:13px 40px; border-radius:6px; font:16px Arial; background:#f99b0e; color:#000;}
    input.wpcf7-form-control.wpcf7-submit:hover{background:#ffae00;}

    Ответить
    • Точнее вот так, чтобы и на телефоне нормально было

      .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 330px;
      margin: 20px auto;
      }

      .wpcf7-form {padding-top:40px;}
      .wpcf7-form-control-wrap input {padding:12px 10px !important; border-radius:6px; font-size:12px;}
      .wpcf7-form-control-wrap textarea {width:200px; border-radius:6px; font:16px Arial !important; }
      input.wpcf7-form-control.wpcf7-submit{width:100%; padding:13px 40px; border-radius:6px; font:16px Arial; background:#f99b0e; color:#000;}
      input.wpcf7-form-control.wpcf7-submit:hover{background:#ffae00;}

      Ответить
  11. Артём привет!
    Как всегда, твои уроки очень познавательны и сильно помогают разобраться во многих нюансах! )) Спасибо тебе, за то, что ты есть!

    Ответить
  12. Здравствуйте, Артём! У меня вопрос по по теме Vantage. Как сделать так, чтобы размещать в ней видеоролики нужного мне размера? До этого у меня была тема WordPress 2016 и изначально я размещала видеоролики именно в ней. Там я сумела подогнать их под нужный размер. А когда сменила тему на Vantage, ролики изменились в размере (стали очень большими). Как вернуть прежний размер всех видеороликов, сохранив при этом тему Vantage? Спасибо.

    Ответить
    • Доброго! Еще бы я использовал эту тему. Но не зависимо от темы можно задавать ширину фрейма в котором видео сидит. В личку ВК постучитесь, это надо смотреть по месту

      Ответить
  13. Помоги пожалуйста! Скролит страницу при открытии всплывающего окна! Как убрать это?

    Ответить
    • Скорее всего надо отключать работу ссылки, смотреть надо как чего

      Ответить
    • А можно как то вообще отключить прокрутку для всплывающего окна? overflow hidden не помогает

      Ответить
    • Надо отключить штатное поведение ссылки, но это смотреть надо конкретный сайт

      Ответить
  14. Добрый день! Все сделал по инструкции, но всплывающее окно не имеет подложки и почему то прилипло к левому краю экрана…

    Вот как выглядит — https://www.screencast.com/t/MARrSnnatpnl

    Можете подсказать, что можно сделать?

    Ответить
  15. Добрый день. Настроили всё согласно видео, но не работает. В начале видео, вы говорите, что в теме Divi уже встроен плагин Magnific Popup. Но не нахожу его. Возможно поэтому и не срабатывает. Могли бы подсказать, как точно узнать встроен или нет. И если нет, можно ли его установить?

    Ответить
    • Добрый! Вполне может быть, что в новых версиях они отказались от использования этого плагина. Не проверял. Это узнать можно только исходный код просматривая.
      Если этого плагин нет, то в консоли браузера ошибки будут.

      Ответить
    • Сейчас использую встроенный Magnific popup в Divi, всё работает как нужно. Проблема у вас ещё актуальна?

      Ответить
  16. Добрый день, можете помочь? Как сделать чтоб это работало после нажатия на кнопку контактной форме(контактная форма которая находится в Visual Bilder Divi)? Я пробовал сделать так же, но ничего не получалось, пробовал к отдельной кнопке и всё работало.

    Ответить
  17. Рабочий костыль на декабрь 2020. Всё по инструкции если сделать, то работает!!!

    Ответить

Добавить комментарий

%d такие блоггеры, как: