Sådan skaber du en parallax-effekt i Elementor | 3 måder

Parallax-effekten i Elementor er en designfunktion, der får baggrunden til at bevæge sig med en anden hastighed end forgrundsindholdet, mens der scrolles. Det skaber en fornemmelse af dybde og bevægelse på websiden.

For at skabe en parallax-effekt i Elementor skal du åbne den side, hvor du vil have effekten, og vælge elementet. Gå til Stil > Baggrundog tilføj dit billede. Gå derefter over til Avanceret > Bevægelseseffekter og tænd for Rulleeffekter eller museffekt. Derfra kan du justere rulleindstillingerne, hastigheden og tilpasse efter dine behov.

I denne blog viser jeg 3 forskellige måder at tilføje parallax-effekt på dit Elementor-site. 

1. Parallax-effekter til webelementer
2. Parallax-effekter til baggrunden.
3. Parallax-effekt med avanceret tilpasning

Så lad os komme i gang.

Sådan skaber du en parallax-effekt med Elementor | 3 måder

Der er to hovedmåder at tilføje parallax på i Elementor. Den første er ved at anvende parallaxeffekter på webelementer, og den anden er ved at bruge parallaxeffekter på baggrundssektioner. 

Begge muligheder er kun tilgængelige i Elementor Pro, så du skal bruge Pro-versionen for at bruge dem.

Her kan du se, hvordan du kan skabe en parallax-effekt med Elementor trin for trin.

1. Skab parallax-effekt på et webelement

Parallaxeffekt på et webelement er, når et afsnit, en kolonne eller en widget bevæger sig anderledes end resten af siden, hvilket skaber dybde og bevægelse. Da det er en professionel funktion i Elementor, bruger vi Elementor Pro her.

Så lad os se, hvordan man gør det.

Trin 1: Tilføj en side og rediger med Elementor

Først skal du åbne en ny eller eksisterende side på dit websted. Klik på "Rediger med Elementor" for at bruge parallaksen på sideelementerne.

Trin 2: Vælg et element for at tilføje parallax

Vælg derefter det afsnit, den kolonne eller den widget, hvor du vil anvende parallax-effekten.

Trin 3: Aktivér rulleeffekter

Her skal du først aktivere rulleeffekten, så gå til Avanceret fra venstre panel, og rul ned for at åbne fanen Bevægelseseffekter indstillinger. 

Derefter finder du muligheder for rulleeffekter og museeffekter. Du skal blot aktivere Rulleeffekter skift.

Trin 4: Tilpas rulningen

Nu kan du nemt tilpasse hver enkelt effekt, så den passer til dine behov. Bare klik på blyant-ikonog et indstillingspanel åbnes med alle kontroller.

Derfra kan du finjustere retning, hastighed og viewport og bestemme præcis, hvornår animationen begynder, og hvornår den slutter. 

Du kan også indstille viewport-skalaen for at angive, hvor i scrollen effekten skal starte, og hvor den skal stoppe.

Her anvender jeg for eksempel Horizontal Scroll-effekten ved at klikke på blyantikonet på Horizontal Scroll-indstillingen for at lave sådan en 

• Retning: Højre
• Hastighed: 4,8
• Viewport (øverst): 38%
• Viewport (nederst): 75%

Et godt råd: Hvis du vil have et mere dynamisk udseende, kan du kombinere flere animationer på et enkelt element. Dette trin er helt valgfrit og afhænger hovedsageligt af hele dit webstedsdesign. Men flere parallax-animationer hjælper dig med at skabe lagdelte effekter, der skiller sig ud.

Trin 5: Aktivér museffekt for web-element

Nu skal du aktivere musebaseret parallax, så elementet bevæger sig en smule, når du flytter markøren. 

Først skal du aktivere museffekten og med blyantsikonet tilpasse og justere musesporet og 3D-hældningen.

Til 3D-hældningseffekten har jeg f.eks. indstillet justeringerne nedenfor:

• Retning: Direkte
• Hastighed: 4

Trin 6: Anvend Parallax på forskellige enheder

Nu er det tid til at reagere på parallax-effekten på forskellige enheder, f.eks. desktop, tablet og mobil. Foretag justeringer, hvis det er nødvendigt, så din parallax fungerer problemfrit på alle enheder.

