Hur man lägger till en förladdningsanimation till WordPress (steg för steg)

Har du någonsin märkt den snurrande ikonen eller animationen som visas medan en webbplats laddas? Det är en förladdningsanimation, och det är ett användbart verktyg du kan använda i dina WordPress-projekt.

Preloaders fyller ett verkligt syfte. På innehållstunga webbplatser håller de besökarna engagerade under de där avgörande laddningssekunderna, vilket kan minska avvisningsfrekvensen.

Och för företagswebbplatser kan en varumärkesanpassad förladdare till och med ge en professionell touch.

Om du tycker att detta låter komplicerat, oroa dig inte. Vi har tagit fram 2 metoder för att lägga till en WordPress-preloader-animation, lämpliga för användare på alla kunskapsnivåer.

Varför lägga till en förladdningsanimation i WordPress?

En förladdare är en animation du ser medan du väntar på att en sida ska laddas. Den signalerar till användarna att webbplatsen fungerar och ber dem att vänta tålmodigt.

När innehållet är klart försvinner förladdaren och besökaren kan navigera på webbplatsen normalt. Här är ett exempel på detta WordPress-designefter:

Du kanske vill lägga till en laddningsanimation om din sida innehåller stora bilder eller videoinbäddningar. Eftersom dessa tar längre tid att ladda, håller en förladdare användarna engagerade så att de inte lämnar i förtid.

Du bör dock inte använda förladdare bara för att dölja dålig prestanda.

Med det sagt, låt oss titta på hur du enkelt kan lägga till en sidladdningsanimation till din WordPress-webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Hur man lägger till en enkel laddningsanimation med WP Smart Preloader

Ett enkelt sätt att lägga till en förladdningsanimation i WordPress är att använda WP Smart Preloader.

Detta plugin är ett utmärkt val om du vill ha en snabb och enkel lösning utan att gå vilse i för många inställningar.

Det beror på att den har 6 inbyggda WordPress-förladdningsanimationer som du kan använda, och du behöver inte konfigurera många inställningar för att aktivera animationen.

Det första du behöver göra är att installera och aktivera WP Smart Preloader-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Gå efter aktivering till Inställningar » WP Smart Preloader och öppna sedan rullgardinsmenyn 'Smart Preloader'. Detta visar alla olika animationer du kan använda.

Pluginet kommer att visa en förhandsgranskning av din valda animation, så att du kan välja olika förladdare för att se vilken du gillar bäst.

Som standard kommer animationen att visas på hela din WordPress-webbplats, men om du föredrar det kan du använda den endast på startsidan. Markera helt enkelt rutan 'Visa endast på startsidan'.

Om du vill skapa din egen CSS-animation, skriv helt enkelt din kod i rutan 'Anpassad CSS'.

Ett annat alternativ är att skapa en anpassad HTML5-animation genom att lägga till kod i rutan 'Anpassad animation'.

Efter att ha valt en animation, scrolla till avsnittet 'Varaktighet för att visa laddare'. Här kan du ändra hur länge förladdaren spelas. 

Standardalternativet är 1500 millisekunder eller 1,5 sekunder. Detta bör fungera bra för de flesta webbplatser, men du kan ange ett annat nummer om du vill.

Som standard tar animationen 2500 millisekunder eller 2,5 sekunder att tona ut helt. För att ändra detta, skriv bara ett större eller mindre nummer i fältet 'Loader to Fade Out'.

När du är nöjd med hur förladdaren är inställd, klicka bara på knappen ‘Spara ändringar’ för att lagra dina inställningar.

Du kan nu besöka din WordPress-blogg eller webbplats för att se förladdaren i aktion.

Hur man lägger till en anpassningsbar laddningsanimation med Safelayout Cute Preloader

Det första pluginet gör det enkelt att lägga till en laddningsanimation i WordPress. Men om du vill ha mer kontroll över designen för att matcha ditt varumärke, kan du kolla in Safelayout Cute Preloader.

