Kako ubaciti dugme u meni WP sajta

Videćeš kako ubaciti dugme u meni WP sajta pomoću CSS kodova.

Dugme u meniju WP sajta privlači najveću pažnju posetilaca.

Videćeš 2 primera ubacivanja dugmeta pomoću CSS kodova u meni WP sajta, u klasičnoj WordPress temi.

Jedno dugme sa animacijom gore-dole, a drugo dugme sa hover effect animacijom.

Praksa je da se dugme postavi skroz desno na poslednjoj stranici u meniju i treba da vodi na najbitniju lending stranicu.

Kako ubaciti dugme u meni WP sajta

Pokazaću ti kako da napraviš 2 atraktivna dugmeta u meniju WP sajta u klasičnoj WordPress temi.

dugme-u-meniju

Jedno dugme sa animacijom gore-dole, a drugo dugme sa hover effect animacijom.

Pogledaj video tutorijal kako ubaciti dugme u meni WP sajta. Video traje 12 minuta i pokazao sam oba primera dugmeta u meniju WP sajta u klasičnoj WP temi.

Ubacivanje CSS kodova u klasične WordPress teme

CSS kodovi služe za “ulepšavanje” WP sajta ili za ubacivanje dodatnih opcija koje nisu moguće u blok editoru.

CSSCascading Style Sheets – Kaskadni Listovi Stilova

Ovako se ubacuje CSS kod u klasične WordPress (WP) teme. Klikni na sliku da je uvećaš.

ubacivanje-css-kodova-u-klasicne-wordpress-teme
Ubacivanje CSS kodova u klasične WordPress teme

Možeš da ubaciš više CSS kodova na sajt, za različite funkcije.

Pogledaj blog post u kome sam objasnio kako se ubacuju CSS kodovi u WordPress sajt.

Pogledaj video tutorijal kako se ubacuju CSS kodovi u klasične i blok WordPress (WP) teme.

Pogledaj i ovaj blog post vezan za ubacivanje CSS kodova.

Pogledaj kategoriju blog postova – CSS kodovi za WP sajt

Dugme sa animacijom gore-dole

Ubacivanje dugmeta sa animacijom gore-dole.

dugme-u-meniju

To je levo dugme na slici iznad.

Ovo je CSS kod za dugme sa animacijom gore-dole.

.menu-badge {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.5px;
margin-left: 8px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #656565;
padding: 3px 5px;
border-radius: 3px;
}

.badge-bounce {
animation: bouncing .8s cubic-bezier
(0.1,0.05,0.05,1) 0s infinite alternate both;
}

@keyframes bouncing{
0%{top:-6px}
100%{top:-10px}
}

Selektuj ovaj kod iznad, kopiraj ga sa Ctrl+C na tastaturi i nalepi ga sa Ctrl+V na tvoj WordPress sajt u polju za unos CSS koda.

Appearance / Customize / Additional CSS

U meniju, odmah iza Naziva stranice, dodaješ sledeći kod.

<span class=”menu-badge badge-bounce”>NOVO</span>

ubacivanje-koda-u-meni-wp-sajta
Ubacivanje koda u meni WP sajta

U video tutorijalu iznad pokazao sam kako da urediš to dugme sa animacijom gore-dole, izmenama CSS koda.

Dugme sa hover effect animacijom

Ubacivanje dugmeta sa hover effect animacijom.

dugme-u-meniju

To je desno dugme na slici iznad.

Ovo je CSS kod za dugme sa hover effect animacijom.

.main-navigation
.main-nav ul li.menu-cta a {
background-color: #f7f8f9;
border: 1px solid #b2b2be;
border-radius: 0px 0px 0px 0px;
color: #3f4047;
font-weight: 400;
line-height: 6px;
padding: 15px;
}

.main-navigation
.main-nav ul li.menu-cta a:hover {
background-color: #ffffff;
border: 1px solid #656565;
border-radius: 5px 5px 5px 5px;
color: #333333;
font-weight: 500;
}

.main-navigation
.main-nav ul li.menu-cta a:after {
content: ‘🡺’;
margin-left: 8px;
display: inline-block;
transition: all .25s
}

.main-navigation
.main-nav ul li.menu-cta a:hover:after {
transform: translatex(5px)
}

Selektuj ovaj kod iznad, kopiraj ga sa Ctrl+C na tastaturi i nalepi ga sa Ctrl+V na tvoj WordPress sajt u polju za unos CSS koda.

Appearance / Customize / Additional CSS

U meniju dodaješ CSS klasu menu-cta ispod naziva stranice.

ubacivanje-css-klase-u-meni-wp-sajta
Ubacivanje CSS klase u meni WP sajta

U video tutorijalu iznad pokazao sam kako da urediš to dugme sa hover effect animacijom, izmenama CSS koda.

Ovde se nalazi sajt sa ikonicama koji sam pomenuo u videu.

Čuvanje CSS kodova

Svaki put kada promeniš WordPress temu na svom sajtu izgubiće se svi CSS kodovi ubačeni u tu WP temu.

Zato je bitno da sve CSS kodove imaš sačuvane u kompjuteru i na Google disku, u običnom Word dokumentu.

Tako da uvek možeš da ih kopiraš iz tog Word dokumenta i da ih ubaciš u novu WordPress temu na tvom sajtu.

Zaključak

Ubacivanje dugmeta u meni WP sajta, u klasičnim WP temama se postiže dodavanjem CSS kodova u odgovarajuće polje na sajtu.

Preuzmi Word dokument sa najvažnijim CSS kodovima za WordPress (WP) sajt.

Klikom na dugme iznad taj Word dokument će automatski biti preuzet u tvoj kompjuter.

Pokazao sam ti dva primera ubacivanja dugmeta u meni WP sajta, u klasičnoj WordPress temi.

Kako ubaciti dugme u meni WP sajta
Kako ubaciti dugme u meni WP sajta

Dao sam ti odgovarajuće CSS kodove za ta dva dugmeta.

U video tutorijalu iznad pokazao sam kako možeš da urediš ta 2 dugmeta izmenama CSS koda, kako tebi odgovara.

Preporučeni video

Prijavi se (subscribe) na moj YouTube kanal i klikni na zvonce za obaveštenje kad objavim video.

Sajt. Znanje. Zarada.

Ako želiš da dobiješ sve ovo

  • Domen 14$ + Hosting 24$ + WP tema 59$
  • Pomoć 1 na 1 u izradi tvog WordPress sajta
  • Video kurs Marketing sistem 300 tutorijala
  • Zarada od svake prodaje 30$ + 10$ mesečno

Uključi se u Affiliate program Znanje i Zarada

«
»
  1. spacedaily Avatar
    spacedaily

    Just wish to say your article is surprising. The clearness in your post is just cool and i could assume youre an expert on this subject. Thanks a million, and please keep up the enjoyable work.

    1. Dejan Burić Avatar
      Dejan Burić

      Thank you very much for such a nice comment. I am very glad that you like my site.

  2. airhostess Avatar
    airhostess

    You are in reality a good webmaster. The website loading velocity is amazing. It sort of feels that youre doing any distinctive trick. Also, the contents are masterwork. You have done a fantastic job in this topic.

    1. Dejan Burić Avatar
      Dejan Burić

      Thank you very much for such a nice comment. I’m very glad that you found my post useful.

Leave a Reply