Jak vytvořit a zobrazit vyskakovací okno pomocí značky příspěvku na WordPress

Chcete vytvořit a zobrazit jedno vyskakovací okno na tag příspěvku ve WordPressu? Takže pokračujte ve čtení tohoto článku.

Jsme si jisti, že už znáte malé okno, které se objeví při procházení webových stránek. Říká se tomu vyskakovací okno nebo vyskakovací okno. Vyskakovací okna se mohou na webu zobrazovat v různých velikostech a pozicích na obrazovce.

Ve WordPressu existuje mnoho pluginů pro vytváření vyskakovacích oken, jako jsou Elementor Pro, JetPopup, Brizy Pro a další.

Důležité je zapamatovat si, že vyskakovací okna by neměla obtěžovat návštěvníky vašeho webu. Vytvořte si proto vyskakovací okno co nejjednodušší a nejatraktivnější.

Obsah

Některé pluginy WordPress pro vytváření vyskakovacích oken

Elementor Pro

Elementor Pro je rozšíření Elementor se stovkami prémiových funkcí. Poskytuje vám výkonné profesionální nástroje, které urychlí váš pracovní postup a návrh. Elementor Pro vám dává plnou kontrolu nad rozložením a designem vašeho webu. V tomto případě si můžete libovolně přizpůsobit design svého vyskakovacího okna.

použití Elementor Pro vytvořit vyskakovací okno pomocí značky příspěvku je velmi jednoduché a snadno použitelné. Můžete snadno definovat podmínky zobrazení vašeho vyskakovacího okna velmi přesným způsobem.

Crocoblock's JetPopup je rozšíření pro Elementor. Můžete si jej zakoupit jako samostatný plugin nebo jej zakoupit v balíčku s dalšími pluginy Crocoblock. Výhodou použití JetPopup k vytvoření vyskakovacího okna je, že přichází se spoustou skvělých funkcí.

Můžete si pohrát se spouštěči vyskakovacích oken.
Můžete vytvořit animace pro vyskakovací okno.
K dispozici je velké množství vyskakovacích šablon.

Čtěte také: 22 nejlepších prémiových doplňků pro Elementor

Brizy Pro

Tvůrce vyskakovacích oken Brizy Pro nabízí dvě možnosti. Prvním je vyskakovací okno aktivované kliknutím a druhým automatické spouštění a podmínky.

Otevření po kliknutí: Vaše vyskakovací okno lze spustit jednoduše kliknutím na prvky vaší stránky.
Automatické spouštění a podmínky: Můžete nakonfigurovat akce návštěvníků, které určí, kdy se zobrazí vyskakovací okna.

Jak již bylo zmíněno, máte několik možností, jak vytvořit vyskakovací okno ve WordPressu. V tomto tutoriálu vám ukážeme, jak vytvořit a zobrazit vyskakovací okno pro značku příspěvku pomocí verze Elementor Pro, takže se ujistěte, že už jeden máte.

První věc, kterou musíte udělat, je vytvořit novou šablonu vyskakovacího okna. Chcete-li vytvořit novou šablonu vyskakovacího okna, přejděte na Šablony > Vyskakovací okna na hlavním panelu WordPress a klikněte na tlačítko Přidat nový.

Dále přidejte název vyskakovacího okna a klikněte na tlačítko VYTVOŘTE MODEL.

Budete přesměrováni do knihovny šablon, můžete si vybrat šablonu z okna knihovny nebo si navrhnout vlastní šablonu Popup. Chcete-li použít šablonu z knihovny, stačí kliknout na tlačítko vložit.

Ale v tomto tutoriálu vytvoříme šablonu Popup od začátku. Klepněte na ikonu X zavřete knihovnu šablon.

Než začneme vytvářet šablonu Popup, musíme provést nějaké úpravy v nastavení Popup. Můžete najít nejlepší nastavení pro svůj web. V tomto tutoriálu vám ukážeme nastavení vyskakovacího okna podle vašeho výběru.

Klikněte na ikonu ozubeného kola v levém dolním rohu. V nastavení Popup změňte Šířka v 90 % šířky pohledu (VW) Et Pozice en Střed-dole.

Dále navrhněte šablonu vyskakovacího okna. Přidejte novou sekci a vyberte strukturu 5 sloupců. V nastavení sekce nastavte Šířka na 950. Můžete si hrát se svým nastavením.

Můžete například přejít na kartu Styl pro nastavení pozadí přejděte na kartu pokročilý upravit okraj a mnoho dalších.

Nyní zpět k vašim sloupcům. V levém sloupci nastavte šířku na 33 % a pro další čtyři na 16 %.

Do levého sloupce přidáme widget Title s nějakým textem. Můžete přidat text vyzývající návštěvníky vašeho webu k zobrazení dalšího obsahu, který je relevantní k aktuálnímu obsahu, nebo jakýkoli jiný text podle vašeho výběru.

Vpravo přidáme widget Obrázek. Můžete přidat obrázky z miniatur/obrázků doporučených příspěvků nebo je nahrát ručně.

Nyní je struktura připravena. Jít zpět k Nastavení vyskakovacího okna pro přizpůsobení animací vstupu, výstupu a okrajů. V tomto tutoriálu nastavíme vstup na Zeslabovat a výstup je zapnutý Vyblednout. Poté přejděte na kartu pokročilý a nastavte okraj na 30 (běžná hodnota pro odkazy).

Nyní, když je návrh hotový, klikněte na tlačítko VYDAVATEL pro nastavení podmínek zobrazení a spouštění. Chcete-li definovat podmínky zobrazení, klikněte na tlačítko PŘIDEJTE PODMÍNKU a vyberte svou možnost z rozevíracího seznamu.

Jak chcete zobrazit Popup by post tag, můžete nastavit následující podmínky zobrazení (viz animace).

Klepněte na tlačítko Další. V záložce spouštěče, nastavte spoušť na Na Scroll přepnutím přepínače na ano. Definujte Vedení z Bas a zvýšení Šířka přes 95 %. Protože chceme, aby se vyskakovací okno zobrazilo, až se návštěvníci dostanou na konec našeho článku.

V tomto tutoriálu nebudeme definovat Pokročilá pravidla. Tak klikni dál ULOŽIT A ZAVŘÍT. Tak a teď jsme hotovi.

Pojďme se podívat, jak to vypadá.

Zde jste právě dokončili vyskakovací okno. Podívejte se také na naše související články:

Stáhněte si Elementor Pro

Sdílejte tento článek:

Mikhos Gartner

Mikhos Gartner je odborník na digitální nástroje, který nakupuje, testuje a recenzuje nástroje SAAS pro malé podniky. Na základě dlouholetých zkušeností v oblasti technologií poskytuje zasvěcené recenze. Jeho obsah je široce konzumován a každý měsíc slouží milionům uživatelů.