Jūs turite elementorių Ačiū! Statybininkas pasiūlyti savo klientams geriausią būdą sukurti iššokančiuosius langus, kurie puikiai atrodytų ir atitiktų jų svetainės dizainą, ir nereikalauja tinkinto CSS.
Šiame vadove parodysiu, kodėl jums nebereikia būti ribotiems išoriniai „WordPress“ iššokantys papildiniai. Vietoj to – naudokite iššokančiųjų langų kūrimo priemonę ir kurkite iššokančiuosius langus toje pačioje redagavimo priemonėje, kurią naudojate kurdami visą svetainę.
Tai tik pirmasis iš kelių vaizdo įrašų ir rašytinių vadovėlių, kuriuos išleidžiame norėdami paaiškinti, kaip sukurti įvairius nuostabius iššokančiuosius langus Elementor.
Pasiruošę sukurti savo pirmąjį iššokantįjį langą su Elementor? Eikime prie to…
Iššokantis langas, kurį sukursite
Šiame vadove parodysime:
- Kaip redaguoti iššokantįjį langą
- Kaip sukurti „Elementor“ iššokantįjį langą, kuriame yra kontaktinė forma
- Kaip atidaryti iššokantįjį langą, kai vartotojas slenka daugiau nei 80 % puslapio
- Kaip uždaryti iššokantįjį langą vartotojui pateikus formą
- Kaip rankiniu būdu suaktyvinti iššokantįjį langą spustelėjus (kai lankytojas spusteli mygtuką)
Turinys
1 žingsnis: Pradžia
Vadovaukitės šiuo paprastu, nuosekliu vadovu, kaip kurti iššokančiuosius langus naudodami „WordPress“. Elementor's Popup Builder.
„Elementor“ iššokantys langai kuriami kaip ir bet kuris kitas šablono tipas.
Jei esate susipažinę su Elementor Temų kūrėjas, susidūrėte su tokiais šablonais kaip antraštė, poraštė, singlas ir archyvas.
Iššokantys langai kuriami taip pat.
„WordPress“ prietaisų skydelyje eikite į Šablonai > Iššokantieji langai > Pridėti naują
Pavadinkime savo iššokančiųjų langų šabloną Mano pirmasis šablonas ir paspauskite „Sukurti šabloną“.
Tada atsidarys iššokantis šablonų langas. Galėsite rinktis iš daugiau nei šimto iš anksto sukurtų iššokančiųjų langų šablonų.
Kaip matote, mes padarėme daug darbo kurdami didžiulę gražių iššokančiųjų šablonų biblioteką, kurią galite naudoti. Taip pat galite patys sukurti visą iššokantįjį langą naudodami „Elementor Pro“ ir jos valdiklius.
2 veiksmas: iškylančiojo lango projektavimas skiltyje Iššokančiųjų langų nustatymai
Uždarius bibliotekos langą, atsidarys „Elementor“ redaktorius, o iššokančiųjų langų nustatymų skydelis bus rodomas kairėje.
BTW, šis skydelis visada pasiekiamas per apatinę krumpliaračio piktogramą.
Skirtuke „Išdėstymas“ nustatysime iššokančiojo lango plotį iki 700 pikselių, o aukštį – kaip „Fit to Content“. Mūsų iššokantis langas bus išdėstytas centre, tiek horizontaliai, tiek vertikaliai.
Skirtuke Stilius nustatysime vientisą geltoną kraštinę su 35 pikselių kraštinės spinduliu, kad iššokantis langas atrodytų apvalus.
Iššokančiųjų langų nustatymai taip pat apima papildomus nustatymus, pvz., uždarymo mygtuko rodymą pasibaigus nustatytam laikui, automatinio iššokančiojo lango uždarymą, jungiklį, neleidžiantį uždaryti iššokančiųjų langų, jungiklį, išjungiantį puslapio slinkimą, ir jungiklį, skirtą išvengti kelių iššokančiųjų langų.
Čia jų nenaudosime, bet naudinga žinoti, jei jums jų prireiks.
3 veiksmas: sukurkite iššokančiojo lango vidų
Kadangi iššokančiųjų langų vidinės dalies kūrimas yra toks pat procesas kaip ir bet kurio puslapio kūrimas, mes nenagrinėsime proceso išsamiai.
Tiesiog atminkite, kad bet kokio tipo turinį ir šabloną, kurį turite Elementor, galite naudoti iššokančiuose languose.
Galutinis mūsų iššokančiojo lango dizainas atrodo taip:
Kaip taikyti iššokančiuosius langus naudojant paskelbimo nustatymus
Kaip matysite, išplėstinio taikymo ir aktyviklių nustatymas yra toks pat paprastas, kaip perjungti jungiklį. Spustelėkite publikuoti ir atsidarys langas „Publikuoti nustatymai“.
Greitai peržvelkime taikymo parinktis iššokančiųjų langų kūrimo priemonėje, kad žinotumėte, kaip tinkamai taikyti iššokančiuosius langus naudojant taikymo parinktis Sąlygos, aktyvikliai ir išplėstinės taisyklės.
Sąlygos
Nustatykite sąlygas, kurios nustato, kur (kuriuose puslapiuose) bus rodomas iššokantis langas visoje svetainėje.
Pavyzdžiui, jei pasirinksite „Visa svetainė“, iššokantis langas bus rodomas visur visoje svetainėje! Taip pat galite gauti labai išsamios informacijos, pavyzdžiui, pasirinkę konkrečią įrašų kategoriją.
Jis panašus į temų kūrėją, iš tikrųjų turime išsami vaizdo pamoka apie tai.
Dabar, kai apibrėžėme, kur svetainėje naudojamas iššokantis langas, galime toliau nustatyti aktyviklius, kurie yra vartotojo veiksmai, dėl kurių atsiranda iššokantis langas.
Trigeriai
Naudodami aktyviklius galime nustatyti, kad iššokantis langas būtų rodomas:
- Puslapio įkėlimas
- „Slinkti“
- Slinkite iki Elemento
- Paspaudus
- Po neveiklumo
- Ir išėjimo iš puslapio ketinimas
Šioje mokymo programoje naudosime rankinį iššokantįjį langą, kuris suaktyvinamas, kai vartotojas spusteli mygtuką.
Išplėstinės taisyklės
Išplėstinėse taisyklėse galite nustatyti labai konkrečius reikalavimus, kurie turi būti įvykdyti, kad būtų rodomas iššokantis langas:
- Po tam tikro puslapio peržiūrų skaičiaus
- Po tam tikro apsilankymų svetainėje skaičiaus
- Kai lankytojai atvyksta iš konkretaus URL
- Kai lankytojai atvyksta iš išorinių nuorodų / vidinių nuorodų
- Kai jie atvyksta iš paieškos sistemų.
Taip pat galite paslėpti iššokančiuosius langus nuo prisijungusių vartotojų arba pasirinkti rodyti juos tik staliniuose kompiuteriuose, planšetiniuose kompiuteriuose ir mobiliuosiuose įrenginiuose.
4 veiksmas: nustatykite, kad iššokantis langas būtų rodomas slinkus ir uždarykite pateikus
Norėjome parodyti jums du skirtingus būdus, kaip suaktyvinti iššokantįjį langą, kurį sukūrėme: vieną rankiniu būdu spustelėjus nuorodą, kitą – automatiškai naudojant slinkties paleidiklį.
Taip pat norime, kad automatinio aktyviklio atveju iššokantis langas būtų uždarytas, vartotojui pateikus formą iššokančiajame lange.
Atidarykite iššokantįjį langą naudodami įjungtą slinkties trigerį
Taigi, pirmam iššokančiojo lango pavyzdys, norime, kad iššokantis langas būtų rodomas, kai vartotojas slenka 80 % puslapio.
Dalyje Triggers įjunkite parinktį „On Scroll“, palikite kryptį „Žemyn“ ir lauke „Viešas“ įveskite 80.
Uždarykite iššokantįjį langą su formos pateikimu
Iššokančiajame lange eikite į Formos valdiklį ir skiltyje „Veiksmai po pateikimo“ pasirinkite „Iššokantis langas“.
Spustelėkite iššokantį elementą, kuris dabar bus rodomas žemiau.
Skiltyje „Veiksmas“ pasirinkite „Uždaryti iššokantįjį langą“.
5 veiksmas: rankiniu būdu prijunkite iššokančiuosius langus prie nuorodų arba formų
Norėdami nustatyti rankinį aktyviklį, eisime į nukreipimo puslapį ir vieną iš mygtukų prijungsime prie iššokančiųjų langų.
Paspauskite CMD / CTRL + E, kad atidarytumėte ieškiklį, ir įveskite „Pridėti naują puslapį“.
Naujame puslapyje vilkite mygtuko valdiklį.
Mygtuko nustatymų skiltyje Turinys spustelėkite dinaminę piktogramą, esančią šalia lauko Nuoroda.
Tada skiltyje Nuoroda > Veiksmai pasirinkite Iššokantis langas.
Dar kartą spustelėkite iššokantįjį langą, įsitikinkite, kad veiksmas nustatytas kaip „Atidaryti iššokantįjį langą“, ir įveskite mūsų sukurto iššokančiojo lango pavadinimą.
Nuorodos:
- Geriausi „WordPress“ temų rėmai
- Kaip sukurti slankiklį „WordPress“?
- Kaip pagreitinti savo „WordPress“ svetainę
DUK | Iššokantis langas „WordPress“.
👀Kam naudojamas WordPress?
„WordPress“ yra žiniatinklio leidybos programinė įranga, kurią galite naudoti norėdami sukurti gražią svetainę ar tinklaraštį. Tai gali būti paprasčiausia ir lanksčiausia tinklaraščių rašymo ir svetainių turinio valdymo sistema (TVS) pradedantiesiems.
😎Ar „WordPress“ tikrai nemokama?
„WordPress“ programinė įranga yra nemokama abiem šio žodžio prasmėmis. Galite nemokamai atsisiųsti „WordPress“ kopiją, o kai ją turėsite, galėsite ją naudoti arba taisyti, kaip norite. Programinė įranga yra paskelbta pagal GNU General Public License (arba GPL), o tai reiškia, kad ją galima nemokamai ne tik atsisiųsti, bet ir redaguoti, tinkinti ir naudoti.
🔥Ar „WordPress“ tinka pradedantiesiems?
„WordPress“ yra lengva pradedantiesiems, tačiau galinga kūrėjams: kaip aptarta anksčiau, „WordPress“ yra labai paprasta platforma pradėti. Tai labai lengva nustatyti ir paleisti. Daugumoje žiniatinklio prieglobų yra vadinamosios automatinio diegimo vienu spustelėjimu programos. ... WordPress yra taip pat paprasta naudoti kaip tekstų rengyklė, kaip Microsoft Word.
✔Kokia kalba parašyta „WordPress“?
PHP
🤷♂️Ar „WordPress“ reikalingas kodavimas?
Taip. Kai kurios žinios apie kodavimą būtų naudingos atliekant pakeitimus jūsų svetainėje. Turėti visą kodavimo foną, nors ir naudinga, nebūtina.
Išvada | Iššokantis langas „WordPress 2024“.
Spustelėkite publikuoti ir peržiūrėkite savo tiesioginį puslapį. Dabar spustelėjus mygtuką turėtų būti atidarytas iššokantis langas.
Viskas! Sėkmingai atidarėme iššokantįjį langą naudodami slinkties aktyviklį ir rankinį paleidiklį spustelėjus ir uždarėme jį pateikiant formą.
Šiame tinklaraštyje pirmą kartą galima susipažinti su plačiomis iškylančiųjų langų kūrimo priemonėje esančiomis dizaino ir taikymo parinktimis. Būtinai patikrinkite iššokantis mokymo grojaraštis mes jums paruošėme.
Norėtume jūsų išgirsti – parodykite mums sukurtus iššokančiuosius langus ir praneškite, jei turite klausimų.
