Hvad er Parallax-effekt? Hvorfor og hvordan man bruger det på dit WordPress-websted

Hvad er Parallax-effekt? Hvorfor og hvordan man bruger det på dit WordPress-websted

Parallax-effekt er en ekstremt populær designfunktion, der ofte bruges på WordPress-websteder. Denne specielle effekt har vist sig i gamingverdenen i årevis, men er for nylig gået over til webdesign. Og indtil videre ser denne store tendens ikke ud til at gå nogen steder, hvis den er mere anvendt end nogensinde. Så hvad er parallakseffekt, og hvorfor skal du overveje at bruge den på dit WordPress-websted?


I denne artikel overvejer vi, hvad en parallakseffekt er, og hvilke fordele det kan give for dit websted og din virksomhed. Vi vil derefter diskutere, hvordan man hurtigt og nemt tilføjer en parallaxeffekt til ethvert WordPress-websted, side eller post, med det gratis plugin Parallax Scroll.

Hvad er Parallax-effekt?

Tyve Sytten

Parallakseffekt involverer en webside baggrund bevæger sig i en langsommere hastighed end forgrunden. Dette skaber en illusion af dybde til siden, hvilket giver indholdet en 3D-effekt, når seerne ruller ned.

Størstedelen af ​​premium WordPress-temaer kommer nu med indbygget parallakseffekt på deres hjemmeside. Selv det gratis WordPress-standardtema Twenty Seventeen leveres med en parallaxfunktion. De fleste sidebygere har også et parallaxeffektværktøj, der giver dig mulighed for at føje effekten til enhver side eller indlæg på dit websted. Og selvfølgelig er der adskillige WordPress-plugins, som du kan installere for at tilføje parallaxeffektelementer til dit websted.

Hvad er fordelene ved at bruge en parallakseffekt?

Der er en række fordele ved at bruge en parallakseffekt på dit WordPress-websted. Den første og mest åbenlyse er det visuelle aspekt af en parallakseffekt. En parallakseffekt er æstetisk tiltalende, giver dit websted et frisk, stilfuldt og moderne udseende. Det her wow effekt kan gøre dit indhold virkelig pop, og skaber en spændende og interessant browseroplevelse.

En anden vigtig grund til at bruge parallaxeffekt på dit websted er at hjælpe bryde en side op, især en hjemmeside, i læsbare bidder. Brug denne effekt til at understrege de forskellige sektioner og typer indhold, du vil fremvise. Dette kan hjælpe med at promovere forskellige aspekter af dit websted, belyse vigtige oplysninger og tilskynde brugere til at navigere på dit websted og få adgang til indhold på en måde, du vælger.

Parallaxeffekt kan bruges på enhver side eller indlæg på et websted, men kan især ses på hjemmesider, landingssider eller sider med en side. Den fantastiske visuelle parallax skaber og den positive effekt, det har på brugeroplevelsen, kan resultere i, at besøgende bliver længere på dit websted og hjælper med at forbedre dit websteds konverteringsfrekvens i forhold til dets mål.

Parallax på mobil

Mens parallax er fantastisk til at tilføje visuel interesse, fungerer det ikke altid godt på mobile enheder. Fordi telefoner og tablets typisk bruger swipe navigation (i stedet for en rulle som desktops), kan parallaxeffekter muligvis ikke gengives korrekt. Dette afhænger naturligvis af metoden og animationerne, du bruger til din egen parallaksafdeling, men for god brugervenlighed kan du overveje at deaktivere parallax på enheder.

Vælg et tema med parallakseffekt

Total

For dem af jer, der starter et nyt projekt, skal du vælge et premiumtema, der inkluderer en parallaxeffektfunktion. Og hvis du vil bruge en parallakseffekt på en række sider på dit websted, ikke kun på hjemmesiden, kan du overveje et alsidigt tema, der leveres med en avanceret sidebygger. Temaer som Divi fra Elegante temaer, Parallax af Themify og vores helt eget tema I alt inkluderer alle sidebygere, der leverer parallaxeffektværktøjer.

Tilføj Parallax Sliders med Slider Revolution WordPress Plugin