Endelig er her det endelige resultat af webelementets parallax-effekt:

2. Skab parallax-effekt på sidens baggrund

En anden populær måde at tilføje parallax på i Elementor er ved at anvende det på baggrunden af et afsnit. Det får din side til at føles mere dynamisk, da baggrunden bevæger sig anderledes end indholdet i forgrunden. Det er en enkel, men effektiv måde at give dit design liv på. Følg disse trin for at sætte det op:

Trin 1: Vælg baggrundssektionen

Først og fremmest skal du vælge den sektion, hvor du vil have parallax-effekten til at vises. Det kan være dit heltebanner, et udvalgt område eller et andet område, som du vil fremhæve.

Trin 2: Åbn indstillinger for bevægelseseffekter eller museffekter

Gå derefter til Avanceret og find fanen Bevægelseseffekter panel. Her kan du aktivere enten Rulleeffekter eller museeffekter, alt efter hvilken stil du ønsker.

Trin 3: Juster parallax-animationsstilen

Nu skal du justere animationsstilen. Så start med at åbne fanen Style. Upload dit baggrundsbillede, og tilpas derefter, hvordan det bevæger sig, ved at justere effektens retning, hastighed og intensitet, indtil det passer perfekt til dit design.

Her kan du vælge mellem 2 forskellige effekter, som du kan anvende på dit baggrundslag, f.eks. rulleeffekten med museffekten.

Trin 4: Aktivér museffekter som baggrund

Når du har justeret scrolleffekten, skal du slå musebaseret parallakse til, så baggrunden reagerer på markørens bevægelser. Det giver en interaktiv fornemmelse for de besøgende. Så brug blyantikonet til at tilpasse og finjustere musesporet.

Her har jeg for eksempel konfigureret sløringseffekten,

• Retning: Indstil til Fade Out, hvilket betyder, at elementet gradvist sløres, når det forlader visningsvinduet.
• Niveau: 15
• Visningsområde: Mellem 49% og 84% indstiller vi, hvornår effekten starter og slutter, baseret på brugerens scroll-position.

Trin 5: Test på tværs af enheder

Nu er det tid til at tjekke, hvordan parallax-effekten opfører sig på tværs af forskellige enheder, desktop, tablet og mobil. Foretag justeringer efter behov for at sikre, at animationen kører problemfrit og ser godt ud overalt.

Og her er det endelige resultat af baggrundsparallaxeffekten:

Bemærk: Vil du tilpasse parallax-effekten til dit brand?

Det er de to mest almindelige måder at tilføje parallax-effekter på i Elementor. Men hvis du vil have mere avancerede effekter som avancerede Parallakse-sektioner, vippeeffekter eller avanceret 3D-parallakseElementor har ikke selv disse funktioner som standard. Til dette skal du bruge en Elementor parallax-effekt plugin.

Her skal du købe Element pro for at tilføje parallax-effekt på din hjemmeside. Men hvad nu, hvis du kan tilføje mere avanceret parallax selv til en billigere pris?

Det er, hvad vi kommer frem til Element Pack Pro som en af de bedste muligheder for Elementor-tilføjelser. Sammen med 4 forskellige widgets til parallax-effekt kommer dette plugin med andre 300+ Elementor-widgets.

Så selv om du ikke er ekspert eller usikker på, hvilken parallax-stil der passer bedst til dit website, kan du bare udforske demodesignene og vælge det, der passer perfekt til dit website.

Skab avanceret Elementor-parallakseffekt med Element Pack

Elementor Pro tilbyder grundlæggende parallakse-lignende effekter, som Motion Effects, Transformér og skalérog Sticky Elements. 

Hvis du vil gå videre end Elementor's grundlæggende parallax-muligheder, er Element Pack-plugin'et et godt valg. Det giver dig adgang til mere avancerede parallax-baggrundemed vippeeffekter, avanceret 3D-parallakse og foruddefinerede blokke, så du kan skabe professionelle designs.

Så lad os komme i gang med at skabe en avanceret parallakseffekt i Elementor med Element Pack trin for trin:

Trin 1: Installer og aktiver Element Pack

Først og fremmest skal du installere Element Pack plugin på dit WordPress-site, og aktiver det derefter.

