Как да създадете и покажете изскачащ прозорец чрез етикет за публикация в WordPress

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

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

В WordPress има много добавки за създаване на изскачащи прозорци, като Elementor Pro, JetPopup, Brizy Pro и др.

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

Съдържание

Някои добавки за WordPress за създаване на изскачащи прозорци

Elementor Pro

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

употреба Elementor Pro създаването на изскачащ прозорец чрез етикет за публикация е много просто и лесно за използване. Можете лесно да определите условията за показване на вашия изскачащ прозорец по много точен начин.

JetPopup на Crocoblock е разширение за Elementor. Можете да го закупите като самостоятелен плъгин или да го купите в пакет с други плъгини на Crocoblock. Предимството на използването на JetPopup за създаване на изскачащ прозорец е, че идва с много страхотни функции.

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

предварително зададени настройки на jetpopup

Прочетете още: 22 най-добри премиум добавки за Elementor

Brizy Pro

Създателят на изскачащи прозорци на Brizy Pro ви предлага два варианта. Първият е изскачащият прозорец, който се активира чрез щракване, а вторият са автоматичните задействания и условия.

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

Както споменахме по-рано, имате няколко опции за създаване на изскачащ прозорец в WordPress. В този урок ще ви покажем как да създавате и показвате изскачащ прозорец за етикет за публикация, като използвате версията Elementor Pro, така че се уверете, че вече имате такъв.

Първото нещо, което трябва да направите, е да създадете нов изскачащ шаблон. За да създадете нов изскачащ шаблон, отидете на Шаблони > Изскачащи прозорци на таблото за управление на WordPress и щракнете върху бутона Добави нов.

След това добавете името на вашия изскачащ прозорец и щракнете върху бутона СЪЗДАЙТЕ МОДЕЛ.

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

Но в този урок ние ще създадем изскачащ шаблон от нулата. Кликнете върху иконата X за да затворите библиотеката с шаблони.

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

Щракнете върху иконата на зъбно колело в долния ляв ъгъл. В настройките на изскачащия прозорец променете Широчина в 90% от ширината на изгледа (VW) Et на Позиция в компанията en Център-Долу.

След това проектирайте своя изскачащ шаблон. Добавете нов раздел и изберете структурата от 5 колони. В настройките на секцията задайте Широчина на 950. Можете да играете с вашите настройки.

Например, можете да отидете в раздела Стил за да зададете фон, отидете на раздела напреднал за персонализиране на маржа и много други.

Сега обратно към вашите колони. В лявата колона задайте ширината на 33%, а за останалите четири на 16%.

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

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

Сега структурата е готова. Върнете се към Настройки на изскачащи прозорци за персонализиране на анимации за влизане, излизане и поле. В този урок задаваме входа на Избледняват и изходът включен Избледняват. След това отидете на раздела напреднал и задайте полето на 30 (обща стойност за връзки).

Сега, когато дизайнът е готов, щракнете върху бутона ПУБЛИКУВАНЕ за задаване на условия на показване и задействания. За да определите състоянието на дисплея, щракнете върху бутона ДОБАВЯНЕ НА УСЛОВИЕ и изберете вашата опция от падащия списък.

Тъй като искате да показвате етикета Popup by post, можете да зададете следните условия за показване (вижте анимацията).

Щракнете Напред. В раздела тригери, задайте спусъка на На превъртане завъртане на превключвателя на да. Определете Посока от Bas и Широчина над 95%. Защото искаме изскачащият прозорец да се показва, когато посетителите стигнат до края на нашата статия.

В този урок ние няма да дефинираме Разширени правила. Така че щракнете върху ЗАПАЗИ И ЗАТВОРИ. Е, сега сме готови.

Да видим как изглежда.

Тук току-що завършихте изскачащия прозорец. Вижте също нашите свързани статии:

Изтеглете Elementor Pro

Споделете тази статия:

Михос Гартнер

Михос Гартнер е експерт по дигитални инструменти, който купува, тества и преглежда SAAS инструменти за малки предприятия. Въз основа на дългогодишен опит в областта на технологиите, той предоставя проницателни рецензии. Съдържанието му се използва широко и обслужва милиони потребители всеки месец.