Hva er parallakseffekt? Hvorfor og hvordan du bruker det på ditt WordPress-nettsted

Parallaxeffekt er en ekstremt populær designfunksjon som ofte brukes på WordPress nettsteder. Denne spesielle effekten har omtalt i spillverdenen i mange år, men har nylig gått over til webdesign. Og så langt ser det ikke ut til at denne store trenden kommer til å gå noe sted, om noe den blir brukt mer enn noen gang. Så hva er parallakseffekt, og hvorfor bør du vurdere å bruke den på WordPress-nettstedet ditt?


I denne artikkelen vil vi vurdere hva en parallakseffekt er og fordelene det kan gi for nettstedet og virksomheten din. Vi vil deretter diskutere hvordan du raskt og enkelt kan legge til en parallakseffekt til ethvert WordPress-nettsted, side eller innlegg, med gratisprogrammet Parallax Scroll.

Hva er parallakseffekt?

Tjue sytten

Parallakseffekt innebærer en webside bakgrunn beveger seg i en lavere takt enn forgrunnen. Dette skaper en illusjon av dybde til siden, og gir innholdet en 3D-effekt når seerne ruller nedover.

De fleste premium WordPress-temaene kommer nå med innebygd parallakseffekt på hjemmesiden deres. Selv gratis WordPress standardtema Twenty Seventeen kommer med en parallaksfunksjon. De fleste sidebyggere har også et parallakseffektverktøy, slik at du kan legge effekten til hvilken som helst side eller et innlegg på nettstedet ditt. Og selvfølgelig er det mange WordPress-plugins som du kan installere for å legge til parallakseffektelementer på nettstedet ditt.

Hva er fordelene ved å bruke en parallakseffekt?

Det er en rekke fordeler med å bruke en parallakseffekt på WordPress-nettstedet ditt. Den første, og mest åpenbare, er det visuelle aspektet av en parallakseffekt. En parallakseffekt er estetisk tiltalende, gir nettstedet ditt et friskt, stilig og moderne utseende og preg. Dette wow effekt kan gjøre innholdet ditt virkelig pop, og skaper en spennende og interessant nettleseropplevelse.

En annen viktig grunn til å bruke parallakseffekt på nettstedet ditt er å hjelpe bryte opp en side, spesielt en hjemmeside, i lesbare biter. Bruk denne effekten til å understreke de forskjellige seksjonene og typene innhold du vil vise frem. Dette kan bidra til å markedsføre forskjellige aspekter av nettstedet ditt, belyse viktig info og oppmuntre brukere til å navigere på nettstedet ditt og få tilgang til innhold på en måte du velger.

Parallakseffekt kan brukes på hvilken som helst side eller innlegg på et nettsted, men kan spesielt sees på hjemmesider, destinasjonssider eller sider på en side. Den fantastiske visuelle parallaxen skaper, og den positive effekten den har på brukeropplevelsen, kan føre til at besøkende blir liggende lenger på nettstedet ditt, og kan bidra til å forbedre nettstedets konverteringsfrekvens mot målene.

Parallax på mobil

Selv om parallax er flott for å gi visuell interesse, fungerer det ikke alltid bra på mobile enheter. Fordi telefoner og nettbrett vanligvis bruker sveipnavigering (i stedet for en rulle som stasjonære PCer), er det ikke sikkert at parallakseffekter vises korrekt. Selvfølgelig vil dette avhenge av metoden og animasjonene du bruker for din egen parallakseksjon, men for god brukervennlighet kan det være lurt å vurdere å deaktivere parallaks på enheter.

Velg et tema med parallakseffekt

Total

For de av dere som starter et nytt prosjekt, bør du velge et premiumtema som inkluderer en parallakseffektfunksjon. Og hvis du vil bruke en parallakseffekt på en rekke sider på nettstedet ditt, ikke bare hjemmesiden, kan det være lurt å vurdere et flerbruks-tema som følger med en avansert sidebygger. Temaer som Divi fra elegante temaer, Parallax av Themify, og vårt helt eget tema Totalt, alt inkluderer sidebygger som gir parallakseffektverktøy.

Legg til Parallax-glidebryter med Slider Revolution WordPress-plugin

