Ako pridať hypertextový odkaz k obrázku vo WordPresse

Prepojený obrázok premení statický vizuál na navigačný nástroj. Namiesto toho, aby ste návštevníkov žiadali kliknúť na textový odkaz alebo tlačidlo, môžete im umožniť kliknúť na obrázok produktu, banner, logo alebo ilustračný prvok a presunúť ich priamo na stránku, ktorú chcete, aby videli.

Pre firemné webové stránky je to obzvlášť užitočné. Klikateľný obrázok môže viesť ľudí na stránku služby, kontaktný formulár, stránku s cenami, blogový článok alebo registračný proces. Pri správnom použití zlepšuje použiteľnosť, podporuje konverzie a pomáha, aby boli dôležité stránky ľahko dostupné.

Prečo prepojiť obrázok?

Pridanie hypertextového odkazu k obrázku je užitočné v mnohých bežných rozloženiach webových stránok:

• Hero bannery, ktoré vedú na zvýraznenú ponuku
• Karty služieb, ktoré otvárajú podrobné stránky
• Logá, ktoré vracajú používateľov na domovskú stránku
• Obrázky produktov, ktoré vedú na stránky s detailmi produktu
• Propagačné grafiky, ktoré posielajú návštevníkov na cieľovú stránku kampane
• Sekcie výzvy na akciu, ktoré potrebujú vizuálny klikateľný prvok

Klikateľné obrázky môžu uľahčiť skenovanie stránky, najmä na mobilných zariadeniach, kde vizuálne prvky často fungujú lepšie ako malé textové odkazy.

Predtým, než začnete

Uistite sa, že už máte:

• Publikovanú alebo konceptuálnu stránku či článok vo WordPresse
• Obrázok nahratý v Knižnici médií alebo pripravený na vloženie
• Cieľovú adresu, na ktorú má obrázok odkazovať

Ak odkazujete na internú stránku, najprv si skopírujte jej adresu. Ak odkazujete na externú stránku, overte, že cieľ je dôveryhodný a relevantný.

Ako pridať hypertextový odkaz k obrázku v blokovom editore WordPressu

Väčšina moderných webov vo WordPresse používa Blokový editor, známy aj ako Gutenberg. Postup je jednoduchý.

1. Otvorte stránku alebo článok

V administrácii WordPressu prejdite na stránku alebo článok, kde chcete, aby sa odkazovaný obrázok zobrazil.

2. Vložte alebo označte blok obrázka

Ak obrázok na stránke ešte nie je:

• Kliknite na tlačidlo +
• Vyberte blok Obrázok
• Nahrajte nový obrázok, vyberte ho z Knižnice médií alebo vložte z adresy, ak je to vhodné

Ak už je obrázok na stránke, kliknite naň raz, aby sa blok označil.

3. Pridajte odkaz

Keď je blok obrázka označený, v paneli nástrojov bloku nájdite ikonu odkazu.

• Kliknite na tlačidlo odkazu
• Vložte alebo napíšte cieľovú adresu
• Stlačte Enter alebo odkaz potvrďte

V závislosti od verzie WordPressu a témy sa môžu zobraziť aj možnosti odkazu na:

• Mediálny súbor
• Stránku prílohy
• Vlastnú adresu
• Bez odkazu

Pre väčšinu firemných prípadov použitia je najlepšou voľbou Vlastná adresa, pretože vám dáva úplnú kontrolu nad tým, kam obrázok povedie.

4. V prípade potreby upravte správanie odkazu

Niektoré editory umožňujú zvoliť, či sa odkaz otvorí v novom okne alebo karte. To je často užitočné pri externých odkazoch, zatiaľ čo interné odkazy zvyčajne fungujú najlepšie v rovnakom okne alebo karte.

Novú kartu používajte len vtedy, keď to zlepšuje zážitok návštevníka. Nepodmieňujte otváranie všetkých odkazov v novej karte, pretože to môže pôsobiť mätúco.

5. Uložte alebo aktualizujte stránku

Kliknite na Aktualizovať, Publikovať alebo Uložiť koncept, aby sa zmeny zachovali.

Ako prepojiť obrázok v Classic Editore

Ak váš web stále používa Classic Editor, postup je trochu odlišný, ale stále jednoduchý.

1. Vložte obrázok

Kliknite na Pridať médium a vložte obrázok do obsahu.

2. Vyberte obrázok

Kliknite na obrázok, aby sa zobrazil panel úprav.

3. Otvorte nastavenia odkazu

Vyberte možnosť odkazu v paneli nástrojov obrázka alebo v paneli detailov obrázka, podľa vášho nastavenia.

4. Zadajte cieľovú adresu

Vložte adresu do poľa pre odkaz a potvrďte zmenu.

5. Aktualizujte článok alebo stránku

Uložte prácu, aby sa prepojený obrázok aktivoval na živej stránke.

Najlepšie postupy pre prepojené obrázky

Hypertextový odkaz na obrázku je užitočný iba vtedy, ak návštevníci okamžite chápu, čo sa stane po kliknutí. Dodržiavajte tieto odporúčania, aby bol zážitok jasný a efektívny.

