Nasa iyo ang Elementor Popup Ang nagpapagawa upang mag-alok sa aming mga customer ng pinakamahusay na paraan upang lumikha ng mga popup na mukhang mahusay at naaayon sa disenyo ng kanilang site, at hindi nangangailangan ng custom na CSS sa proseso.
Sa gabay na ito, ipapakita ko sa iyo kung bakit hindi mo na kailangang limitahan ng panlabas na WordPress popup plugin. Sa halip – gamitin ang Popup Builder at bumuo ng mga pop up sa parehong editor na ginagamit mo upang buuin ang iyong buong site.
Una pa lang ito sa ilang video at nakasulat na tutorial na ilalabas namin para ipaliwanag kung paano gumawa ng iba't ibang kamangha-manghang mga popup sa Elementor.
Handa nang buuin ang iyong unang popup gamit ang Elementor? Ituloy natin ito…
Ang Popup na Gagawin Mo
Sa gabay na ito, ipapakita namin sa iyo:
- Paano i-edit ang popup window
- Paano gumawa ng popup ng Elementor na may kasamang contact form
- Paano buksan ang popup kapag nag-scroll pababa ang user sa 80% ng page
- Paano isara ang popup pagkatapos isumite ng user ang form
- Paano manu-manong i-trigger ang popup sa pag-click (kapag nag-click ang bisita sa isang button)
Talaan ng nilalaman
Hakbang 1: Pagsisimula
Sundin ang madaling, hakbang-hakbang na gabay para sa pagbuo ng mga popup sa WordPress gamit Popup Builder ng Elementor.
Sa Elementor, ang mga popup ay binuo tulad ng anumang iba pang uri ng template.
Kung pamilyar ka sa Elementor Tagabuo ng Tema, nakatagpo ka ng mga template tulad ng header, footer, single at archive.
Ang mga popup ay binuo sa parehong paraan.
Sa dashboard ng WordPress, pumunta sa Mga Template > Mga Popup > Magdagdag ng Bago
Pangalanan natin ang aming Popup template na Aking Unang Template at pindutin ang 'Gumawa ng Template'.
Pagkatapos, magbubukas ang popup templates window. Magagawa mong pumili mula sa mahigit isang daang paunang idinisenyong popup na template.
Tulad ng nakikita mo, gumawa kami ng maraming trabaho sa paglikha ng isang malaking library ng magagandang popup template para magamit mo. Maaari mo ring buuin ang buong popup sa iyong sarili gamit ang kapangyarihan ng Elementor Pro at ang mga widget nito.
Hakbang 2: Pagdidisenyo ng Popup Window Sa ilalim ng Mga Setting ng Popup
Pagkatapos mong isara ang window ng Library, magbubukas ang editor ng Elementor, na may lalabas na panel ng mga setting ng Popup sa kaliwa.
BTW, ang panel na ito ay palaging naa-access sa pamamagitan ng icon na gear sa ibaba.
Sa tab na Layout, itatakda namin ang lapad ng popup sa 700 pixels, at ang taas bilang 'Fit to Content'. Ang aming popup ay ipoposisyon sa gitna, parehong pahalang at patayo.
Sa tab na Estilo, magtatakda kami ng solidong dilaw na hangganan, na may 35-pixel na border-radius, na nagbibigay sa aming popup ng bilugan na hitsura.
Kasama rin sa mga setting ng popup ang mga karagdagang setting, tulad ng pagpapakita ng button na isara pagkatapos ng nakatakdang oras, awtomatikong pagsasara ng popup, switch para pigilan ang pagsara ng popup, switch para huwag paganahin ang pag-scroll ng page at switch para maiwasan ang maraming popup.
Hindi namin sila gagamitin dito, ngunit madaling malaman kung sakaling kailanganin mo ang mga ito.
Hakbang 3: Buuin ang Loob ng Popup
Dahil ang pagdidisenyo sa loob ng mga popup ay kapareho ng proseso sa pagdidisenyo ng anumang page, hindi namin tatalakayin nang detalyado ang proseso.
Tandaan lamang na ang bawat uri ng nilalaman at template na mayroon ka sa Elementor ay maaaring gamitin sa iyong mga popup.
Ang huling disenyo ng aming popup ay ganito ang hitsura:
Paano Mag-target ng Mga Popup Gamit ang Mga Setting ng Publish
Gaya ng makikita mo, ang pagtatakda ng advanced na pag-target at mga trigger ay kasingdali ng pag-flip ng switch. Pindutin ang publish at magbubukas ang window ng Publish Setting.
Mabilis nating talakayin ang mga opsyon sa pag-target sa Popup Builder, para malaman mo kung paano maayos na i-target ang mga popup gamit ang mga opsyon sa pag-target ng Mga Kundisyon, Trigger, at Advanced na Panuntunan.
Kundisyon
Itakda ang mga kundisyon na tumutukoy kung saan (sa aling mga pahina) lumilitaw ang popup sa buong site.
Halimbawa, kung pipiliin mo ang "Buong Site" ipapakita nito ang Popup saanman sa buong site! Maaari ka ring maging detalyado, halimbawa sa pamamagitan ng pagpili ng partikular na kategorya ng mga post.
Ito ay katulad ng tagabuo ng tema, mayroon talaga kaming isang malalim na video tutorial ukol dito.
Ngayong natukoy na namin kung saan ginagamit ang Popup sa buong site, maaari na kaming magpatuloy upang itakda ang mga trigger, na mga pagkilos ng user na nagpapalabas sa iyong popup.
Trigger
Gamit ang Mga Trigger, maaari naming itakda ang popup upang ipakita ang:
- On-Page Load
- Sa Pag-scroll
- Sa Mag-scroll sa Element
- Sa Pag-click
- Pagkatapos ng Hindi Aktibidad
- At On-Page Exit Intent
Para sa tutorial na ito, gagamit kami ng manu-manong popup na nati-trigger kapag nag-click ang user sa isang button.
Mga advanced na Panuntunan
Sa ilalim ng Mga Advanced na Panuntunan, makakapagtakda siya ng mga partikular na kinakailangan na kailangang matugunan para lumabas ang popup:
- Pagkatapos ng tiyak na bilang ng Page Views
- Pagkatapos ng isang tiyak na bilang ng mga pagbisita sa website
- Kapag dumating ang mga bisita mula sa isang partikular na URL
- Kapag dumating ang mga bisita mula sa mga panlabas na link / panloob na mga link
- Pagdating nila mula sa mga search engine.
Maaari mo ring itago ang mga popup mula sa mga naka-log in na user o piliing ipakita lamang ang mga ito sa desktop, tablet, at mga mobile device.
Hakbang 4: Itakda ang Popup na Ipakita sa Scroll at Isara sa Isumite
Nais naming ipakita sa iyo ang dalawang magkaibang paraan upang i-set off ang popup na ginawa namin: isang manual sa pamamagitan ng pag-click sa link, ang isa ay awtomatiko gamit ang on scroll trigger.
Para sa awtomatikong pag-trigger, gusto rin naming isara ang popup pagkatapos isumite ng user ang form sa loob ng popup.
Buksan ang Popup Gamit ang On Scroll Trigger
Kaya, para sa una halimbawa ng popup, gusto naming lumabas ang popup kapag nag-scroll ang user sa 80% ng page.
Sa ilalim ng Mga Trigger, i-on ang 'On Scroll' panatilihin ang direksyong nakatakda sa 'Pababa' at ilagay ang 80 sa field na 'Within'.
Isara ang Popup Gamit ang Pagsusumite ng Form
Pumunta sa widget ng Form sa loob ng popup, at sa ilalim ng 'Mga Pagkilos Pagkatapos Isumite', piliin ang 'Popup'.
Mag-click sa popup item na lalabas na ngayon sa ibaba.
Sa ilalim ng 'Action', piliin ang 'Close Popup'.
Hakbang 5: Manu-manong Ikonekta ang Mga Popup sa Mga Link o Form
Upang magtakda ng manu-manong trigger, pupunta kami sa aming landing page at ikonekta ang isa sa aming mga button sa mga popup.
Pindutin ang CMD / CTRL + E upang buksan ang tagahanap, at i-type ang 'Magdagdag ng bagong pahina'.
Sa bagong page, i-drag ang isang Button widget.
Sa mga setting ng Button, sa ilalim ng nilalaman, mag-click sa dynamic na icon sa tabi ng field ng Link.
Pagkatapos, sa ilalim ng Link > Mga Pagkilos, piliin ang Popup.
Mag-click muli sa Popup, tiyaking nakatakda ang aksyon sa 'Buksan ang Popup', at i-type ang pangalan ng popup na aming ginawa.
Quick Links:
- Pinakamahusay na WordPress Theme Frameworks
- Paano Gumawa ng Slider Sa WordPress?
- Paano Pabilisin ang Iyong WordPress Site
Mga FAQ | PopUp Sa WordPress
👀Para saan ang WordPress ginagamit?
Ang WordPress ay web publishing software na maaari mong gamitin upang lumikha ng isang magandang website o blog. Maaaring ito lang ang pinakamadali at pinaka-kakayahang umangkop sa blogging at website content management system (CMS) para sa mga nagsisimula.
😎Libre ba talaga ang WordPress?
Ang software ng WordPress ay libre sa parehong kahulugan ng salita. Maaari kang mag-download ng kopya ng WordPress nang libre, at kapag mayroon ka na nito, ikaw na ang gumamit o mag-amyenda ayon sa gusto mo. Ang software ay nai-publish sa ilalim ng GNU General Public License (o GPL), na nangangahulugang ito ay libre hindi lamang upang i-download ngunit upang i-edit, i-customize, at gamitin.
🔥Maganda ba ang WordPress para sa mga nagsisimula?
Madali ang WordPress para sa mga nagsisimula, ngunit makapangyarihan para sa mga developer: Gaya ng napag-usapan kanina, ang WordPress ay isang napakadaling platform upang makapagsimula. Napakadaling i-set up at patakbuhin. Karamihan sa mga web host ay may kasamang tinatawag na one-click na mga auto-installer. ... Ang WordPress ay kasing-simpleng gamitin bilang isang word processor tulad ng Microsoft Word.
✔Anong wika ang nakasulat sa WordPress?
PHP
🤷♂️Nangangailangan ba ang WordPress ng coding?
Oo. Ang ilang kaalaman sa coding ay makakatulong sa mga pagbabago sa iyong website. Ang pagkakaroon ng kumpletong background ng coding habang nakakatulong ay hindi kinakailangan.
Konklusyon | PopUp Sa WordPress 2024
Pindutin ang publish at tingnan ang iyong live na pahina. Ngayon, ang pag-click sa pindutan ay dapat buksan ang popup.
Ayan yun! Matagumpay naming nabuksan ang popup gamit ang Scroll trigger at ang On Click manual trigger, at isinara ito sa pagsusumite ng form.
Nag-aalok ang blog na ito ng unang lasa ng malawak na disenyo at mga opsyon sa pag-target na available sa Popup Builder. Tiyaking suriin ang popup tutorial playlist inihanda namin para sa iyo.
Gusto naming makarinig mula sa iyo — ipakita sa amin ang mga popup na ginawa mo at ipaalam sa amin kung mayroon kang anumang mga tanong.
