Mikä on Parallax-ilmiö? Miksi ja kuinka sitä käytetään WordPress-sivustossasi

Mikä on Parallax-ilmiö? Miksi ja kuinka sitä käytetään WordPress-sivustossasi

Parallax-efekti on erittäin suosittu suunnittelutoiminto, jota käytetään yleisesti WordPress-verkkosivustoilla. Tämä erikoistehoste on ollut esillä pelimaailmassa vuosia, mutta on viime aikoina siirtynyt web-suunnitteluun. Ja toistaiseksi tämä merkittävä suuntaus ei näytä menevän minnekään, jos jotain sitä käytetään laajemmin kuin koskaan. Joten mikä on parallaksivaikutus ja miksi sinun pitäisi harkita sen käyttöä WordPress-verkkosivustollasi?


Tässä artikkelissa tarkastellaan, mikä on parallaksivaikutus ja hyödyt, joita se voi tuoda sivustollesi ja yrityksellesi. Keskustelemme sitten kuinka nopeasti ja helposti lisätä parallaksi-ilmiö mihin tahansa WordPress-verkkosivustoon, -sivulle tai -viestiin ilmaisella Parallax Scroll -laajennuksella..

Mikä on Parallax-vaikutus?

Kaksikymmentäseitsemäntoista

Parallax-efekti sisältää verkkosivun tausta liikkuu hitaammin kuin etuala. Tämä luo sivulle syvyyden illuusion, mikä antaa sisällölle kolmiulotteisen vaikutuksen katsojien vierittäessä alas.

Suurimmassa osassa premium-WordPress-teemoja on nyt kotisivullaan sisäänrakennettu parallaksivaikutus. Jopa ilmaisessa WordPress-oletusteemassa Twenty Seventeen on parallaksia. Useimpiin sivujen rakentajiin sisältyy myös parallaksi-efektityökalu, jonka avulla voit lisätä tehosteen mihin tahansa verkkosivustosi sivulle tai viestiin. Ja tietysti, on olemassa lukuisia WordPress-laajennuksia, jotka voit asentaa lisätäksesi parallaksiefektielementtejä verkkosivustoosi.

Mitä hyötyä on Parallax-tehosteesta??

Rinnakkaisvaikutuksen käyttämiseen WordPress-verkkosivustolla on useita etuja. Ensimmäinen ja ilmeisin on parallaksi-ilmiön visuaalinen puoli. Rinnakkaisvaikutus on esteettisesti miellyttävä, antaa verkkosivustollesi raikkaan, tyylikkään ja modernin ilmeen. Tämä vau-vaikutus voi tehdä sisällöstäsi todella popin, ja luo jännittävän ja mielenkiintoisen selainkokemuksen.

Toinen keskeinen syy käyttää parallaksi-ilmiötä sivustossasi on auttaa hajottaa sivun, erityisesti kotisivu, luettavissa oleviin paloihin. Käytä tätä efektiä korostaaksesi esiteltäviä sisällön eri osioita ja tyyppejä. Tämä voi auttaa mainostamaan verkkosivustosi eri näkökohtia, valaisemaan tärkeitä tietoja ja rohkaisemaan käyttäjiä navigoimaan sivustossasi ja käyttämään sisältöä valitsemallasi tavalla..

Parallaksia voidaan käyttää millä tahansa verkkosivuston sivulla tai viestissä, mutta se näkyy erityisesti kotisivuilla, aloitussivuilla tai yhden sivun sivustoilla. Upea visuaalinen parallaksi luo ja sen positiivinen vaikutus käyttäjäkokemukseen voi johtaa siihen, että kävijät oleskelevat kauemmin sivustollasi ja auttavat parantamaan sivustosi muuntokursseja tavoitteisiinsa nähden.

Parallaksi matkapuhelimella

Vaikka parallaksi on hieno lisää visuaalista mielenkiintoa, se ei aina toimi hyvin mobiililaitteissa. Koska puhelimet ja tablet-laitteet käyttävät yleensä pyyhkäisynavigointia (vierittämisen sijaan kuin työpöydät), paralaksia-tehosteet eivät välttämättä näy oikein. Tämä riippuu tietysti menetelmästä ja animaatioista, joita käytät omassa parallaksiossasi, mutta hyvän käytettävyyden vuoksi kannattaa harkita parallaksin poistamista käytöstä laitteilla.

Valitse teema Parallax-tehosteella

Kaikki yhteensä

Niille, jotka aloitat uuden projektin, sinun tulee valita premium-teema, joka sisältää parallaksi-efektiominaisuuden. Ja jos haluat käyttää parallaksi-ilmiötä useilla verkkosivustosi sivuilla, ei vain kotisivulla, kannattaa ehkä harkita monikäyttöistä teemaa, joka tulee edistyneen sivunmuodostajan mukana. Teemat, kuten Divi Eleganttista Teemasta, Themify Parallax ja oma teema yhteensä, sisältävät kaikki sivunrakentajat, jotka tarjoavat parallaksiefektityökaluja..

