Приставки за модални прозорци за WordPress. Изскачащи прозорци в WordPress

В първата версия на тази статия предложихме няколко безплатни плъгина, но предвид обратната връзка, която получихме от нашите потребители, които се оплакваха от много възникнали грешки и понякога поддръжка на клиенти, която някои от издателите на тези плъгини нямаха, решихме да ви предложим изскачащо меню със списък, което ще ви спести часове търсене.

Изскачащите прозорци са много мощни инструменти, които се използват от много блогъри за показване на реклами, заснемане на имейл адреси или преглед на други видове информация. Те могат също така да показват реклами по атрактивен начин, като избягват досадните читатели, когато са насочени към конкретно съдържание.

И така, днес ще ви представим списък с безплатни WordPress плъгини, които ще ви позволят да показвате изскачащи прозорци на уебсайта си.

1. OptinMonster

2. Модални изскачащи прозорци

Разширението WordPress Modal Popup Box може да бъде закупено отделно или в комплект с Ultimate Addons от Visual Composer. Този плъгин на WordPress ви позволява да добавяте изскачащи прозорци за различни цели:

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

Това е най-простото решение за избор в този списък и ще се хареса на потребителите на Ultimate Addons на Visual Composer или на потребителите, които търсят прост изскачащ прозорец.

Неговите функции включват: поддръжка на плъгини, поддръжка на кратък код, възможност за добавяне на изображения или видеоклипове и др

3. изскачащи прозорци

Това, което липсва на Popups в креативността на деноминацията, се компенсира с лекота на използване и специфични за WordPress методи за насочване. Въпреки че не предлага толкова много функции като OptinMonster, той е идеален за основни типове изскачащи прозорци.

Има някои методи за насочване, специфични за WordPress, и също така има предимството, че е безплатен. С него можете да създавате изскачащи прозорци, които се показват на пет различни места на вашия сайт.

Създателят на изскачащи прозорци няма функция за плъзгане и пускане, но все пак е доста прост и лесен за използване. След като сте избрали вида и усещането на вашия изскачащ прозорец, можете да приложите насочване с помощта на ET/OR правила и много други критерии. Той предлага някои тригери първоначално, но премиум версията добавя допълнителни тригери.

4. Суперформи - изскачащи прозорци

Това разширение на приставката за WordPress Super Forms няма същия блясък като другите изскачащи приставки в този списък, но все пак е добър избор за потребители, които искат бързо да превърнат посетителите в абонати.

Super Forms – Popups е чудесен избор, ако търсите просто решение за изграждане на вашия имейл списък.

Основните му характеристики са: 7 шаблона за изскачащи прозорци, които лесно могат да ви помогнат да започнете бързо, 12 различни тригера и филтри, базирани на поведението на посетителите, изскачащи прозорци, които могат да бъдат лепкави, и много повече

5. Изскачащи прозорци на нинджа

С над 30 000 продажби и оценка от 4,4 звезди, Ninja Popups е един от най-популярните WordPress плъгини, достъпни от Canyon Code.

В допълнение към широка гама от модели за различни приложения, той също така има няколко функции като: визуален изскачащ блок, 10 различни позиции на дисплея на изскачащи прозорци, 74 различни анимационни ефекта, поддръжка на антиблокираща технология за работа с реклама блокери, различни опции за насочване, статистика на контролните панели, блокиране на съдържание за отказване или споделяне на имейли, тонове интеграции на имейл услуги и др.

6.ChimpMate Pro

ChimpMate Pro е WordPress плъгин, създаден специално за потребители на MailChimp и за превръщане на читателите в абонати. Подобно на неговия плъгин OptinPoint, който ще разгледаме по-късно, този плъгин е много персонализиран и ви дава пълен контрол върху това кога и къде се появяват изскачащи прозорци.

ChimpMate Pro ще бъде предпочитаният плъгин за потребителите на MailChimp, но ако не използвате MailChimp, не се притеснявайте: приставката OptinPoint в нашия списък може да ви хареса.

Характеристиките му включват: интеграция с , визуален редактор на изскачащи прозорци с визуализация в реално време, напълно адаптивен външен вид, 9 опции за поведение и задействане и много други

7. Изскачащо устройство

