How to create a slide in Avada?

Optimer din Avada hjemmeside hastighed

18/07/2022

Rating: 4.69 (14122 votes)

Avada er en af de mest populære WordPress-temaer på markedet, kendt for sin alsidighed og utallige tilpasningsmuligheder. Men med så mange funktioner kan det undertiden påvirke din hjemmesides indlæsningshastighed. Heldigvis er der flere måder, hvorpå du kan optimere din Avada-tematiserede hjemmeside for at sikre en hurtigere og mere flydende brugeroplevelse. Denne artikel vil guide dig gennem de vigtigste indstillinger og strategier til at opnå dette.

Does Avada have a slider Revolution?
Avada includes the very popular Slider Revolution by ThemePunch. Slider Revolution creates beautifully animated sliders that are 100% responsive and have some amazing options. We cannot possibly cover everything here, but in this document, we outline how to setup a slider and how to add slides to it.
Indholdsfortegnelse

Avada og Slider Revolution: En Perfekt Kombination?

Mange brugere af Avada-temaet spørger, om det inkluderer Slider Revolution. Svaret er ja, Avada integrerer problemfrit med Slider Revolution, et kraftfuldt plugin til oprettelse af dynamiske og visuelt tiltalende sliders. Dette giver dig mulighed for at fremvise dit indhold, produkter eller portefølje på en engagerende måde. Her er en hurtig vejledning til at komme i gang med at oprette din første slider i Slider Revolution 6:

Oprettelse af en Ny Slider Revolution Slider

Slider Revolution 6 har introduceret en 'Slider Guide', der hjælper dig med den indledende opsætning af dine sliders. For at få adgang til denne guide, skal du klikke på linket 'Slider Revolution' i din WP admin-sidebjælke. Når du er på denne fane, klikker du på knappen 'New Blank Module' øverst i Slider Revolution-grænsefladen. Dette vil bringe guiden frem. Klik blot på 'Start Guide' for at blive ført igennem oprettelsesprocessen for et Slider Revolution-modul.

Trin 1: Vælg Modultype

Det første trin i guiden er at vælge den type modul, du ønsker. Du kan vælge mellem 'Slider', 'Scene' og 'Carousel'. Der er beskrivelser under hver mulighed for at hjælpe dig med dit valg.

Trin 2: Definer Modulstørrelse

Det andet trin handler om størrelsen på dit modul (slider). Du har mulighed for at vælge mellem 'Auto', 'Full-Width' og 'Full-Screen'. Beskrivelserne under valgmulighederne forklarer forskellene for at hjælpe dig med at vælge den rigtige.

Trin 3: Responsiv Skalering

Det tredje trin omhandler responsiv skalering, og her er der tre valgmuligheder. Standardindstillingen er 'intelligent inheriting'. Hvis du er usikker på, hvad du skal vælge, kan du besøge Support Center hos ThemePunch. Husk, at du altid kan foretage ændringer i indstillingerne senere.

Vigtigt: Mens Slider Revolution er et fantastisk værktøj, kan det også bidrage til langsommere indlæsningstider, hvis det ikke bruges korrekt. I Avada's tema-indstillinger kan du vælge at deaktivere Avada Styles For Revolution Slider, hvis du primært bruger standardstilarter eller har din egen tilpassede styling.

Optimering af Avada Fusion Builder og Generel Hastighed

Fusion Builder er hjertet i Avada, der giver dig mulighed for at bygge komplekse layouts. Men for at sikre optimal ydeevne, er det vigtigt at konfigurere dine indstillinger klogt. Her er nogle nøgleområder, du skal fokusere på:

Deaktiver Unødvendige Fusion Builder Elementer

Gå til Fusion Builder -> Settings og deaktiver alle de funktioner, du ikke bruger. Dette forhindrer Avada i unødvendigt at indlæse elementer, som din hjemmeside ikke har brug for. Du kan også overveje at deaktivere Fusion Builder helt for bestemte indholdstyper, hvor du ved, at du ikke vil bruge avancerede funktioner, f.eks. på produktsider, hvis du bruger en anden sidebygger til dem.

