Cum să adăugați ușor umbră de cutie în WordPress (4 moduri)

O umbră de casetă este una dintre cele mai ușoare modalități de a adăuga profunzime și accent elementelor de pe site-ul dvs. WordPress. Putem crea acest efect cu doar câteva linii de CSS.

Acestea fiind spuse, chiar dacă este simplu, unii cititori WPBeginner au cerut sfaturi despre cum să îl implementeze eficient, mai ales dacă nu se simt confortabil cu codarea.

În acest articol, vă vom arăta mai multe moduri de a adăuga ușor umbre de cutie în WordPress, pas cu pas. 

De ce să adăugați umbre de cutie în WordPress?

O umbră de casetă, cunoscută uneori și sub denumirea de umbră de cădere, este un efect vizual care dă impresia că ceva de pe ecran aruncă o umbră.

Avem tendința de a acorda mai multă atenție obiectelor care par mai apropiate de noi. Având acest lucru în vedere, mulți proprietari de site-uri web adaugă umbre de cutie conținutului lor cel mai important pentru a-l face să pară că plutește deasupra paginii.

De exemplu, dacă adăugați o umbră mare la un buton de apel la acțiune, acesta va părea fizic mai aproape de vizitator, ceea ce le atrage atenția.

Acestea fiind spuse, să vedem cum puteți adăuga umbre de casetă pe blogul dvs. WordPress sau pe site. Pur și simplu folosiți linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați.

• Metoda 1. Adăugați o umbră de casetă folosind cod (Mai mult control)
• Metoda 2. Adăugați o umbră de casetă folosind un plugin gratuit
• Metoda 3. Adăugați o umbră exterioară folosind un Page Builder (Ușor)
• Metoda 4. Adăugați o umbră exterioară folosind CSS Hero (Avansat)
• Aflați mai multe modalități de a adăuga designuri unice pe site-ul dvs. WordPress

Metoda 1. Adăugați o umbră de casetă folosind cod (Mai mult control)

Dacă adăugați un efect de umbră la fiecare bloc WordPress, acesta poate face ca site-ul dvs. să pară dezordonat și confuz. Având în vedere acest lucru, ar trebui să adăugați o umbră de casetă doar elementelor cele mai importante ale paginii.

Ar trebui, de asemenea, să păstrați umbrele la cutie consistente pe întregul site. Cea mai bună modalitate de a face acest lucru este prin definirea stilului în CSS folosind WPCode.

WPCode este cel mai bun plugin pentru fragmente de cod utilizat de peste 1 milion de site-uri WordPress. Facilitează adăugarea de cod personalizat în WordPress fără a fi nevoie să editați fișierul functions.php.

Cu WPCode, chiar și începătorii pot edita codul site-ului lor web fără a risca greșeli și greșeli de scriere care pot cauza multe erori comune WordPress.

Primul lucru pe care trebuie să-l faci este să instalezi și să activezi pluginul gratuit WPCode. Pentru mai multe detalii, consultă ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, accesați Fragmente de cod » Adaugă fragment.

Aici veți vedea toate fragmentele WPCode gata făcute pe care le puteți adăuga pe site-ul dvs. Acestea includ un fragment care vă permite să dezactivați complet comentariile, să încărcați tipuri de fișiere pe care WordPress nu le suportă în mod obișnuit, să dezactivați paginile de atașament și multe altele.

Pur și simplu plasați cursorul mouse-ului peste „Adăugați codul dvs. personalizat (Snippet nou)” și apoi faceți clic pe „+ Adăugați snippet personalizat” atunci când apare.

Apoi, trebuie să alegeți tipul de cod din lista de opțiuni care apar pe ecran.

Pentru acest tutorial, va trebui să adăugați CSS personalizat în WordPress, așa că selectați „CSS Snippet” ca tip de cod.

Acum, veți fi direcționat către pagina Creare Snippet Personalizat.

Pentru a începe, introduceți un titlu pentru fragmentul de cod personalizat. Acesta poate fi orice vă ajută să identificați fragmentul în tabloul de bord WordPress.

Apoi, în caseta „Previzualizare cod”, copiați și lipiți următorul fragment de cod:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

În fragmentul de cod de mai sus, este posibil să fie necesar să înlocuiți valorile px în funcție de tipul de umbră pe care doriți să o creați.

Pentru a vă ajuta, iată ce înseamnă diferitele valori px, de la stânga la dreapta:

• Decalaj orizontal. Când setați o valoare pozitivă, umbra este împinsă spre stânga. Dacă introduceți o valoare negativă precum -5px, atunci umbra va fi împinsă spre dreapta. Dacă nu doriți să adăugați un decalaj orizontal, atunci puteți folosi 0px în schimb.
• Decalaj vertical. Dacă utilizați o valoare pozitivă, umbra va fi împinsă în jos. Dacă introduceți o valoare negativă, umbra va fi împinsă în sus. Dacă nu doriți să decalajați umbra pe verticală, introduceți doar 0px.
• Raza de estompare. Aceasta estompează umbra, astfel încât să nu aibă margini aspre. Cu cât valoarea este mai mare, cu atât efectul de estompare este mai mare. Dacă preferați să folosiți margini clare, atunci introduceți 0px.
• Raza de răspândire. Cu cât valoarea este mai mare, cu atât răspândirea umbrei este mai mare. Această valoare este opțională, așa că săriți peste ea dacă nu doriți să afișați o răspândire.
• Culoare. Deși griul este cea mai comună culoare pentru umbre, puteți folosi orice culoare doriți tastând un cod hexazecimal. Dacă nu sunteți sigur ce cod să folosiți, atunci puteți explora diferite culori folosind o resursă precum HTML Color Codes.

Când sunteți mulțumit de fragment, derulați la secțiunea „Insertion”. WPCode poate adăuga codul dvs. în diferite locații, cum ar fi după fiecare postare, doar pe frontend sau doar pe administrator.

Pentru a utiliza codul CSS personalizat pe întregul site web WordPress, faceți clic pe „Inserare automată” dacă nu este deja selectat. Apoi, deschideți meniul derulant „Locație” și alegeți „Antetul site-ului”.

După aceea, sunteți gata să derulați în partea de sus a ecranului și să faceți clic pe comutatorul „Inactive”, astfel încât acesta să devină „Active”.

În cele din urmă, faceți clic pe „Salvează fragmentul” pentru a face fragmentul CSS live.

Acum, poți adăuga clasa CSS personalizată oricărui bloc.

În editorul de blocuri WordPress, selectați pur și simplu blocul unde doriți să adăugați o umbră de casetă. Apoi, în meniul din dreapta, faceți clic pentru a extinde secțiunea „Avansat”.

Aici veți vedea câmpuri unde puteți adăuga diferite clase.

În „Clase CSS suplimentare”, introduceți shadow-effect.

Când sunteți gata să publicați umbra casetei, faceți clic pe butonul „Publicare” sau „Actualizare”.

Acum, dacă vizitați site-ul dvs., veți vedea umbra de casetă live.

Pe lângă adăugarea unei umbre de cutie, puteți folosi și WPCode pentru a schimba culoarea textului sau chiar pentru a personaliza stilul blockquote-urilor temei WordPress cu CSS.

Metoda 2. Adăugați o umbră de casetă folosind un plugin gratuit

Dacă nu vă simțiți confortabil să scrieți cod, atunci ați putea prefera să creați umbre folosind Drop Shadow Box. Acest plugin gratuit vă permite să adăugați umbre de casetă la orice bloc folosind editorul de pagini și postări WordPress încorporat.

Mai întâi, va trebui să instalați și să activați pluginul. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Nu există setări de configurat, deci puteți începe să utilizați acest plugin imediat.

Pentru a adăuga o umbră exterioară, pur și simplu faceți clic pe pictograma „+” și începeți să tastați „Drop Shadow Box”. Când apare blocul corect, faceți clic pe el pentru a-l adăuga la pagină sau la postare.

Acest lucru adaugă umbra ca o casetă goală, deci următorul pas este adăugarea de conținut.

Pentru a face acest lucru, faceți clic pe „+” din interiorul blocului Drop Shadow Box.

Apoi, pur și simplu adăugați blocul pe care doriți să îl utilizați și configurați-l ca de obicei.

De exemplu, în imaginea următoare am adăugat un bloc de imagini și am selectat o poză din biblioteca media WordPress.

Cu aceasta făcută, faceți clic pentru a selecta blocul Drop Shadow Box. În meniul din dreapta, veți vedea toate setările pe care le puteți utiliza pentru a stiliza acest bloc.

WordPress setează lățimea umbrei automat, dar o puteți modifica deschizând meniul derulant „Lățime” și apoi alegând fie „Pixeli”, fie „%”.

Puteți apoi să redimensionați folosind setările care apar.

Pluginul Drop Box Shadow vine cu câteva efecte diferite, cum ar fi margini curbate și un efect „Perspectivă” atrăgător.

Pentru a previzualiza diferitele efecte, pur și simplu deschideți meniul derulant „Efect” și alegeți din listă. Previzualizarea se va actualiza automat, astfel încât să puteți încerca diferite stiluri pentru a vedea ce preferați.

Puteți schimba, de asemenea, dacă plugin-ul afișează umbra în interiorul casetei, în afara casetei sau ambele, utilizând comutatoarele „Umbră interioară” și „Umbră exterioară”.

După aceea, puteți schimba culoarea casetei și a chenarului folosind setările de sub antetul „Culori”.

Doar fiți conștient că „Fundal” se referă la interiorul Casetei de Umbră, în timp ce „Margine” apare în afara blocului.