Popup Maker е най-популярната приставка за изскачащи прозорци на WordPress, посочена в WordPress.org с повече от 200 000 активни инсталации. Ще ви помогне да създадете много изскачащи прозорци. Неговият редактор на изскачащи прозорци ще ви помогне да ги създадете с помощта на познатия интерфейс на WordPress, въпреки че не е перфектен инструмент като тези, които се намират в изскачащите прозорци OptinMonster или Ninja.

По отношение на насочването и задействанията, Popup Maker е конфигуриран с набор от опции за насочване към съдържание на вашия уебсайт, въпреки че повечето от неговите разширени опции са заключени зад добавка, която е премиум.

8. Наслоени изскачащи прозорци

Специалността на Layered Popups е възможността да създавате свои собствени анимирани и многослойни изскачащи прозорци. Ако се увлечете в криволиченето на този дизайн, това не е вашият стил, можете да се насладите на повече от 150 модела готови и красиво проектирани изскачащи прозорци.

С широк набор от функции Layered Popups ще добави малко пикантност към вашите опции и изскачащи прозорци.

Характеристиките включват: съвместимост с 65 доставчици на имейл услуги, визуален създател на изскачащи прозорци, поддръжка на кампании и A/B статистика и др.

9. Доминиране на изскачащи прозорци

Popup Domination е един от най-старите инструменти за създаване на изскачащи прозорци, което до голяма степен обяснява неговия слоган. И въпреки че съществува от известно време, Popup Domination получи много актуализации, за да остане конкурентоспособен.

Той не само идва с куп шаблони за изскачащи прозорци, за да започнете бързо, но също така има: система за анализ, така че можете да видите как се представят вашите изскачащи прозорци, поддържа A/B тестване за оптимизиране на вашите изскачащи прозорци въз основа на събраните данни. на опции за насочване като цел за изход, кликване, ниво на страница, референт, устройство и т.н..., поддръжка за всички популярни тригери като време, дълбочина на превъртане, изгледи на страници и т.н., интегриране на проследяване на събития от Google Анализ и т.н.

Освен тези функции, Popup Domination има и уникален модел на ценообразуване в сравнение с OptinMonster. Вместо да плащате повече за допълнителни функции, Popup Domination ви дава всички функции на всеки план и ви плаща само за броя изскачащи изгледи на месец.

В зависимост от вашите нужди може да е по-евтино от OptinMonster.

10.ConvertPlug

ConvertPlug е приставка за WordPress, която съдържа огромна библиотека от над 100 готови шаблона и е специално проектирана да превръща посетителите на вашия уебсайт в абонати и клиенти чрез използване на широк набор от персонализирани изскачащи прозорци, задействани от различни потребителски действия.

Така че, ако искате да увеличите процента си на реализация, ConvertPlug трябва да бъде една от вашите добавки, които да опитате.

Основните му характеристики включват: над 10 изскачащи позиции на дисплея, 12 различни тригера и филтри за поведение на посетителите, възможност за повторно ангажиране на неактивни посетители с интерактивни прозорци, възможност за персонализиране на вашите оферти за нови, стари и свързани посетители и много Повече ▼

11. сумо

Приставката Sumo WordPress не се ограничава до изскачащи прозорци: това е пълен набор от инструменти за вашия уебсайт. Но един от най-популярните инструменти в този пакет е List Builder, който, познахте, ще ви помогне да показвате изскачащи прозорци на вашия сайт.

Можете да използвате плъзгане и пускане, за да създадете изскачащи прозорци, като използвате персонализирани изображения, бутони и текст. След това можете да извикате своя изскачащ прозорец с условия като: задържане на изход, забавяне, дълбочина на превъртане и т.н.

Sumo List Builder също има A/B тестване и анализ, за ​​да можете да оптимизирате изскачащите прозорци, които използвате на уебсайта си. Този плъгин не е толкова гъвкав по отношение на типовете изскачащи прозорци, които можете да създадете, но ако искате специално да създадете имейл списъка си с изскачащи прозорци, той все още е страхотна опция.

Единственият недостатък е, че ще трябва да платите за Sumo Pro, ако искате да премахнете марката Sumo или да получите достъп до интеграция с едно щракване с повечето услуги за имейл маркетинг.

Заключение