För att börja, installera och aktivera pluginet i ditt WordPress-administrationsområde. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

När pluginet är aktivt, navigera till Inställningar » Safelayout Preloader för att börja konfigurera det.

Steg 1: Aktivera förladdaren och välj en förinställning

Först måste du slå på förladdaren och bestämma var den ska visas på din webbplats.

Du kan börja i fliken 'Förinställningar' för att välja en färdig design. Om du gillar en, klicka helt enkelt på knappen 'Ändra inställningar till denna förladdare' under mallen.

Byt sedan till fliken 'Visningsinställningar'.

Här behöver du kryssa i rutan 'Aktivera Safelayout Cute Preloader' för att säkerställa att pluginen fungerar.

Använd sedan rullgardinsmenyn 'Visa på' för att välja var förladdaren ska visas. För den här handledningen väljer vi 'Hela webbplatsen'.

På den här skärmen kan du också ställa in varaktigheten för animationen.

• Minsta laddningstid: Detta ställer in den kortaste tiden som förladdaren kommer att vara synlig. Det är användbart om du vill säkerställa att din varumärkesanpassade animation alltid ses åtminstone en stund, även om din sida laddas omedelbart.
• Maximal laddningstid: Detta anger den längsta tid som förladdaren kommer att vara synlig. Detta fungerar som ett skyddsnät, som automatiskt döljer förladdaren så att användarna inte fastnar med att titta på den om din sida stöter på ett laddningsfel.

Du kan också välja att visa en 'Stäng'-knapp efter att några sekunder har passerat. När du har gjort dina ändringar klickar du bara på 'Spara ändringar'.

Steg 2: Anpassa Core Animation

Nu kan du designa utseendet på själva animationen. Detta inkluderar bakgrunden, huvudikonen och en valfri förloppsindikator.

Gå först till fliken 'Bakgrund'.

Här kan du välja en animationseffekt, ändra bakgrundsfärgen och justera dess opacitet.

Om du inte vill ha en speciell bakgrundseffekt, välj bara 'Ingen bakgrund'.

Klicka sedan på fliken 'Progress Bar'.

En förloppsindikator är ett utmärkt sätt att visa besökare att sidan laddas.

Du kan välja en form och sedan anpassa dess färg, position och storlek.

Om du inte vill ha en, välj bara 'Ingen förloppsindikator'.

Därefter går du till fliken 'Ikon'.

Detta är den huvudsakliga animerade grafiken, som en snurrande cirkel.

Du kan välja en ikon och sedan ändra dess storlek, färg och animationsstil. Om du tycker att en ikon är för mycket med dina andra inställningar kan du välja 'Ingen ikon'.

Kom ihåg att klicka på knappen 'Spara ändringar' när du är klar med att anpassa varje flik.

Steg 3: Lägg till ditt varumärke och text

Slutligen kan du lägga till din logotyp och anpassad text för att få förladdaren att matcha ditt varumärke perfekt.

Gå till fliken 'Varumärkesbild' och markera rutan 'Visa varumärke' för att lägga till din logotyp.

Klicka sedan på knappen 'Mediebibliotek' för att ladda upp din logotypbild.

Du kan sedan justera logotypens position och marginaler så att den passar snyggt med de andra elementen.

Låt oss sedan titta på fliken 'Räknare'.

Den här inställningen visar en procentandel från 0% till 100% för att indikera laddningsframsteg. Du kan aktivera den och anpassa dess position, färg och teckenstorlek.

Gå slutligen till fliken 'Text'. Som standard visar förladdaren texten 'Loading...', men du kan ändra detta till något mer kreativt.

Markera helt enkelt rutan 'Visa text', skriv ditt eget meddelande och anpassa teckensnitt, färg och position.

När du är klar klickar du på knappen ‘Spara ändringar’.

Och det var allt! Din förladdningsanimation bör nu visas baserat på dina konfigurationer. Du kan visa din webbplats på mobil, dator eller surfplatta för att se den i aktion.