Dacă doriți să creați o cutie de umbră mai moale și curbată, atunci puteți activa comutatorul „Colțuri rotunjite”. În final, puteți modifica alinierea și spațierea interioară, similar cu modul în care personalizați alte blocuri în WordPress.

Pentru a crea mai multe umbre de casetă, urmați același proces descris mai sus.

Când sunteți mulțumit de aspectul paginii, pur și simplu faceți clic pe „Actualizare” sau „Publicare” pentru a face vizibile toate umbrele noi ale casetei.

Metoda 3. Adăugați o umbră de casetă folosind un Page Builder (Ușor)

Dacă doriți să adăugați umbre de casetă la paginile de destinație, paginile de pornire personalizate sau la orice parte a temei dvs. WordPress, atunci vă recomandăm să utilizați un plugin de creare de pagini.

SeedProd este cel mai bun constructor de pagini drag-and-drop pentru WordPress. Vă permite să creați pagini de destinație personalizate și chiar să creați o temă WordPress personalizată fără a scrie o singură linie de cod.

De asemenea, vă permite să adăugați umbre de casetă oricărui bloc folosind editorul său avansat de tip drag-and-drop.

Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, accesați SeedProd » Paginile de destinație în tabloul de bord WordPress.

SeedProd vine cu peste 300 de șabloane proiectate profesional, care sunt grupate pe categorii. În partea de sus, veți vedea categorii care vă permit să creați pagini frumoase de tip „În curând”, să activați modul de întreținere, să creați o pagină de conectare personalizată pentru WordPress și multe altele.

Toate șabloanele SeedProd sunt ușor de personalizat, astfel încât să puteți folosi orice design doriți.

Când găsiți un șablon pe care doriți să îl utilizați, pur și simplu treceți mouse-ul peste el și faceți clic pe pictograma bifă.

Acum puteți introduce un nume pentru pagina dvs. de destinație în câmpul „Nume pagină”. SeedProd va crea automat un „URL pagină” folosind numele paginii.

Este inteligent să includeți cuvinte cheie relevante în URL-ul dvs. ori de câte ori este posibil, deoarece acest lucru ajută motoarele de căutare să înțeleagă despre ce este vorba pe pagină. Acest lucru va îmbunătăți adesea SEO-ul dvs. WordPress.

Pentru a schimba URL-ul generat automat al paginii, pur și simplu tastați în câmpul „URL pagină”.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „Salvează și începe editarea paginii”. Aceasta va încărca interfața de construire a paginilor SeedProd.

Acest constructor simplu de tip drag-and-drop afișează o previzualizare live a designului paginii dvs. în dreapta. În stânga se află un meniu care arată toate blocurile și secțiunile diferite pe care le puteți adăuga la pagină.

Când găsiți un bloc pe care doriți să îl adăugați, pur și simplu trageți-l și plasați-l pe șablonul dvs.

Pentru a personaliza un bloc, continuați și faceți clic pentru a selecta acel bloc în editorul SeedProd. Meniul din stânga va afișa acum toate setările pe care le puteți utiliza pentru a personaliza blocul.

De exemplu, dacă faceți clic pe un bloc Titlu, puteți introduce propriul text sau schimba culoarea textului și dimensiunea fontului.

Pe măsură ce construiți pagina, puteți muta blocurile în aspectul dvs. prin glisare și fixare. Pentru instrucțiuni mai detaliate, consultați ghidul nostru despre cum să creați o pagină de destinație cu WordPress.

Pentru a crea o umbră de casetă, faceți clic pentru a selecta orice bloc din editorul de pagini SeedProd. Setările din meniul din stânga pot varia între blocuri, dar de obicei va trebui să faceți clic pe o filă „Avansat”.

Aici, căutați un meniu derulant „Shadow” sub secțiunea „Styles”. Pur și simplu deschideți acest meniu derulant și alegeți un stil de umbră, cum ar fi Hairline, Medium sau 2X Large.

Previzualizarea se va actualiza automat, astfel încât puteți încerca diferite stiluri pentru a vedea ce arată cel mai bine în designul paginii dumneavoastră.

Dacă nu doriți să utilizați niciunul dintre stilurile gata făcute, faceți clic pe „Custom”.

Aceasta adaugă noi setări unde poți schimba culoarea, estomparea, extinderea și poziția umbrei personalizate.

După ce ați terminat, puteți continua să lucrați la pagină adăugând mai multe blocuri și umbre de casetă.

Când sunteți mulțumit de aspectul paginii, faceți clic pe butonul „Salvare” și apoi alegeți „Publicare” pentru a o face activă.

Metoda 4. Adăugați o umbră de casetă folosind CSS Hero (Avansat)