В тази статия прегледахме най-популярните популярни WordPress плъгини, предназначени за лесно създаване на изскачащи прозорци.

Въпреки това, вие също ще можете да проверите нашите, ако имате нужда от повече елементи, за да завършите вашите проекти за създаване на интернет уебсайтове, като се консултирате с нашето ръководство за създаване или дива: Най-добрата WordPress тема на всички времена.

Но ако знаете за други премиум добавки за WordPress, които могат да се справят по-добре от тези, не се колебайте да ги споделите с нас.

Изскачащият или модален прозорец е най-печелившият вид реклама. Търсачките не го харесват особено, особено ако има твърде много изскачащи прозорци на сайт на WordPress, но това е прост и ефективен начин за получаване на допълнителен доход от трафик на ресурси.

Да направите сами форма на прозорец и да напишете скрипт за появата му по време на сесия на уебсайт е много трудна работа за необучен човек. Ще трябва да се разровите в много уроци по програмиране и CSS, преди да разберете как да направите модален прозорец. За да не се налага да преминавате през толкова трудна крива на обучение, тази статия обсъжда 6 от най-удобните и популярни модули за генериране на изскачаща реклама.

Неограничени изскачащи прозорци – многофункционален плъгин за създаване на изскачащ прозорец и др

Струва си да направите резервация веднага - Unlimited Pop-Ups не се разпространява безплатно - това е платен плъгин. Трябва да го купувате само ако имате поне малко органичен трафик на уебсайта си. Тогава определено ще можете да възстановите покупката си.

С Unlimited Pop-Ups можете да създадете не само модален прозорец, но и движещи се джаджи на страницата, ленти и колони. Можете да напълните вашия WordPress сайт с реклами, но трябва да използвате модерация навсякъде. Обикновено една изскачаща реклама е достатъчна – повече ще са твърде много. В допълнение, неограничените изскачащи прозорци ви позволяват да привличате посетители не чрез количеството реклама, а чрез нейното качество. Можете да създадете модален многостепенен прозорец, през който можете да превъртате.

Изскачаща форма за контакт – ненатрапчива изскачаща реклама на сайта за няколко минути

Разработчиците на Contact Form Pop-up внимателно изслушаха всички оплаквания на търсачките относно изскачащите прозорци и създадоха инструмент, с който можете да създадете модален прозорец, който няма да безпокои посетителите. Въпросът е, че рекламната форма няма да изскочи цялата наведнъж. На екрана ще се появи само част от прозореца. Той ще се отвори напълно само ако потребителят желае - кликне върху пряк път, който се появява. Тогава модалният прозорец ще се отвори в целия си блясък.

Има много опции и е по-добре веднага да решите как да използвате изскачащия формуляр за контакт, тъй като приставката е платена.

Единственият недостатък на изскачащия формуляр за контакт е, че изскачащият формуляр може да бъде поставен само в долния десен ъгъл на сайта на WordPress.

Advert Flap Pro – плъгин за създаване на ефективни изскачащи прозорци

Този инструмент е предназначен предимно за рекламна употреба. Тя ви позволява да създавате необичайни миниатюрни прозорци. Използвайки го, можете да създадете модална реклама, която не само няма да пречи на потребителите, но и ще украси дизайна на сайта. Цветът на фона и текстът могат лесно да се персонализират. Освен това можете да конфигурирате времето за показване на изскачащия банер. Формулярът може да бъде поставен само в горната дясна част на WordPress сайт. Но това не е просто прищявка на разработчиците - тук рекламата показва най-добро представяне. В крайна сметка всички вече са толкова свикнали с модалния прозорец, изскачащ някъде отдолу, че прозорецът Advert Flap Pro определено ще привлече нужното внимание.

Promotions Plugin – оригинален WordPress плъгин, който ще трансформира рекламата в сайта

В много отношения този инструмент е подобен на предишните. Модулът може да бъде персонализиран по същия начин чрез промяна на фона, съдържанието и времето на дисплея на прозореца. Но неговата особеност е по-високият процент на реализация, особено ако се използва за абонаменти и продажби. Поставяте бутон с призив за действие (например „Абониране“, „Регистрация“, „Купете“ и т.н.) и след щракване се отваря модален прозорец в друга част на сайта. Тази форма на външен вид на прозореца леко ще „развълнува“ потребителя и ще привлече вниманието му към вашата оферта.

