Har du noen gang ønsket å presentere lage et produktkort med Elementor ?
Dette er hva vi vil vise deg i denne opplæringen. For å få en ganske presis ide om hva vi skal snakke om i dag, inviterer vi deg til å se følgende video:
Denne opplæringen handler om å presentere produkter som er sko ved å fremheve deres størrelser, farger og kjøpsknappen for hver. Når du holder musepekeren over hvert av kortene, vil denne informasjonen vises. Her er en kort oppsummering av hva vi skal gjøre.
For å følge denne opplæringen inviterer vi deg til å finne bilder av sko og å ha en Pro-versjon av Elementor. Hvis du ikke har det ennå, klikk på denne lenken for å få det.
Men la oss komme tilbake til det vi er her for.
La oss lage en side og endre den med Elementor.
I denne, la oss velge en struktur med 3 kolonner. La oss ordne det hauteur på min høyde , minimumshøyden på VH og sett markøren til 100.
I Stil-fanen velger du bakgrunnsfargen til #130640
Sett inn en i den midterste kolonnen Bilde-widget ved å velge et skobilde fra biblioteket ditt.
Gå til Style-fanen og i bildeegenskapen setter du bredden til 80
Dra deretter a Tittel-widget og skriv inn tittelen Nike sko - Dette er et eksempel, det kan være et helt annet merke -
Les også: Slik optimaliserer du nettstedoppsettet ditt med Elementor
Sett HTML-koden til H3 og sentrer justeringen
Gå til kategorien Stil og endre tekstfargen til hvit farge
Endre typografien også
Dra deretter a Inner Section widget under Tittel-widget som du satte inn ovenfor.
Som standard vil denne widgeten tilby deg 2 kolonner, slett en av dem. I dette Inner Section widget, Sett inn en Tittel-widget.
Gi det som en tittel Kutte opp : og sett HTML-koden til Span.
I Stil-fanen endrer du tittelfargen, størrelsen til 15 og fettet til 300
I kategorien Avansert setter du bare høyre marg til 5 og i egenskapen posisjonering velg Inline (automatisk).
Legg til i samme indre del en knapp-widget med for tekst 8 og ikonavstand på 0.
Les også: Hvordan bla gjennom et langt bilde av en portefølje med Elementor
I Stil-fanen endrer du henholdsvis tekstfargen og bakgrunnsfargen på knappen til svart og hvit, og i den interne margen skriver du inn henholdsvis 6-10-6-10 for interne topp-høyre-bunn-marger - venstre.
På Avansert-fanen setter du bare venstre marg til 5, og i egenskapen Posisjonering velger du Inline (Auto).
Dupliser denne knappen 3 ganger og endre teksten til de siste 3 knappene til 9,10,11 - du kan også gjøre dette ved å bruke bokstavene S, M, L, XL, XXL-
Klikk på rediger seksjon og sett Horisontal justering til senter
Dupliser deretter denne interne seksjonen -Inner seksjon- og modifiser Størrelse etter farge fjern 3 knapper og slett knappen tekst på den som blir igjen.
I fanen Innhold på knappen, velg Circle-ikonet fra ikonbiblioteket, klikk på Sett inn for å legge det til i knappen.
I Style-fanen, gi størrelse 24 til typografien og koble til de interne margene og skriv inn 0. I bakgrunnsfargen setter du gjennomsiktigheten til min og så kan du endre fargen på teksten til for eksempel blå.
Dupliser deretter denne knappen 3 ganger og endre fargene på de to andre til gul og rød. Klikk deretter på den indre delen for å redigere den, og på Avansert-fanen setter topp- og bunnmargene til -5 og 10.
Nå skal vi legge til en Button-widget under den andre Inner Section-widgeten, skriv inn som tekst Achetez vedlikeholder og Senterjustering. I Stil-fanen setter du knappen til Hvit og knappteksten til Svart, og setter deretter alle kantradiuser til 20.
Velg hovedkolonnen vi jobbet med og still innstillingen Vertikal på Milieu, i Stil-fanen, velg Bakgrunnstypen som Degradert og som Type velg Radial deretter på hovedfargen settes gjennomsiktigheten og plasseringen til 94. For den andre fargen, sett plasseringen til 77 og radiusen til kantene over 10.
På Avansert-fanen setter du margene til 0-35-0-35 og de indre margene til 50-20-50-20.
Du kan deretter skjule panelet for å se hvordan arbeidet ditt ser ut. Du vil se at kortet ditt er veldig pent, men vi skal bringe det til live ved å animere visse deler. Og for det skal vi animere størrelsen, fargen og kjøpsknappen.
Se også: Hvordan endre overskrift på siderulling på Elementor
La oss først se på den første interne delen som viser størrelsen på produktet og på Avansert-fanen definere Fade In Up som Movement Effect - Entry Animation og animasjonsforsinkelse på 300.
La oss gjøre det samme med den interne delen som viser fargene, men med en animasjonsforsinkelse på 800. For kjøpsknappen vil forsinkelsen være 1000
Nå skal vi tildele klassen gjemme seg først Innerseksjon og kjøpsknapp. Velg den første indre seksjonen, i Avansert-fanen og i Avansert-egenskapen skriv inn hide-first i feltet CSS-klasser. Gjør det samme for den andre indre delen og for kjøpsknappen.
Vi kommer derfor til å legge til CSS-kode som vil animere hele kolonnen. Kopier følgende kode:
velger {
høyde: 400px;
display: flex;
}
/ * CSS for Vis / Skjul * /
selector .hide-first {
display: none;
}
selector: hover .hide-first {
skjerm: blokk;
}
/ * Bildetransformasjon * /
selector img {
overgang: letthet .5s;
}
selector: hover img {
transform: translate (-20px, -40px) rotere (-25grader) skala (1.4);
}
/ * Mobiloversikt * /
@media (maks-bredde: 767px) {
selector: hover img {
transformere: oversette (-20px, 0px) rotere (-10grader) skala (1);
}
velger {
margin: 50px 10px;
}
}
Velg kolonnen for å endre den og gå til Avansert-fanen og lim inn denne koden i Custom CSS-feltet.
NB: Du bør vite at dette alternativet kun er tilgjengelig hvis du har Pro-versjonen avElementor.
Hvis det er gjort, vil kartet ditt animeres ved museover, mens det som standard skjuler størrelsene, fargene og kjøpsknappen.
Når det gjelder forklaring av koden, gir kommentardelen en oversikt. Men ved å endre verdiene vil du forstå hva hver instruksjon er for.
Se også: Slik legger du til to knapper side om side i samme kolonne med Elementor
Hvis alt fungerer normalt, dupliser denne kolonnen to ganger og slett de andre tomme kolonnene.
Alt du trenger å gjøre er å erstatte bildene og titlene til de andre blokkene og til slutt forhåndsvise arbeidet ditt.
Du har nettopp laget et vakkert produktkort.
Få Elementor Pro nå!
konklusjonen
Så! Det var alt for denne opplæringen som viser deg hvordan du lager et produktkort med Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed i commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