Slider Revolution Parallax

Hvis du vil have en fremhævet skyder med en parallakseffekt, er vores topvalg Slider Revolution-pluginet. Dette premium plugin inkluderer hundredvis af indbyggede indstillinger og funktioner til skrifttyper, lag, skydereffekter, layout og selvfølgelig parallax.

Aktivér Slider Revolution Parallax

Installer først plugin, importer derefter enten en skyderen skabelon eller begynd at opbygge din egen skyder fra bunden (du kan læse vores fulde Slider Revolution guide for flere detaljer).

Indstillinger for glider Revolution Parallax

Rediger derefter diaset Hovedbaggrund at tilføje en Kilde baggrundsbillede og vælg Parallax / 3D fane for at tildele et parallaxniveau. Når du tilføjer lag, skal du vælge Parallax / 3D lagindstilling for parallaksdybde for at tilføje bevægelse til din tekst, billede, knap og andre lag. Det er så let!

Når du er færdig, skal du gemme skyderen og bruge kortkoden til at indsætte den i ethvert indlæg eller side. Eller hvis du bruger en sidebygger som Visual Composer, kan du bruge sidebyggeren Slider Revolution-elementet til hurtigt at vælge og indsætte din skyder.

Tilføj Parallax-sektioner med Parallax Scroll WordPress Plugin

Parallax-rulle

Hvis du allerede har et tema, og det ikke inkluderer en indbygget indstilling af parallaxeffekt, skal du overveje at bruge et WordPress-plugin til at udføre jobbet. Parallax-rulle er en populær gratis indstilling, der giver dig mulighed for at tilføje et parallax-rullende baggrundsbillede til forskellige elementer på en side eller et indlæg på dit websted. Føj en rullebaggrund til et enkelt element, en overskriftstekst eller et komplet afsnit, der indeholder ethvert indhold, alt ved hjælp af en simpel kortkode.

Så lad os nu se på, hvordan du installerer og begynder at bruge Parallax Scroll …

Installation af Parallax Scroll

Hvis du vil installere Parallax Scroll, skal du logge ind på dit WordPress-dashboard som administrator og vælge Plugins> Tilføj nyt fra menuen.

Tilføj nyt plugin

Søg Parallax-rulle, vælg derefter Installer nu> Aktivér.

Parallax Scroll Activate

Du finder nu, at en fane med Parallax-rulle er føjet til din WordPress-menu.

Tilføjelse af en Parallax-rulleafdeling

For at komme i gang med Parallax Scroll skal du først oprette en ny parallax sektion. Vælg det for at gøre det Parallax-rulle> Tilføj nyt fra din WordPress-menu.

Parallax Scroll Tilføj nyt

Her kan du nu oprette din nye parallaksektion …

Tilføj ny parallax

Indstilling af rulleparallaxens baggrundsbillede

For det første skal du indstille et billede til din rullende parallaxbaggrund. For at gøre dette skal du klikke på Indstil Featured Image og tilføj billedet til afsnittet Udvalgt billede.

Udvalgt billede

Tænk grundigt over det billede, du bruger til hvert baggrundsafsnit. Sørg for, at de er relevante for dit websted, og synkroniseres med dit branding. Hvis du vil vise en overskrift eller yderligere indhold øverst i dette baggrundsbillede, kan du overveje at bruge en blokfarve eller subtile mønstre i stedet for et foto eller en opmærksomme grafik. Dette kan hjælpe med at sikre, at dit billede arbejder med og promoverer dit indhold i stedet for at distrahere fra det.

Hvis du vælger at bruge fotografier, skal billederne være af høj kvalitet. Smukke iøjnefaldende billeder kan hjælpe med at give dit websted et professionelt og unikt udseende. Disse visuals skaber et stærkt indtryk på dit publikum, hvilket igen får folk til at huske og vende tilbage til dit websted. Der er et bredt udvalg af lagerwebsteder, som du kan downloade billeder i topkvalitet fra. Tjek vores samling af gratis og premium stockfotosider, hvor du hurtigt finder fantastiske fotografier til din parallaxbaggrund.

Oprettelse af en overskriftstekst over Parallax-baggrunden

