Kako dodati senke na WordPress blokove

Kako dodati senke na WordPress blokove pomoću CSS koda. Daću ti CSS kod za dodavanje senke na ovim WP blokovima:

Cover, Group, Columns, Row, Stack, Image, Paragraph, Button, Details i Table blok.

U suštini, to je samo jedan CSS kod za senku (shadow). Samo se dodaju CSS klase za svaki od tih blokova.

Izgled te senke možeš posle da podešavaš onako kako želiš, malim promenama u CSS kodu.

.SADRŽAJ

Kako dodati senke na WordPress blokove

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

U blok WP teme je posle ovog posta ubačena opcija za dodavanje senki. To sam pokazao u ovom videu.

CSS – Cascading Style Sheets – Kaskadni Listovi Stilova

Za ubacivanje CSS kodova u WP sajt ne treba da znaš programiranje i kodiranje. Sve je po sistemu Copy – Paste.

Treba “samo” da nađeš na internetu CSS kod koji ti treba, da ga kopiraš i da ga nalepiš u svoj WordPress sajt.

Jedan od izvora za nalaženje CSS kodova je i moj sajt.

Pomoću CSS kodova možeš da uradiš razne stvari na WP sajtu, koje nisu moguće u WP blok editoru (Gutenberg).

Na sajt možeš da ubaciš više CSS kodova.

Pre svega, predlažem ti da pogledaš blog post i video.

Ubacivanje CSS kodova u WordPress sajt

Dve bitne stvari za ubacivanje CSS koda

Dve bitne stvari vezane za ubacivanje CSS kodova.

1 CSS kodovi se različito ubacuju u klasične i blok teme
2 Dve vrste CSS kodova: bez CSS klase i sa CSS klasom

Ubacivanje CSS koda u klasične i blok teme

CSS kodovi se u klasične WordPress teme ubacuju preko opcije Appearance / Customize.

CSS kodovi se u blok WordPress teme ubacuju preko opcije Appearance / Editor. Klikni na sliku da je uvećaš.

CSS kodovi bez CSS klase i sa CSS klasom

Kada CSS kod služi za uređivanje samo jednog konkretnog elementa, onda nema CSS klasu.

Kako ubaciti dugme u meni WP sajta

Kada na sajt uneseš CSS kod bez CSS klase promena se automatski primenjuje na tom konkretnom elementu.

Kada CSS kod služi za uređivanje više elemenata, onda ima i CSS klasu. CSS klasa je “naziv” tog CSS koda.

Kada na sajt uneseš CSS kod sa CSS klasom, ne dešava se promena. Da bi se desila promena treba da uneseš CSS klasu u pojedinačni WP blok koji želiš da menjaš.

CSS klasa “aktivira” CSS kod unet na sajt. Tada se CSS kod koji je unet primenjuje samo na taj konkretan WP blok.

CSS kodovi za dodavanje senke na WP blokove su CSS kodovi sa CSS klasom. Unosom tih kodova na sajtu se neće ništa promeniti. Promena nastaje kad na pojedinačni blok dodaš CSS klasu.

CSS klasa aktivira CSS kod koji prikazuje senku samo na tom jednom bloku, na koji dodaš CSS klasu.

CSS kod za dodavanje senke na blokove

CSS kod za dodavanje senke na WordPress blokove

.group-shadow {
box-shadow: 2px 2px 12px 2px
#CECECE6B;
}

Selektuj ceo CSS kod iznad, kopiraj ga sa Ctrl + C na tastaturi i nalepi ga u tvoj sajt sa Ctrl + V.

CSS klasa za ovaj CSS kod je – group-shadow.

CSS klasu na blok dodaješ u desnoj koloni.
Settings / Advanced / ADDITIONAL CSS CLASS(ES)

Na slici vidiš kako se dodaje CSS klasa na WordPress blok.

1. Ubaci CSS kod na sajt
2. Ubaci WP blok na stranicu
3. Ukucaj CSS klasu na taj WP blok

Kako promeniti CSS kod za svaki WP blok