Ninja Kick Sliding Panel – модерен плъгин за създаване на модерни изскачащи прозорци

Причината, поради която изскачащият формуляр е опасен за WordPress сайт, е, че хората вече са уморени от него. Това е като телевизионна реклама - всички изглеждат примирени, но са ужасно ядосани. И с всеки следващ сайт с изскачащи банери и рекламни видеоклипове кръвта на потребителя буквално кипи. В резултат на това той може да не издържи и вашият сайт ще остане „екстремен“ - посетителят ще го постави в черен списък и никога повече няма да се върне.

Ninja Kick Sliding Panel доброволно се съгласи да коригира ситуацията. Този плъгин за WordPress може да направи формата така, че потребителите да не отблъскват, а по-скоро да я харесват. Модулът създава прозорци в модерен "плосък" стил, напомнящ минимализъм в архитектурата - минимум пищност, максимално съдържание. С него можете да направите удивително ефективна реклама или да създадете работеща форма за абонамент. Това е платена добавка, но в този случай има за какво да се плати.

Ninja Popup е фаворит сред другите плъгини за генериране на изскачащи прозорци

Ninja Popup ще даде шансове на всеки друг плъгин. Има почти всичко. Изскачащ формуляр, създаден с помощта на Ninja Popup, определено ще започне да ви печели пари. Инструментът предоставя готова база данни от 40+ изскачащи стила. Можете да редактирате всеки от стиловете, изброени в каталога. В допълнение към рекламните банери, с Ninja Popup можете да добавите формуляр за проверка на възрастта, абонамент, социално проучване, регистрация, обаждане за покупка и много други. Но трябва да платите за такива функции - този инструмент е един от най-скъпите сред другите прегледани плъгини.

заключения

Изскачащ формуляр на сайт на WordPress ще бъде от голяма полза за вас, ако го използвате правилно. Опитайте се да използвате изскачащи прозорци за реклама на трети страни само в краен случай, ако няма други начини да печелите пари. Най-доброто, което изскачащият формуляр може да ви даде, са нови абонати и постоянни клиенти. По-добре е да печелите 10 рубли на човек всеки месец поради постоянните му посещения, отколкото да печелите 30 рубли веднъж за кликване върху натрапчива реклама!

(Последна актуализация: 16.05.2019 г.)

Здравейте всички! Отново съм аз, с полезна публикация - изскачащ прозорец за wordpress- за начинаещи и не само потребители на WordPress. Ако си заинтересован WordPress изскачащи плъгини, нарича се още плъгин за модален прозорец, тогава вие, приятели, сте попаднали точно на правилното място.

Създавайте модални прозорци и вмъквайте всякакъв вид съдържание

Можете да използвате плъгините, които ще представя по-долу за: Формуляр за контакт 7 в модален прозорец; всяка форма за контакт (обратна връзка) в модален (изскачащ) прозорец; видео в модален прозорец; снимки в изскачащ прозорец; публикуване на полезна информация с връзки; форма за абонамент по пощата за нови статии в модален прозореци така нататък, и така нататък, не можете да изброите всичко. Тези добавки са много прости, без сложни настройки и не създават почти никакво допълнително натоварване на сайта. Така че прочетете - Как да направите изскачащ прозорец в WordPress?

Easy Modal Plugin - Изскачащ/модален прозорец за WordPress

Плъгин за модален прозорец за WordPress - Easy Modal

Можете да инсталирате този плъгин по стандартния начин, през админ панел - Plugins - Add new и в полето Search for plugins въведете името Easy Modal и натиснете Enter. Трябва да е първо в списъка. Инсталирайте и го активирайте както обикновено. След това можете да преминете към създаване на нов модален прозорец.

За да направите това, щракнете върху новата секция Easy Modal, която се появява, и изберете Modals:

Easy Modal - създаване на нов модален прозорец

След това в най-горната част на страницата щракнете върху бутона Добавяне на нов:

Добавете нов прозорец

И тук всичко е просто:

Създаване на изскачащ прозорец за видео

