Chtěli byste mít Divi Mega Menu s obrázky pro ilustraci obsah z menu? Postupujte podle našeho návodu, jak přidat obrázky do Mega Menu?
Milujeme interakci s obrázky online. S ohledem na to má smysl přidat obrázek k vašemu Webové stránky kdykoli je to možné.
Přidání obrázků do velkého menu je navíc další skvělou příležitostí, jak poskytnout uživatelům interakci, kterou potřebují.
Obrázky také vylepšují nabídku tím, že přitahují jejich pozornost a dále zjednodušují proces navigace.
přehled
Než se vrhneme na tento tutoriál, podívejme se na výsledek, kterého chceme dosáhnout.
Vytvoření mega menu
Abychom mohli začít, musíme nejprve vytvořit menu.
Pro tento příklad vytvoříme hlavní nadřazenou položku nabídky s názvem “Mega Menu” se čtyřmi položkami podnabídky níže. Každá ze čtyř položek podřízené nabídky má tři položky podřízené nabídky.
Přejděte na hlavní panel WordPress a klikněte na Vystoupení> Nabídky
Klepněte na tlačítko 'Vytvořit nové menu', pojmenujte jej a klikněte na 'Vytvořit menu'.
Nezapomeňte povolit vlastnost nabídky Třídy CSS kliknutím na kartu možnosti v pravém horním rohu obrazovky Menu a zaškrtněte CSS třídy.
Nyní můžete přidat položky nabídky do nově vytvořené nabídky.
Nejprve vytvořte položku nabídky, která bude rodičem všech ostatních položek nabídky. Toto je odkaz, který zobrazí vaši mega nabídku při najetí myší.
Chcete-li vytvořit tuto položku nabídky, vytvořte vlastní odkaz s následujícími parametry:
- URL: http://#
- Název navigace: Mega Menu
- CSS třídy: mega-menu
Nyní uspořádejte/přetáhněte čtyři položky nabídky (každá se třemi vlastními podpoložkami), aby se staly podpoložkami hlavního nadřazeného odkazu Mega Menu.
Po přidání odkazů do nabídky přejděte dolů na „Nastavení menu' ve spodní části obrazovky nabídky a vyberte 'Hlavní menu' pro umístění zobrazení. Nakonec klikněte na 'Uložit menu'
Naše mega menu zatím vypadá takto:
Přidávání obrázků do mega menu
Nyní, když je nabídka hotová, je čas přidat obrázky.
Čtěte také: Jak převedu blogové příspěvky v DIVI?
Získejte obrázky
Začněte tím, že získáte čtyři obrázky. Tyto obrázky by se měly týkat čtyř položek podnabídky (O nás, poskytování služeb, naše práce a kontaktujte nás).
Pomocí editoru fotografií zmenšete a ořízněte každý obrázek tak, aby byl 500 pixelů široký a 300 pixelů vysoký.
Přidejte tyto obrázky do knihovny WordPress. Klikněte na Média > Přidat.
Přetáhněte obrázky na stránku a přidejte je nebo klikněte na 'Vyberte soubory"
Vložte obrázky do Mega Menu
Vraťte se na stránku nabídek na hlavním panelu WordPress.
V tomto příkladu je odkaz v horní části prvního sloupce " O ".
Klikněte na šipku napravo od položky " O ". Do pole Navigační štítek přidejte požadovaný obrázek pomocí značky html img přímo před textem " O ". Značka obrázku by měla vypadat takto:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Chcete-li najít adresu URL obrázku, přejděte na Média > Knihovna médií, klikněte na obrázek, který chcete přidat.
Na vyskakovací obrazovce Podrobnosti přílohy, najděte adresu URL v pravé části a klikněte 'Kopírovat URL do schránky'
Nyní se vraťte do konfigurace položky nabídky " O " na stránce nabídky a nahraďte text "Vložit URL obrázku" vložením adresy URL obrázku pomocí ctrl + v.
Před opuštěním možností konfigurace pro položku nabídky " O ", najděte textové pole Třídy CSS a zadejte třídu „mega-link“.
To nám umožní později přidat vlastní styl.
Opakujte tento postup pro přidání následujících tří obrázků do každé položky podnabídky s třídou "mega-link". (V tomto příkladu jsou zbývající tři prvky "Dodávka služeb", "Naše práce" et " Kontaktujte nás ".)
Výsledek
Přístup k vašemu webové stránky a najeďte myší na odkaz mega menu. Nyní by vaše mega menu mělo vypadat takto:
Všimněte si, že když najedete myší na každý z obrázků, obrázky se zesílí pomocí položky podnabídky přímo pod ním. Je to proto, že obrázek je součástí tohoto odkazu, takže kliknutím na něj se dostanete na přidruženou adresu URL.
Poslední úpravy
Pro tento poslední krok přidejte do nabídky vlastní css, aby bylo písmo textu větší a vycentrované. Také dejte kolem obrázku poloměr okraje, aby vypadal čistěji.
Na hlavním panelu WordPress přejděte na Divi> Možnosti motivu .
Přejděte dolů do pole Vlastní CSS, níže zadejte CSS a klikněte 'Uložit změny' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Konečný výsledek
Skončili jste!
Pokud jste postupovali podle všech kroků v tomto tutoriálu, zde je výsledek, který byste měli dostat.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Máte Divi mega menu s obrázky, aniž byste museli používat plugin. Tento typ nabídky funguje zvláště dobře pro webové stránky. e-commerce kteří mají hodně obsah a vyžadují obrázky produktů. Doufáme, že tento tutoriál bude užitečný pro vaše další projekty Divi.
Pokud potřebujete více prvků k dokončení svých projektů tvorby webových stránek, prohlédněte si také našeho průvodce na webu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Ale mezitím, sdílejte tento článek na různých sociálních sítích.
...
