Rozbaľovacie mega menu- skvelý dizajnový nález. Navigácia na stránke veľký počet strán bol vždy problém. Klasické statické ponuky a la mapa stránok rýchlo rastú s rastúcim počtom stránok a zaberajú veľa miesta. Dynamické rozbaľovacie ponuky môžu výrazne ušetriť miesto na stránke, ale obetuje sa použiteľnosť – navigácia vyžaduje aktívnu a pomerne presnú prácu myši. Mierne vynechané a nesprávne menu je odhalené.

Impulzom pre vývoj konceptu mega-menu bolo pravdepodobne rozhranie pásky Microsoft Office 2007. Tento koncept je presne uprostred medzi jednoduchým statickým menu a dynamickým rozbaľovacím menu. Na jednej strane je takéto menu dosť informatívne a intuitívne, na druhej strane výrazne znižuje potrebné manipulácie s myšou. Po rozbalení dokáže využiť všetok dostupný priestor na obrazovke, čo používateľovi umožňuje pozrieť si všetky ponúkané položky v tomto kontexte a v prípade potreby sa skryť.

Nech je to akokoľvek, mega-menu je teraz, ako sa hovorí, v trende a ak ste ho ešte nepoužili, mali by ste sa naň pozrieť bližšie.

UberMenu: WordPress Mega Menu Plugin

Tento multifunkčný doplnok možno v tejto recenzii bezpečne umiestniť na prvé miesto: vytvára kompletné mega menu, má neskutočné množstvo rôznych možností vrátane ovládania farby pozadia a písma, veľkosti písma atď. A to všetko sa vykonáva z výkonného a pohodlného panela nastavení.

Okrem toho má menu aj množstvo ďalších skvelých funkcií, ako napríklad:

  • Vstavaná responzívna mriežka
  • Individuálne nastavenie šírky každého stĺpca ako aj nastavenie predvolenej šírky
  • Spájanie položiek ponuky do skupín
  • Centrovanie položiek ponuky do vodorovných riadkov
  • Vlastné obrázky na pozadí
  • Rolovateľné podponuky obsahujúce veľké množstvo položiek.
Celkovo vzaté, veľmi výkonný plugin, ktorý vrelo odporúčam.

Cena: 19 dolárov

Mega hlavné menu

Veľmi populárny a široko používaný plugin Mega hlavné menu vie, ako nájsť rovnováhu medzi funkčnosťou a jednoduchosťou. Na vytváranie rozbaľovacích ponúk, ktoré môžu obsahovať, máte k dispozícii viac ako 10 rôznych nástrojov text, obrázky, odkazy a miniaplikácie. Navyše, neobmedzené nastavenia farieb a viac ako 600 písiem Google.

Cena: 15 dolárov

Liquida Mega Menu

Liquida Mega Menu- moderný a multifunkčný plugin, ktorý bude vyhovovať obom bežných používateľov, a vývojári – dá sa jednoducho vložiť do vlastnej vyvinutej témy.

Plugin ponúka široké možnosti pre tvorba menu s moderným a štýlovým dizajnom: vertikálne alebo horizontálna orientácia, schopnosť zahrnúť položky ponuky odkazy, obrázky a dokonca aj produktové karty WooCommerce alebo Easy Digital Downloads, ktoré sa môžu hodiť pri vývoji internetových obchodov.

Cena: 19 dolárov

Sky Mega Menu

Tri možnosti dizajnu pre mobilné zariadenia, 9 farebných schém, vlastná mriežka, tvary a 360 vektorových ikon. Táto súprava umožňuje Sky Mega Menu zaujať svoje právoplatné miesto medzi svojimi druhmi.

Cena: 6 dolárov

Menu WP Mega

Plugin z kategórie must have. Veľa nastavení a možností, práca s kategóriami, podkategóriami a správami, SEO optimalizácia a dve prednastavené farebné schémy (tmavá a svetlá), ktoré sa však dajú jednoducho meniť podľa vašich predstáv.

Cena: 29 dolárov

Menu NOO