В общите настройки (раздел Общи) дайте името на новия прозорец (няма да се показва, това е за вас, ако например създадете няколко модални прозореца); тип натоварване Load Sitewide (за целия сайт); заглавие на прозореца и накрая поставете необходимия код в редактора (текстов режим). В моя пример съм вмъкнал видео код от YouTube.

Настройка на модален прозорец

В параметрите можете да изберете размера на прозореца; дали да се използва фон или не; тип анимация за модален/изскачащ прозорец; местоположението на прозореца и можете също да коригирате прозореца (поставете отметка в квадратчето и посочете разстоянието от горната част на екрана).

В раздела Примери ще намерите примерни кодове за показване на изскачащ прозорец в WordPress:

Код за показване на модален прозорец в WordPress

Тук можете да изберете проста текстова връзка, бутон или икона. Моля, имайте предвид, че на всеки новосъздаден прозорец се присвоява eModal - клас. Първият създаден прозорец ще има клас eModal - 1, вторият eModal - 2 и т.н. Трябва само да замените сами цифрата след знака -. Този код може да бъде поставен във или навсякъде във вашата статия. Естествено, можете да напишете произволен текст в кода. Да, почти забравих, че след като създадете модален прозорец от дясната страна на страницата, не забравяйте да щракнете върху бутона Публикуване.

Вмъкнах кода за модалния прозорец с видеото в страничната лента като бутон:

Бутон на страничната лента на блога

Посетителят кликва върху него и се отваря прозорец с видео:

Модален прозорец с видео

Надявам се, приятели и другари, общият принцип на работа с плъгина Easy Modal ви е ясен. Само ще добавя, че можете след това или веднага да персонализирате външния вид на модалния прозорец, като щракнете върху елемента Тема. За съжаление безплатната версия на плъгина има само една тема за дизайн, но можете да я проектирате както искате, има достатъчно настройки. Когато персонализирате външния вид на модалния прозорец, можете веднага да видите визуализация на дизайна вдясно:

Редактиране на тема - дизайн на модален/изскачащ прозорец

След всички настройки за външния вид на прозореца, щракнете върху бутона Запазване вдясно. И накрая, дами и господа, ще ви покажа пример за показване на формуляра за контакт 7 в модален прозорец.

Създайте нов модален прозорец, както е показано по-горе, и в текстов редактор просто поставете краткия код на формуляра за контакт 7 (ако имате инсталиран този плъгин, ако не):

Създайте формуляр за контакт 7 в изскачащ прозорец

Ако читателят иска да се свърже с вас, той ще натисне бутона и формата за контакт ще се отвори в модален прозорец:

Нещо такова. Освен това всички ваши създадени изскачащи прозорци ще бъдат показани на страницата (елемент Modals), където между другото са посочени класовете за всеки модален прозорец:

Създадени модални прозорци на WordPress

Поради факта, че този плъгин не е актуализиран от дълго време, предлагам да обърнете внимание на следния модул.

Знаете ли, че Easy Modal има луксозен нов заместител, наречен Popup Maker? Това е най-популярният персонализиран изскачащ и модален плъгин за WordPress.

• Неограничени теми;
• Прецизно насочване, тригери и бисквитки;
• Конфигурирайте всичко;
• Пълна гама разширения;
• Обширна документация и API за разработчици.

Ако вече сте потребител на Easy Modal, превключването от Easy Modal към Popup Maker е бързо с персонализирания импортер!

Popup Maker - плъгин за изскачащи прозорци в WordPress

Модул за създаване на изскачащи прозорци за WordPress

Най-добрият изскачащ плъгин, който WordPress предлага. Има много възможности. Веднага ще кажа, че Popup Maker поддържа руски език. Така че няма да имате проблеми с настройките. Персонализирайте го, за да създадете всякакъв тип изскачащи, модални или наслагвания на съдържание за вашия WordPress сайт.

А сега възможностите на плъгина. Има твърде много функции, за да ги изброя всички тук. Ето най-важните, които определено ще ви трябват.

Създавайте лесно известия, изскачащи прозорци (лайтбоксове) с видеоклипове, модални форми (Ninja Forms, Gravity Forms, Contact Form 7). И още много. Можете да използвате изскачащия редактор, за да създадете каквото желаете съдържание. Всички изскачащи прозорци/модали са отзивчиви. Идеален за мобилни устройства.

