Як стварыць і адлюстраваць усплывальнае акно па тэгу паведамлення ў WordPress

Вы хочаце ствараць і адлюстроўваць адно ўсплывальнае акно для кожнага тэга паведамлення ў WordPress? Так што працягвайце чытаць гэты артыкул.

Мы ўпэўненыя, што вы ўжо знаёмыя з маленькім акном, якое з'яўляецца пры праглядзе вэб-сайта. Ну, гэта называецца ўсплывальнае акно або ўсплывальнае акно. Усплывальныя вокны могуць з'яўляцца ў розных памерах і на экране вэб-сайта.

У WordPress ёсць шмат убудоў для стварэння ўсплывальных вокнаў, такіх як Elementor Pro, JetPopup, Brizy Pro і інш.

Важна памятаць, што ўсплывальныя вокны не павінны раздражняць наведвальнікаў вашага сайта. Таму стварыце ўсплывальнае акно як мага больш простым і прывабным.

Змест

Некаторыя плагіны WordPress для стварэння ўсплывальных вокнаў

Elementor Pro

факір Pro - гэта пашырэнне Elementor з сотнямі прэміум-функцый. Гэта дае вам магутныя прафесійныя інструменты, якія паскараюць ваш працоўны працэс і дызайн. факір Pro дае вам поўны кантроль над макетам і дызайнам вашага сайта. У гэтым выпадку вы можаце свабодна наладжваць дызайн вашага ўсплываючага акна.

выкарыстанне Elementor Pro стварыць усплывальнае акно па тэгу паведамлення вельмі проста і зручна ў выкарыстанні. Вы можаце лёгка вызначыць умовы адлюстравання вашага ўсплываючага акна вельмі дакладным спосабам.

JetPopup ад Crocoblock - гэта пашырэнне для факір. Вы можаце набыць яго як асобны ўбудова або набыць у камплекце з іншымі ўбудовамі Crocoblock. Перавага выкарыстання JetPopup для стварэння ўсплывальнага акна ў тым, што ён пастаўляецца з вялікай колькасцю цікавых функцый.

Вы можаце пагуляць з трыгерамі ўсплываючых вокнаў.
Вы можаце стварыць анімацыю для ўсплывальнага акна.
Даступна вялікая колькасць усплывальных шаблонаў.

Чытайце таксама: 22 лепшыя дадаткі прэміум-класа для Elementor

Brizy Pro

Канструктар усплываючых вокнаў Brizy Pro прапануе вам два варыянты. Першае - гэта ўсплывальнае акно, якое актывуецца пстрычкай, а другое - аўтаматычныя трыгеры і ўмовы.

Адкрыццё па пстрычцы: ваша ўсплывальнае акно можа быць выклікана простым націскам на элементы вашай старонкі.
Аўтаматычныя трыгеры і ўмовы: вы можаце наладзіць дзеянні наведвальніка, якія будуць вызначаць, калі адлюстроўваюцца ўсплывальныя вокны.

Як згадвалася раней, у вас ёсць некалькі варыянтаў стварэння ўсплывальнага акна ў WordPress. У гэтым уроку мы пакажам вам, як ствараць і адлюстроўваць усплывальнае акно для кожнага паведамлення з дапамогай версіі Elementor Pro, таму пераканайцеся, што ў вас ужо ёсць.

Першае, што трэба зрабіць, гэта стварыць новы шаблон Popup. Каб стварыць новы шаблон усплывальных вокнаў, перайдзіце да Шаблоны > Усплывальныя вокны на прыборнай панэлі WordPress і націсніце кнопку Дадаць новы.

Затым дадайце назву вашага ўсплывальнага акна і націсніце кнопку СТВАРЫЦЬ МАДЭЛЬ.

Вы будзеце накіраваны ў бібліятэку шаблонаў, вы можаце выбраць шаблон з акна бібліятэкі або стварыць свой уласны шаблон усплывальнага акна. Каб выкарыстоўваць шаблон з бібліятэкі, проста націсніце кнопку ўставіць.

