Chceli by ste zistiť, ako vytvoriť interaktívny obrázok s Hotspotmi vo WordPress vďaka Elementor a základné doplnky?
Obraz je výborným nástrojom na prenos informácií. Každý vie, že informácie prenášané prostredníctvom obrazu – a vizuálnej formy ako celku – sú ľahšie pochopiteľné a zapamätateľné.
V kontexte webu môžete použiť mnoho obrazových formátov. Z infografiky, fotografie, komiksu, ilustrácie atď...
Ak chcete vytvoriť webový obsah, ako je napríklad anatómia niečoho, mestské orientačné body, mapy alebo trasy, vytváranie obrázkov pomocou hotspotov môže byť skvelý nápad.
Myšlienkou tohto typu obsahu je poskytnúť interaktívny obraz, ktorý vašim čitateľom uľahčí pochopenie informácií, ktoré prenášate. Hotspoty môžete pridať na obrázok, ktorý obsahuje popis pre každý hotspot. Tu je príklad.
Ak máte webové stránky na základe WordPress nie je vytvorenie obrázka s hotspotmi príliš ťažké. Môžete si ho vytvoriť pomocou modulu Základné doplnky .
Čo je modul Essential Addons?
Essential Addons je doplnokElementor. Toto je jeden z najpopulárnejších modov s viac ako 2 miliónmi stiahnutí. Tento doplnok vám pridá približne 60 ďalších miniaplikácií Elementor.
Jedným z miniaplikácií, ktoré ponúka Essential Addons, je EA Image Hotspoty ktorý môžete použiť na vytvorenie interaktívneho obrázka. Samotné Essential Addons je freemium addon, ale na vytváranie obrázkov s Hotspots musíte použiť profesionálnu verziu, pretože miniaplikácia EA Image Hotspots je k dispozícii iba v tejto verzii.
Ako používať modul Essential Addons na vytváranie obrázkov pomocou hotspotov
Najprv musíte do svojho WordPress nainštalovať moduly Elementor a Essential Addons. Môžete získať profesionálnu verziu Essential Addons webové stránky úradník. Zatiaľ čo pre Elementor môžete použiť bezplatnú verziu.
Pozri tiež: Ako používať globálny widget v Elementore
Bezplatná verzia Elementor je k dispozícii v adresári WordPress Plugin takže ho môžete nainštalovať zadaním „elementor“ do vyhľadávacieho poľa inštalátora doplnkov (Pluginy – > Pridať).
Po nainštalovaní doplnkov Elementor a Essential Addons vytvorte novú stránku (Stránky – > Pridať) alebo nový článok (Položky – > Pridať) a upravte ho pomocou Elementor. Po kliknutí na tlačidlo budete presmerovaní do editora Elementor Upravte pomocou funkcie Elementor.
Pred vytvorením obrázkov s aktívnymi bodmi môžete najskôr nastaviť rozloženie. Ak to chcete urobiť, otvorte panel nastavení stránky kliknutím na ikonu ozubeného kolieska v ľavom dolnom rohu ľavého panela.
Čítajte tiež: Ako používať miniaplikáciu Elementor's Posts
V rozbaľovacej ponuke nastavte rozloženie dispozície
Pridajte novú sekciu kliknutím na ikonu plus v poli úprav a pridajte miniaplikáciu EA Image Hotspots z ľavého panela.
Pridajte svoj obrázok kliknutím na výber obrázka v ľavom paneli.
otvorená možnosť hotspotov na ľavom paneli pridajte prístupové body. Miniaplikácia EA Image Hotspots štandardne obsahuje hotspot. Môžete kliknúť na predvolený prístupový bod a upraviť jeho obsah.
Štandardne je typ prístupového bodu nastavený na ikona. Môžete to zmeniť na Texty alebo odísť Pozri ak si to prajete.
Kliknite na kartu POLOHA na nastavenie polohy prístupového bodu. Nastavte polohy X a Y potiahnutím posúvačov.
Kliknite na kartu NÁSTROJ na pridanie obsahu popisku. Aktivujte popis a pridajte svoj obsah do editora. Môžete tiež nastaviť polohu popisku, buď hore, dole, vľavo alebo vpravo.
Ak chcete pridať viac hotspotov, stačí kliknúť na tlačidlo PRIDAŤ PRVOK v oddiele hotspotov a zopakujte vyššie uvedené kroky, aby ste nastavili polohu aktívneho bodu, obsah popisku a polohu popisku.
Otvorená sekcia Nastavenia popisov na nastavenie veľkosti popisov a efektu animácie.
Teraz prejdite na kartu Štýl na úpravu vašich hotspotov, ako aj popisov. Najprv otvorte možnosť Obraz na nastavenie veľkosti obrázka.
Otvorená sekcia hotspot na prispôsobenie hotpotov. Môžete nastaviť veľkosť, farbu ikony (alebo textu v závislosti od zvoleného typu hotspotu), farbu pozadia, polomer okraja atď...
Objavte tiež: Ako pridať súvisiace položky v Elementore
Otvorená sekcia Tooltip na prispôsobenie popisov. Môžete nastaviť farbu pozadia, farbu textu, typografiu (veľkosť písma, rodinu písma, štýl písma) a šírku.
Doteraz ste úspešne vytvárali obrázky s hotspotmi. Môžete si pohrať s ľavým panelom a prispôsobiť si obrázky pomocou hotspotov, kým nebudete spokojní s výsledkom. Po dokončení môžete kliknúť na tlačidlo PUBLISH na zverejnenie vašej stránky.
Pridajte obrázky s hotspotmi do Gutenberg
Ak chcete pridať obrázky s hotspotmi ako podporný materiál pre článok, na ktorom pracujete, môžete ho integrovať s Gutenberg (predvolený editor WordPress) pomocou doplnku Bloky elementov pre Gutenberga. Tento doplnok vám umožňuje použiť šablónu Elementor ako blok Gutenberg.
Ak chcete uložiť obrázky s aktívnymi bodmi vyššie ako šablónu sekcie Elementor, kliknite pravým tlačidlom myši na rukoväť sekcie a vyberte Uložiť ako šablónu.
Pomenujte svoj model a kliknite na tlačidlo REGISTRÁTOR.
Otvorte článok, do ktorého chcete pridať obrázky s hotspotmi. Pridajte nový blok, vyberte Knižnica Elementor a vyberte šablónu obrázka s aktívnymi bodmi, ktoré ste práve vytvorili.
Získajte Elementor Pro teraz!!!
záver
Tu ! To je všetko pre tento článok, ktorý vám ukáže, ako na to vytvorte interaktívny obrázok pomocou hotspotov vo WordPress vďaka doplnkom Elementor a Essential Addons. Ak máte nejaké obavy, ako sa tam dostať, dajte im vedieť v Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