Deaktiver Unødvendige Avada Slidere

Som nævnt tidligere, hvis du ikke bruger sliders eller carousels, er det en god idé at deaktivere dem. Gå til Avada -> Theme Options -> Advanced -> Theme Features og deaktiver 'Elastic Slider' og 'Fusion Slider'. Dette frigør ressourcer og reducerer antallet af scripts, der skal indlæses.

Avada CSS Animationer på Mobiler

CSS-animationer kan tilføje et professionelt touch til din hjemmeside, men de kan også påvirke ydeevnen, især på mobile enheder. Mange animationer, især dem der er baseret på hover-effekter, fungerer muligvis ikke optimalt på smartphones og tablets. Gå til Avada -> Theme Options -> Advanced -> Theme Features og slå 'CSS Animations on Mobiles' fra. Hvis du slet ikke bruger CSS-animationer, kan du overveje at deaktivere dem helt, selvom de normalt ikke bør påvirke hastigheden, hvis de er korrekt implementeret.

Deaktiver Unødvendige Avada Scripts

Dit tema indlæser muligvis scripts til funktioner, du ikke bruger. Gå til Avada -> Theme Options -> Advanced -> Theme Features og gennemgå listen over scripts. Deaktiver dem, du ikke har brug for. APIs kan ofte have en negativ indvirkning på hastigheden, så jo færre du har, jo bedre. Hvis du for eksempel ikke bruger Vimeo eller YouTube-videoer, kan du deaktivere deres API-scripts. Hvis din hjemmeside ikke indeholder et Google Map, skal du også deaktivere den tilsvarende script.

ToTop Scripts

Disse scripts er ansvarlige for den pil, der vises nederst til højre på siden, som brugeren kan klikke på for hurtigt at vende tilbage til toppen. Hvis dine sider ikke er særligt lange, kan du overveje at deaktivere dem. Den mobile version er ofte deaktiveret som standard. Det kan være en god idé at beholde scriptet til desktops/laptops, men deaktivere det for mobiler, især fordi pladsen er begrænset, og pilen kan overlappe indholdet.

Host Google Fonts Lokalt

Avada har implementeret muligheden for at hoste Google Fonts lokalt som en GDPR-funktion, men det kan også forbedre indlæsningstiden. Ved at gå til Avada -> Theme Options -> Privacy og indstille 'Google Fonts Mode' til 'Local', downloades fontene til din egen server i stedet for at blive indlæst eksternt fra Google. Bemærk, at dette kan have den modsatte effekt, afhængigt af hvilke fonts du bruger, hvor mange der er, og hvor mange stilarter der er. Det kan resultere i store filer, der påvirker den reelle hastighed, selvom hastighedsværktøjer måske viser en bedre karakter og ikke klager over et eksternt script. Det er en god idé at udføre A/B-test for at se, hvad der fungerer bedst for din specifikke hjemmeside.

What is the Avada slider element?
The Avada Slider Element is a simple helper Element, to allow you to add an Avada Slider, not just above or below the Header, as you can already do with the Avada Page Options, but anywhere into your content.

Aktivér Lazy Loading for Billeder

Siden Avada 5.8 er 'lazy loading' for billeder blevet introduceret. Dette betyder, at billeder kun indlæses, når de er synlige i brugerens browser-vindue. Gå til Avada > Theme Options > Performance > Performance > Enable Lazy Loading. Hvis du bruger et separat plugin til lazy loading, anbefales det at deaktivere det og teste Avada's indbyggede funktion. Jo færre plugins, jo bedre er det generelt for ydeevnen.

Deaktiver WordPress Emoji Script

Denne funktion, tilføjet i version 5.8.1, findes på samme sted som Lazy Loading: Avada > Theme Options > Performance > Performance > Emojis script. Hvis du ikke bruger emojis på din hjemmeside, skal du deaktivere dette script for at reducere antallet af indlæste filer.

Undgå "Related Posts" Funktionen