Här är hur vår ser ut:

Vanliga frågor om WordPress-förinläsare

Under åren har många läsare frågat oss om att använda förinläsare. Här är svaren på några av de vanligaste frågorna.

Påverkar förladdare webbplatshastigheten?

Nej, en förladdare gör inte att din webbplats laddas snabbare. Det är ett rent visuellt verktyg för att underhålla besökare medan webbläsaren laddar ner ditt innehåll.

För att faktiskt förbättra din webbplats hastighet bör du fokusera på cachning, optimering av bilder och användning av en snabb hostingleverantör.

Är förladdningar dåliga för SEO?

Om de implementeras korrekt är de okej. Du måste dock vara försiktig med Googles Core Web Vitals, specifikt Largest Contentful Paint (LCP).

Om din förladdare stannar på skärmen för länge kan Google tro att ditt huvudinnehåll ännu inte har laddats. Detta kan skada dina rankingar. Vi rekommenderar att animationsvaraktigheten hålls under 1,5 till 2 sekunder.

Min förladdare slutar inte att snurra. Hur fixar jag det?

Om din förladdare fastnar orsakas det ofta av en konflikt med ett cachningsplugin. Plugins som WP Rocket har ofta en funktion för att "fördröja JavaScript-körning".

Denna funktion stoppar förladdarens kod från att köras, så den får aldrig signalen att sidan är färdigladdad. För att åtgärda detta måste du exkludera förladdarpluginets filer från inställningarna för JavaScript-fördröjning i ditt cachningsplugin.

Kan jag använda en förladdare endast på specifika sidor?

Ja, absolut. De flesta preloader-plugins låter dig välja var animationen visas.

Du kan aktivera det över hela webbplatsen, bara på startsidan, eller till och med på specifika inlägg och sidor där du förväntar dig längre laddningstider.

Vad är skillnaden mellan en förladdare och en startsida?

En förladdare spelas medan ditt innehåll laddas och försvinner automatiskt.

En splash-sida är en separat, introducerande skärm som kräver att en användare klickar på en länk eller knapp för att komma in på huvudwebbplatsen.

Vi avråder generellt från att använda splashsidor eftersom de skapar ett extra steg för besökare och kan ha en negativ inverkan på din avvisningsfrekvens och SEO.

Fler WordPress-knep för att engagera dina webbplatsbesökare

Att lägga till en förladdningsanimation är bara ett av många sätt att förbättra din WordPress-webbplats. Om du letar efter fler kreativa idéer för att fängsla din publik, har vi dig täckt:

• Hur man lägger till en parallaxeffekt i vilket WordPress-tema som helst – Skapa djup och visuell intresse med denna scrollande illusionsteknik.
• Hur man lägger till fallande snöflingor på din WordPress-blogg – Gläd dina besökare med en touch av vintermagi på din webbplats.
• Hur du enkelt lägger till mörkt läge på din WordPress-webbplats – Erbjud en bekvämare surfupplevelse med denna populära funktion.
• Sätt att ge din WordPress-webbplats Halloween-effekter – Spöka till din webbplats med dessa roliga och festliga Halloween-knep.
• Hur man lägger till en animerad bakgrund i WordPress – Gör ett djärvt uttalande med iögonfallande rörliga bakgrunder.
• Hur man lägger till YouTube-video som bakgrund i helskärm i WordPress – Skapa ett kraftfullt första intryck med dynamiska videobakgrunder.
• Hur du lägger till oändlig scrollning på din WordPress-webbplats (steg-för-steg-guide) – Håll besökarna engagerade genom att sömlöst ladda mer innehåll när de scrollar.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du enkelt lägger till en förladdningsanimation på din WordPress-webbplats. Du kanske också vill kolla in våra experters val av de bästa dra-och-släpp-sidbyggarna i WordPress och vår kompletta guide om hur man redigerar en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.