Ovaj CSS kod u 1. redu ima naziv WP bloka. U ovom slučaju to je group-shadow i odnosi se na Group blok.

.group-shadow {
box-shadow: 2px 2px 12px 2px
#CECECE6B;
}

To group-shadow je CSS klasa tog CSS koda, koju treba da ukucaš na taj WP blok. U ovom slučaju na Group blok.

Ubaci na sajt ovaj isti CSS kod 10 puta !

Zatim u svakoj kopiji promeni naziv bloka u CSS kodu.

1. group-shadow
2. cover-shadow
3. column-shadow
4. row-shadow
5. stack-shadow
6. image-shadow
7. text-shadow
8. button-shadow
9. details-shadow
10. table-shadow

Kad ubaciš na stranicu neki od tih WP blokova na koji želiš da dodaš senku (shadow – šedou) na taj pojedinačni WP blok dodaješ CSS klasu za odgovarajuću blok.

Ubaciš na stranicu sliku kroz Image blok. Na tu sliku dodaš CSS klasu image-shadow. I ta slika dobija senku.

Jedini izuzetak – CSS klasa i za Paragraph i za Heading blok je text-shadow jer su to dva bloka za unos teksta i naslova.

Ovo je tekst koji sam uneo kroz Paragraph blok. Dodao sam CSS klasu text-shadow i dobio sam senku oko teksta.

Kako promeniti izgled senke

CSS kod za dodavanje senke na WordPress blokove

.group-shadow {
box-shadow: 2px 2px 12px 2px
#CECECE6B;
}

U drugom redu box-shadow je izgled senke. Ima četiri elementa.

Prva 2px su za X osu. Koliko da senka ide desno od bloka. Ako želiš da senka ide levo ukucaš negativni broj –2px.

Druga 2px su za Y osu. Koliko da senka ide ispod bloka. ako želiš da senka ide iznad bloka ukucaš broj –2px.

12px je providnost. Ako staviš manji broj senka je tamnija.

Poslednje 2px je veličina senke. Za veću senku veći broj.

Na kraju je boja senke, kojoj sam dao i providnost #CECECE6B. Možeš da uneseš kod bilo koje boje. Praksa je da bude crna.

Kako napraviti više verzija senke

Ako želiš dve različite senke za bilo koji WP blok, onda dupliraj CSS kod i dodaj mu broj. Ovo je prvi CSS kod.

.group-shadow {
box-shadow: 2px 2px 12px 2px
#CECECE6B;
}

Sada za novu senku za Group blok dodaš ovaj CSS kod.

.group-shadow-1 {
box-shadow: 1px 1px 10px 1px
#CECECE6B;
}

Dakle, dodaš samo ovo -1 u naziv group-shadow i promeniš izgled senke onako kako želiš. Taj novi CSS kod ima novu CSS klasu – group-shadow-1

Onda na svaki Group blok dodaješ onu CSS klasu koju želiš od ove dve. Ili group-shadow ili group-shadow-1.

Možeš tako da praviš više verzija senke. Samo menjaj nazive CSS koda. group-shadow-1 pa group-shadow-2.

Za svaku verziju podesi različite parametre za senku.

Na svaki WP blok dodaješ verziju senke koju želiš, dodavanjem CSS klase group-shadow group-shadow-1 group-shadow-2 itd.

Konkretan primer

Na ovaj tekst sam dodao CSS klasu text-shadow sa parametrima box-shadow: 2px 2px 12px 2px

Na ovaj tekst sam dodao CSS klasu text-shadow-1 sa parametrima box-shadow: -2px -2px 6px 4px

Sa -2px -2px senka je levo gore 6px je tamnija 4px je jača.

box-shadow i drop-shadow

Postoje 2 tipa senke: box-shadow i drop-shadow. Sve ovo iznad su bili primeri za box-shadow senke.

U naslovu iznad je primer drop-shadow senke na tekstu. Ona se uglavnom dodaje na naslove. Ovo je CSS kod.

.text-shadow-2 { filter:drop-shadow(1px 1px 1px gray)
}