Dacă nu vă simțiți confortabil să lucrați cu cod, dar doriți totuși să creați umbre de casetă avansate, atunci puteți încerca CSS Hero. Acest plugin premium vă permite să ajustați fin fiecare parte a temei WordPress fără a fi nevoie să scrieți o singură linie de cod.

CSS Hero îți permite să creezi o umbră unică pentru fiecare bloc, deci este o alegere excelentă dacă vrei să creezi o mulțime de efecte de umbră diferite. Poți afla mai multe despre plugin în recenzia noastră CSS Hero.

Mai întâi, trebuie să instalați și să activați pluginul CSS Hero. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, veți vedea un buton „Continuare la activarea produsului” în partea de sus a ecranului. Continuați și faceți clic pe acest buton.

Acest lucru vă va duce pe site-ul CSS Hero, unde vă puteți conecta la contul dvs. și puteți obține o cheie de licență. Pur și simplu urmați instrucțiunile de pe ecran și veți fi redirecționat înapoi pe site-ul dvs. în câteva clicuri.

Apoi, faceți clic pe textul „CSS Hero” din bara de instrumente de administrare WordPress.

Aceasta va deschide editorul CSS Hero.

În mod implicit, editorul CSS Hero are o previzualizare WYSIWYG a site-ului dvs. web și un panou stâng unde puteți edita fiecare element al designului dvs. web.

Dacă constatați că nu sunteți pe pagina unde doriți să adăugați umbra de casetă, puteți comuta de la modul „Edit” la modul „Navigate”.

Acest lucru vă permite să interacționați cu meniurile de navigare, linkurile și alte conținuturi ca de obicei.

Acum puteți naviga la pagina sau postarea unde doriți să adăugați umbra.

De îndată ce ajungeți la acea pagină, continuați și comutați din nou la modul „Editare”.

După ce ați terminat, faceți clic pe paragraful, imaginea, butonul sau orice alt conținut unde doriți să adăugați o umbră exterioară.

În panoul din stânga, faceți clic pe „Extra”.

Acum puteți continua și face clic pe „Creare umbră”.

Aceasta va afișa toate setările pe care le puteți utiliza pentru a crea o umbră de casetă.

Pentru a începe, puteți schimba dacă umbra apare în interiorul sau în afara blocului folosind setările „Poziție umbră”.

Aici, am selectat „Exterior” pentru a face umbra să apară în afara imaginii în sine.

După ce ați luat această decizie, puteți ajusta orientarea umbrei folosind punctul mic din caseta „Orientare”.

Pur și simplu trageți și plasați punctul într-o nouă poziție pentru a-l vedea mișcându-se în previzualizarea live.

Când sunteți mulțumit de poziția umbrei, puteți schimba culoarea, estomparea și extinderea acesteia.

CSS Hero va afișa aceste modificări imediat, astfel încât să puteți încerca diferite setări pentru a vedea ce arată cel mai bine.

Pentru a adăuga o umbră de cutie altor blocuri, urmați același proces descris mai sus.

Când ești mulțumit de cum arată pagina, apasă pe „Salvează” pentru a face modificările publice.

Aflați mai multe modalități de a adăuga designuri unice pe site-ul dvs. WordPress

Metodele de mai sus oferă o bază excelentă pentru adăugarea umbrelor de casetă în WordPress. Dar ce se întâmplă dacă doriți să obțineți efecte și mai unice și creative?

În articolele următoare, veți găsi ghiduri utile despre adăugarea diverselor elemente de design pe site-ul dvs.:

• Cum să adăugați efecte de hover la imagini în WordPress – Acest ghid explorează diferite efecte de hover pe care le puteți crea pentru imaginile dvs., făcând site-ul dvs. mai captivant și interactiv pentru vizitatori.
• Cum să adăugați cu ușurință animații CSS în WordPress – Animațiile, împreună cu umbrele de cutie, pot crea o experiență de utilizare dinamică și atrăgătoare vizual, captând atenția vizitatorilor dumneavoastră și menținându-i implicați.
• Cum să adăugați un efect parallax la orice temă WordPress – Prin încorporarea efectelor parallax, puteți spori iluzia de profunzime și puteți crea un site web mai captivant.
• Cum să creezi un separator de forme personalizat în WordPress – Acest articol vă arată cum să creați forme unice pentru a separa vizual secțiunile conținutului dvs.
• Cum să creezi ușor un slider responsive în WordPress – Acest ghid te învață cum să creezi slidere pentru a-ți prezenta conținutul într-un mod atractiv și care economisește spațiu.
• Cum să adăugați un fundal animat în WordPress – Adăugarea de fundaluri animate poate crea o experiență de utilizare unică și interesantă din punct de vedere vizual.

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați o umbră de cutie în WordPress. De asemenea, ați putea dori să învățați cum să eliminați CSS-ul neutilizat în WordPress și cum să optimizați livrarea CSS-ului WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.