Bemærk: Først skal du installere Elementor gratis på dit websted og derefter installere Element-pakken.

Trin 2: Aktive Parallax-widgets

Gå derefter til Element Pack Dashboard > Extensions > Active Parallax Effect-relateret udvidelse efter behov, f.eks.

• Baggrundsbillede Parallax
• Parallakse/rullende effekter
• Sektion Billedparallakse
• Rulleudfyldningseffekt
• Animeret gradient BG
• Cursor-effekter

Der er masser af muligheder, så du kan nemt aktivere yderligere brugerdefinerede funktioner for at forbedre dine parallax-effekter. 

Trin 3: Åbn siden Elementor 

Vælg nu den side, hvor du vil tilføje parallax-effekten, og klik på Rediger med Elementor.

Trin 4: Vælg et element for at tilføje parallax

Hvis du vil tilføje en parallaxeffekt i baggrunden, skal du først aktivere baggrundsparallaxeffekten, vælge sektionen og gå til Stil > Baggrundog tænd for BG Parallax-effekt.

Juster derefter rullebevægelsen ved hjælp af Parallax X og Parallax Y efter behov.

Vælg nu en anden undersektion, kolonne eller widget, hvor du vil anvende parallax-effekten, og gå derefter til Avanceret.

Trin 5: Tilpas Parallax-indstillingerne

Nu, i Avanceret får du mange tilpasningssektioner som f.eks. 

• Konfetti-effekter
• Cursor-effekter
• Afslør effekter
• Ripple-effekter
• Klistret
• Baggrund med tekstgradient
• Realistisk billedskygge
• Værktøjstip
• Kontrol af synlighed
• Lydeffekt.

Ved hjælp af sektioner kan du justere hastighed, retning, udløsningsmuligheder og animationsstil. Med Element Pack kan du endda lægge flere elementer i lag for at skabe avancerede 3D- eller vippeeffekter.

Her tilføjer jeg f.eks. "Realistic Image Shadow", som giver en virkelighedstro skygge under billedet af en stiliseret tegneserieraket. Denne effekt giver grafikken en følelse af dimensionalitet og får den til at springe ud af siden.

Derefter justerer jeg rullebevægelsen ved hjælp af Parallax X og Parallax Y efter behov.

Trin 6: Brug færdige parallax-blokke (hurtig måde)

Hvis du ikke vil bygge fra bunden, kan du vælge mellem de foruddesignede Parallax-effekter færdige blokke inkluderet i Element Pack. Du skal bare navigere til Element Pack-skabelonbibliotek inde i din Elementor-editor.

Se nu de tilgængelige foruddesignede parallax-sektioner igennem, indtil du finder en, der passer til dit design.

Hold derefter musen over den ønskede blok, og klik på Direkte kopi for at kopiere layout og effekter.

Gå nu til dit Elementor-lærred, og indsæt den kopierede blok i den ønskede sektion eller beholder.

Udskift derefter pladsholdertekst, billeder og links med dit eget indhold, så det passer til dit brand.

Fra stilen kan du nu finjustere farver, typografi og parallakseindstillinger, så de passer til dit websteds æstetik.

Trin 7: Optimer til forskellige enheder

Test nu din parallax-effekt på desktop, tablet og mobil på siden Responsiv og sørg for, at det ser glat ud overalt.

Og her er det endelige resultat af parallax-effekten skabt med Element Pack:

Når du bygger parallax-effekter direkte med Elementor Pro, får du det grundlæggende. Men med Element Pack får du langt mere fleksibilitet. 

I stedet for at være begrænset til standardbevægelser kan du lægge animationer i lag, styre rullehastigheden og endda blande parallax, som Confetti Effects, Cursor Effects, Reveal Effects, Ripple Effects og mange flere avancerede funktioner, som Elementor Pro ikke tilbyder. 

Det betyder, at du ikke bare tilføjer "bevægelse" til et afsnit; du skaber en fuldt ud interaktiv oplevelse, selv om du ikke er udvikler.

Bedste praksis for design af parallax-effekt med Elementor 

Parallax-effekter kan få din hjemmeside til at se moderne, engagerende og visuelt tiltalende ud. Men for at få de bedste resultater skal du bruge dem med omtanke. Her er nogle gode råd, du skal huske på:

1. Beskyt læsbarheden

Dit indhold bør altid komme i første række. Hvis teksten ligger oven på en parallax-baggrund, skal du tjekke kontrasten. Hvis baggrunden er for travl, skal du bruge overlays eller slørede effekter.

Et eksempel: Nogle gange skaber parallax-effekter slør i tekstindhold. Så når du bruger indhold på en parallax-skærm, skal du sørge for, at indholdet er klart synligt.

2. Match brandets personlighed

Parallax-stilen skal være i overensstemmelse med dit brand. Et wellness-spa bruger måske en langsom, beroligende scroll-effekt, mens et spilsite måske bruger hurtigere, mere dynamiske bevægelser.

Et eksempel: Forestil dig, at der på et luksushotels hjemmeside var langsomt bevægende bølger i baggrunden, som afspejlede den afslappende stemning ved havet i perfekt overensstemmelse med brandets historie.

3. Undgå overbelastning af animationer

Hvis din hjemmeside er fyldt med elementer, der glider, fader og zoomer, giver det bare mere støj at tilføje flere parallaxeffekter. Hold dig til et eller to steder, hvor parallax giver mening, som f.eks. et hero-banner eller et produktudstillingsvindue.

Et eksempel: Du vil bemærke, at Apples produktsider ofte bruger meget lidt parallax og som regel fremhæver en enkelt produktfunktion, mens de ruller. Det er alt, hvad der skal til for at holde de besøgende engagerede.

4. Se ydeevne

Animationer + store billeder = langsommere indlæsningstider. Test altid ydeevnen, når du har tilføjet parallax. Hvis din side føles træg, skal du komprimere billeder, bruge lazy loading eller reducere effekten.

Et godt råd: Kør dit websted gennem PageSpeed Insights eller GTmetrix, når du har tilføjet parallax. Hvis du ser røde flag, skal du optimere, før du går live.

Elementor Parallax-effekt virker ikke - problemer og løsning

Nogle gange fungerer parallax-effekten i Elementor måske ikke som forventet. Det kan ske på grund af indstillinger, temakonflikter eller endda enhedsbegrænsninger. Her er de mest almindelige problemer, og hvordan du løser dem:

1. Bevægelseseffekter ikke aktiveret

Hvis parallaksen ikke virker, skal du først tjekke, om Bevægelseseffekter er aktiveret for sektionen, kolonnen eller widgetten. Gå til Avanceret > Bevægelseseffekter og sørg for, at rulle- eller museffekter er slået til.

3. Konflikter mellem temaer eller plugins

Nogle gange kan dit tema eller et andet plugin tilsidesætte Elementor's scripts. Prøv at deaktivere andre plugins et efter et, eller skift midlertidigt til et standardtema som Hello Elementor for at teste.

4. Begrænsninger i browser eller enhed

Parallax-effekter vises ikke altid på samme måde på mobilen eller i visse browsere. Tjek derfor Responsive indstillinger i Elementor for at bekræfte, at effekten er tilladt på tablets og mobiler.

5. Caching og performance-problemer

Browsercache, CDN eller optimeringsplugins kan blokere for, at animationer kører. Ryd din cache, fjern CDN, og tjek siden igen.

Ofte stillede spørgsmål

Afsluttende tanker

Parallax-effekter kan tilføre personlighed, realisme og bevægelse til dit website. Men kun hvis du bruger dem med omtanke. Du skal holde det subtilt, beskytte læsbarheden og altid teste på tværs af enheder, så dit design føles glat overalt.

Elementor giver dig værktøjerne til at komme i gang, men hvis du virkelig vil presse din kreativitet yderligere, tager Element Pack disse muligheder til det næste niveau. Med de ekstra parallax-effektfunktioner som Confetti Effects, Cursor Effects, Equal Height, Image Parallax, Sticky, Tile Scroll, Visibility Controls og mange flere avancerede bevægelsesmuligheder kan du lave designs, der ikke bare ser godt ud; de føles mindeværdige.

Når alt kommer til alt, handler det ikke om at tilføje effekter for effekternes skyld. Det handler om at skabe en oplevelse, der føles naturlig for dine besøgende. Og når du finder den rette balance, bliver parallax en af de små detaljer, der får dit website til at skille sig ud.