Aby ste pochopili panel nastavení Menu NOO nemusíte ani čítať dokumentáciu – všetko je tak intuitívne. Mať po ruke Náhľad v reálnom čase môžete jednoducho meniť hodnoty a posúvať posúvače pri sledovaní efektu. Farebnú schému je možné meniť úplne ľubovoľne a každú možnosť uložiť pod vlastným názvom, pričom počet týchto možností je neobmedzený.

Obsah položiek ponuky môže byť text, odkazy, obrázky, videá, formuláre a rôzne widgety. Používa vlastnú 12-stĺpcovú mriežku, aby sa to všetko zmestilo.

Cena: 15 dolárov

Hero Menu – Responzívny doplnok WordPress Mega Menu

Hero Menu vám umožňuje viazať odkazy na príspevky, kategórie, externé adresy URL na položky ponuky a tiež v nich zobrazovať príspevky blogu spolu s odporúčaným obrázkom. Najnovšia verzia oznámila plnú podporu platformy WooCommerce. Pre pohodlné ovládanie má vstavaný drag-and-drop editor.

Dizajn je moderný a štýlový a samozrejme kompletne .

Cena: 19 dolárov

Superfly – responzívny doplnok ponuky WordPress

Takzvaný fly menu- najnovší trend vo svete web dizajnu. Takáto ponuka potichu „drieme“ v rohu stránky vo forme ikony, nezaberá takmer žiadne miesto, a keď na ňu prejdete myšou, otvorí sa, pričom prvky stránky premiestni a neprekryje ich.

Jedným zo zástupcov tohto typu mega-menu je Superfly – Responsive WordPress Menu Plugin. Pôsobivý nástroj z hľadiska dizajnu aj funkcií.

Cena: 22 dolárov

Prepnúť ponuku

S rastúcou popularitou mobilných zariadení sa stávajú dôležité vyskakovacie (alebo kontextové) ponuky, ktoré môžu ušetriť veľa miesta na obrazovke.

Prepínacie menu je veľmi jednoduché, minimalistické menu, ktorý sa však dokonale vyrovná so svojou hlavnou funkciou.

Cena: 5 dolárov

Plávajúce menu WP Pro

Plávajúce menu WP Pro je doplnok 2 v 1. Menu-navigátor pre jednostránkový web a menovky menu. A čo viac, pomocou tohto pluginu môžete aspoň vizuálne premeniť svoju tradičnú stránku na modernú jednostránkovú. WP Floating Menu Pro poskytne plynulé rolovanie z jednej časti stránky do druhej.

K dispozícii vývojárovi ponúka WP Floating Menu Pro 13 a 7 rôznych možností pre umiestnenie na stránke, možnosti prispôsobenia, farby, obsah a počet položiek.
Pre obrazovky menšie ako 480px je to možné automatické vypnutie Ponuka.

Cena: 17 dolárov

Flexi Menu WordPress Plugin

Flexi Menu je 5 rôznych, plne prispôsobiteľných typov menu: fly menu, wide (šírka strany), wide+popisy, wide+obrázky a vertikálne.

Cena: 14 dolárov

Max Mega Menu (zadarmo)

Veľmi dobre plugin s drag-and-drop editorom menu a možnosť vložiť takmer akýkoľvek widget do položiek ponuky – od kontaktných formulárov až po Google mapy.

Schopný automaticky previesť už existujúce bežné menu do jedného mega menu s plnou kontrolou nad procesom konverzie a uložením alebo preradením vhodných akcií.

Nedávno bola taká funkcia ako Mega Menu iba množstvom prémiových doplnkov a tém. Ale dnes vám, milí čitatelia, predstavím dva úplne bezplatné doplnky, ktoré vám umožnia rýchlo, jednoducho a samozrejme úplne zadarmo vytvoriť na vašom webe výkonné navigačné menu, ktoré nie je také horšie ako platené náprotivky.

