Har du nogensinde ønsket at præsentere oprette et produktkort med Elementor ?
Dette er, hvad vi vil vise dig i denne tutorial. For at få en ret præcis idé om, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:
Denne vejledning handler om at præsentere produkter, der er sko ved at fremhæve deres størrelser, farver og købsknappen for hver. Når du holder musemarkøren over hvert af kortene, vises disse oplysninger. Her er en kort oversigt over, hvad vi vil gøre.
For at følge denne tutorial inviterer vi dig til at finde billeder af sko og at have en Pro-version af Elementor. Hvis du ikke har det endnu, så klik på dette link for at få det.
Men lad os vende tilbage til, hvad vi er her for.
Lad os oprette en side og ændre den med Elementor.
Lad os i denne vælge en struktur med 3 kolonner. Lad os ordne det hauteur ud af min højde , minimumshøjden på VH og sæt markøren til 100.
Vælg baggrundsfarven på fanen Stil #130640
Indsæt en i den midterste kolonne Billed-widget ved at vælge et skobillede fra dit bibliotek.
Gå til fanen Stil og indstil bredden til 80 i billedegenskaben
Træk derefter en Titel-widget og indtast titlen Nike sko - Dette er et eksempel, det kunne være et helt andet mærke -
Læs også: Sådan optimeres dit webstedslayout med Elementor
Indstil HTML-tagget til H3 og centrer justeringen
Gå til fanen Stil og skift tekstfarven til hvid farve
Skift også typografien
Træk derefter en Indre sektion widget under Titel-widget som du har indsat ovenfor.
Som standard vil denne widget tilbyde dig 2 kolonner, slet en af dem. Heri Indre sektion widget, Indsæt en Titel-widget.
Giv det som en titel Klip: og sæt HTML-tagget til Span.
På fanen Stil skal du ændre titelfarven, størrelse til 15 og fedt til 300
På fanen Avanceret skal du kun indstille højre margen til 5 og i egenskaben positionering vælg Inline (automatisk).
Tilføj i den samme indre sektion en knap-widget med for tekst 8 og ikonafstand på 0.
Læs også: Sådan ruller du gennem et langt billede af en portefølje med Elementor
På fanen Stil skal du ændre tekstfarven og baggrundsfarven på knappen til henholdsvis sort og hvid, og i den interne margen skal du indtaste henholdsvis 6-10-6-10 for de interne top-højre-bund-margener - venstre.
På fanen Avanceret skal du kun indstille venstre margen til 5, og i egenskaben Positionering skal du vælge Inline (Auto).
Dupliker denne knap 3 gange og skift teksten på de sidste 3 knapper til 9,10,11 - du kan også gøre dette ved at bruge bogstaverne S, M, L, XL, XXL-
Klik på rediger sektion, og indstil Vandret justering til Center
Dupliker derefter denne interne sektion -Indre sektion- og modificer størrelse efter farve, fjern 3 knapper og slet knapteksten på den, der bliver tilbage.
I fanen Indhold på knappen, vælg Cirkel-ikonet fra ikonbiblioteket, klik på Indsæt for at tilføje det til knappen.
På fanen Stil, giv størrelse 24 til typografien og tilknyt de interne marginer og indtast 0. I baggrundsfarven skal du indstille gennemsigtigheden til min, og så kan du ændre farven på teksten til f.eks. blå.
Dupliker derefter denne knap 3 gange og skift farverne på de to andre til gul og rød. Klik derefter på den indre sektion for at redigere den, og på fanen Avanceret sæt top- og bundmargenerne til -5 og 10.
Nu skal vi tilføje en knap-widget under den anden indre sektions-widget, indtast som tekst Achetez vedligeholdelse og centrering. Indstil knappen til Hvid og knapteksten til Sort på fanen Stil, og indstil derefter alle kantradier til 20.
Vælg den hovedkolonne, vi arbejdede på, og indstil justeringen Lodret ud af Milieu, på fanen Stil, vælg baggrundstypen som Forringet og som Type vælg Radial derefter på hovedfarven indstilles gennemsigtigheden og placeringen til 94. For den anden farve skal du indstille placeringen til 77 og grænsernes radius over 10.
På fanen Avanceret skal du indstille margenerne til 0-35-0-35 og de indre margener til 50-20-50-20.
Du kan derefter skjule panelet for at se, hvordan dit arbejde ser ud. Du vil se, at dit kort er meget smukt, men vi vil bringe det til live ved at animere visse sektioner. Og til det kommer vi til at animere størrelsen, farven og købsknappen.
Se også: Sådan ændrer du sidehoved på siderulning på Elementor
Lad os først sektion den første interne sektion, som viser størrelsen af produktet og på fanen Avanceret, definere Fade In Up som Movement Effect - Entry Animation og animationsforsinkelse på 300.
Lad os gøre det samme med den interne sektion, som viser farverne, men med en animationsforsinkelse på 800. For købsknappen vil dens forsinkelse være 1000
Nu skal vi tildele klassen skjul først Indvendig sektion og købsknap. Vælg den første indre sektion, på fanen Avanceret og i egenskaben Avanceret indtast hide-first i feltet CSS-klasser. Gør det samme for den anden indre sektion og for købsknappen.
Vi vil derfor tilføje CSS-kode, der vil animere hele kolonnen. Kopiér følgende kode:
vælger {
højde: 400px;
display: flex;
}
/ * CSS til Vis / Skjul * /
selector .hide-first {
display: none;
}
selector: hover .hide-first {
display: block;
}
/ * Billedtransformation * /
selector img {
overgang: lethed .5s;
}
selector: hover img {
transformere: oversætte (-20px, -40px) rotere (-25 grader) skala (1.4);
}
/ * Mobiloversigt * /
@media (maks. bredde: 767px) {
selector: hover img {
transformere: oversætte (-20px, 0px) rotere (-10 grader) skala (1);
}
vælger {
margen: 50px 10px;
}
}
Vælg kolonnen for at ændre den, og gå til fanen Avanceret, og indsæt denne kode i feltet Custom CSS.
NB: Du skal vide, at denne mulighed kun er tilgængelig, hvis du har Pro-versionen afElementor.
Hvis det er gjort, vil dit kort animere ved mouseover, mens det som standard skjuler størrelserne, farverne og købsknappen.
Vedrørende forklaringen af koden giver kommentardelen et overblik. Men ved at ændre værdierne vil du forstå, hvad hver instruktion er til.
Se også: Sådan tilføjes to knapper side om side i den samme kolonne med Elementor
Hvis alt fungerer normalt, dupliker denne kolonne to gange og slet de andre tomme kolonner.
Alt du skal gøre er at udskifte billederne og titlerne på de andre blokke og til sidst få vist dit arbejde.
Du har lige lavet et smukt produktkort.
Hent Elementor Pro nu!
Konklusion
Så! Det var det for denne tutorial, som viser dig, hvordan du laver et produktkort med Elementor. Hvis du har nogen bekymringer om, hvordan du kommer dertil, så lad os det vide i kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
