For nylig spurgte en af vores læsere os, hvordan man tilføjer parallax-effekt til ethvert WordPress-tema?
Parallax-effekten er en populær tendens i disse dage på nettet, hvor et baggrundsbillede ruller langsommere end forgrundsindholdet.
I denne vejledning viser vi dig, hvordan du nemt tilføjer parallax-effekt til ethvert WordPress-tema.
Men hvis du aldrig har installeret WordPress, skal du opdage Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog
Men tilbage til hvorfor vi er her.
Hvad er en parallax-effekt?
Parallax-effekten er en moderne webdesignteknik, hvor baggrundselementet ruller langsommere end forgrundsindholdet. Denne effekt tilføjer baggrundsbillederne dybde og gør dem interaktive.
Opdag vores 25 WordPress temaer med parallax for at oprette en hjemmeside
Parallax-effekten kan bruges på destinationssider, salgssider eller hjemmesiden til et virksomhedswebsted. Det er en fantastisk måde at fremhæve forskellige sektioner på en lang side.
mange premium WordPress-temaer har en indbygget parallakseffekt på deres hjemmeside. Du kan også bruge parallax-effekten med de fleste plugins WordPress visuel oprettelse af sider.
Dog alle WordPress-temaer tilbyder ikke en indbygget parallakseeffekt, og du vil måske ikke bruge en visuel sidebygger kun for en parallakseeffekt.
Lad os se på, hvordan du nemt kan tilføje parallax-effekten til ethvert WordPress-tema.
Metode 1: Tilføj parallakseffekten til ethvert WordPress-tema ved hjælp af et plugin
Denne metode kræver ikke at tilføje nogen kode til dit WordPress-tema. Det er lettere og anbefales til de fleste brugere.
Den første ting, du skal gøre, er at installere og aktivere plugin Avancerede WordPress-baggrunde. For flere detaljer, tjek vores trin for trin guide til, hvordan du installerer et WordPress-plugin.
Efter aktivering af pluginet skal du redigere den side, hvor du vil tilføje parallax-effekten. Du vil bemærke den nye knap "Avancerede WordPress-baggrunde»På værktøjslinjen til visuel editor.
Ved at klikke på det vises et pop op-vindue, hvor du kan ændre forskellige baggrundsindstillinger, som du vil tilføje.
Først og fremmest skal du vælge et billede som baggrund og derefter kontrollere indstillingen " Stretch'.
Så skal du klikke på knappen Vælg billede For at downloade eller vælge et billede, du vil bruge. Sørg for, at du bruger et stort billede, ellers vises det pixeleret.
Derefter skal du aktivere effekten Parallax Ved at vælge en type parallax-effekt. Der er en række stilarter til rådighed, som du kan eksperimentere med. Den mest anvendte parallax-effekt er at rulle.
Klik på knappen indsatte at fortsætte.
Plugin tilføjer en shortcode på din Publishing Editor. Det ser sådan ud:
[nk_awb awb_type = "image" awb_stretch = "sand" awb_image = "22" awb_image_size = "fuld" awb_parallax = "rulle" awb_parallax_speed = "0.5" awb_mouse_parallax = "sand" awb_mouse_alla_b her [/ nk_awb]
Erstat " dette indhold Gem derefter din side ved hjælp af dit eget indhold.
Du kan besøge dit websted for at se det i aktion.
Metode 2: Føj "Parallax" -effekten til ethvert WordPress-tema med CSS
Denne metode kræver, at du har en vis viden om "HTML / CSS" såvel som hvordan WordPress-temaer og plugins fungerer.
Først skal du uploade til dit WordPress-mediebibliotek, det billede, du vil bruge til parallakseffekten ved at besøge " medier> Tilføj nyt '.
Gå videre ved at opdage Sådan organisere medier på din WordPress blog
Efter upload af billedet skal du kopiere billedets URL ved at redigere billedet i WordPress-mediebiblioteket.
Derefter skal du tilføje følgende HTML-kode på den side, hvor du vil vise parallax-effekten. Du kan også tilføje denne HTML-kode til din WordPress tema eller dit barn tema.
div class = "parallax"> Dit indhold her ...
Derefter skal du tilføje følgende brugerdefinerede CSS-kode til dit WordPress-tema.
.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); højde: 100%; baggrundsbestemmelse: fast; baggrundsstilling: center; background-repeat: no-repeat; baggrundsstørrelse: dækning; margin-left: -410px; margin-højre: -410px; } .parallax-indhold {bredde: 50%; margen: 0 auto; farve: #fff; padding-top: 50px; }
Husk at erstatte URL'en til baggrundsbilledet med dit eget billede.
Du kan nu gemme dine ændringer og besøge dit websted.
Her er ! Nu kan du tilføje parallax-effekten til dit WordPress-websted.
Oplev også nogle temaer og premium WordPress-plugins
Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af din blog eller hjemmeside.
Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.
1. WooCommerce Donation
Accepter via denne udvidelse donationer på dit WooCommerce-websted med beløb, der er specificeret af kunderne. De vil være i stand til at give så meget som de vil. Hver donation kan præsenteres som ethvert sædvanligt produkt af WooCommerce.
Hvis kunden springer over kurvssiden eller går direkte til kassen uden at give en donation, vises der et link over kassen, så de kan give deres donation.
Hvert trin i brugen af WooCommerce Donation forklares i en dokumentation med skærmbilleder. Aktivér bare pluginet, så finder du feltet "Tilføj donation" på kurven.
Downloade | demo | Web-hosting
2. LinkedIn Mere
LinkedIn Plus er en WordPress plugin som giver dig mulighed for at præsentere din LinkedIn-profil på din blog. Det virker også til blogs med flere forfattere. Det tilføjer Følg og Del-knapper til dine WordPress-indlæg, sider eller widgets.
Det er en fantastisk måde at tilføje alle LinkedIn-funktioner til din blog og validere dit brand hos forbrugerne. Det giver dig mulighed for at tilpasse dets udseende, konfigurere indstillinger og aktivere andre avancerede muligheder for at promovere din profil til potentielle rekrutterere eller arbejdsgivere.
Downloade | demo | Web-hosting
3. YouTuber
YouTubeR er en WordPress plugin unik platform, som giver dig mulighed for at uploade videoer til YouTube fra din hjemmeside og nemt integrere YouTube-videoer, afspilningslister og kanaler på din hjemmeside.
Med dette plugin har du muligheden for at oprette enestående videogallerier på dit websted.
Dens andre funktioner er: muligheden for nemt uploade videoer til YouTube fra dit WordPress-websted, integration nemme videoer, afspilningslister og YouTube-kanaler til dit websted, support til Visual Composer, the uendelig rulle i afspilningslister, fremragende cache, responsivt layout, detaljeret dokumentation og mere.
Downloade | demo | Web-hosting
Anbefalede ressourcer
Find ud af om andre anbefalede ressourcer, der hjælper dig med at opbygge og administrere dit websted.
- Sådan løses fejlen "Kan ikke skrive til disk" på WordPress
- Hvordan man bliver en succesrig blogger og tjener penge med WordPress
- Sådan publicere dine artikler via e-mail på WordPress
- Hvordan man bliver en succesrig blogger og tjener penge med WordPress
Konklusion
Det er alt! Vi håber, det har været til stor hjælp. Tøv ikke med at del med dine venner på dine foretrukne sociale netværk.
Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.
Og hvis du har nogle forslag eller bemærkninger, så lad dem ligge i vores afsnit kommentarer.
...
