Opět – není to nic složitého.
Celkem mě udivuje, že Elementor tuto funkcionalitu již nepřidal jako výchozí u těchto dvou widgetů:
Možná si říkáte – proč bych chtěl celý box hypertextový?
Třeba pokud chcete pěkné kontaktní tlačítko s ikonou, pozadíčkem, krátkým popiskem a po kliknutí vám návštěvník zavolá?
Problém momentálně je v tom, že odkaz se aplikuje jen na nadpis ve widgetu.
Já vám ale ukážu, jak pomocí malého CSS kódu si můžete udělat celý box klikatelný.
Co se dozvíte v tomto článku?
- Jak udělat box s obrázkem (image box widget) celý klikatelný
- Jak udělat ikonový box (icon box widget) celý klikatelný
- Příklady využití, jak boxíky můžou vypadat
Obsah článku
Jak udělat kompletně klikatelný box s obrázkem (image box) widget
Pokud máte Elementor PRO, přejděte do nastavení Image Box widgetu -> Pokročilé -> Custom CSS:
A vložte následující CSS kód (bod 3):
.elementor-widget-image-box a:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
Pokud chcete kód aplikovat na všechny image boxy na vašich stránkách, doporučuji jej přidat přes Vzhled -> Přizpůsobit -> CSS:
Vyberte si tedy jednu nebo druhou variantu a máte hotovo.
Image box pak může vypadat nějak takto a kamkoliv kliknete, tak vás to převede na danou stránku:
Ukázka hypertextového image boxu
Můžete kliknout kamkoliv a budete přesměrování kam potřebujete...
Jak udělat kompletně klikatelný ikonový box (icon box) widget
Pokud máte Elementor PRO, přejděte do nastavení daného Icon Box widgetu -> Pokročilé -> Custom CSS:
A vložte následující CSS kód (bod 3):
.elementor-widget-icon-box a:after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
Pokud chcete kód aplikovat na všechny icon boxy na vašich stránkách, doporučuji jej přidat přes Vzhled -> Přizpůsobit -> CSS:
Vyberte si tedy jednu nebo druhou variantu a máte hotovo.
Icon box pak může vypadat nějak takto a kamkoliv kliknete, tak vás to převede na danou stránku:
Ukázka hypertextového icon boxu
Odkaz je aplikován na celý ikon box. Kdekoliv kliknete, budete přesměrování.
Závěr...
Vidíte. Nic složitého to není.
Nyní máte další možnosti, jak ohýbat Elementor a přizpůsobit si ho co nejvíce k obrazu svému.
Pokud chcete dostávat upozornění na další podobné vychytávky nebo články, nezapomeňte dát odběr.