Slider Revolution Parallax

Hvis du vil ha en glidebryter med parallakseffekt, er vårt topp utvalg Slider Revolution-plugin. Denne premium plugin inneholder hundrevis av innebygde alternativer og funksjoner for skrifter, lag, skyveeffekter, oppsett og selvfølgelig parallaks.

Aktiver Slider Revolution Parallax

Installer først plugin-modulen, importer deretter en glidebrytermal eller begynn å bygge din egen glidebryter fra bunnen av (du kan lese vår fullstendige Slider Revolution-guide for mer informasjon).

Parallaxinnstillinger for glidebryteren

Deretter rediger du lysbildet Hovedbakgrunn å legge til en Kilde bakgrunnsbilde og velg Parallax / 3D fane for å tilordne et parallaksnivå. Når du legger til lag, velger du deretter Parallax / 3D lagalternativ for parallaksdybde for å legge bevegelse til teksten, bildet, knappen og andre lag. Det er så enkelt!

Når du er ferdig, lagrer du glidebryteren og bruk kortkoden til å sette den inn i et hvilket som helst innlegg eller side. Eller hvis du bruker en sidebygger som Visual Composer, kan du bruke sidebyggeren Slider Revolution-elementet til raskt å velge og sette inn glidebryteren.

Legg til parallakseksjoner med Parallax Scroll WordPress-plugin

Parallax Scroll

Hvis du allerede har et tema, og det ikke inkluderer et innebygd alternativ for parallakseffekt, bør du vurdere å bruke en WordPress-plugin for å gjøre jobben. Parallax Scroll er et populært gratis alternativ som lar deg legge til et parallax-rullende bakgrunnsbilde til forskjellige elementer på en side eller et innlegg på nettstedet ditt. Legg til en rullebakgrunn til et enkelt element, en overskriftstekst eller en hel seksjon som inneholder noe innhold, alt ved å bruke en enkel kortkode.

La oss nå se på hvordan du installerer og begynner å bruke Parallax Scroll …

Installere Parallax Scroll

For å installere Parallax Scroll, logg deg på WordPress-dashbordet som administrator og velg Plugins> Legg til nytt fra menyen.

Legg til ny plugin

Søk Parallax Scroll, velg deretter Installer nå> Aktiver.

Parallax Scroll Activate

Du vil nå finne en Parallax Scroll-fane er lagt til i WordPress-menyen.

Legge til en parallaksrulleseksjon

For å komme i gang med Parallax Scroll må du først lage en ny parallax-seksjon. For å gjøre det, velg Parallax Scroll> Legg til nytt fra WordPress-menyen.

Parallax Scroll Add New

Her kan du nå opprette din nye parallakseksjon …

Legg til ny parallaks

Angi bakgrunnsbilde for rullende parallax

Først må du angi et bilde for din rulleparallaksbakgrunn. For å gjøre dette, klikk på Angi valgt bilde og legg til bildet i delen Utvalgt bilde.

Utvalgt bilde

Tenk nøye gjennom bildet du bruker for hver bakgrunnsseksjon. Forsikre deg om at de er relevante for nettstedet ditt, og synkroniser med merkevarebyggingen din. Hvis du skal vise en topptekst eller ytterligere innhold over toppen av dette bakgrunnsbildet, kan du vurdere å bruke en blokkfarge eller subtile mønstre i stedet for et foto eller en oppmerksomhetsbildende grafikk. Dette kan bidra til å sikre at bildet ditt jobber med og markedsfører innholdet ditt, i stedet for å distrahere fra det.

Hvis du velger å bruke fotografier, må bildene være av høy kvalitet. Vakre iøynefallende bilder kan bidra til å gi nettstedet ditt et profesjonelt og unikt utseende. Disse visualene vil skape et sterkt inntrykk på publikummet ditt, noe som igjen vil be folk om å huske og komme tilbake til nettstedet ditt. Det finnes et bredt utvalg av lager nettsteder som du kan laste ned bilder av topp kvalitet fra. Sjekk ut vår samling av gratis og premium arkivfoto nettsteder der du raskt finner fantastiske bilder for parallaxbakgrunnen.

Opprette en overskriftstekst over Parallax-bakgrunnen

Legg til overskrift

