Chtěli byste zjistit, jak vytvořit interaktivní obrázek s Hotspoty ve WordPress díky Elementor a základní doplňky?
Obraz je vynikajícím nástrojem pro přenos informací. Každý ví, že informace přenášené prostřednictvím obrazu – a vizuální formy jako celku – jsou snáze pochopitelné a zapamatovatelné.
V kontextu webu můžete použít mnoho obrazových formátů. Z infografiky, fotky, komiksu, ilustrace atd….
Pokud chcete vytvořit webový obsah, jako je anatomie něčeho, městské orientační body, mapy nebo trasy, může být vytváření obrázků pomocí hotspotů skvělým nápadem.
Myšlenkou tohoto typu obsahu je poskytnout interaktivní obrázek, který vašim čtenářům usnadní pochopení informací, které sdělujete. Aktivní body můžete přidat na obrázek, který obsahuje nápovědu ke každému aktivnímu bodu. Zde je příklad.
Máte-li webové stránky na základě WordPressu není vytvoření obrázku s aktivními body příliš těžké. Můžete si jej vytvořit pomocí modulu Základní doplňky .
Co je modul Essential Addons?
Essential Addons je doplněkElementor. Jedná se o jeden z nejpopulárnějších modů s více než 2 miliony stažení. Tento doplněk vám přidá přibližně 60 dalších widgetů Elementor.
Jedním z widgetů nabízených Essential Addons je EA Image Hotspots který můžete použít k vytvoření interaktivního obrázku. Samotné Essential Addons je freemium addon, ale k vytváření obrázků pomocí Hotspotů musíte použít profesionální verzi, protože widget EA Image Hotspots je k dispozici pouze v této verzi.
Jak používat modul Essential Addons k vytváření obrázků pomocí hotspotů
Nejprve musíte nainstalovat moduly Elementor a Essential Addons na váš WordPress. Můžete na něm získat profesionální verzi Essential Addons webové stránky oficiální. Zatímco pro Elementor můžete použít bezplatnou verzi.
Viz též: Jak používat globální widget v Elementoru
Bezplatná verze Elementor je k dispozici v adresáři WordPress Plugin takže jej můžete nainstalovat zadáním „elementor“ do vyhledávacího pole instalátoru pluginů (Pluginy – > Přidat).
Po instalaci doplňků Elementor a Essential Addons vytvořte novou stránku (Stránky – > Přidat) nebo nový článek (Položky – > Přidat) a upravte jej pomocí Elementor. Po kliknutí na tlačítko budete přesměrováni do editoru Elementor Upravte pomocí funkce Elementor.
Před vytvořením obrázků s aktivními body můžete nejprve nastavit rozvržení. Chcete-li to provést, otevřete panel nastavení stránky kliknutím na ikonu ozubeného kola v levém dolním rohu levého panelu.
Čtěte také: Jak používat widget Posts Elementor
Nastavte rozvržení v rozevírací nabídce Rozložení
Přidejte novou sekci kliknutím na ikonu plus v poli úprav a přidejte widget EA Image Hotspots z levého panelu.
Přidejte svůj obrázek kliknutím na výběr obrázku v levém panelu.
otevřená možnost hotspotů na levém panelu přidejte přístupové body. Ve výchozím nastavení obsahuje widget EA Image Hotspots aktivní bod. Klepnutím na výchozí přístupový bod můžete upravit jeho obsah.
Ve výchozím nastavení je typ přístupového bodu nastaven na ikona. Můžete to změnit na Texty nebo odejít Viz pokud si to přejete.
Klikněte na záložku POLOHA pro nastavení polohy přístupového bodu. Nastavte polohy X a Y přetažením posuvníků.
Klikněte na záložku TIP NA NÁSTROJ pro přidání obsahu popisku. Aktivujte nápovědu a přidejte svůj obsah do editoru. Můžete také nastavit polohu popisku, buď nahoře, dole, vlevo nebo vpravo.
Chcete-li přidat další hotspoty, stačí kliknout na tlačítko PŘIDEJTE PRVEK v oddíle hotspotů a opakujte výše uvedené kroky pro nastavení pozice aktivního bodu, obsahu popisku a umístění popisku.
Otevřete sekci Nastavení popisku pro nastavení velikosti popisků a efektu animace.
Nyní přejděte na kartu Styl upravte své aktivní body a také popisky. Nejprve otevřete možnost Obraz pro nastavení velikosti obrázku.
Otevřít sekci Hotspot k přizpůsobení hotpotů. Můžete nastavit velikost, barvu ikony (nebo text v závislosti na typu aktivního bodu, který jste vybrali), barvu pozadí, poloměr ohraničení atd…
Objevte také: Jak přidat související položky v Elementoru
Otevřete sekci Tooltip k přizpůsobení popisků. Můžete nastavit barvu pozadí, barvu textu, typografii (velikost písma, rodinu písem, styl písma) a šířku.
Doposud jste úspěšně vytvářeli obrázky s aktivními body. Můžete si hrát s levým panelem a upravovat své obrázky pomocí aktivních bodů, dokud nebudete s výsledkem spokojeni. Jakmile budete hotovi, můžete kliknout na tlačítko VYDAVATEL k publikování vaší stránky.
Přidejte obrázky s aktivními body do Gutenberg
Pokud chcete přidat obrázky s aktivními body jako podpůrný materiál pro článek, na kterém pracujete, můžete jej integrovat s Gutenberg (výchozí editor WordPress) pomocí pluginu Bloky elementů pro Gutenberga. Tento plugin umožňuje použít šablonu Elementor jako Gutenbergův blok.
Chcete-li uložit obrázky s aktivními body výše jako šablonu sekce Elementor, klikněte pravým tlačítkem na úchyt sekce a vyberte Uložit jako šablonu.
Pojmenujte svůj model a klikněte na tlačítko REGISTRÁTOR.
Otevřete článek, kam chcete přidat obrázky s aktivními body. Přidejte nový blok, vyberte Knihovna Elementor a vyberte šablonu obrázku s aktivními body, které jste právě vytvořili.
Získejte Elementor Pro nyní!!!
Proč investovat do čističky vzduchu?
Tady ! To je pro tento článek, který vám ukáže, jak vytvořte interaktivní obrázek s Hotspots ve WordPressu díky Elementor a Essential Addons. Pokud máte nějaké obavy, jak se tam dostat, dejte jim vědět v commentaires.
Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
