Ți-ai dorit vreodată să prezinți crearea unui card de produs cu Elementor ?
Acesta este ceea ce vă vom arăta în acest tutorial. Pentru a vă face o idee destul de precisă despre ceea ce vom vorbi astăzi, vă invităm să urmăriți următorul videoclip:
Acest tutorial este despre prezentarea produselor care sunt pantofi prin evidențierea dimensiunilor, culorilor și butonului de cumpărare al fiecăruia. Când treceți cu mouse-ul peste fiecare dintre cărți, vor apărea aceste informații. Iată un scurt rezumat a ceea ce vom face.
Pentru a urma acest tutorial, va invitam sa gasiti poze cu pantofi si sa aveti o versiune Pro a Elementor. Dacă nu îl aveți încă, faceți clic pe acest link pentru a-l obține.
Dar să revenim la ceea ce suntem aici.
Să creăm o pagină și să o modificăm cu Elementor.
În aceasta, să alegem o structură cu 3 coloane. Să o rezolvăm înălțime pe inaltime min , înălțimea minimă pe VH și setați cursorul la 100.
În fila Stil, alegeți culoarea de fundal #130640
În coloana din mijloc introduceți a Widget imagine selectând o imagine de pantof din biblioteca dvs.
Accesați fila Stil și, în proprietatea imaginii, setați lățimea la 80
Apoi trageți a Widget pentru titlu și introduceți titlul Pantofi NIKE - Acesta este un exemplu, ar putea fi o cu totul altă marcă -
Citiți și: Cum să vă optimizați aspectul site-ului web cu Elementor
Setați eticheta HTML la H3 și centrați alinierea
Accesați fila Stil și schimbați culoarea textului în culoarea albă
Schimbați și tipografia
Apoi trageți a Secțiunea interioară widget sub Widget pentru titlu pe care l-ai introdus mai sus.
În mod implicit, acest widget vă va oferi 2 coloane, ștergeți una dintre ele. In acest Secțiunea interioară widget, Introduceți a Widget pentru titlu.
Da-i ca titlu A tăia : și setați eticheta HTML la Deschidere.
În fila Stil, schimbați culoarea titlului, dimensiunea la 15 și Fat la 300
În fila Avansat, setați doar marja din dreapta la 5 și în proprietate poziționare selecta Inline (Automat).
Adăugați în aceeași secțiune interioară un widget Buton cu pentru Text 8 și spațierea pictogramelor pe 0.
Citiți și: Cum să parcurgeți o imagine lungă a unui portofoliu cu Elementor
În fila Stil, modificați culoarea textului și culoarea de fundal a butonului respectiv în Alb și Negru și în Marja internă introduceți 6-10-6-10 respectiv pentru Marjele interne sus-dreapta-jos -Stânga.
În fila Avansat, setați doar marginea din stânga la 5, iar în proprietatea Poziționare, selectați Inline (Auto).
Duplicați acest buton de 3 ori și modificați textul ultimelor 3 butoane la 9,10,11 - puteți face acest lucru și folosind literele S, M, L, XL, XXL-
Faceți clic pe Editați secțiunea și setați Alinierea orizontală la Centru
Apoi duplicați această secțiune Internă -Secțiunea interioară- și modificați Size by Color eliminați 3 butoane și pe cel care va rămâne ștergeți textul butonului.
În filă Conținut al Butonului, selectați pictograma Cerc din biblioteca de pictograme, faceți clic pe Inserare pentru a o adăuga în buton.
În fila Stil, dați dimensiunea 24 tipografiei și legați marginile interne și introduceți 0. În culoarea de fundal setați transparența la min și apoi puteți schimba culoarea textului în albastru, de exemplu.
Apoi duplicați acest buton de 3 ori și schimbați culorile celorlalte două în galben și roșu. Apoi faceți clic pe secțiunea interioară pentru a o edita și în fila Avansat setați marginile de sus și de jos la -5 și 10.
Acum vom adăuga un widget Button sub cel de-al doilea widget de secțiune interioară, introduceți ca text Cumpără acum și Alinierea la centru. În fila Stil, setați butonul la Alb și textul butonului la Negru, apoi setați toate razele marginii la 20.
Selectați coloana principală la care am lucrat și setați alinierea Vertical pe Milieu, în fila Stil, alegeți Tipul de fundal ca Degradat și ca tip selectați Radial apoi pe culoarea principală setați transparența și locația la 94. Pentru a doua culoare, setați locația la 77 iar raza marginilor peste 10.
În fila Avansat, setați marginile la 0-35-0-35 și marjele interioare la 50-20-50-20.
Apoi puteți ascunde panoul pentru a vedea cum arată munca dvs. Vei vedea că cardul tău este foarte frumos, dar îl vom aduce la viață prin animarea anumitor secțiuni. Și pentru asta vom anima Dimensiunea, Culoare și butonul de cumpărare.
Vezi și: Cum se schimbă antetul derulării paginii pe Elementor
Să secționeze mai întâi prima secțiune Internă care afișează dimensiunea produsului și pe fila Avansat, definiți Fade In Up ca efect de mișcare - Animație de intrare și întârziere de animație activată 300.
Să facem același lucru cu secțiunea internă care afișează culorile dar cu o întârziere de animație de 800. Pentru butonul de cumpărare, întârzierea acestuia va fi de 1000.
Acum vom atribui clasa ascunde-te mai întâi Secțiunea interioară și butonul Cumpărați. Selectați prima secțiune interioară, în fila Advanced și în proprietatea Advanced introduceți hide-first în câmpul CSS Classes. Faceți același lucru pentru cealaltă secțiune interioară și pentru butonul de cumpărare.
Prin urmare, vom adăuga cod CSS care va anima întreaga coloană. Copiați următorul cod:
selector {
inaltime: 400px;
afișare: flex;
}
/ * CSS pentru Afișare / Ascundere * /
selector .hide-first {
display: none;
}
selector: hover .hide-first {
display: block;
}
/ * Transformarea imaginii * /
selector img {
tranziție: ușurință .5s;
}
selector: hover img {
transformare: translație (-20px, -40px) rotire (-25deg) scară (1.4);
}
/ * Prezentare generală pentru mobil * /
@media (lățime maximă: 767 px) {
selector: hover img {
transformare: translație (-20px, 0px) rotire (-10deg) scară (1);
}
selector {
marjă: 50px 10px;
}
}
Selectați coloana pentru a o modifica și accesați fila Avansat și în câmpul CSS personalizat, lipiți acest cod.
NB: Trebuie să știți că această opțiune este disponibilă numai dacă aveți versiunea Pro aElementor.
Dacă este finalizat, harta dvs. se va anima la trecerea mouse-ului, în timp ce implicit ascunde dimensiunile, culorile și butonul de cumpărare.
În ceea ce privește explicația codului, partea de comentariu oferă o privire de ansamblu. Dar modificând valorile veți înțelege pentru ce este fiecare instrucțiune.
Vezi și: Cum să adăugați două butoane unul lângă altul în aceeași coloană cu Elementor
Dacă totul funcționează normal, duplicați această coloană de două ori și ștergeți celelalte coloane goale.
Tot ce va trebui să faceți este să înlocuiți imaginile și titlurile celorlalte blocuri și, în sfârșit, să vă previzualizați munca.
Tocmai ați creat o carte de produs frumoasă.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta este tot pentru acest tutorial care vă arată cum să faceți un card de produs cu Elementor. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, anunțați-ne în 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.
...
