Přejít k hlavnímu obsahu

Jak nastavit styl navigačních menu

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Chcete přizpůsobit své navigační nabídky WordPress tak, aby změnily jejich barvy nebo vzhled? Vaše téma WordPress spravuje vzhled navigačních nabídek na vašem webu. Můžete jej snadno přizpůsobit pomocí CSS, aby vyhovoval vašim požadavkům. V tomto kurzu vám ukážeme, jak stylovat navigační nabídky blogu WordPress.

to-the-style-to-menu de navigation de WordPress

Metoda 1: Jak stylovat vaše nabídky WordPress pomocí pluginu

Vaše téma WordPress používá pro vaše styly navigace CSS. Mnoho nováčků není spokojeno s úpravami motivů WordPress pomocí CSS. To je případ, kdy se plugin pro úpravu nabídky stane praktickým, protože vám ušetří úpravy souborů motivů nebo psaní kódu.

Nejprve je třeba nainstalovat a aktivovat plugin " CSS Hero ". Další informace najdete v našem podrobném průvodci instalací pluginu WordPress.

CSS Hero je prémiový plugin WordPress, který vám umožní navrhnout vlastní téma WordPress bez psaní jediného řádku kódu (Není vyžadováno žádné HTML ani CSS).

Po aktivaci pluginu se dostanete na stránku, kde budete muset poskytnout svoji licenci. Postupujte podle pokynů na obrazovce a na váš web se dostanete několika kliknutími.

Nyní musíte kliknout na tlačítko CSS Hero Na panelu nástrojů WordPress.

css-hrdina-menu WordPress

CSS Hero nabízí editor WYSIWYG (to, co vidíte, je to, co dostanete „Co vidíte, to je to, co dostanete“). Kliknutím na toto tlačítko se dostanete na svůj web s plovoucím panelem nástrojů CSS Hero vpravo.

pruh nástrojů, css-hrdina

Chcete-li zahájit úpravy, musíte kliknout na modrou ikonu v horní části.

Pohybujte myší nad navigačním menu a CSS Hero ji zvýrazní zobrazením jejích okrajů. Když kliknete na zvýrazněnou navigační nabídku, zobrazí se různé položky, které můžete upravit.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Přizpůsobení-a-menu-s-CSS-hrdina

Na výše uvedeném snímku obrazovky vidíte položku nabídky, navigační nabídku a kontejner navigační nabídky atd.

Předpokládejme, že chceme změnit barvu textu všech položek v navigační nabídce. V tomto případě vybereme navigační nabídku, která se dotkne celé nabídky.

CSS Hero vám nyní ukáže různé vlastnosti, které můžete změnit, jako je text, barva pozadí, ohraničení, okraje, výplň atd.

css-property-hrdina

Můžete kliknout na vlastnost, kterou chcete upravit. CSS Hero vám představí jednoduché rozhraní, kde můžete provádět změny.

edit-a-vlastnost-css-s-CSS-hrdina

Na výše uvedeném snímku obrazovky jsme vybrali text a ten nám ukázal pěkné rozhraní pro výběr písem, změnu barvy, velikosti a dalších vlastností textu.

Při provádění změn budete mít živý náhled na konečný výsledek.

PREVIEW-to-live CSS-hrdina

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

Až budete se změnami spokojeni, klikněte na tlačítko „Uložit“ na CSS Hero Chcete-li uložit změny.

Nejlepší část této metody je, že můžete snadno vrátit zpět provedené změny. CSS Hero uchovává úplnou historii všech vašich změn a můžete mezi nimi procházet a procházet.

Metoda dvě: Jak ručně změnit styl vaší navigační nabídky

Tato metoda vyžaduje, abyste upravovali soubory motivů WordPress. Měli byste jej používat, pouze pokud jste vývojář a máte určité znalosti o vytváření motivů WordPress.

Nejlepší způsob, jak to udělat, je přizpůsobit si téma WordPress vytvořením podřízeného motivu. Pokud měníte pouze CSS, pak vás vyzývám, abyste si přečetli náš tutoriál o jak přidat vlastní kód CSS na WordPress.

Navigační nabídky WordPress jsou zobrazeny v neuspořádaném seznamu (seznam odrážek).

Pokud použijete následující značku php, zobrazí se seznam bez přidružených tříd CSS.


Váš seznam s odrážkami bude mít „nabídku“ názvu třídy, přičemž každá položka seznamu bude mít svou vlastní třídu CSS.

To by mohlo fungovat, pokud máte jediné umístění nabídky. Většina motivů má však několik míst, kde můžete zobrazit navigační nabídky.

Používání pouze výchozích tříd CSS může způsobit konflikty s nabídkami na jiných místech.

To je důvod, proč musíte definovat třídu CSS a umístění nabídky. Je pravděpodobné, že vaše téma WordPress to již dělá přidáním navigačních nabídek pomocí kódu, jako je tento:

'primary', 'menu_class' => 'primary-menu',)); ?>

Tento kód říká WordPress, že v tomto motivu se zobrazí hlavní nabídka. Přidá také třídu CSS “ primární nabídka V navigační nabídce.

Styl navigačního menu nyní najdete ve struktuře CSS.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

#header .primary-menu {} // kontejnerová třída #header .primary-menu ul {} // neuspořádaný seznam #header .primary-menu ul ul {} // neuspořádaný seznam v rámci neuspořádaného seznamu #header .primary -menu li {} // každá navigační položka #header .primary-menu li a {} // každá navigační položka kotva #header .primary-menu li ul {} // neuspořádaný seznam, pokud jsou rozbalovací položky #header .primary -menu li li {} // každá rozbalovací navigační položka #header .primary-menu li li a {} // každá zakotvená navigační položka

Nahraďte #header třídou kontejneru nebo znakem „ ID Používá vaše téma WordPress.

Tato struktura vám pomůže úplně změnit vzhled vaší navigační nabídky.

To je pro tento tutoriál. Doufám, že vám to umožní přizpůsobit nabídky vašeho blogu WordPress. Neváhejte a sdílejte to se svými přáteli na svých oblíbených sociálních sítích.

 

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
2 akcie
podíl1
tweet1
Zadat