(функция(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(функция() ( Ya.Context.AdvManager.render(( blockId: "R-A) -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(това , this.document, "yandexContextAsyncCallbacks");

Здравейте приятели! Предлагам да поговорим за създаване на модални прозорци в WordPress. Изскачащите (модални) прозорци значително разширяват възможностите на сайта. Имате ли съобщение или реклама, която всеки посетител на уебсайт трябва да види? Трябва ли да направите кампанията си видима? Искате ли да направите изскачаща регистрационна форма на вашия уебсайт или форма за споделяне на съдържание в социалните мрежи? Създайте модален прозорец!

Изскачащите модали са предназначени да привличат вниманието. Появявайки се на страницата, те блокират основното съдържание и принуждават потребителя да се запознае с тяхното съдържание (текст, видео, призив за действие и др.).

внимание!Не се плашете от дължината на този урок - няма трудности при създаването на модални прозорци (прочетете и вижте сами), просто описвам всяка стъпка подробно.

Алгоритъм за създаване на модални прозорци в WordPress

WordPress няма вградени инструменти за работа с изскачащи прозорци. Ние ще ги проектираме и персонализираме с помощта на плъгин Създател на изскачащи прозорци. Нека, например, създадем модален прозорец с видео, изскачащ прозорец при натискане на бутон(можете да го конфигурирате по-късно автоматиченвъншен вид).

1. ИнсталирайПлъгин за създаване на изскачащи прозорци. Активиратенеговият. Нека ви напомня: научихме как да инсталираме плъгини.
   
2. Намерете секцията в страничното меню отляво на административния панел Създател на изскачащи прозорции отидете на неговия подраздел Добавете изскачащ прозорец.
3. Отваря се редакторът на модалния прозорец. Въведете името на прозореца в полето в горната част на страницата (името ще се показва само в административния панел - потребителите няма да го виждат).
4. Идва с заглавие на прозореца(ще се вижда от потребителите) и го въведете в полето над бутона Добавете медиен файл.
5. В блока УсловияИзберете от падащото меню страниците (категориите), на които ще се появи прозорецът. Ако приставката трябва да работи на всички страници на сайта, изберете Формат: Всички.
6. Добавяне към голямото поле под лентата с инструменти текст, изображения, видео или аудио– всяко съдържание, което ще се покаже в изскачащия прозорец. В разглеждания пример добавих кода за видеоклип от YouTube (учихме добавяне на видеоклипове към сайт на WordPress).
   
7. В блока ТригериИма настройки за ръчно или автоматично отваряне (самоактивиране) на изскачащия прозорец. В нашия пример аз избрах стойността Щракнете върху Отвори.
8. Моля, посочете по-долу размер на изскачащ прозорец(в пиксели или проценти). При избора на опция АвтоматиченПлъгинът автоматично ще преоразмери модалния прозорец.
9. Поставете отметка в квадратчето в реда Деактивиране на фонатака че страницата на сайта да се вижда зад изскачащия прозорец (препоръчвам).
10. Настройвам вид и скорост на анимацията(не е необходимо: оптималните стойности вече са зададени по подразбиране).
    
11. Регулирайте позицията на прозореца на екрана. Първоначално плъгинът го позиционира в горния център.
12. Стойност на имота z-индекс, зададен по подразбиране, обикновено не е необходимо да се променя.
    
13. Изберете опции за затваряне на изскачащия прозорец. Поставете отметка в квадратчетата в редовете с "птици" Щракнете върху Overlay, за да затворите(прозорецът ще се затвори, когато щракнете върху фона около него), Натиснете F4, за да затворите(прозорецът ще се затвори с ключа F4), Натиснете ESC, за да затворите(прозорецът ще се затвори с ключа ESC). За да не дразните посетителите на сайта с пъзела за затваряне на модалния прозорец, препоръчвам да поставите отметка във всички квадратчета.
    
14. Кликнете Публикувайте.Поздравления, вашият модален прозорец е създаден!

Относно персонализирането на дизайна на изскачащия прозорец

За да промените дизайна на създадения модален прозорец, отидете на подраздела Темараздел Създател на изскачащи прозорцистранично меню на админ панела (вляво).

В редактора, който се отваря, конфигурирайте желан фон на прозореца, цвятИ размер на шрифта, подложка, сенки, име на бутоназатваряне. Вкусът и цветът... знаете, така че няма да навлизам в подробности относно персонализирането на дизайна на изскачащия прозорец. Ако имате въпроси, задайте ги в коментарите.

Как да настроите изскачащ прозорец

Не забравяйте, че не активирахме функцията за автоматично отваряне на модален прозорец в настройките на приставката? Следователно трябва да разберем как ще се отвори прозорецът ни. Нека настроим прозорец, който да изскача, когато щракнете върху връзка, картина или бутон.

Плъгинът Popup Make присвоява всеки прозорец два уникални CSS класа. Ако добавите някой от тези класове към елемент на уеб страница, когато щракнете върху този елемент, ще се отвори модален прозорец.

Къде и как да увеличите коментарите в Instagram – всички методи. Порталът pricesmm.com разбра какво е по-евтино и по-добре: сами да увеличите коментарите в Instagram, с програми, да получите в замяна или да поръчате услуга в услугата SMM. Плюсове и минуси на всеки метод.

Примери за добавяне на CSS код на модален прозорец към връзка, изображение и бутон:

< a href = "#" class = >Отворете модален прозорец< / a >

Ще се появи модален прозорец, когато щракнете върху изображението

< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >

Модалният прозорец се активира след натискане на бутон

< button class = "popmake-obrazets-modalnogo-okna"> Отворете модален прозорец< / button >

Кликнете върху HTML елемента, след като добавите CSS клас към него popmake-obrazets-modalnogo-okna. Трябва да се появи модален прозорец, подобен на този:

Появи ли се? Страхотен! Сега можете да конфигурирате изскачащи прозорци. Ако прозорецът не се отвори, опишете проблема в коментарите - ще го стартираме заедно!

Наскоро за един сайт ме помолиха да създам формуляр за обратна връзка за WordPress в модален прозорец. Тоест, когато кликне върху връзката „пишете ни“, вместо да отидете на съответната страница, потребителят трябва да отвори нов изскачащ прозорец, където ще се намира функцията за изпращане на съобщение. Това е по-интерактивно решение, въпреки че не всеки го харесва. Аз лично предпочитам класическата реализация със страница за контакти, но формите в сайтовете са различни - така че ще бъде полезно да разгледаме решението на този проблем. В работата си използвах 2 добавки: добре познатата Contact Form 7 и модула Easy Modal за създаване на модален прозорец в WordPress.

Актуализация 18.05.2017 г.: Съдейки по последните прегледи в хранилището, в някои случаи може да има проблеми с работата му. Ако и вие сте засегнати от това, опитайте ново решение от разработчиците, наречено Popup Maker. Може да се обмисли и друга алтернатива.

Няма да навлизам в подробности относно инсталирането и конфигурирането на Contact Form 7; цялата информация за това е тук. В блога имаше и статия за това, което може да бъде полезно.

Да преминем направо към модула Easy Modal. Ще го намерите. Разработчиците твърдят, че това е най-доброто решение за създаване на модални прозорци на уебсайт с различни интересни опции за представяне на съдържание.

Над 10 хиляди изтегляния, рейтинг 4.6. Валидни версии на 3.4 са 4.0.8, въпреки че успешно го пуснах на WP 4.3.1. Въпреки факта, че плъгинът вече е трансформиран в ново решение за създаване на изскачащи прозорци, на уебсайта wordpress.org и при търсене на плъгини в административния панел все още можете да намерите обичайната Easy Modal версия 2.0.17. Използвайки неговия пример, ще ви разкажа за създаването на модален прозорец за обратна връзка в WordPress.

След инсталирането ще се появи раздел със същото име, където има няколко елемента. Ще ни трябва първият от тях - Модали. Кликнете върху бутона Добавяне на нов там.

Това действие ще създаде нов модален прозорец за вашия WordPress сайт. Настройките на елемента ще имат 4 раздела:

• Общи—общи параметри.
• Display Options - опции за показване.
• Close Options - настройки за затваряне на прозореца (чрез щракване или бутон Esc).
• Примери - примери за код за използване.

Общите настройки съдържат името на прозореца (не се показва на сайта), неговото заглавие, съдържание и тип изтегляне. В блока със съдържание, превключвайки към HTML режим, добавете краткия код на вашата форма за обратна връзка в модалния прозорец.

Типът на натоварване има 2 опции:

• Зареждане на целия сайт (за целия сайт).
• На страница/публикация (за конкретни публикации и страници).

Много интересен вариант. Ако имате нужда от изскачащ прозорец, който ще се показва на всички страници на сайта (връзката се намира в страничната лента, например), изберете първата опция. Във втория случай съответният блок с настройки ще се появи на страниците/публикациите на сайта при редактиране:

Можете да активирате и изберете свой собствен изскачащ прозорец за определена страница. Ако не поставите отметка, елементът няма да се зареди на сайта.

Вторият раздел на параметрите на модула е Опции на дисплея.

Тук посочвате:

• размер на прозореца - автоматичен, среден, адаптивен, малък, голям и др.;
• фон - можете да използвате фон за формата или да я показвате без него;
• анимация на изскачащ прозорец;
• позиция (локация) - горе в центъра, долу вдясно и т.н.; фиксирани или не;
• отстъп в горната част на екрана.

Примери за показване на изхода на модален прозорец в WordPress с помощта на плъгина Easy Modal могат да бъдат намерени в последния раздел.

Трябва да вмъкнете този код чрез изпълним модул в страничната лента или в текстов редактор. Не се различава от всеки друг HTML код, единственото нещо е, че тук е посочен класът на конкретен модален прозорец (eModal-1). За втория елемент, който създадохте, класът ще бъде eModal-2 и т.н. За да избегнете грешка при въвеждане на кода, най-лесният начин е да го копирате от тази страница.

Редактиране на темата на модален прозорец

В плъгина Easy Modal, освен настройките за конкретен елемент, можете да дефинирате теми за изскачащи прозорци (Theme). Основната безплатна версия на модула има само един шаблон, но това е повече от достатъчно.

Този инструмент има 6 раздела:

• Общи – посочете името на темата;
• Overlay — фон (тук можете да изберете цвета и прозрачността на фона на формата);
• Container – различни настройки на самия модален прозорец (padding, frame, shadow);
• Заглавие – параметри на заглавието на изскачащ прозорец (шрифт, сянка);
• Съдържание — шрифт и цвят на текстовете в блока;
• Close - затварящ елемент на формуляра (текст и дизайн).

Както можете да видите, външният вид може да бъде персонализиран според вашите нужди. В крайна сметка получих този прост формуляр на WordPress в модален прозорец:

След като зададете всички настройки, не забравяйте да ги запазите (щракнете върху бутона Запазване).

Видеоклип за добавяне на формуляр за контакт 7 в изскачащ прозорец Easy Modal

Между другото, намерих видео за работа с плъгина Easy Modal, демонстриращ процеса на създаване на модален прозорец за обратна връзка в WordPress. Там интерфейсът на модула е малко остарял (някои настройки изглеждат различно), но можете да разберете общата същност. Може би ще бъде по-лесно за някой да разбере този въпрос с помощта на видеоклип.

Общо за модалните прозорци за WordPress

Както бе споменато по-горе, сега плъгинът Easy Modal (съдейки по официалната страница) е преобразуван в Popup Maker. Успях да намеря модул със същото име в хранилището, но не съм го тествал. Казвам ви за това, за да знаете какво да търсите, ако Easy Modal в WordPress в следващите версии изведнъж спре да работи.

И двете решения са безплатни, въпреки че имат платени добавки. Те ви позволяват да персонализирате насочването, да добавяте още теми за дизайн, да съдържате анализи и някои други функции. Ако се нуждаете от по-усъвършенстван механизъм за модален прозорец, можете да разгледате по-отблизо тези разширения.

Що се отнася до задачата за отваряне на формата за обратна връзка Contact Form 7 в изскачащ прозорец, основните възможности на Easy Modal са достатъчни. Освен това, това решение може да се използва и за показване на други модални прозорци в WordPress - полезни съвети, допълнителна информация и т.н. Предвид наличието на редактор за вмъкване на HTML код, можете да показвате видеоклипове, формуляри и др. в изскачащия прозорец. Като цяло, полезен плъгин. Ако имате въпроси относно това, пишете в коментарите.