Lisää Parallax-liukusäätimet Liukusäädin Revolution WordPress -laajennuksella

Liukusäädin Revolution Parallax

Jos haluat esillä olevan liukusäätimen, jolla on parallaksitehoste, paras valinta on Slider Revolution -laajennus. Tämä palkkiolaajennus sisältää satoja sisäänrakennettuja vaihtoehtoja ja ominaisuuksia fonteille, tasoille, liukusäätimille, asetteluille ja tietysti parallaksille.

Ota liukusäätimen vallankumouksen Parallax käyttöön

Asenna ensin laajennus, tuota sitten liukusäädintäpohja tai aloita oman liukusäätimen rakentaminen tyhjästä (voit lukea lisätietoja Slider Revolution -oppaan täydestä oppaasta).

Liukusäädin Revolution Parallax -asetukset

Muokkaa seuraavaksi diaa Tärkein tausta lisätä a Lähde taustakuva ja valitse Parallax / 3D välilehti, jotta voit määrittää parallaksitason. Kun lisäät kerroksia, valitse Parallax / 3D kerrosvaihtoehto parallaksisyvyydelle, jotta tekstiä, kuvaa, nappia ja muita kerroksia lisätään liikkeelle. Se on niin helppoa!

Kun olet valmis, tallenna liukusäädin ja lisää se lyhyelle koodille mihin tahansa viestiin tai sivulle. Tai jos käytät Visual Composer -sovelluksen kaltaista sivunmuodostajaa, voit käyttää sivunmuodostimen Liukusäädin-kierros-elementtiä liukusäätimen valimiseen ja lisäämiseen nopeasti.

Lisää Parallax-osiot Parallax Scroll WordPress -laajennuksella

Parallax-vieritys

Jos sinulla on jo teema, ja se ei sisällä sisäänrakennettua rinnakkaisvaikutusvaihtoehtoa, sinun tulee harkita WordPress-laajennuksen käyttämistä työn tekemiseen.. Parallax-vieritys on suosittu ilmainen vaihtoehto, jonka avulla voit lisätä parallaksin vierittävän taustakuvan verkkosivustosi tai viestin eri osiin. Lisää vieritettävä tausta yksittäiseen elementtiin, otsikkotekstiin tai koko sisältöä sisältävään osioon, kaikki käyttämällä yksinkertaista lyhytkoodia.

Joten katsotaanpa nyt kuinka asentaa ja aloittaa Parallax Scroll -sovelluksen käyttö …

Parallax Scroll -sovelluksen asentaminen

Asenna Parallax Scroll kirjautumalla sisään WordPress-hallintapaneeliin järjestelmänvalvojana ja valitsemalla Laajennukset> Lisää uusi valikosta.

Lisää uusi laajennus

Hae Parallax-vieritys, valitse sitten Asenna nyt> Aktivoi.

Parallax Scroll Aktivoi

Löydät nyt Parallax Scroll -välilehden, joka on lisätty WordPress-valikkoosi.

Parallax-vieritysosan lisääminen

Aloittaaksesi Parallax Scroll -sovelluksen sinun on ensin luotava uusi parallaksiosa. Valitse tämä valitsemalla Parallax Scroll> Lisää uusi WordPress-valikosta.

Parallax Scroll Lisää uusi

Täällä voit nyt luoda uuden parallaksiosion …

Lisää uusi Parallax

Vierittävän Parallax-taustakuvan asettaminen

Ensin sinun on asetettava kuva vieritettävälle parallaksitaustalle. Napsauta -painiketta Aseta esitelty kuva ja lisää kuva Suositeltu kuva -osaan.

Esitelty kuva

Ajattele huolellisesti kuvaa, jota käytät jokaisessa taustaosassa. Varmista, että ne ovat osuvia sivustoosi, ja synkronoi tuotemerkkisi kanssa. Jos aiot näyttää otsikon tai lisäsisällön tämän taustakuvan yläpuolella, harkitse lohkon värin tai hienovaraisten kuvioiden käyttöä valokuvan tai huomionottokuvan sijasta. Tämä voi auttaa varmistamaan, että kuvasi toimii ja mainostaa sisältöäsi sen sijaan, että häiritsisi sitä.

Jos valitset valokuvien käytön, kuvien on oltava korkealaatuisia. Kauniit herättävät kuvat voivat antaa sivustollesi ammattimaisen ja ainutlaatuisen ulkonäön. Nämä visuaalit luovat vahvan vaikutelman yleisöllesi, joka puolestaan ​​kehottaa ihmisiä muistamaan ja palaamaan sivustollesi. On olemassa laaja valikoima varastossa olevia verkkosivustoja, joista voit ladata korkealaatuisia kuvia. Tutustu ilmaisten ja korkealaatuisten valokuvasivustojen kokoelmaan, josta löydät nopeasti upeita valokuvia parallakselle taustaasi.