Čo je vlastne Mega Menu? Áno, to isté, zvyčajné navigačné menu, s ktorým ste sa pravdepodobne stretli a nakonfigurovali ste viac ako raz. Na rozdiel od štandardných funkcií existujú aj pridané vlastnosti na prispôsobenie a zobrazenie jednotlivých prvkov. Napríklad pridanie nielen vertikálneho, ale aj horizontálneho podmenu, pridanie ikon a jednotlivých obrázkov do menu, doladenie vzhľadu pre všetky položky menu a podobne. To všetko je v našich zásuvných moduloch zvažovaných dnes.

Ďalšou skvelou príležitosťou na pridanie úžasného navigačného menu na vašu stránku pomocou doplnku je Mega Menu od WooRockets.com. Inštalácia a aktivácia pluginu je štandardná.

Tento plugin je o niečo náročnejší na zvládnutie, no zároveň ponúka viac možností ako vyššie popísaný konkurent. Tu je konštrukcia menu veľmi podobná konštrukcii stránok v štandardnom Visual Composer.

Prejdite do sekcie WR mega menu na paneli správcu a kliknite na Pridať nové. Padáme ďalej nová stránka zostaviť nové menu. Tí, ktorí sa už zaoberali drag & drop skladateľmi, sa okamžite budú cítiť ako doma. Proces vytvárania menu sa príliš nelíši od vytvárania stránky.

Na začiatku sa uistite, že v hornej časti ponuky − umiestnenie Menu je presne to, čo potrebujete. Alebo kliknite na Miesto vedenia na výber ponuky.

klikni - Pridať prvok a vo vyskakovacom okne vyberte typ obsahu, ktorý chcete pridať do ponuky. Vľavo hore si môžete vybrať jednu zo štandardných možností alebo pridať widgety WordPress.

V prípade potreby pridajte riadky s rozdelením na požadovaný počet stĺpcov. Na ľavej strane sú karty na presúvanie položiek ponuky nahor alebo nadol a na pravej strane sú karty, na ktorých môžete povoliť úpravy alebo odstraňovanie. Nezabudnite stlačiť obvyklé tlačidlo vpravo - Publikovať alebo - Obnoviť zachovať výsledky svojej práce.

Vo všeobecnosti možno do vašej novej ponuky jednoducho umiestniť ľubovoľné texty, obrázky a v prípade potreby akékoľvek miniaplikácie. Vzhľad menu je možné zmeniť kliknutím na tlačidlo. Styling alebo vedľa vložte svoje tabuľky kliknutím na tlačidlo Vlastné CSS.

Skrátka veľmi funkčná vec. Nie nadarmo majú autori okrem tohto pluginu aj: kontaktný formulár a samozrejme skladateľ, ktorý zrejme poslúžil ako základ pre plugin mega menu. Funkčné demo v celej svojej kráse si môžete pozrieť tu.

Nádherné a výkonné pluginy, s ktorými si prakticky vytvoríte menu svojich snov. Jediné, čo môže trochu zatieniť radosť používateľov, je otázka kompatibility s rôznymi témami. Bohužiaľ, pokiaľ si pamätám, prémiové doplnky niekedy mali tento problém. Oba pluginy som testoval na predvolenej téme a nezaznamenal som žiadne problémy ani chyby. Čo chcete, priatelia!

Ahoj! V mojom živote je ako vždy veľa udalostí, takže je veľmi ťažké nájsť si čas na blog. Včera sme si kúpili letenky na Srí Lanku a čoskoro odletíme na 4 mesiace, príďte nás navštíviť! A teraz hľadám tie najkrajšie svadobné šaty :))
Dnes budeme hovoriť o tom, ako vytvoriť menu vo WordPress, ako aj pridať tieto bloky do ľubovoľných oblastí šablóny.
Naučíme sa, ako si prispôsobiť menu a upraviť ho podľa vlastného uváženia.

Úprava a prispôsobenie menu vo WordPress

Najprv analyzujme funkcie, ktoré máme k dispozícii na paneli správcu blogu. V nových šablónach kompatibilných s najnovšie verzie WordPress, zobrazenie menu je celkom jednoduché a nastavenie nie je príliš náročné.