Drop-shadow se dodaje na PNG slike sa providnom pozadinom. Ovo je CSS kod drop-shadow senke za sliku.

Čuvanje CSS kodova

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

Bitno je 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

U ovom blog postu pokazao sam ti kako dodati senke na WordPress blokove pomoću CSS kodova.

To je samo jedan CSS kod za senku (shadow). Samo se dodaju posebne CSS klase za svaki od ovih blokova.

.group-shadow {
box-shadow: 2px 2px 12px 2px
#CECECE6B;
}

Izgled senke možeš da podesiš kako želiš promenama u CSS kodu. Možeš napraviti više verzija koda sa različitim senkama.

Preuzmi dokument sa CSS kodovima za WordPress sajt.

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

Preporučeni video

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

Kako ubaciti dugme u meni WP sajta

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

Ubacivanje CSS kodova u WordPress sajt

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

CSS – Cascading Style Sheets – Kaskadni Listovi Stilova

Za ubacivanje CSS kodova u WP sajt ne treba da znaš programiranje i kodiranje. Sve je sistem Copy – Paste.

Treba “samo” da nađeš na internetu CSS kod koji ti treba, da ga kopiraš i da ga nalepiš u svoj WP sajt.

Jedan od izvora za nalaženje CSS kodova je i moj sajt.

Evo kako se radi ubacivanje CSS kodova u WP sajt.

.SADRŽAJ

Ubacivanje CSS kodova u WordPress sajt za početnike

Pomoću CSS kodova možeš da uradiš razne stvari na WP sajtu, koje nisu moguće u WP blok editoru (Gutenberg).

Na sajt možeš da ubaciš više CSS kodova.

Klikni ispod i pogledaj video. Detaljno sam objasnio ubacivanje CSS kodova u WordPress sajt, za početnike, sa konkretnim primerima.

Primer CSS koda je opcija Tooltip za dodatni tekst

Stavi kursor miša na TooltipOvo je Tooltip. Može imati Link pa čak i sliku 
kao i uređivanje izgleda. da vidiš kako izgleda. Ako gledaš na telefonu onda klikni.

2 bitne stvari za ubacivanje CSS kodova

Dve bitne stvari vezane za ubacivanje CSS kodova u WordPress (WP) sajt.

1 CSS kodovi se različito ubacuju u klasične i blok teme
2 Dve vrste CSS kodova: bez CSS klase i sa CSS klasom

Ubacivanje CSS kodova u klasične WordPress teme

CSS kodovi se u klasične WordPress teme ubacuju preko opcije Appearance / Customize. Klikni na sliku i uvećaj.

Ubacivanje CSS kodova u blok WP teme

CSS kodovi se u blok WordPress teme ubacuju preko opcije Appearance / Editor. Klikni na sliku da je uvećaš.

CSS kodovi bez CSS klase

Kada CSS kod služi za uređivanje samo jednog konkretnog elementa, onda nema CSS klasu.

Kada na sajt uneseš CSS kod bez CSS klase promena se automatski primenjuje na tom konkretnom elementu.

Kako dodati senke na WordPress blokove

U videu na vrhu je primer uređivanja forme za komentar na dnu posta. Čim uneseš odgovarajući CSS kod na sajt promena se automatski primenjuje na toj formi.

Taj CSS kod nema CSS klasu jer se odnosi na konkretan element, a to je forma za komentar na dnu blog posta.

CSS kodovi sa CSS klasom

Kada CSS kod služi za uređivanje više elemenata, onda ima i CSS klasu. CSS klasa je “naziv” tog CSS koda.

Kada na sajt uneseš CSS kod sa CSS klasom, ne dešava se nikakva promena. Da bi se desila promena treba da uneseš CSS klasu u pojedinačni element koji želiš menjati.

CSS klasa “aktivira” CSS kod koji je unet na sajt. Tada se CSS kod koji je unet primenjuje samo na taj element.

Kako ubaciti dugme u meni WP sajta

Evo primera. Na sajt sam uneo CSS kod sa CSS klasom, koji pravi okvir oko bilo kog teksta. On se ne primenjuje automatski, jer bi onda svaki tekst imao okvir.