Funktionen "Related Posts" er kendt for at kunne påvirke hastigheden på en WordPress-hjemmeside negativt. For yderligere at fremskynde din Avada-tematiserede hjemmeside, anbefales det at deaktivere denne funktion i Avada -> Theme Options -> Blog -> Blog Single Post. I stedet kan du bruge intern linking og manuelt nævne relaterede indlæg i dine artikler. Du kan oprette dine egne "related posts" bokse ved hjælp af CSS for bedre kontrol over design og ydeevne.

Aktivér Asynchronous Loading af Media-Queries Filer

Nu hvor vi har fokuseret på at deaktivere funktioner, er det tid til at aktivere noget. Asynchronous loading af media-queries filer er en funktion, der kan forbedre hastigheden på din Avada WordPress-hjemmeside. Gå til Avada -> Theme Options -> Performance -> Dynamic CSS & JS og aktiver 'Load Media-Queries Files Asynchronously'. Sørg også for, at de andre indstillinger, 'CSS Compiling Method' (Database) og 'Enable JS Compiler', er aktiveret som standard. Bemærk: 'JS Compiler' bør kun aktiveres, hvis din server stadig bruger HTTP/1 i stedet for HTTP/2. Avada vil automatisk deaktivere den, hvis HTTP/2 detekteres.

Opsummering og Yderligere Tips

Ved at følge disse trin kan du markant forbedre hastigheden på din Avada-baserede hjemmeside. Husk, at temaet kun er en del af den samlede WordPress-hastighedsoptimering. Andre vigtige faktorer inkluderer valg af en god hosting-udbyder, optimering af billeder, brug af et caching-plugin og regelmæssig vedligeholdelse af din hjemmeside.

Tabel: Vigtige Indstillinger for Hastighedsoptimering

OmrådeIndstillingAnbefaling
Fusion BuilderDeaktiver ubrugte elementerJa
SlidersDeaktiver Elastic & Fusion SliderHvis ikke i brug
AnimationerDeaktiver CSS Animations on MobilesJa
ScriptsDeaktiver ubrugte APIs (Vimeo, YouTube, Google Maps)Ja
FontsHost Google Fonts lokaltTest for effekt
PerformanceEnable Lazy LoadingJa
PerformanceDisable Emojis scriptHvis ikke i brug
BlogDeaktiver Related PostsJa, brug manuel intern linking
PerformanceLoad Media-Queries Files AsynchronouslyJa

Ofte Stillede Spørgsmål (FAQ)

Q1: Kan jeg bruge Slider Revolution med Avada?
Ja, Avada integrerer fuldt ud med Slider Revolution, hvilket giver dig mulighed for at oprette avancerede sliders.

Q2: Vil deaktivering af Avada-funktioner påvirke min hjemmesides funktionalitet?
Kun hvis du faktisk bruger de funktioner, du deaktiverer. Hvis du f.eks. ikke bruger sliders, vil deaktivering af dem ikke påvirke din hjemmeside negativt.

Q3: Er det altid en god idé at deaktivere CSS-animationer på mobiler?
Ja, da mange animationer ikke fungerer optimalt på mobile enheder og kan forsinke indlæsningstiden. Det er en god praksis at deaktivere dem for at forbedre den mobile brugeroplevelse.

Q4: Hvordan ved jeg, hvilke scripts jeg kan deaktivere?
Gennemgå listen over funktioner i Avada's tema-indstillinger og deaktiver kun dem, du er sikker på, at du ikke bruger. Hvis du er i tvivl, lad dem være aktiveret eller lav en sikkerhedskopi, før du foretager ændringer.

Q5: Hvad er "lazy loading"?
Lazy loading er en teknik, hvor billeder og andre medier kun indlæses, når de er ved at blive synlige for brugeren. Dette reducerer den oprindelige indlæsningstid for siden.

Ved at implementere disse optimeringer kan du sikre, at din Avada-tematiserede hjemmeside ikke kun ser fantastisk ud, men også leverer en hurtig og effektiv oplevelse for dine besøgende. Husk at teste din hjemmesides hastighed efter at have foretaget ændringer for at måle effekten.

Hvis du vil læse andre artikler, der ligner Optimer din Avada hjemmeside hastighed, kan du besøge kategorien Teknologi.

Go up