Potom, čo sme vytvorili podradenú tému, ktorú možno upraviť bez ovplyvnenia hlavnej témy, pridajme do jej súboru function.php nasledujúcu funkciu.

1 2 3 register_nav_menus( pole ( "dodatočné menu" => __( "Ďalšie menu" , "Názov vašej témy" ) ) ) ;

register_nav_menus(array("additionalmenu" => __("Dodatočné menu", "Názov vašej témy")));

Ak nevytvárate podradenú tému, pridajte ju do súboru hlavných funkcií vašej témy.

Táto funkcia nám umožní pridať do našej šablóny ďalšiu ponuku WordPress a vytvoriť pre ňu ďalšiu oblasť.

Po pridaní prejdite na panel správcu v časti „Spravovať oblasti“:

Mala by sa objaviť ďalšia tematická oblasť s názvom, ktorý sme dali vo funkcii.

Kliknite na „Použiť novú ponuku“, ak chcete zmeniť sekcie pre ďalšiu oblasť, alebo vyberte „Domov“. Potom sa v novej oblasti zobrazia rovnaké sekcie ako v hlavnom menu.

V našom prípade vytvoríme nové menu s názvom Ďalšie:

Vyberte preň tematickú oblasť „Ďalšie menu“.

Teraz však musíme túto oblasť prepojiť s blokmi šablón. Napríklad musíme vytvoriť ďalšie menu pod hlavičkou stránky WordPress. Prejdite do súboru header.php alebo ho skopírujte do podradenej témy. Za značku body pridajte nasledujúce:

1 2 3 <div id = "ďalšie menu" > ( array( "umiestnenie_témy" =>"dodatočné menu")); ?></div>

"dodatočné menu")); ?>

Pozrime sa na výsledok:

Nad hlavičkou máme ďalšie menu. Teraz mu musíme nastaviť štýly, zarovnať položky do riadku a znížiť blok pod hlavičku.

V súbore style.css vykonáme nasledujúce zmeny:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #additionalmenu nav ( width : 940px ; /* šírka kontajnera */ okraj : 0 auto ; ) #additionalmenu li ( display : inline ; padding : 10px ; /* padding */ margin : 20px 0 ; ) #additionalmenu ( width : 100% ; top : 420px ; /* Odsadenie od horného okraja */ farba pozadia : #000 ; /* farba pozadia */ poloha : relatívna ; )

#additionalmenu nav (šírka: 940px; /*šírka kontajnera */ okraj: 0 auto; ) #additionalmenu li (zobrazenie: vložené; odsadenie: 10px; /* odsadenie */ okraj: 20px 0; ) #additionalmenu (šírka: 100% ; hore: 420px; /* horný okraj */ farba pozadia: #000; /* farba pozadia */ poloha: relatívna; )

Pozrime sa, čo sa stalo:

Zobrazenie jedálneho lístka, ktorý sme vytvorili, má ešte ďaleko od ideálu, no s náležitou starostlivosťou ho môžete preniesť do vhodného vzhľadu pre váš blog.

Widgety a doplnky na pridávanie ponúk do WordPress

Odporúčam pozrieť si video o vytváraní menu vo WordPress:

V článku o widgete bolo spomenuté „Vlastné menu“. Poďme si to analyzovať podrobnejšie.

Prejdite na „Vzhľad“ – „Widgety“, nájdite miniaplikáciu „Vlastná ponuka“ a presuňte ju do oblasti dostupnej pre váš motív a vhodnej pre blog:

V našom prípade je blok ponuky pridaný na bočný panel. Na to sme vybrali sekcie nami vytvoreného dodatočného bloku.

Podľa toho sa na bočnom paneli vpravo zobrazí nasledujúci blok:

Okrem štandardného widgetu zabudovaného do témy existuje aj mnoho ďalších doplnkov určených na vytváranie rôzne druhy ponuky: vertikálne, horizontálne, rozbaľovacie atď.

Tu je napríklad doplnok na vytvorenie vertikálneho viacúrovňového menu vo WordPress: Navgoco Vertical Multilevel Slide Menu.