Hvis du vil lage en overskriftstekst med en parallaksebakgrunn, må du deretter legge inn en innleggstittel. Denne tittelen vil da vises som din titteltittel over toppen av det valgte parallaksbakgrunnsbildet.

Det er ikke sikkert du vil ha en overskrift i parallakseksjonen. Hvis dette er tilfelle, bør du fremdeles gi hver parallaks en tittel, så hver seksjon du oppretter er lett identifiserbar. Du må deretter velge å skjule tittelen i Parallax Scroll Options (dekkes nærmere av i denne artikkelen), slik at en topptekst ikke vises på forsiden av nettstedet.

Vis alt innhold med en rullebakgrunn for parallax

Det kan være lurt at parallaksdelen skal vise annet innhold over bakgrunnsbildet. Dette kan inkludere alt som er nødvendig for nettstedet ditt, fra tekst og bilder til kortkoder. Bestem deg for hva du vil vise, og legg deretter inn innholdet i postboksen.

Tilpasse Parallax Scroll Settings

Når du er fornøyd med innholdet, må du tilpasse innstillingene for parallaksdelen slik at den passer til siden din.

Parallax Scroll Options

Bla ned til Parallax Scroll Options. Under stil kan du endre parallakshøyden og bildestørrelsen, samt velge Full bredde for å tvinge temaet ditt til å vise bakgrunnsbildet over hele bredden på skjermen hvis det ikke allerede er.

Du kan også endre den horisontale og vertikale posisjonen til overskriften på parallaksbakgrunnen. Og hvis du vil skjule innleggstittelen, kan du gjøre det her ved å skrive skjerm: ingen; i Header Style.

Parallaksinnstillinger lar deg tilpasse hvordan parallaksrullen din oppfører seg. Dette inkluderer å endre hastigheten på parallaksbakgrunnen. Prøv ut forskjellige hastigheter for å se hva som fungerer for nettstedet ditt og publikummet ditt.

Det er også en Mobilinnstillinger alternativet, som lar deg deaktivere parallaks bakgrunnsbilde og / eller innhold på mobiler, hvis du føler at parallaksdelene ikke fungerer bra på mobile enheter.

Når du har justert innstillingene og er ferdig med å lage parallakseksjonen, klikker du på Publiser.

Sette inn parallakseksjonen i et innlegg eller en side

Deretter må du sette inn parallakseksjonen i et innlegg eller side på nettstedet ditt. Velg Parallax Scroll fra WordPress-menyen.

Parallax Scroll Shortcode

I tabellen som presenteres vil du nå se en kortkode for parallaksdelen du nettopp har opprettet. Kopier koden og åpne deretter den aktuelle siden eller innlegget. Lim inn koden i sidens innhold i riktig posisjon.

Sett inn kortkode

Forhåndsvis endringene, og hvis du er fornøyd med den nye parallaksdelen, klikker du på Publiser. Du kan nå lage flere seksjoner som gir siden eller legge inn en full parallakseffekt. Og hvis du trenger å gjøre endringer, kan du bare åpne parallaksseksjonens side og gjøre nødvendige endringer.

Siste tanker

Hvis temaet ditt ikke har en innebygd parallakseffektfunksjon, eller hvis du vil legge til en effekt på mer enn bare hjemmesiden din, vil Parallax Scroll gjøre det mulig for deg å raskt lage parallakseksjoner for å legge til på sidene eller innleggene dine.

Som du har sett, kan det være veldig verdt å legge til en parallakseffekt på nettstedet ditt. Ikke bare kan det forbedre visuelle bilder på nettstedet ditt, det vil bidra til å appellere til publikummet ditt, gjøre det enkelt for dem å navigere på nettstedet ditt og få tilgang til innhold og øke tiden de bruker på nettstedet ditt. Denne forbedrede brukeropplevelsen skal til slutt hjelpe nettstedet ditt med å konvertere mot målene sine, enten de skal øke tilbakevendende besøkende, samle potensielle kunder eller selge produkter eller tjenester.

Vil du legge til en parallakseffekt på hjemmesiden din, en destinasjonsside, et innlegg eller et annet sted? Del gjerne tankene dine i kommentarene nedenfor …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me