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 to dugme postavi skroz desno na poslednjoj stranici u meniju. Ono treba da vodi na najbitniju lending ili prodajnu 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.

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.

CSS – Cascading Style Sheets – Kaskadni Listovi Stilova

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

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.

• Ubacivanje CSS kodova 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.

• Kako dodati senke na WordPress blokove

Pogledaj kategoriju blog postova – CSS kodovi za WP sajt

Dugme sa animacijom gore-dole

Ubacivanje dugmeta sa animacijom gore-dole.

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š ovaj kod.

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

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

Dugme sa hover effect animacijom

Ubacivanje dugmeta sa hover effect animacijom.

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.

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

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.

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.