Doriți să învățați cum să creați un card cu efect de portofoliu? În acest nou tutorial vă vom arăta cum să o faceți Elementor.
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.
Citiți și: Cum să afișați text deasupra unei 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 și să plasăm în această coloană Widget secțiune internă. Widgetul Secțiunea internă este configurat implicit cu 2 coloane. Sub cele 2 coloane, să aruncăm widgetul Titlu cu titlul restaurant, Selectați H4 pentru eticheta HTML și Centru pentru aliniere.
În filă avansat din widgetul Titlu, Să intrăm 30 pentru Marja superioară
Să selectăm din nou Secțiunea Internă. În panou, să-l modificăm Înălțime pe Înălțime min și Inaltimea minima să setăm cursorul pe 380. Apoi, să ștergem coloana din dreapta sau din stânga a secțiunii Interne
Să-l scăpăm Widget imagine în Secțiunea Internă și introduceți o imagine din biblioteca noastră. hai sa alegem Întregul pentru Marimea imaginii et Centru pentru Aliniere.
NB: Dacă vrei să ai pagini complete ca ale noastre, te invităm să captezi paginile cu ajutorul extensiei Chrome GoFullPage dar poți folosi și alta.
Descoperiți și: Cum se creează o galerie de imagini cu Elementor
Apoi, în Tab Stil, Click pe PX de Lățime, să setăm glisorul la 260 și raze de frontieră pe 10
În continuare, să modificăm Box Shadow schimbând Blur la 40 și Diffuse la -10.
În fila Avansat, în secțiunea poziționare, Selectați absolut pentru Poziţie, Orientare orizontală pe stânga, décalage pe 0, L 'Orientare verticală pe Bas.
Să duplicăm widgetul nostru Imagine de două ori. Inevitabil, toate vor fi suprapuse. Să afișăm Navigatorul pentru a putea accesa celelalte widget-uri ascunse de primul.
Să înlocuim imaginea celui de-al doilea Widget și în fila acestuia avansat, să le modificăm marginile de jos et stânga prin intrare 30 pentru fiecare. Veți vedea acum o ușoară întârziere,
Faceți același lucru pentru al treilea Image Widget, dar aplicați marginile de 60 pentru marginile de jos și din stânga. Acum ar trebui să aveți o prezentare generală a tuturor celor 3 widget-uri de imagine.
Să selectăm widgetul nostru Secțiune internă, să mergem la fila acestuia avansat iar în secțiune CSS personalizat, copiați și inserați următorul fragment de cod:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Dacă nu aveți această secțiune, atunci nu aveți versiunea Pro, dacă doriți să continuați, trebuie să faceți upgrade la versiunea dvs.)
Acum, dacă treci cu mouse-ul peste harta noastră, vei avea o animație de zoom
Să selectăm primul nostru Image Widget (cel mai jos) și în fila acestuia avansat, hai sa intram fata-img pentru Clasele CSS.
Pentru al doilea Image Widget, să scriem mijlocul img pentru clasele CSS.
Pentru al treilea Image Widget, să scriem ultima-img pentru clasele CSS.
Vezi și: Cum se creează o galerie de imagini cu file cu Elementor
Trecând peste coloana noastră, acum vom vedea o animație magnifică a cuprins al Secției noastre interne.
Să ne afișăm pagina în modul tabletă Vom vedea că imaginile nu vor fi afișate corect.
Selectați primul widget Imagine, în fila Stil, să modificăm lățimea făcând clic pe PC și apoi introducând 150 ca lățime. Să facem același lucru cu celelalte 2 widget-uri Image.
Să selectăm Secțiunea noastră Internă, în secțiunea sa Conținut, hai să modificăm Inaltimea minima pe 225.
Să ne afișăm și pagina în modul Smartphone, a priori nu prezintă nicio problemă. Dar, dacă prezintă vreuna, să selectăm Secțiunea noastră Internă, în secțiunea ei Conținut, să modificăm Înălțimea Minimă.
Acum să ne duplicam coloana din mijloc de 2 ori, apoi să ștergem celelalte 2 coloane goale.
Să modificăm titlurile acestor coloane, apoi să schimbăm imaginile
Va trebui să aveți o secțiune magnifică din care iată rezultatele:
Iată, tocmai ai făcut această sarcină cu ușurință.
Obțineți Elementor Pro acum!
Concluzie
Iata ! Asta este pentru acest articol care vă arată cum să creați un card cu efect de portofoliu. 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.
...
