Jeste li ikada poželjeli da znate kako prikazati tekst iznad slike pomoću Elementor ?

U ovom novom vodiču pokazat ćemo vam kako to učiniti.

Ako nemate pojma o čemu danas želimo razgovarati, pozivamo vas da pogledate sljedeći video:

Vratimo se onda zašto smo ovdje.

Da biste dovršili ovaj vodič, trebat će vam Pro verzija Elementora, jer ćemo koristiti prilagođeni CSS kod koji podržava samo ova verzijaElementor.

Otkrijte i naš vodič o: Kako napraviti galeriju slika pomoću Elementora

Kreirajmo novi odjeljak sa strukturom od 3 stupca, a zatim na ploči definirajmo Visina sur Minimalna visinaa onda Minimalna visina kliknimo na VH i postavite klizač na 100.

Odaberimo srednji stupac i na kartici Stil, u odjeljku pozadina kliknimo na klasična za Vrsta pozadine, zatim odaberite tamnu boju.

Stavimo u ovu kolonu Widget unutarnjeg odjeljka. Widget Internal Section je prema zadanim postavkama konfiguriran s 2 stupca, izbrišite jedan od njih. Konfigurirajmo ostalo na ploči mijenjajući njegovu Visina sur Minimalna visina i Minimalna visina postavimo kursor na 400.

Pročitajte također: Elementor: Kako zumirati karticu profila

Zatim, dalje Vertikalno poravnanje birajmo milje.

Zatim ispustite Widget naslova u unutarnji presjek unesite kao Naslovna fotografija, a na Alignment odaberite Odaberi Centar.

U kartici Stil izmijenimo boju naslova tako da bude vidljiva ako nije,

Ispustimo a Widget za uređivač teksta ispod Widget naslova. Zatim, u kartici Stil, na Alignment odaberite Centar. Promijenimo i boju teksta tako da bude vidljiv.

Vidi također: Elementor: Kako dodati razdjelnik za stvaranje odjeljka

Odaberimo srednji stupac i u svojoj kartici Stil, poništite boju pozadine i zatim učitajte sliku Položaj birajmo Centrirano Centrirano, ponoviti sur Bez ponavljanja, Pokriti sur Veličina.

U odjeljku granica izmijenimo sve granični radijusi od 12, U kutija sjena, postavite klizač na 0 za Vodoravan, Za 0 za okomito, do 40 na Blur, do -10 na emitiranju. Ispod svoje slike trebali biste vidjeti prekrasan efekt sjene.

na Preklapanje pozadine, Izaberi klasična za Vrsta pozadine i boja Izaberi jedan Crna boja, na Opacity, postavimo klizač na 0.55

U kartici napredan, uđimo 20 za sve marže.

Odaberimo naše Unutarnji dio i idite na njegovu karticu napredan u odjeljku Custom CSS kopirajte i zalijepite sljedeći isječak koda:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}

(Ako nemate ovaj odjeljak, onda nemate Pro verziju, ako želite nastaviti trebate nadograditi svoju verziju).

Odaberimo još jednom srednji stupac našeg odjeljka, na njegovoj kartici Stil, te u odjeljku Preklapanje pozadine, provjerite jesmo li na kartici NORMALNA, spustimo Neprozirnost à 0.

Zatim kliknite na karticu PREGLED, zatim uključi klasična za vrsta pozadine i boja, odaberite a tamne boje, ondaNeprozirnost sur 0.55, i za Trajanje prijelaza postavimo klizač na 0.5.

Evo konačnog rezultata naše manipulacije.

Duplicirajmo naš stupac 2 puta i izbrišite ostala 2 prazna stupca. Sve što preostaje je promijeniti pozadinsku sliku kao i sadržaj uređivači teksta za 2 nove kolone.

Pregledajte svoj rad na tabletu i pametnom telefonu da vidite kako izgleda. Zatim ga spremite ili ažurirajte.

Tako. Upravo ste prikazali tekst iznad slike s stranica Builder Elementor.

Nabavite Elementor Pro odmah!

Zaključak

Dakle ! To je to za ovaj članak koji vam pokazuje kako prikazati tekst iznad slike. Ako imate bilo kakvih nedoumica oko toga kako doći do tamo, javite nam unutar Komentari.

Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.

...