Tilføj overskrift

Hvis du vil oprette en overskriftstekst med en parallaxbaggrund, skal du næste indtaste en posttitel. Denne titel vises derefter som din titel på toppen af ​​dit valgte parallax-baggrundsbillede.

Du ønsker muligvis ikke en header i dit parallaksafsnit. Hvis dette er tilfældet, skal du stadig give hver parallax en posttitel, så hvert afsnit, du opretter, er let at identificere. Du skal derefter vælge at skjule titlen i Parallax-rulleindstillinger (dækket yderligere i denne artikel), så en header vises ikke på forsiden af ​​dit websted.

Vis ethvert indhold med en rullebaggrund til Parallax

Du ønsker måske, at parallakssektionen skal vise andet indhold over baggrundsbilledet. Dette kan omfatte alt, hvad der er nødvendigt for dit websted, fra tekst og billeder til kortkoder. Bestem, hvad du vil vise, og indtast derefter dette indhold i postboksen.

Tilpasning af Parallax-rulleindstillinger

Når du er tilfreds med indholdet, skal du tilpasse indstillingerne i parallaksafsnittet, så de passer til din side.

Parallax-rulleindstillinger

Rul ned til Parallax-rulleindstillinger. Under Style kan du ændre parallaxhøjde og billedstørrelse samt vælge Fuld bredde for at tvinge dit tema til at vise baggrundsbillede på tværs af skærmens fulde bredde, hvis det ikke allerede er.

Du kan også ændre den horisontale og vertikale position af header på parallaxbaggrunden. Og hvis du vil skjule indlæggets titel, kan du gøre det her ved at skrive display: ingen; i Header Style.

Parallax-indstillinger vil lade dig tilpasse, hvordan din parallaksrulle opfører sig. Dette inkluderer ændring af hastigheden på parallaxbaggrunden. Prøv forskellige hastigheder for at se, hvad der fungerer til dit websted og publikum.

Der er også en Mobilindstillinger mulighed, der giver dig mulighed for at deaktivere parallaxens baggrundsbillede og / eller indhold på mobiler, hvis du føler, at parallaxsektionerne ikke fungerer godt på mobile enheder.

Når du har justeret indstillingerne og færdig med at oprette din parallaksafdeling, skal du klikke på Udgiv.

Indsættelse af parallaksektionen i en post eller en side

Dernæst skal du indsætte din parallakssektion i et indlæg eller en side på dit websted. Vælg Parallax Scroll fra din WordPress-menu.

Parallax Scroll Shortcode

I den præsenterede tabel ser du nu en kortkode til parallaksafsnittet, du lige har oprettet. Kopier koden, og åbn derefter den relevante side eller indlæg. Indsæt koden i sidens indhold i den korrekte position.

Indsæt kort kode

Forhåndsvis ændringerne, og hvis du er tilfreds med dit nye parallaksafsnit, skal du klikke på Udgiv. Du kan nu oprette yderligere sektioner, der giver siden eller indsender en fuld parallakseffekt. Og hvis du har brug for at ændre, skal du blot åbne parallax-sektionens side og foretage de nødvendige ændringer.

Afsluttende tanker

Hvis dit tema ikke har en indbygget parallaxeffektfunktion, eller hvis du vil tilføje en effekt til mere end bare din startside, vil Parallax Scroll gøre det muligt for dig hurtigt at oprette parallaksektioner, der kan føjes til dine sider eller indlæg.

Som du har set, kan det være meget værd at tilføje en parallaxeffekt til dit websted. Ikke kun kan det forbedre det visuelle på dit websted meget, det vil hjælpe med at appellere til dit publikum, gøre det nemt for dem at navigere på dit websted og få adgang til indhold og øge den tid, de bruger på dit websted. Denne forbedrede brugeroplevelse skulle i sidste ende hjælpe dit websted med at konvertere mod dets mål, hvad enten de skal øge tilbagevendende besøgende, indsamle kundeemner eller sælge produkter eller tjenester.

Vil du tilføje en parallakseffekt til din startside, en destinationsside, et indlæg eller et andet sted? Del dine tanker i kommentarerne herunder …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map