Videćeš kako ubaciti dugme u meni WP sajta pomoću CSS kodova.
Dugme u meniju WP sajta privlači najveću pažnju posetioca sajta.
Pokazaću ti dva primera ubacivanja dugmeta pomoću CSS kodova, u meni WordPress sajta, u klasičnoj WordPress temi.
Jedno sa animacijom gore-dole i drugo 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.
Sadržaj posta
Za bolji pregled stisni na tasturi Ctrl i klikni na + (plus) 2 puta
Kako ubaciti dugme u meni WP sajta
Pokazaću ti kako da napraviš 2 atraktivna dugmeta u meniju WP sajta.
Jedno sa animacijom gore-dole i drugo sa hover effect animacijom.
Pogledaj video tutorijal kako ubaciti dugme u meni WordPress sajta.
Video traje 12 minuta i pokazao sam oba primera dugmeta u meniju.
Ubacivanje CSS kodova u klasične WP 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 WP teme. Klikni na sliku.
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
Video kako se ubacuju CSS kodovi u klasične i blok WP teme.
Svi blog postovi na ovu temu su u kategoriji – CSS kodovi za WP sajt
Dugme sa animacijom gore-dole
Idemo prvo na 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
Sada u meni WP sajta ubacujemo dugme 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 jednom 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.
Prihvati WordPress IZAZOV i dokaži da znaš da praviš sajt
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.
Pokazao sam ti dva primera dugmeta u meniju 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 dva dugmeta izmenama CSS koda, onako 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 34$ + WP tema 59$
- Pomoć 1 na 1 u izradi tvog WP sajta
- Video kurs Marketing sistem 250 tutorijala
- Zarada od svake prodaje 30$ + 10$ mesečno
Uključi se u Affiliate program Znanje i Zarada
Leave a Reply