Pokazaću ti kako ubaciti dugme u meni WP sajta u klasičnoj WordPress temi, pomoću CSS kodova.
Dugme u meniju sajta privlači veliku 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 u meniju i treba da vodi na najbitniju lending stranicu.
SADRŽAJ
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” sajta ili ubacivanje 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š ubaciti 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 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.
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 WP 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>
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.
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 kod iznad, kopiraj sa Ctrl+C na tastaturi i nalepi ga sa Ctrl+V na tvoj WP 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.
Ovde je 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 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 sam pokazao kako 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.