Cum să suprapuneți o imagine în WordPress

Dacă sunteți entuziasmat să vă faceți site-ul web remarcabil, vă veți strădui mereu pentru a-l înfrumuseța. Există milioane de moduri de a face site-ul tău o muză, iar una dintre ele va fi menționată în postarea noastră de astăzi: suprapunerea unei imagini .

Încă te întrebi ce este? Doar ia-o încet și lasă-ne să te scoatem!

Ce este o suprapunere?

După cum puteți vedea, am folosit o imagine cu text și suprapunere ca titlu; care a făcut o mare diferență față de scrierea unui titlu simplu de text. Arată mult mai elegant și mai atractiv în comparație cu cel normal, nu?

Mai important, suprapunerea pe imagine ajută la evidențierea textului, păstrând în același timp imaginea de fundal vizibilă. Puteți adăuga cu ușurință o imagine cu text și suprapunere pe postări/pagini de acest fel și să o utilizați în diferite scopuri. În această postare, vă vom arăta cum să o faceți în pași simpli.

Te-ai entuziasmat încă? Să începem!

Cum să suprapuneți o imagine în WordPress

Există două metode prin care puteți încerca să suprapuneți o imagine în WordPress: folosind blocul de acoperire al lui Gutenberg și folosind CSS. În timp ce utilizarea Gutenberg vă ajută să construiți o postare/pagină care include o imagine cu suprapunere chiar și dintr-o foaie goală, utilizarea CSS vă va ajuta să personalizați rapid imaginile pe o postare/pagină pre-construită.

Ambele aceste două metode sunt ușor de utilizat în anumite moduri și vă vom arăta cum să le folosiți una câte una.

Metoda 1: Folosirea blocului de acoperire al lui Gutenberg

Accesați editorul de pagină al lui Gutenberg.

Pasul 1: Inserați o imagine folosind blocul de acoperire.

Faceți clic pe Adăugare bloc și alegeți tipul de bloc ca Cover .

Apoi, alegeți o imagine de fundal pe care să o afișați pe acel bloc de copertă. Puteți încărca o imagine sau puteți alege o imagine din biblioteca dvs.

De asemenea, puteți schimba o imagine pe care ați adăugat-o anterior într-o imagine de copertă, dacă este necesar. Faceți clic pe imagine, alegeți Schimbați stilul sau tipul blocului și alegeți Coperta :

În cazul meu, voi alege acest beanie ca fundal și voi scrie și ceva text aleatoriu pe el.

De asemenea, pot seta lățimea imaginii mele în setările de mai jos. O voi alinia doar în centru.

Acum blocul meu de coperta este gata cu o imagine de fundal și text. În mod implicit, blocul Cover are deja o suprapunere de culoare neagră, așa că vom vedea cum îl putem edita în partea următoare:

Pasul 2: personalizați suprapunerea blocului de acoperire

În continuare, veți continua cu setările de bloc pentru a face o suprapunere.

Faceți clic pe bloc > faceți clic pe butonul Opțiuni (afișat ca un buton cu trei puncte) > alegeți Afișați mai multe setări .

Meniul de setări pentru blocuri ar trebui să fie acum gata în partea dreaptă a ecranului. Accesați secțiunea Suprapunere .

Vă oferă două opțiuni de culoare care sunt Solid și Gradient pentru a suprapune imaginea de copertă:

Vom încerca ambele variante. Mai întâi, să încercăm suprapunerea Solid color.

Suprapunere de culoare solidă

Acum poti:

• Alegeți o culoare din meniul sugerat;
• Alegeți o culoare personalizată. Puteți alege o culoare în paletă sau puteți introduce un cod de culoare. Culoarea personalizată se afișează ca mai jos.

Tocmai am ales o culoare roz dulce pentru suprapunerea mea. În plus, pot modifica și opacitatea (nivelul de transparență) suprapunerii:

Rata de opacitate de 30 până la 60% este o valoare adecvată. Dacă setați opacitatea sub sau peste rata sugerată, suprapunerea ar putea fi aproape invizibilă sau prea îndrăzneață pentru a vedea fundalul. Voi păstra rata de opacitate la 50% implicit.

Totul este pregătit aici! Așa puteți adăuga pur și simplu o suprapunere de culoare solidă imaginii de copertă.

Acum să trecem la opțiunea de culoare gradient.

Suprapunere de culoare gradient

O culoare gradient, așa cum sa menționat mai sus, este o schemă de cel puțin două culori alese. Sau pur și simplu spus, culoarea suprapunerii se va schimba, respectiv, treptat de la prima la a doua culoare aleasă (și așa mai departe).

Să vedem cum fac o suprapunere cu gradient pentru a o înțelege mai bine.

Mai întâi, am schimbat modul de culoare de la Solid la Gradient. De asemenea, am ales un set de culori gradient din meniul de sugestii. Așa arată:

După cum puteți vedea, suprapunerea constă din 3 puncte de control. Fiecare poartă o culoare solidă și puteți muta aceste puncte de control pentru a ajusta schema de culori a suprapunerii.

Aranjamentul implicit al culorilor la alegerea culorii gradient este echilibrat. Voi încerca să-l ajustez puțin și așa se schimbă:

O altă ajustare pe care o puteți face este tipul de schemă de culori. Puteți alege între tipul Linear și Radial . Cu tipul Linear , puteți alege și direcția suprapunerii.

Pentru a stăpâni această opțiune de culoare gradient, veți avea nevoie de un simț artistic mai bun și, de asemenea, veți învăța cum să amestecați și să potriviți culorile pentru a realiza cea mai bună combinație pentru suprapunere.

Metoda 2: Utilizarea CSS

Dacă doriți să adăugați o suprapunere la o imagine folosind Editorul clasic, este necesară utilizarea CSS. Trebuie să adăugați niște CSS. Accesați Aspect > Personalizare > CSS suplimentar .

Pentru suprapunerea în gradient

Adăugați acest cod pentru suprapunerea în gradient:

 .background-gradient {
    poziție: relativă;
}
.background-gradient::before {
    continut: '';
    fundal: liniar-gradient(135deg,#0693e3,#9b51e0);
    poziție: absolută;
    sus: 0;
    stânga: 0;
    jos: 0;
    dreapta: 0;
    indicele z: 1;
    opacitate: .5;
}

Pentru suprapunere solidă:

Adăugați acest cod pentru suprapunerea solidă:

 .background-opacity {
    poziție: relativă;
}
.background-opacity:înainte de {
    continut: '';
    poziție: absolută;
    sus: 0;
    stânga: 0;
    jos: 0;
    dreapta: 0;
    indicele z: 1;
    opacitate: .5;
    culoare de fundal: #000;
}

Notă: acest cod vă va ajuta să adăugați doar suprapunerea, nu textul de pe imagine.

Le puteți adăuga pe ambele dacă doriți să adăugați multe imagini cu diferite tipuri de suprapunere. Pentru a defini suprapunerea ca culoare solidă sau gradient , accesați editorul de text și adăugați o clasă la imaginea pe care doriți să o suprapuneți:

• Solid: <div class="background-opacity"> … </div>
• Gradient: <div class="background-gradient is-style-default"> … </div>

De exemplu:

Așa o fac!

Verdict

Adăugarea de suprapuneri la imagini vă ajută cu adevărat să vă decorați postările/paginile și să faceți o impresie mai bună asupra vizitatorilor. Merită să cercetați cum să faceți o suprapunere perfectă, așa că vă recomand cu căldură să vă apucați imediat de ea. De asemenea, vă puteți face site-ul web mai atractiv cu glisoare, banner pop-up, fundal video,... Sper că instrucțiunile mele sunt suficient de clare pentru dvs. și vă rugăm să nu ezitați să lăsați întrebări și comentarii mai jos, dacă este cazul. Pa!