Har du någonsin velat presentera skapa ett produktkort med Elementor ?
Detta är vad vi kommer att visa dig i den här handledningen. För att få en ganska exakt uppfattning om vad vi kommer att prata om idag, inbjuder vi dig att titta på följande video:
Den här handledningen handlar om att presentera produkter som är skor genom att markera deras storlekar, färger och köpknappen för varje. När du håller muspekaren över vart och ett av korten kommer denna information att visas. Här är en kort sammanfattning av vad vi ska göra.
För att följa denna handledning inbjuder vi dig att hitta bilder på skor och att ha en Pro-version av Elementor. Om du inte har det ännu, klicka på den här länken för att få det.
Men låt oss komma tillbaka till vad vi är här för.
Låt oss skapa en sida och ändra den med Elementor.
I den här, låt oss välja en struktur med 3 kolumner. Låt oss lösa det hauteur sur min höjd , minimihöjden på VH och ställ in markören på 100.
Välj bakgrundsfärgen på fliken Stil #130640
I mittenkolumnen infoga a Bildwidget genom att välja en skobild från ditt bibliotek.
Gå till fliken Stil och ställ in bredden till 80 i bildegenskapen
Dra sedan a Titelwidget och skriv in titeln Nike skor - Det här är ett exempel, det kan vara ett helt annat märke -
Läs också: Hur du optimerar din webbplatslayout med Elementor
Ställ in HTML-taggen på H3 och centrera justeringen
Gå till fliken Stil och ändra textfärgen till vit färg
Ändra typografin också
Dra sedan a Inre sektionswidget under Titelwidget som du infogade ovan.
Som standard kommer denna widget att erbjuda dig 2 kolumner, ta bort en av dem. I denna Inre sektionswidget, Infoga en Titelwidget.
Ge det som en titel Klipp: och ställ in HTML-taggen på Spänna.
På fliken Stil ändrar du titelfärg, storlek till 15 och fett till 300
På fliken Avancerat ställer du bara in högermarginalen till 5 och i egenskapen positionering välj Inline (automatisk).
Lägg till i samma inre sektion en knappwidget med för text 8 och ikonavståndet på 0.
Läs också: Hur man bläddrar igenom en lång bild av en portfölj med Elementor
På fliken Stil ändrar du textfärgen och bakgrundsfärgen på knappen respektive till svart och vitt och i den interna marginalen anger du 6-10-6-10 respektive för de interna övre-höger-bottenmarginalerna -Vänster.
På fliken Avancerat ställer du bara in den vänstra marginalen till 5, och i egenskapen Positionering väljer du Inline (Auto).
Duplicera denna knapp 3 gånger och ändra texten på de sista 3 knapparna till 9,10,11 - du kan också göra detta med bokstäverna S, M, L, XL, XXL-
Klicka på redigera avsnitt och ställ in Horisontell justering till Center
Duplicera sedan denna interna sektion -Inner sektion- och ändra storlek efter färg ta bort 3 knappar och radera knapptexten på den som finns kvar.
På fliken Innehåll på knappen, välj Cirkel-ikonen från ikonbiblioteket, klicka på Infoga för att lägga till den i knappen.
På fliken Stil, ge typografin storlek 24 och länka de interna marginalerna och skriv in 0. I bakgrundsfärgen ställer du in transparensen till min och sedan kan du ändra färgen på texten till exempelvis blå.
Duplicera sedan den här knappen 3 gånger och ändra färgerna på de andra två till gult och rött. Klicka sedan på den inre delen för att redigera den och på fliken Avancerat ställer du in övre och nedre marginalerna till -5 och 10.
Nu ska vi lägga till en Button-widget under den andra Inner Section-widgeten, skriv in som text Achetez underhållare och Inriktning mot mitten. På stilfliken ställer du in knappen på Vit och knapptexten på Svart och ställer sedan in alla ramradier till 20.
Välj huvudkolumnen vi arbetade med och ställ in justeringen Vertikal sur Miljö, på fliken Stil, välj Bakgrundstyp som Degradera och som Typ välj Radial ställ sedan in transparensen och platsen på huvudfärgen 94. För den andra färgen, ställ in platsen till 77 och kanternas radie över 10.
På fliken Avancerat ställer du in marginalerna till 0-35-0-35 och de inre marginalerna till 50-20-50-20.
Du kan sedan dölja panelen för att se hur ditt arbete ser ut. Du kommer att se att ditt kort är väldigt vackert, men vi kommer att väcka det till liv genom att animera vissa avsnitt. Och för det kommer vi att animera storleken, färgen och köpknappen.
Se även: Så här ändrar du sidhuvud på Elementor
Låt oss först avsnittet det första Interna avsnittet som visar storleken på produkten och på fliken Avancerat, definiera Fade In Up som Movement Effect - Entry Animation och animationsfördröjning på 300.
Låt oss göra samma sak med den interna sektionen som visar färgerna men med en animeringsfördröjning på 800. För köpknappen kommer dess fördröjning att vara 1000
Nu ska vi tilldela klassen gömma sig först Inre sektion och köpknapp. Välj den första inre sektionen, på fliken Avancerat och i egenskapen Avancerat anger du hide-first i fältet CSS Classes. Gör samma sak för den andra Inner Section och för köpknappen.
Vi kommer därför att lägga till CSS-kod som kommer att animera hela kolumnen. Kopiera följande kod:
väljare {
höjd: 400px;
display: flex;
}
/ * CSS för Visa / Dölj * /
selector .hide-first {
display: none;
}
väljare: hover .hide-first {
display: block;
}
/ * Bildtransformation * /
selector img {
övergång: lätthet .5s;
}
väljare: hover img {
transformera: översätta (-20px, -40px) rotera (-25 grader) skala (1.4);
}
/ * Mobilöversikt * /
@media (maxbredd: 767px) {
väljare: hover img {
transformera: översätta (-20px, 0px) rotera (-10 grader) skala (1);
}
väljare {
marginal: 50px 10px;
}
}
Välj kolumnen för att ändra den och gå till fliken Avancerat och klistra in den här koden i fältet Anpassad CSS.
OBS: Du bör veta att det här alternativet endast är tillgängligt om du har Pro-versionen avElementor.
Om det är gjort, kommer din karta att animeras när musen överskrids medan storleken, färgerna och köpknappen döljs som standard.
Angående förklaringen av koden ger kommentarsdelen en översikt. Men genom att ändra värdena kommer du att förstå vad varje instruktion är till för.
Se även: Hur man lägger till två knappar sida vid sida i samma kolumn med Elementor
Om allt fungerar normalt, duplicera denna kolumn två gånger och ta bort de andra tomma kolumnerna.
Allt du behöver göra är att ersätta bilderna och titlarna på de andra blocken och slutligen förhandsgranska ditt arbete.
Du har precis skapat ett vackert produktkort.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det var allt för den här handledningen som visar hur du gör ett produktkort med Elementor. Om du har några funderingar på hur du kommer dit, låt oss veta i commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
