Nylig spurte en av våre lesere oss hvordan vi skulle legge til parallakseffekt til et WordPress-tema?
Parallax-effekten er en populær trend i disse dager på nettet der et bakgrunnsbilde ruller saktere enn forgrunnsinnhold.
I denne opplæringen vil vi vise deg hvordan du enkelt kan legge til parallakseffekt til ethvert WordPress-tema.
Men hvis du aldri har installert WordPress, kan du oppdage Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Men tilbake til hvorfor vi er her.
Hva er en parallakseffekt?
Parallax Effect er en moderne webdesignteknikk der bakgrunnselementet ruller saktere enn forgrunninnholdet. Denne effekten gir bakgrunnsbildene dybde og gjør dem interaktive.
Oppdag vår 25 WordPress temaer med parallax for å lage et nettsted
Parallax-effekten kan brukes på destinasjonssidersalgssider eller hjemmesiden til et bedriftsnettsted. Det er en fin måte å markere forskjellige seksjoner på en lang side.
mange premium WordPress-temaer har en innebygd parallakseffekt på hjemmesiden deres. Du kan også bruke parallax-effekten med de fleste plugins WordPress visuell oppretting av sider.
Imidlertid alle WordPress-temaer tilbyr ikke en innebygd parallakseeffekt, og du vil kanskje ikke bruke en visuell sidebygger bare for en parallakseeffekt.
La oss ta en titt på hvordan du enkelt kan legge til parallakseffekten til et WordPress-tema.
Metode 1: Legg til parallakseffekten til et WordPress-tema ved hjelp av et plugin
Denne metoden krever ikke å legge til noen kode til WordPress-temaet ditt. Det er enklere og anbefales for de fleste brukere.
Det første du trenger å gjøre er å installere og aktivere plugin-modulen Avanserte WordPress-bakgrunner. For flere detaljer, sjekk ut vår trinnvise guide for hvordan du installerer et WordPress-plugin.
Etter at du har aktivert pluginet, må du redigere siden der du vil legge til parallakseffekten. Du vil legge merke til den nye knappen "Avanserte WordPress-bakgrunner»På verktøylinjen for visuell redigering.
Ved å klikke på den vises et popup-vindu der du kan endre forskjellige bakgrunnsinnstillinger du vil legge til.
Først og fremst må du velge et bilde som bakgrunn og deretter merke av for alternativet " Strekk'.
Så må du klikke på knappen Velg bilde For å laste ned eller velge et bilde du vil bruke. Forsikre deg om at du bruker et stort bilde ellers vil det vises pikslert.
Etter det må du aktivere effekten Parallax Ved å velge en type parallakseffekt. Det er en rekke stiler tilgjengelig som du kan eksperimentere med. Den vanligste parallakseffekten som brukes er å rulle.
Klikk på knappen innfelt å fortsette.
Plugin vil legge til en snarvei på publisering Editor. Det vil se slik ut:
[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "bla" awb_parallax_speed = "0.5" awb_mouse_parallax = "sann" awb_mouse_alla_bx her [/ nk_awb]
Erstatt " dette innholdet Lagre siden din med ditt eget innhold.
Du kan besøke nettstedet ditt for å se det i aksjon.
Metode 2: Legg til "Parallax" -effekten til ethvert WordPress-tema med CSS
Denne metoden krever at du har litt kunnskap om "HTML / CSS", samt hvordan WordPress-temaer og plugins fungerer.
Først må du laste opp til WordPress-mediebiblioteket ditt, bildet du vil bruke for parallakseffekten ved å besøke " media> Legg til nytt '.
Gå videre ved å oppdage Hvordan organisere mediene på din WordPress blog
Etter at du har lastet opp bildet, må du kopiere nettadressen ved å redigere bildet i WordPress-mediebiblioteket.
Deretter må du legge til følgende HTML-kode på siden der du vil vise parallakseffekten. Du kan også legge til denne HTML-koden i din WordPress tema eller ditt barn tema.
div class = "parallax"> Innholdet ditt her ...
Deretter må du legge til følgende tilpassede CSS-kode i WordPress-temaet.
.parallax {bakgrunnsbilde: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); høyde: 100%; bakgrunnsbeslutning: fast; bakgrunnsposisjon: senter; bakgrunn-gjentak: ikke-gjenta; bakgrunnsstørrelse: deksel; margin-left: -410px; margin-right: -410px; } .parallax-innhold {width: 50%; margin: 0 auto; farge: #fff; padding-top: 50px; }
Husk å erstatte URL-en til bakgrunnsbildet med ditt eget bilde.
Du kan nå lagre endringene dine og besøke nettstedet ditt.
Her er ! Nå kan du legge til parallakseffekten på WordPress-nettstedet ditt.
Oppdag også noen temaer og premium WordPress-plugins
Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.
Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.
1. WooCommerce Donation
Godta gjennom denne utvidelsen donasjoner på WooCommerce-nettstedet ditt med beløp spesifisert av kunder. Dette vil tillate dem å gi så mye de vil. Hver donasjon kan presenteres som et hvilket som helst vanlig produkt av WooCommerce.
Hvis kunden hopper over handlevognen eller går direkte til kassen uten å gi en donasjon, vil det vises en lenke over kassen, slik at de kan donere.
Hvert trinn i bruk av WooCommerce Donation er forklart i en dokumentasjon med skjermbilder. Bare aktiver pluginet, så finner du feltet "Legg til donasjon" på handlekurven.
2. LinkedIn Mer
LinkedIn Plus er en WordPress Plugin som lar deg presentere din LinkedIn-profil på bloggen din. Det fungerer også for blogger med flere forfattere. Den legger til Følg og Del-knapper til WordPress-innleggene, sidene eller widgetene dine.
Det er en fin måte å legge til alle LinkedIn-funksjonene i bloggen din og validere merkevaren din hos forbrukerne. Det gir deg muligheten til å tilpasse utseendet, konfigurere innstillinger og aktivere andre avanserte alternativer for å markedsføre profilen din for potensielle rekrutterere eller arbeidsgivere.
3. YouTuber
YouTubeR er en WordPress Plugin unik plattform, som lar deg laste opp videoer til YouTube fra nettstedet ditt og enkelt bygge inn YouTube-videoer, spillelister og kanaler på nettstedet ditt.
Med denne plugin har du muligheten til å lage eksepsjonelle videogallerier på nettstedet ditt.
De andre funksjonene er: muligheten for enkelt laste opp videoer til YouTube fra WordPress-nettstedet ditt, integrering enkle videoer, spillelister og YouTube-kanaler til nettstedet ditt, støtte for Visual Composer, the uendelig rulling i spillelister, utmerket cache, responsiv layout, detaljert dokumentasjon og mer.
Anbefalte ressurser
Finn ut om andre anbefalte ressurser for å hjelpe deg med å bygge og administrere nettstedet ditt.
- Hvordan fikse feilen "Kan ikke skrive til disk" på WordPress
- Hvordan bli en vellykket blogger og tjene penger med WordPress
- Hvordan publisere artikler via e-post på WordPress
- Hvordan bli en vellykket blogger og tjene penger med WordPress
konklusjonen
Det er alt! Vi håper det har vært til stor hjelp. Ikke nøl med å del med vennene dine på dine favoritt sosiale nettverk.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.
Hvis du har noen forslag eller kommentarer, kan du la dem ligge i seksjonen vår commentaires.
...
