Ako vytvoriť a zobraziť kontextové okno pomocou značky príspevku vo WordPress

Chcete vytvoriť a zobraziť jedno kontextové okno na značku príspevku vo WordPress? Takže pokračujte v čítaní tohto článku.

Sme si istí, že už poznáte malé okno, ktoré sa zobrazuje pri prehliadaní webovej stránky. Hovorí sa tomu popup alebo popup. Vyskakovacie okná sa môžu na webových stránkach zobrazovať v rôznych veľkostiach a pozíciách na obrazovke.

Vo WordPress existuje veľa doplnkov na vytváranie kontextových okien, ako napríklad Elementor Pro, JetPopup, Brizy Pro a ďalšie.

Dôležité je zapamätať si, že vyskakovacie okná by nemali obťažovať návštevníkov vašich webových stránok. Preto vytvorte vyskakovacie okno čo najjednoduchšie a najpríťažlivejšie.

Obsah

Niektoré doplnky WordPress na vytváranie kontextových okien

Elementor Pro

Elementor Pro je rozšírenie Elementor so stovkami prémiových funkcií. Poskytuje vám výkonné profesionálne nástroje, ktoré urýchlia váš pracovný tok a dizajn. Elementor Pro vám dáva plnú kontrolu nad rozložením a dizajnom vášho webu. V tomto prípade si môžete ľubovoľne prispôsobiť dizajn vyskakovacieho okna.

použitie Elementor Pro vytvorenie kontextového okna pomocou značky príspevku je veľmi jednoduché a ľahko sa používa. Môžete ľahko definovať podmienky zobrazenia vášho kontextového okna veľmi presným spôsobom.

Crocoblock's JetPopup je rozšírenie pre Elementor. Môžete si ho kúpiť ako samostatný doplnok alebo ho kúpiť v balíku s ďalšími doplnkami Crocoblock. Výhodou použitia JetPopup na vytvorenie kontextového okna je, že prichádza s množstvom skvelých funkcií.

Môžete si pohrať so spúšťačmi vyskakovacích okien.
Môžete vytvoriť animácie pre kontextové okno.
K dispozícii je veľké množstvo vyskakovacích šablón.

Čítajte tiež: 22 najlepších prémiových doplnkov pre Elementor

Brizy Pro

Tvorca vyskakovacích okien Brizy Pro vám ponúka dve možnosti. Prvým je kontextové okno aktivované kliknutím a druhým automatické spúšťače a podmienky.

Otvorenie po kliknutí: Vyskakovacie okno možno spustiť jednoducho kliknutím na prvky vašej stránky.
Automatické spúšťače a podmienky: Môžete nakonfigurovať akcie návštevníkov, ktoré určia, kedy sa zobrazia kontextové okná.

Ako už bolo spomenuté, máte niekoľko možností na vytvorenie kontextového okna vo WordPress. V tomto návode vám ukážeme, ako vytvoriť a zobraziť vyskakovacie okno pre značku príspevku pomocou verzie Elementor Pro, takže sa uistite, že už nejaký máte.

Prvá vec, ktorú musíte urobiť, je vytvoriť novú šablónu kontextového okna. Ak chcete vytvoriť novú šablónu kontextového okna, prejdite na Šablóny > Kontextové okná na hlavnom paneli WordPress a kliknite na tlačidlo Pridať nové.

Potom pridajte názov vyskakovacieho okna a kliknite na tlačidlo VYTVORTE MODEL.

Budete presmerovaní do knižnice šablón, môžete si vybrať šablónu z okna knižnice alebo si navrhnúť vlastnú šablónu vyskakovacieho okna. Ak chcete použiť šablónu z knižnice, stačí kliknúť na tlačidlo vložiť.

Ale v tomto návode vytvoríme šablónu Popup od začiatku. Kliknite na ikonu X zatvorte knižnicu šablón.

Predtým, ako začneme vytvárať šablónu vyskakovacieho okna, musíme vykonať určité úpravy v nastaveniach kontextového okna. Môžete nájsť najlepšie nastavenia pre svoje stránky. V tomto návode vám ukážeme nastavenia kontextového okna podľa vášho výberu.

Kliknite na ikonu ozubeného kolieska v ľavom dolnom rohu. V nastaveniach kontextového okna zmeňte Šírka v 90 % šírky pohľadu (VW) Et poloha en Stred-dole.

Potom navrhnite šablónu kontextového okna. Pridajte novú sekciu a vyberte 5 stĺpcovú štruktúru. V nastaveniach sekcie nastavte Šírka na 950. Môžete sa pohrať s vašimi nastaveniami.

Môžete napríklad prejsť na kartu Štýl ak chcete nastaviť pozadie, prejdite na kartu pokročilý na prispôsobenie okraja a mnoho ďalších.

Teraz späť k vašim stĺpcom. V ľavom stĺpci nastavte šírku na 33 % a pre ostatné štyri na 16 %.

Do ľavého stĺpca pridáme widget Title s nejakým textom. Môžete pridať text pozývajúci návštevníkov vašej webovej lokality na zobrazenie iného obsahu, ktorý je relevantný pre aktuálny obsah, alebo akýkoľvek iný text podľa vášho výberu.

Vpravo pridáme miniaplikáciu Obrázok. Môžete pridať obrázky z miniatúr/predstavených obrázkov príspevkov alebo ich nahrať ručne.

Teraz je štruktúra pripravená. Vráťte sa do Nastavenia kontextového okna na prispôsobenie animácií vstupu, výstupu a okrajov. V tomto návode nastavíme vstup na Vyblednúť a výstup je zapnutý Vyblednúť. Potom prejdite na kartu pokročilý a nastavte okraj na 30 (bežná hodnota pre odkazy).

Teraz, keď je dizajn pripravený, kliknite na tlačidlo PUBLISH na nastavenie podmienok zobrazenia a spúšťačov. Ak chcete definovať podmienky zobrazenia, kliknite na tlačidlo PRIDAŤ PODMIENKU a vyberte svoju možnosť z rozbaľovacieho zoznamu.

Ako chcete zobraziť Popup by post tag, môžete nastaviť nasledujúce podmienky zobrazenia (pozri animáciu).

Kliknite na tlačidlo Ďalej. V záložke spúšťače, nastavte spúšť na Pri posúvaní prepnutím spínača na Áno. Definujte Smer sur bas a Šírka viac ako 95 %. Pretože chceme, aby sa vyskakovacie okno zobrazilo, keď sa návštevníci dostanú na koniec nášho článku.

V tomto návode nebudeme definovať Pokročilé pravidlá. Tak kliknite na ULOŽIŤ A ZAVRIEŤ. Teraz sme skončili.

Pozrime sa, ako to vyzerá.

Tu ste práve dokončili vyskakovacie okno. Pozrite si aj naše súvisiace články:

Stiahnite si Elementor Pro

Zdieľajte tento článok:

Mikhos Gartner

Mikhos Gartner je odborník na digitálne nástroje, ktorý nakupuje, testuje a kontroluje nástroje SAAS pre malé podniky. Na základe dlhoročných skúseností v technologickej oblasti poskytuje dômyselné recenzie. Jeho obsah je široko využívaný a každý mesiac slúži miliónom používateľov.