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.

Kako dodati senke na WordPress blokove

• Kako dodati senke na WP blokove

CSS kodovi služe za “ulepšavanje” sajta ili za 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 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 WP sajt

• Kako ubaciti CSS kodove na WP sajt

Dve bitne stvari za ubacivanje CSS kodova na WP sajt

2 bitne stvari vezane za ubacivanje CSS kodova na WP sajt.

Ubacivanje CSS kodova u klasične i blok WP teme

CSS kodovi se u klasične WordPress teme ubacuju preko opcije Appearance / Customize. Klikni na sliku da je uvećaš.

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 nikakva 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 koji je 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 WordPress blokove

CSS kod za dodavanje senke na WordPress blokove

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

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

Zatim u svakoj kopiji promeni naziv bloka u tom 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), onda na taj pojedinačni WP blok dodaješ CSS klasu za taj odgovarajuću blok.

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

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

Ovo je CSS kod za dodavanje senke na WordPress blokove.

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š negativni broj –2px.

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

Poslednje 2px je veličina senke. Za veću senku ide 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 dupliranjem CSS kodova

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

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

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

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

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

Drop-shadow se dodaje i na PNG slike sa transparentnom pozadinom. Ispod je CSS kod drop-shadow senke za sliku.

.image-shadow-1 { filter:drop-shadow(3px 1px 5px gray)
}

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

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

• Kako ubaciti dugme u meni sajta

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