Але ў гэтым уроку мы збіраемся стварыць шаблон Popup з нуля. Націсніце значок X каб закрыць бібліятэку шаблонаў.

Нам трэба зрабіць некаторыя карэктывы ў наладах усплывальных вокнаў, перш чым мы пачнем ствараць шаблон усплывальных вокнаў. Вы можаце знайсці лепшыя налады для вашага сайта. У гэтым уроку мы пакажам вам налады ўсплывальных вокнаў па вашаму выбару.

Націсніце на значок шасцярэнькі ў левым ніжнім куце. У наладах усплывальных вокнаў зменіце Шырыня у 90% шырыні агляду (VW) Et становішча en Цэнтр-Ніз.

Далей распрацуйце свой шаблон усплывальных вокнаў. Дадайце новы раздзел і абярыце структуру з 5 слупкоў. У раздзеле налад усталюйце Шырыня на 950. Вы можаце гуляць са сваімі наладамі.

Напрыклад, вы можаце перайсці на ўкладку стыль каб усталяваць фон, перайдзіце на ўкладку прасунуты каб наладзіць маржу і многае іншае.

Цяпер вернемся да вашых калонак. У левым слупку ўсталюйце шырыню 33%, а для астатніх чатырох - 16%.

У левай калонцы мы дадамо віджэт загалоўка з тэкстам. Вы можаце дадаць тэкст, які запрашае наведвальнікаў вашага вэб-сайта праглядзець іншы кантэнт, які мае дачыненне да бягучага кантэнту, або любы іншы тэкст на ваш выбар.

Справа мы дадамо віджэт Image. Вы можаце дадаваць выявы з мініяцюр/выбраных выяваў паведамленняў або загружаць іх уручную.

Цяпер канструкцыя гатовая. Вярнуцца да Налады ўсплывальных вокнаў каб наладзіць анімацыю ўваходу, выхаду і палёў. У гэтым уроку мы задалі ўвод у Згасаць і выхад на Згасаць. Затым перайдзіце на ўкладку прасунуты і ўсталюйце поле на 30 (агульнае значэнне для спасылак).

Цяпер, калі дызайн гатовы, націсніце кнопку апублікаваўшы каб усталяваць умовы адлюстравання і трыгеры. Каб вызначыць умовы адлюстравання, націсніце на кнопку ДАДАЦЬ УМОВУ і абярыце свой варыянт з выпадальнага спісу.

Калі вы жадаеце паказаць тэг Popup by post, вы можаце ўсталяваць наступныя ўмовы адлюстравання (гл. анімацыю).

Націсніце Далей. Ва ўкладцы трыгеры, усталюйце трыгер на На скрутку пстрыкнуўшы перамыкач на ды. Вызначце напрамак сюр Bas і Шырыня больш за 95%. Таму што мы хочам, каб усплывальнае акно з'яўлялася, калі наведвальнікі даходзяць да канца нашага артыкула.

У гэтым уроку мы не збіраемся вызначаць Дадатковыя правілы. Такім чынам, націсніце ЗАХАВАЦЬ І ЗАКРЫЦЬ. Ну, цяпер мы скончылі.

Давайце паглядзім, як гэта выглядае.

Вось вы толькі што скончылі сваё ўсплывальнае акно. Глядзіце таксама нашы звязаныя артыкулы:

Спампаваць Elementor Pro

Падзяліцеся гэтым артыкулам:

Міхось Гартнер

Міхась Гартнер — эксперт па лічбавых інструментах, які купляе, тэстуе і аглядае інструменты SAAS для малога бізнесу. Абапіраючыся на шматгадовы вопыт у галіне тэхналогій, ён дае глыбокія агляды. Яго змесціва шырока карыстаецца і штомесяц абслугоўвае мільёны карыстальнікаў.