Hvordan legge til en parallakseffekt til ethvert WordPress-tema

Nylig spurte en av leserne oss hvordan vi kan legge til en parallakseffekt til ethvert WordPress-tema? Parallax-effekt er en webdesigntrend der et bakgrunnsbilde ruller saktere enn innholdet i forgrunnen. I denne artikkelen vil vi vise deg hvordan du enkelt kan legge til en parallakseffekt til ethvert WordPress-tema.


Legger til parallakseffekt til ethvert WordPress-tema

Hva er en parallakseffekt?

Parallax-effekt er en moderne webdesignteknikk der bakgrunnselement ruller saktere enn innhold i forgrunnen. Denne effekten gir bakgrunnsbildene dybde og får dem til å føle seg interaktive.

Parallaxeffekt kan brukes på destinasjonssider, langformet innhold, salgssider eller hjemmesiden til et bedriftsnettsted. Det er en flott måte å fremheve forskjellige seksjoner på en lang side.

Mange premium WordPress-temaer har innebygd parallakseffekt på hjemmesiden sin. Du kan også bruke parallakseffekt i de fleste WordPress-sidebygger-plugins.

Imidlertid har ikke alle temaene en innebygd parallakseffekt, og det kan være lurt å ikke bruke en sidebygger til å lage tilpassede sidelayouter bare for en parallakseffekt.

La oss se på hvordan du enkelt kan legge til parallaks bakgrunnseffekt til ethvert WordPress-tema.

Metode 1: Legg til parallakseffekt til ethvert WordPress-tema ved hjelp av plugin

Denne metoden krever ikke at du legger til noen kode til WordPress-temaet. Det er enklere og anbefalt for de fleste brukere.

Det første du trenger å gjøre er å installere og aktivere Advanced WordPress Backgrounds plugin. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Ved aktivering må du redigere siden eller innlegget der du vil legge til parallakseffekten. Du vil legge merke til den nye ‘Advanced WordPress Backgrounds’ -knappen i den visuelle redigereren.

WordPress avansert bakgrunnsknapp

Hvis du klikker på den, får du opp en popup der du kan endre forskjellige innstillinger for bakgrunnen du vil legge til.

Først må du velge et bilde som bakgrunnstype og deretter sjekke alternativet “strekke”.

Parallax bakgrunnsinnstillinger

Deretter må du klikke på ‘Velg bilde’ -knappen for å laste opp 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 Parallax ved å velge en parallaxtype. Det er en rekke stiler tilgjengelig som du kan eksperimentere med. Den mest brukte parallakseffekten er bla.

Klikk på Sett inn-knappen for å fortsette.

Plugin-en vil nå legge til en kortkode inne i WordPress-postredigeringsprogrammet. Det vil se slik ut:

.

Innholdet ditt her

[/ Nk_awb]

Bytt ut “Innholdet ditt her” med ditt eget innhold, og lagre siden.

Du kan nå besøke nettstedet ditt for å se det i aksjon.

Forhåndsvisning av parallakseffekt

Metode 2: Legg til parallakseffekt til ethvert WordPress-tema med CSS

Denne metoden krever at du har en rettferdig forståelse av HTML / CSS, samt hvordan WordPress-temaer fungerer.

Først må du laste opp bildet du vil bruke for parallakseffekt til ditt WordPress mediebibliotek ved å besøke Media »Legg til nytt side.

Etter å ha lastet opp bildet, må du kopiere URL-en til bildet ved å redigere bildet i WordPress mediebibliotek.

Kopier URL for bilde

Deretter må du legge til følgende HTML på siden eller innlegget der du vil vise parallakseffekten. Du kan også legge til denne HTML-en i ditt WordPress-tema eller barnetema.

Innholdet ditt går her…

Deretter må du legge til følgende tilpassede CSS til ditt WordPress-tema.

.parallaks {
bakgrunnsbilde: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
høyde: 100%;
bakgrunnsvedlegg: fast;
bakgrunnsposisjon: sentrum;
bakgrunn-gjenta: ikke-gjenta;
bakgrunnsstørrelse: dekke;
margin-venstre: -410px;
margin-right: -410px;
}

.parallax-innhold {
bredde: 50%;
margin: 0 auto;
farge: #fff;
padding-top: 50 piksler;
}

Ikke glem å erstatte URL-en til bakgrunnsbildet med ditt eget bakgrunnsbilde.

Du kan nå lagre endringene dine og besøke nettstedet ditt for å se det i aksjon.

Parallakseffekt lagt til med CSS

Merk: Det kan hende du må justere CSS for å fungere med nettstedets layout.

Vi håper denne artikkelen hjalp deg med å lære hvordan du enkelt kan legge til parallakseffekt til ethvert WordPress-tema. Det kan også være lurt å se megalisten vår over de mest ønskede WordPress-tipsene, triksene og hakkene.

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