Skip to content

Mikä on ja miten tehdä parallaksitehoste WordPressissä (esimerkki)

25 de elokuu de 2021
1629852699 wordpress logo

Nykyään on hyvin yleistä käyttää Parallax -tehostetta verkkosivujen suunnittelussa, mikä tekee siitä dynaamisemman ja houkuttelevamman. Siksi selitämme tässä blogissa, mitä se on ja mitä miten tehdä Parallax -tehoste WordPressissä.

Parallax -tehoste soveltuu verkkosivun suunnitteluun ja se aktivoidaan vierityslukonäppäimellä. Se muodostaa liikkeen sivun taustakuvalle ja tekee sen eri tavalla kuin muu sisältö. Siinä on myös tarkoitus lisätä suunnittelun syvyyttä, tehdä siitä mielenkiintoinen ja houkutteleva käyttäjälle.

Nyt kun tiedät, mikä on parallaksivaikutus, selitämme miten voit tehdä sen WordPressin avulla. Ensimmäinen asia, joka on pidettävä mielessä, on, että voit käyttää kahta tapaa ilman koodia ja koodia, nämä menetelmät selitetään sinulle alla.

Kuinka tehdä parallaksitehoste ilman koodia WordPressissä

Paralaksitehosteen käyttäminen web -suunnittelussa on täysin yksinkertaista ilman koodeja. Seuraavaksi selitämme sen sinulle vaihe vaiheelta:

  • Siirry ensin WordPress.org -sivuston etusivulle.
  • Hae työpöydältä ”Plugin” ja napsauta ”Add new”, hakukentän kopio ”Parallaksi”. Tuloksena on suuri valikoima, valitse itsellesi sopivin, asenna ja aktivoi se.
  • Kun se on asennettu, se näkyy työpöydän vasemmalla puolella ”Parallax -rulla”, Mene sinne ja lisää uusi, laita haluamasi otsikko. Sisältökentässä on kaksi välilehteä: ”Visual” ja ”HTML”. Valitse tässä tapauksessa ”Visual”.
  • Tähän sisältökenttään voit kirjoittaa tekstin, jonka haluat Parallaxille. Voit käyttää WordPressin tarjoamia tyypillisiä tekstimäärityksiä.
  • Määritä sitten ”Erinomainen kuva”; Suosittelemme kuvaa, jolla on hyvä resoluutio, esimerkiksi 2000 x 1000 pikseliä.
  • Kun olet lisännyt esitellyn kuvan, siirry alareunaan, jossa voit määrittää Parallax -vaikutus. Voit muokata kokoa, sijaintia, nopeutta ja muita vaihtoehtoja.
  • Tällöin sinun pitäisi mennä oikeassa yläkulmassa ja valita ”Julkaise”.
  • Siirry sitten työpöydän valikkoon ja valitse Parallax Scroll uudelleen, se näyttää luettelon juuri luomastasi. Kopioi siellä ”Lyhytkoodi” -kohdan alla näkyvät tiedot.
  • Avaa kotisivusi ja valitse Muokkaa sivua.
  • Etsi sivusi sivusto, jossa haluat Parallaxin näkyvän, ja liitä sitten ”Lyhytkoodi”, jonka juuri kopioit edellisessä vaiheessa.
  • Napsauta lopuksi ”Päivitä”, jotta muutokset otetaan käyttöön etusivullasi.
  • Valitse WordPress -valikosta ”Vieraile sivustolla” ja näet Parallax -vaikutus sivullasi.
  • Jos haluat tehdä muutoksia, voit tehdä sen palaamalla WordPress -hallintapaneelin valikkoon. Päällä Parallax Scroll Voit löytää juuri luomasi ja tehdä tarvittavat muutokset.

Kuinka tehdä parallaksitehoste koodin avulla

Saatat ajatella, että tämän vaikutuksen luominen koodeja käyttämällä Se on monimutkaista, mutta se ei ole niin. Kiinnitä huomiota tähän yksinkertaiseen menettelyyn, jonka voit tehdä klassisesta WordPress -editorista.

  • Ensimmäinen asia, joka sinun on tehtävä, on poistaa juuri syöttämäsi lyhytkoodi kotisivua muokattaessa. Lisäksi sinun täytyy poista asentamasi Parallax käytöstä, Plugins -valikossa.
  • Avaa sivu tai artikkeli, johon haluat lisätä Parallax -tehosteen.
  • Etsi sisältökentästä ”HTML” -kielen välilehti.
  • Etsi sivusto, jossa haluat Parallaxin näkyvän. Sinne sijoitat seuraavat:

Parallax -otsikko

thml -komennot

  • Kuten näet, sinun on annettava nimi Parallax -laitteellesi ja sen ”h1”. Napsauta sitten päivitä.
  • Määritä sitten kaikki lisättävät ominaisuudet muita CCS -elementtejä. Siellä voimme lisätä kuvan käyttämällä sen URL -osoitetta sekä säätää sen kokoa ja sijaintia.
  • Samalla tavalla voimme määrittää Parallaxin kirjaimet, koon, värin ja sijainnin. Teemme tämän kaiken kopioimalla koodikenttään seuraavat asiat:

.miparallax {

taustakuva: URL (http: //….jpg);

leveys: 100%;

korkeus: 300%;

ylivuoto piilotettu;

taustakiinnitys: kiinteä;

taustakoko: 100%;

}

.miparallax h1 {

väri: #fff;

tekstin tasaus, keskelle;

marginaali: 130px;

}

muokata wordpress -komentoa

Näin yksinkertaisesti voit tehdä Parallax -tehosteen WordPressin kautta, seuraa sivustomme tietääksesi, mitä muita tekniikoita ja resursseja voit oppia tekemään sen.