Jak přidat tlačítko do menu Mioweb 3.0

Tlačítko v menu zvýrazňuje položku, kterou nese, a tak se často stává vyhledávaným prvkem z řad klientů nejen Miowebu.

Z pohledu funkčnosti by tlačítko mělo nést položky, na které chceme klienta upozornit, případně mu zvýraznit část menu, kterou nemá přehlédnout. Tlačítka v tomto stylu výrazně pomáhají v přehlednosti menu.

Nejčastěji tedy v menu vidíme tlačítka jako „Koupit“, „Přihlásit se“, „Registrovat se“ a podobně. V Miowebu taková funkce prozatím chybí a tak je třeba pomoci si tzv. css kódem. Nemusíte se ale bát. nejde o nic složitého.

Existují dva způsoby, jak na to. Podmínkou ale je, že si vyberete styl menu, který nemá podržení, jelikož to přes css vypnout nelze.

Návod

  1. Přejděte do nastavení webu > Nastavení > Kódy
  2. Najděte poslední pole „Vlastní CSS styly“
  3. Vložte tento kód níže a uložte
  4. Přejděte do editace hlavičky a následně editace položek menu
  5. Přidejte položku a vyberte stránku, na kterou chcete posílat klienty
  6. Do „Text odkazu“ vložte: !p class=“button_menu“>Váš text</p! (za první vykřičník vložte <, za druhý vložte >
  7. Menu uložte

Následně si můžete upravit styl tlačítka a jeho barvy. Jak na to, zjistíte ve videu níže.

!POZOR! – Jestliže budete editovat kdykoli následně menu, kód se vám rozpadne. Doporučuji následující postup:

  1. Editovat menu a poté jen kliknout na uložit (tlačítko zmizí)
  2. Přejít znovu do editace > udělat úpravy, co potřebujete
  3. Úplně na závěr znovu vložit do „Text odkazu“ kód (6 bod) a uložit.

.button_menu {
background: #00AB99;
color: #ffffff;
border-radius: 45px;
font-weight: 200;
padding: 10px 20px 10px 20px;
-webkit-transition: 1s cubic-bezier(0.35,1.69,0.35,0.81);
transition: 1s cubic-bezier(0.35,1.69,0.35,0.81);
}

.buttton_menu:hover {
background: #3fa743;
}

Video – jak přidat tlačítko do menu + jeho úpravy

Honza T.
Webař, UX designér a projekťák. Grafika a interní procesy v týmu mě jednoduše baví. Denně čerpám nové informace, které vám rád předám.
Komentáře

Přidat komentář

Vaše emailová adresa nebude zveřejněna.

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře.

  • Stáhni si e-book zdarma
  • Odběr novinek

    Nechceš přijít o žádný můj obsah? Přihlas se do newsletteru a já ti pošlu na e-mail vždy info, že mám na webu nový super obsah.

  • Rubriky
  • Nejnovější příspěvky