Urobte cieľ zrejmým

Používajte obrázky, ktoré vizuálne naznačujú akciu alebo obsah za nimi. Obrázok služby by mal viesť na súvisiacu stránku služby. Propagačná grafika by mala viesť priamo na samotnú ponuku.

Používajte popisný alternatívny text

Alternatívny text pomáha čítačkám obrazovky pochopiť obrázok a podporuje prístupnosť. Zároveň poskytuje kontext, ak sa obrázok nenačíta.

Ak je obrázok čisto dekoratívny, možno ho vôbec netreba prepojiť.

Uistite sa, že dôležité obrázky sú klikateľné aj na mobile

Mobilní návštevníci sa spoliehajú na dotykové prvky. Uistite sa, že obrázok je dostatočne veľký na pohodlné klepnutie bez neúmyselných kliknutí.

Neodkazujte na nesúvisiaci obsah

Neposielajte návštevníkov z jednej témy na úplne inú. Nesúvisiace odkazy znižujú dôveru a poškodzujú konverzie.

Prepojené obrázky používajte striedmo

Príliš veľa klikateľných obrázkov môže spôsobiť, že stránka pôsobí preplnene. Používajte ich tam, kde prinášajú skutočnú hodnotu, nie len preto, že táto funkcia existuje.

Spojte obrázky s podporným textom

Krátky nadpis alebo popis v blízkosti obrázka pomáha návštevníkom pochopiť ďalší krok. To je obzvlášť dôležité na marketingových stránkach a stránkach služieb.

Bežné použitia na firemných webových stránkach

Prepojené obrázky môžu podporiť ciele malého firemného webu viacerými spôsobmi.

Navigácia na domovskej stránke

Logo alebo zvýraznený obrázok môže používateľov viesť na kľúčové stránky, ako sú služby, ceny alebo kontakt.

Propagácia produktov a služieb

Obrázky na cieľových stránkach môžu návštevníkov posunúť ďalej v predajnom lieviku.

Zapojenie do blogu

Úvodné obrázky môžu viesť na súvisiace zdroje, prípadové štúdie alebo interné články.

Získavanie dopytov

Banner alebo odznak s obrázkom môže viesť na registračný formulár, konzultačnú stránku alebo ponukovú stránku.

Budovanie dôvery

Odznaky dôvery, logá partnerov alebo grafiky s referenciami môžu odkazovať na podporné stránky s ďalšími informáciami.

Riešenie bežných problémov

Ak váš prepojený obrázok nefunguje podľa očakávania, skontrolujte nasledovné:

Bola zadaná nesprávna adresa

Uistite sa, že cieľová adresa je úplná a správna. Chýbajúci protokol alebo chybný interný odkaz môžu spôsobiť, že obrázok nebude fungovať správne.

Obrázok odkazuje na stránku prílohy namiesto správnej stránky

WordPress niekedy predvolene používa odkazy na médium alebo stránku prílohy. Nahraďte ich presným cieľom, ktorý chcete.

Zmeny v editore sa neuložili

Ak sa odkaz na obrázok na živej stránke nezobrazuje, skontrolujte, či ste po úprave klikli na Aktualizovať alebo Publikovať.

Plugin alebo téma zasahuje do správania

Niektoré nástroje na tvorbu stránok, optimalizačné pluginy alebo vlastné témy môžu meniť správanie odkazov v obrázkoch. V prípade potreby otestujte stránku dočasným vypnutím pluginov v testovacom prostredí.

Obrázok vyzerá klikateľne, ale nič sa nestane

To sa môže stať, ak cez obrázok leží iný prvok alebo ak rozloženie stránky ovplyvňuje vlastný kód. Skontrolujte štruktúru stránky a otestujte ju v inom prehliadači.

Tipy na stratégiu odkazov pre lepší výkon webu

Prepojený obrázok by mal podporovať širšiu obsahovú stratégiu, nie byť len dekoráciou.

• Odkazujte len vtedy, keď obrázok pomáha používateľom urobiť užitočný ďalší krok
• Prepojte obrázky so stránkami, ktoré zodpovedajú zámeru používateľa
• Používajte jasné popisy a sprievodný výzvový text v blízkosti
• V prípade možností sledujte kliknutia v analytike
• Aktualizujte staré odkazy v obrázkoch, keď sa zmenia adresy stránok

Pre firemnú webovú stránku môžu tieto malé zlepšenia urobiť navigáciu plynulejšou a znížiť trenie počas celej používateľskej cesty.

Záverečné myšlienky

Pridanie hypertextového odkazu k obrázku vo WordPresse je jednoduchá úloha, no pri cielenej práci môže mať výrazný vplyv na použiteľnosť a konverzie. Či už odkazujete logo, banner, obrázok služby alebo propagačnú grafiku, kľúčom je zachovať relevantný cieľ a jasnú akciu.

Ak spravujete firemný web, považujte každý klikateľný obrázok za súčasť štruktúry webu. Najlepšie odkazy na obrázky prirodzene vedú návštevníkov k ďalšiemu kroku, podporujú váš obsah a uľahčujú používanie na desktope aj na mobile.