Alebo prispôsobiteľnejší widget rozbaľovacej ponuky.

Populárne sú aj widgety s efektmi JQwery pre menu, napríklad: JQuery Slick Menu Widget.

Uveďme si príklad, ako to funguje.

Po nainštalovaní miniaplikácie jQuery Slick Menu prejdite na "Vzhľad" - "Widgety".

Medzi zoznamom dostupných widgetov by sa mal objaviť nový, nami nainštalovaný. Presuňte ho na dostupnú oblasť, v našom prípade na bočný panel:

Otvorme jeho nastavenia:

Vyberieme názov menu (sekcie, ktoré sme vytvorili), Tab Text - názov bloku, ktorý sa zobrazí na stránke, umiestnenie (vyberieme Left - vľavo), Offset - odsadenie od horný okraj v pixeloch, Rýchlosť animácie - rýchlosť animácie (Rýchla). Ak chcete, aby blok automaticky zmizol, môžete vybrať ponuku Auto-Close Menu. A vyberte si farbu bloku. Kliknite na uložiť a pozrite si výsledok:

Na ľavej strane hlavičky sa objavilo vysúvacie menu. Keď kliknete na jazyk, zobrazia sa sekcie:

Po opätovnom kliknutí blok opäť zmizne.

Toto je len jeden zo spôsobov, ako nainštalovať, upraviť a zobraziť ponuky vo WordPress.

Vyberte si najvhodnejší a najpohodlnejší spôsob vytvorenia menu pre váš blog WordPress. Veľa štastia!

    To sa dá urobiť pomocou štýlov.
    Musíte však pochopiť, že máte ponuku, potom ju musíte presunúť zhora na bočný panel, ktorý ešte nemáte.
    To znamená, že ak to táto téma umožňuje, pripojte bočný panel na pravej strane a preneste doň Menu.
    A aby to bolo vertikálne, stačí pridať / zmeniť CSS

    Hlavná navigácia ul li, .sekundárna navigácia ul li ( zobrazenie: blok !dôležité; )

    Potom musíte trochu zmeniť zarážky a ďalšie vlastnosti.

    Možno som ťa zle pochopil, ale moje Max mega menu je už v oblasti ľavého stĺpca (je čierne, kvôli obmedzenej ploche zoradené do 2 riadkov a v plugine je štandardne vodorovné), pridal som ho tam cez widgety , v hornej časti mám štandardnú ponuku tém a potrebujem obe, teraz skúsim CSS, vďaka

    Možno som ťa tiež zle pochopil.
    Hovoril som o menu, ktoré máte na obrazovke v horizontálnom hornom bloku svetlozelenej farby "Čaj Kávové sladkosti ..."
    Ale po opätovnom prečítaní vašej odpovede chápem, že hovoríme o rôznych jedálničkách.
    Na obrazovke, ktorú vidíte na ľavej strane, je toto menu Max mega, ale nevidím ho na stránke pod vaším odkazom.
    A preto Včera som ho tiež nevidel, takže som sa nepozrel na obrazovku.
    Teraz nepozerám ani ja.

    Snažím sa stále niečo robiť, vkladám a odstraňujem rôzne veci, kým som neprišiel na to, ako urobiť toto menu vertikálne, hľadám iný vhodný. Pre toto menu je možné použiť rovnaké riešenie css, ako ste napísali? Mohli by ste mi povedať, do ktorej časti kódu vložiť tieto riadky, do kódu samotného pluginu? Záleží na umiestnení?
    Išiel som do ponuky Plugins-edit-selected Max mega, potom sú tu nasledujúce sekcie:
    css
    megamenu.scss
    reset.scss
    toggle-blocks.scss
    admin
    mixin.scss
    V žiadnom z nich som nenašiel podobné riadky na opravu

    Som len úplný noob a nerozumiem, prečo potrebujete, aby sa mi to zobrazovalo, zrejme preto, aby ste si pozreli kód a navrhli ho. Vo fóre podpory Max Mega Menu som našiel odpoveď admina, že vertikálna je dostupná len v Pro (platenej) verzii, takže zatiaľ ju bude treba opustiť. Mohli by ste mi prosím poradiť nejaký podobný plugin, kritériá sú nasledovné:
    - možnosť inštalácie do bočného panela
    - ponuka by mala byť rozbaľovacia
    - pri prepnutí do niektorej z kategórií tak, aby v tejto fáze zostala otvorená a nezatvorila sa úplne obnovením stránky

    presne tak.
    Bez toho, aby ste videli toto menu, nie je možné poskytnúť rady a odporúčania. Je možné, že pár riadkov v CSS stačí. Ale nie fakt.

    Aj keď, ak naozaj plánujete použiť toto Max Mega Menu odhaľujúce všetky jeho funkcie, potom 23 dolárov za takýto produkt nie je vôbec veľa. Stojí to za to.

