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

Daću ti CSS kodove za dodavanje senke na sledećim WordPress (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 posebne 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

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

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

Dve bitne stvari za ubacivanje CSS kodova na WP sajt

2 bitne stvari vezane za ubacivanje CSS kodova na 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 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 WordPress 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 WordPress blokove su CSS kodovi sa CSS klasom.

Samim 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

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

.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 samo promeni naziv bloka u tom CSS kodu.

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

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

Na primer, ubaciš na stranicu neku sliku kroz Image blok. I onda na tu sliku dodaš CSS klasu image-shadow. I samo ta slika dobija senku.

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

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

Kako promeniti izgled senke

Ovo je 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š 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. Tu možeš da uneseš kod bilo koje boje. Ali praksa je da senka 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.

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

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

.group-shadow-1 {
box-shadow: 0px 2px 12px 0px
#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.

Naravno, 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. I na svaki WP blok dodaješ verziju senke koju želiš, dodavanjem CSS klase koju želiš za taj blok. group-shadow ili group-shadow-1 ili group-shadow-2 itd.

Konkretan primer

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

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

Sa -2px i -2px senka je levo i gore, sa 6px je tamnija i sa 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 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.

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

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

U suštini, 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š, malim promenama u CSS kodu. Možeš da napraviš i više verzija koda sa različitim senkama.

Preuzmi dokument sa najvažnijim 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.