Ți-ai dorit vreodată să știi cum să afișezi textul deasupra unei imagini cu? Elementor ?
În acest nou tutorial, vă vom arăta cum să o faceți.
Dacă nu aveți idee despre ce vrem să vorbim astăzi, vă invităm să vizionați următorul videoclip:
Apoi să revenim la motivul pentru care suntem aici.
Pentru a finaliza acest tutorial, veți avea nevoie versiunea Pro a Elementor, deoarece vom folosi cod CSS personalizat, care este acceptat numai de această versiune aElementor.
Descoperiți și ghidul nostru pe: Cum se creează o galerie de imagini cu Elementor
Să creăm o nouă secțiune cu o structură de 3 coloane, apoi în panou, să definim Înălțime pe Înălțime minşi apoi Inaltimea minima hai să facem clic VH și setați glisorul la 100.
Să selectăm coloana din mijloc, iar în filă Stil, în secțiune fundal hai să facem clic clasic pentru Tip de fundal, apoi selectați o culoare închisă.
Să punem în această coloană Widget secțiune internă. Widgetul Secțiunea internă este configurat implicit cu 2 coloane, să ștergem una dintre ele. Să configuram restul în panou modificându-i Înălțime pe Înălțime min și Inaltimea minima să setăm cursorul pe 400.
Citiți și: Elementor: Cum să măriți un card de profil
Apoi Aliniere verticală hai sa alegem Milieu.
Apoi aruncați Widget pentru titlu în sectiunea interioara să introducem ca fotografie de titlu, iar pe Aliniere, să alegem Centru.
În filă Stil haideți să modificăm culoarea titlului astfel încât să fie vizibil dacă nu este,
Să renunțăm la un Widget Editor de text sub Widget pentru titlu. Apoi, în filă Stil, pe Aliniere alege Centru. Să schimbăm și culoarea textului, astfel încât să fie vizibil.
Vezi si: Elementor: Cum să adăugați un divizor pentru a crea o secțiune
Să selectăm coloana din mijloc iar în fila sa Stil, resetați culoarea de fundal și încărcați o imagine, apoi Poziţie hai sa alegem Centrat Centrat, repeta pe Non-repetă, Acoperi pe Dimensiune.
În secțiunea frontieră hai sa modificam totul razele de frontieră din 12. În umbra cutie, setați glisorul la 0 pentru Orizontală, A 0 pentru Vertical, to 40 pe Blur, la -10 la difuzare. Ar trebui să vedeți un efect de umbră frumos sub imaginea dvs.
pe Suprapunere de fundal, Selectați clasic pentru Tip de fundal și culoare Alege una culoare neagră, pe Opacitate, să setăm glisorul la 0.55
În filă avansat, hai sa intram 20 pentru toate Marginile.
Să ne selectăm Sectiunea interna și accesați fila acestuia avansat în secțiunea CSS personalizat, copiați și inserați următorul fragment de cod:
/*Afficher ou masquer un contenu au survol*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
Să selectăm din nou coloana din mijloc a secțiunii noastre, în fila sa Stil, iar în secțiunea Suprapunere de fundal, verificați dacă suntem pe filă NORMAL, hai să coborâm Opacitate à 0.
Apoi faceți clic pe filă PREZENTARE GENERALĂ, apoi pe clasic pentru tipul de fundal și culoare, alege o culoare inchisa, apoiOpacitate pe 0.55Și Durata tranziției să setăm glisorul la 0.5.
Iată rezultatul final al manipulării noastre.
Să ne duplicam coloana de 2 ori și să ștergem celelalte 2 coloane goale. Tot ce rămâne este să schimbăm imaginea de fundal, precum și cuprins editori de text pentru cele 2 noi coloane.
Previzualizează-ți munca pe tabletă și smartphone pentru a vedea cum arată. Apoi salvează-l sau actualizează-l.
Asa de. Tocmai ați afișat un text deasupra unei imagini cu Page Builder Elementor.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta este pentru acest articol care vă arată cum să afișați text deasupra unei imagini. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
Multumesc, simplu si eficient