Chcete prispôsobiť navigačné menu WordPress, aby ste zmenili ich farbu alebo vzhľad? Vaša téma WordPress sa stará o vzhľad navigačnej ponuky na vašom webe. Môžete ho ľahko nastaviť pomocou pomocou CSS aby zodpovedali vašim požiadavkám. V tomto článku vám ukážeme, ako prispôsobiť štýl vašej navigačnej ponuky WordPress.

Metóda 1: Použitie ručnej zmeny štýlu navigačnej ponuky WordPress

Táto metóda vyžaduje úpravu súborov tém WordPress. Mali by ste ho používať iba v prípade, že viete upravovať kód a rozumiete tomu, ako funguje .

Najlepšia cesta urobte vlastné nastavenia vo svojej téme wordpress je . Ak upravujete iba CSS, môžete si pozrieť našu príručku, ako to urobiť bez úpravy súborov tém.

Navigačná ponuka vo WordPress sa zobrazuje ako neusporiadaný zoznam (zoznam s odrážkami).

Ak ste práve použili nasledujúcu značku, zobrazí sa zoznam bez akýchkoľvek priradených tried CSS.

Váš nezoradený zoznam bude mať názov triedy 'menu', pričom každá položka zoznamu bude mať svoju vlastnú triedu .

Toto môže fungovať, ak máte iba jedno umiestnenie ponuky. Väčšina tém má však niekoľko miest, kde môžete zobraziť navigačnú ponuku.

Používanie iba predvolených tried CSS môže byť v konflikte s ponukami inde.

Preto je potrebné definovať triedu CSS a pozíciu ponuky. Je pravdepodobné, že vaša téma WordPress to už robí pridaním navigačnej ponuky s kódom, ako je tento:

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

Tento kód hovorí WordPress, že táto téma zobrazuje ponuku Štart. Pridá tiež triedu CSS primárnej ponuky do navigácie v ponuke.

Teraz môžete pomocou tejto štruktúry CSS upraviť svoju navigačnú ponuku.

#header .primary-menu() // trieda kontajnera #header .primary-menu ul () // trieda kontajnera prvý neusporiadaný zoznam #header .primary-menu ul ul () //neusporiadaný zoznam v neusporiadanom zozname #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 () // neusporiadaný zoznam, ak existujú rozbaľovacie položky #header .primary -menu li li () // každá rozbaľovacia navigačná položka #header .primary-menu li a () // každá rozbaľovacia navigačná položka kotva

Nahraďte #header triedou kontajnera alebo ID, ktoré používa vaša téma WordPress.

Táto štruktúra vám pomôže úplne zmeniť vzhľad navigačného menu.

Existujú však aj iné triedy, ktoré sa automaticky pridávajú s pomocou WordPress pre každú položku ponuky a ponuku. Tieto triedy vám umožňujú ďalej prispôsobiť navigačnú ponuku.

Current_page_item() // Trieda pre aktuálnu stránku .current-cat() // Trieda pre aktuálnu kategóriu .current-menu-item() // Trieda pre akúkoľvek inú aktuálnu položku ponuky .menu-item-type-taxonomy() // Trieda pre kategóriu .menu-item-type-post_type() // Trieda pre stránky .menu-item-type-custom() // Trieda pre ľubovoľnú vlastnú položku, ktorú ste pridali .menu-item-home() // Trieda pre odkaz Domov