Na početku tog CSS koda je naziv text-border. To je CSS klasa tog konkretnog CSS koda za unos okvira oko teksta.

Kada želim okvir oko teksta onda tom konkretnom tekstu dodam CSS klasu text-border. I samo taj tekst ima okvir.

Ovo je tekst bez CSS klase i zato nema nikakav okvir.

Dodavanje CSS klase

CSS klasa se dodaje tako što na stranici koju edituješ klikneš na element koji želiš, da ga selektuješ. Zatim u desnoj traci otvoriš Advanced opciju i uneseš CSS klasu.

Na dnu piše da možeš da ubaciš i više CSS klasa za isti element. Samo treba da ih odvojiš razmakom (space na tastaturi).

Primer dodavanja dve CSS klase na isti element

Na sajt sam ubacio CSS kod koji pravi okvir oko teksta.
Taj CSS kod ima CSS klasu text-border.

Na sajt sam ubacio CSS kod za Typewriter Effect za tekst.
Taj CSS kod ima CSS klasu typewriter.

Slede PRIMERI istog teksta.

• Bez CSS klase.

Typewriter Effect

• Sa jednom CSS klasom: text-border

• Sa 2 CSS klase istovremeno: text-border typewriter

Editovanje CSS kodova

Bitna stvar koju treba da znaš. Kad na internetu nađeš CSS kod koji želiš i kada ga ubaciš u svoj WordPres sajt, onda možeš dodatno da edituješ CSS kod unet na sajt.

CSS kod za ubacivanje okvira oko teksta

.text-border {
border-style: solid;
border-width: 1px;
border-color: #A8B8CD;
padding: 15px;
border-radius: 0px;
background-color: #FFFFFF;
display: inline-block;
}

Ovaj CSS kod možeš da selektuješ, kopiraš i ubaciš
u svoj WP sajt. Onda možeš da ga edituješ kako želiš.

Može da se poveća debljina okvira. Gde piše border-width: 1px; selektuješ samo broj 1 i ukucaš broj 2 ili 3.

Može da se promeni boja okvira. Tamo gde piše border-color: #A8B8CD; selektuješ samo ovu šifru iza znaka # i ukucaš šifru boje koju želiš. Šifra za crnu boju je 000000.

Može se promeniti zaobljenost okvira. Gde piše border-radius: 0px; selektuješ samo nulu i ukucaš broj 5.

Može se promeniti pozadina teksta. Gde piše background-color: transparent; selektuješ reč transparent i ukucaš šifru boje koju želiš. Na primer #F7F8F9.

Dupliranje CSS kodova

Na WordPress sajtu možeš da imaš više različitih CSS kodova, za razne opcije koje želiš da postigneš.

Možeš da dupliraš CSS kod i da uneseš neke promene. Onda imaš dva CSS koda za isti element. Evo primera.

Gore imaš CSS kod za okvir teksta u kome je background-color: #FFFFFF; što znači da je pozadina teksta bela.

Možeš da dupliraš taj CSS kod, ostaviš sve opcije iste i promeniš pozadinu. Umesto #FFFFFF staviš drugu boju.

.text-border-1 {
border-style: solid;
border-width: 1px;
border-color: #A8B8CD;
padding: 15px;
border-radius: 0px;
background-color: #F3F8FF;
display: inline-block;
}

U tom dupliranom CSS kodu na početku umesto text-border staviš text-border-1. Tako dobijaš novu CSS klasu.

Č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

Ubacivanjem CSS kodova u WordPress sajt možeš postići razne opcije i efekte. Za to ne treba da znaš kodiranje.

Treba da nađeš CSS kod koji želiš, da ga kopiraš i nalepiš u svoj WP sajt. Ako treba, dodaš CSS klasu tog CSS koda na element na koji želiš da primeniš efekat tog koda.

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

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

Jedan od izvora za CSS kodove je i moj sajt. Vidi kategoriju blog postova – CSS kodovi za WordPress sajt.

Preporučeni video

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