Otsikkotekstin luominen Parallax-taustan yli

Lisää otsikko

Jos haluat luoda otsikkotekstin, jolla on parallaksinen tausta, sinun on seuraavaksi kirjoitettava viestin otsikko. Tämä otsikko näkyy sitten otsikkosi otsikkona valitsemasi parallaksi-taustakuvan yläpuolella.

Et ehkä halua otsikkoa rinnakkaislohkosi. Jos näin on, sinun tulisi silti antaa jokaiselle parallaksille viestin otsikko, joten jokainen luomasi osa on helposti tunnistettavissa. Sinun on sitten valittava piilottaaksesi otsikon Parallax-vieritysasetukset (jota käsitellään tarkemmin tässä artikkelissa), joten otsikkoa ei näytetä sivustosi etupuolella.

Näytä mikä tahansa sisältö Parallax-vieritys taustalla

Haluat ehkä, että parallaksi-osio näyttää muun sisällön taustakuvassa. Tämä voi sisältää mitä tahansa sivustollesi välttämätöntä, tekstiä ja kuvia lyhyisiin koodeihin. Päätä, mitä haluat näyttää, ja kirjoita tämä sisältö postilaatikkoon.

Parallax-vieritysasetusten mukauttaminen

Kun olet tyytyväinen sisältöön, sinun on mukautettava parallaksiosan asetukset sivusi mukaan.

Parallax-vieritysasetukset

Vieritä alas kohtaan Parallax-vieritysasetukset. Tyyli-kohdassa voit muuttaa parallaksikorkeutta ja kuvan kokoa sekä valitsemalla Koko leveys pakottaaksesi teeman näyttämään taustakuvan koko näytön leveydellä, ellei se vielä ole.

Voit myös muuttaa otsikon vaaka- ja pystysuuntaista asentoa parallaksitaustalla. Ja jos haluat piilottaa viestin otsikon, voit tehdä sen täällä kirjoittamalla näyttö: ei mitään; sisään Otsikon tyyli.

Parallaksiasetukset antaa sinun mukauttaa kuinka parallaksisi vieritys toimii. Tähän sisältyy parallaksin taustan nopeuden muuttaminen. Kokeile eri nopeuksia nähdäksesi, mikä toimii verkkosivustollesi ja yleisöllesi.

Siellä on myös Mobiililaitteiden asetukset -vaihtoehto, jonka avulla voit poistaa parallaksin taustakuvan ja / tai sisällön matkapuhelimista, jos sinusta tuntuu, että parallaksiosat eivät toimi hyvin mobiililaitteissa.

Kun olet säätänyt asetuksia ja lopettanut rinnakkaisosion luomisen, napsauta Julkaise.

Parallax-osion lisääminen viestiin tai sivulle

Seuraavaksi sinun on lisättävä parallaksi-osio verkkosivustosi viestiin tai sivulle. Valitse Parallax Scroll WordPress-valikosta.

Parallax Scroll Shortcode

Esitetyssä taulukossa näet nyt lyhytkoodin juuri luomallesi parallaksiosalle. Kopioi koodi ja avaa sitten asianmukainen sivu tai viesti. Liitä koodi sivun sisältöön oikeaan kohtaan.

Lisää lyhytkoodi

Esikatsele muutokset ja jos olet tyytyväinen uuteen parallaksia kohtaan, napsauta Julkaise. Voit nyt luoda uusia osioita, jotka tarjoavat sivulle tai lähettää täydellisen parallaksitehosteen. Ja jos joudut tekemään muutoksia, avaa vain parallaksiosion sivu ja tee tarvittavat muutokset.

Lopulliset ajatukset

Jos teemallasi ei ole sisäänrakennettua rinnakkaisvaikutusominaisuutta tai jos haluat lisätä tehosteen paitsi kotisivullesi, Parallax Scroll antaa sinun luoda nopeasti parallaksiosioita lisätäksesi sivuillesi tai viesteihisi..

Kuten olette huomanneet, rinnakkaisvaikutuksen lisääminen verkkosivustollesi voi olla erittäin kannattavaa. Sen lisäksi, että se parantaa huomattavasti verkkosivustosi visuaalisuutta, se auttaa houkuttelemaan yleisöäsi, antaa heille helpon navigoinnin sivustollasi ja käyttää sisältöä ja pidentää sivustolla viettämääsi aikaa. Tämän parannetun käyttökokemuksen pitäisi lopulta auttaa sivustoasi kääntymään tavoitteisiinsa nähden riippumatta siitä, lisäävätkö ne palauttavia kävijöitä, keräävät viittauksia tai myyvät tuotteita tai palveluita.

Lisäätkö parallaksi-ilmiön etusivullesi, aloitussivulle, viestiin tai muualle? Kerro ajatuksesi alla olevissa kommenteissa …

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