WordPress vám tiež umožňuje pridávať triedy CSS do jednotlivých položiek ponuky z oblasti správcu.

Túto funkciu môžete použiť na úpravu položiek ponuky, ako je pridávanie ikon do obrázka pomocou ponuky alebo jednoduchá zmena farby, aby položka ponuky vynikla.

Poďme na stránku Vzhľad » Menu a stlačte tlačidlo.

Po skontrolovaní týchto nastavení uvidíte, že pri úprave každej jednotlivej položky ponuky sa pridá ďalšie pole.

Teraz môžete použiť túto triedu CSS vo svojej šablóne so štýlmi na pridanie vlastného CSS. Toto ovplyvní iba položku ponuky s triedou CSS, ktorú ste pridali.

Metóda 2: Prispôsobte štýl ponuky vo WordPress pomocou doplnkov

Vaša téma WordPress používa štýl navigačnej ponuky. Mnohým začiatočníkom nie je príjemné upravovať súbory tém alebo písať CSS samostatne.

Vtedy sa to hodí WordPress Pluginštýl menu. To vám ušetrí úpravy súborov tém alebo písanie kódu.

Najprv si musíte nainštalovať a aktivovať doplnok CSS Hero. Pre viac detailné informácie pozrite si našu príručku krok za krokom, ako na to.

CSS Hero je prémiový doplnok WordPress, ktorý vám umožňuje navrhnúť si vlastný WordPress téma bez napísania jediného riadku kódu (žiadne HTML alebo CSS).

Po aktivácii budete presmerovaní na získanie kľúča CSS Hero. Postupujte podľa pokynov na obrazovke a po niekoľkých kliknutiach budete presmerovaní späť na vašu stránku.

Teraz musíte kliknúť na tlačidlo CSS Hero na paneli správcu WordPress.

CSS Hero ponúka WYSIWYG editor (čo vidíte, to dostanete). Kliknutím na tlačidlo sa dostanete na vašu stránku s plávajúcim panelom nástrojov CSS Hero viditeľným na obrazovke.

Ak chcete začať s úpravami, musíte kliknúť na modrú ikonu v hornej časti.

Ukážte myšou na vašu navigačnú ponuku a CSS Hero ju zvýrazní a zobrazí okraje okolo nej. Keď kliknete na zvýraznenú navigačnú ponuku, zobrazí sa vám položky, ktoré môžete upraviť.

Na snímke obrazovky vyššie nám ukazuje položku ponuky, navigáciu v ponuke, kontajner navigácie v ponuke atď.

Povedzme, že chceme zmeniť farbu textu všetkých položiek v navigačnej ponuke. V tomto prípade vyberieme navigačnú ponuku, ktorá ovplyvňuje všetky ponuky.

Teraz vám to ukáže CSS Hero rôzne vlastnosti, ktoré je možné upravovať ako text, pozadie, okraje, okraje, výplň atď.

Môžete kliknúť na ľubovoľnú vlastnosť, ktorú chcete zmeniť. CSS Hero vám ukáže jednoduché rozhranie, v ktorom môžete vykonávať zmeny.

Na snímke obrazovky vyššie máme vybratý text a ukázalo sa nám pekné rozhranie na výber písma, zmenu farby textu, veľkosti a ďalších vlastností.

Po vykonaní zmien ich budete môcť vidieť naživo v ukážke témy.

Keď ste so zmenami spokojní, kliknutím na tlačidlo Uložiť na paneli nástrojov CSS Hero uložte zmeny.

Najlepšie na používaní tejto metódy je, že môžete jednoducho vrátiť späť všetky vykonané zmeny. CSS Hero uchováva kompletnú históriu všetkých vašich zmien a medzi týmito zmenami môžete prechádzať tam a späť.

Dúfame, že vám tento článok pomohol naučiť sa, ako upraviť štýl navigačnej ponuky vo WordPress.