info@amcreation.cz

+ 420 774 941 211

info@amcreation.cz

+420 774 941 211

Jak vložit text a tlačítko do sekundárního menu | Divi

autor: | CSS, Divi, Rady a tipy, Webdesign, Wordpress

Zdravím všechny Divi nadšence u nového tipu! V dnešním článku si ukážeme, jak vložit text a tlačítko do sekundárního menu (lépe sekundární/vrchní lišty – jedná se o lištu, která se nachází nad primárním/hlavním menu) šablony Divi. Spojení textu a tlačítka, které vyzývají návštěvníka Vašeho webu k nějaké akci (v našem případě chceme, aby klikl na tlačítko), říkáme „call-to-action“ neboli „výzva k akci“. Nyní už ale k samotnému návodu.

1. Přidání CTA (call-to-action) do souboru header.php Vaší šablony – do tohoto souboru musíme vložit krátký html kód. Kód je potřeba vložit přímo nad div sekundárního menu. Ke správnémů vložení Vám pomůže obrázek níže. Až najdete to správné místečko, vložte následující kód:

<div class="cta"> Text text text <a href="#">Tlačítko</a></div>

 

  • Facebook
  • Pinterest

2. Úprava textů

„Hashtag“ (#) nahraďte odkazem, který bude definovat stránku, na kterou má tlačítko odkázat.

„Text text text“ samozřejmě nahraďte textem, který se má zobrazovat před tlačítkem.

A v neposlední řadě text „Tlačítlo“ nahraďte textem, který se má zobrazit ve vašem tlačítku.

Teď se pojďmě podívat, jak zatím vypadá naše tvoření:

Naše call-to-action se objevila těsně za sociálními ikonami a nevidíme rozdíl mezi textem a tlačítkem. To změníme v dalším kroku.

3. CSS

Nyní pojďme trošku kouzlit s CSS – zde je design samozřejmě čistě na Vás. Já Vám ukážu jen pro ukázku kousek svého kódu, který můžete využít pro inspiraci.

#top-header .container {    
   padding-top: 1.3em;
   font-weight: 700;
   padding-bottom: 0.75em;
}

#et-info {
width: 30%;
float: right;
text-align: right;
margin-top: 3px;
}

.cta {
width: 20%;
text-align:center;
float: right;
margin-top: -3px;
margin-right: -150px;
}

.cta a {
background:#b7a265;
color: #ffffff!important;
padding: 5px;
display: inline-block;
border: solid;
border-color: #ffffff;
border-width: 1px;
transition: all 0.5s;
}

.cta a:hover {
background: #ffffff;
color: #b7a265!important;
}

Po úpravě CSS by měla lišta vypadat cca takto:

A jsme u konce článku. Doufám, že Vám pomohl při tvorbě Vašich webovek.

Těším se na Vás u dalšího tipu! Budeme moc rády za podporu prostřednictvím follow na Instagramu, který můžete dát níže. 🙂

Keep up the good work!

Monika

Pomohl Vám článek? Podělte se o něj – sledujte nás, sdílejte nás a posouvejte tipy mezi další nadšence!

Follows

Pomohl Vám článek? Podělte se o něj – sledujte nás, sdílejte nás a posouvejte tipy mezi další nadšence!

Follows

2 komentáøù

    • Aneta

      My děkujeme za komentář. Těší nás, že se článek líbí. 🙂

      Odpovìdìt

Pøidat komentáø

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Pin It on Pinterest