Slik optimaliserer du nettstedoppsettet ditt med Elementor

Vil du vite hvordan du kan optimalisere oppsettet på nettstedet ditt med Elementor ?

Å optimalisere nettstedets ytelse er en av de viktigste aspektene ved den brukeropplevelse. Et nettsted som sakte laster inn kan frustrere enhver bruker, og kan ofte resultere i avvisningshastighet høy som kan påvirke suksessen til virksomheten vår negativt.

Ytelsen til nettstedet kan påvirkes av mange faktorer, for eksempel: store bildestørrelser, serverkonfigurasjoner, for mange plugins, blant andre faktorer.

Nettstedsytelse er en av våre sterkeste verdier som webskapere. Derfor laget vi dette kurset i 5 deler.

Nå kan du lære å lage oppsett og innlegg ved å bruke optimale teknikker. Denne kunnskapen vil sikre at nettstedene dine ikke vil inneholde overflødige seksjoner, kolonner eller widgets som bare ikke er nødvendig. Vi vil også utforske noen innebygde widgetfunksjoner for å forbedre lastetiden.

Ved slutten av denne opplæringen vil du være helt klar til å optimalisere ytelsen til hvert nettsted Elementor du oppretter og umiddelbart høster fruktene.

Leksjon 1: Beste praksis for layoutoptimalisering

I vår første leksjon vil vi dekke den mest effektive måten å lage sidene og innleggene dine på i redigeringsprogrammet Elementor. Vi ser ofte bruk av alt for mange seksjoner, kolonner, interne seksjoner og widgets, når samme layout kunne vært oppnådd ved å bruke langt færre elementer.

Bruk av store mengder elementer bremser nettstedets ytelse, så la oss dykke ned og lære hvordan du bygger nettsteder med Elementor på den mest effektive måten.

Vi vil dekke følgende emner:

• En nærmere titt på strukturen til en riktig side
• Se og test ytelsen til nettstedet ditt
• Optimalisering av topptekst, bunntekst og sideinnhold
• Eksempler på gode og dårlige nettstedoppsettspraksis
• Riktig bruk av widgets, posisjonering og globale stiler
• Tips for å unngå belastningsforsinkelse, forbedre SEO og øke lastetiden
• Tilgjengelighet optimalisering
• Redusere mengden DOM -elementer
• Og mye mer !

For bedre å forstå de optimale oppsettene i Elementor, skal vi utforske en Elementor -mal som viser vanlige overgrep mot seksjoner, kolonner og widgets. Ved slutten av denne leksjonen vil vi ha fullstendig ombygd hele denne siden ved å redusere antall kolonner og widgets. Vår første side består av ni seksjoner, 31 kolonner, fem interne seksjoner og 44 widgets.

Ved slutten av opplæringen vil vår optimaliserte side bli redusert til seks seksjoner, syv kolonner og 16 widgets.

Vi vil bruke det gratis, lette Hei temaog vi vil gjenskape hver del av malen og forbedre den generelle ytelsen til nettstedet ved å bruke beste praksis.

Test for dårlig praksis

Før vi dykker inn i optimalisering av nettstedlayout, la oss kjøre en test på siden vår for å forstå hva som skjer når noen besøker nettstedet vårt. Når alle våre optimaliseringer er utført, vil vi gjenta testen og sammenligne resultatene.

Trinn 1: Bekreft nettstedet ditt i et inkognitovindu

• Åpne et nytt vindu i "Inkognitomodus" og skriv inn nettadressen til websiden du tester.

Trinn 2: Kontroller at du bruker den direkte URL -banen

Hvis du er usikker på sidelinken din, kan du enkelt finne den ved å gå til WP -dashbordet:

• Klikk på "Pages" for å se alle sidene på nettstedet ditt.
• Hold markøren over siden din og klikk på "Vis" -alternativet. Dette tar deg direkte til siden din.
• Kopier og lim inn denne nettadressen i inkognitovinduet, og når nettstedet er lastet inn er du klar til å teste det!

Testing og visning av resultatresultater

Trinn 1: Test resultatene

Du har kanskje brukt Chrome Developer Tools tidligere.

Hvis ikke, for å inspisere og vise HTML- og CSS -innholdet på siden din:

• Høyreklikk hvor som helst på siden din, og klikk på velg “Inspiser.” Du vil se flere faner der du kan lese HTML og CSS, finne feil, få SEO -resultater og kjøre forskjellige tester.
• Velg kategorien Nettverk og trykk på cmd eller ctrl + R for å laste inn resultatene.

Som du kan se, tar vårt nåværende oppsett 2,88 sekunder å laste inn og utfører 81 forespørsler.

Trinn 2: Se resultatresultater

• Bytt til fanen Fyr, der vi kan kjøre en revisjonsrapport på siden vår.

Dette vil gi oss mer informasjon om sidens nåværende ytelse.

• Velg "Generer rapport". Etter et øyeblikk vil rapporten din vises.

Vi får for øyeblikket en ytelsesvurdering på 73/100, som vi absolutt kan jobbe med.

Ideelt sett vil vi at alle disse tallene skal være grønne. La oss nå gå videre til å optimalisere siden vår og forbedre vår statistikk.

Husk at etter hvert optimaliseringstrinn vi gjør, kan vi ta noen gode fremgangsmåter fra endringene og ha dem i bakhodet for fremtidige nettsteder vi lager.

Optimalisering av sideelementer

Trinn 1: Optimaliser toppteksten

La oss starte med header.

Som du kan se i dette designet, ble toppteksten laget med tre kolonner.

I den første kolonnen består logoen vår av to widgets:

1. Un Widgetbilde som viser en .png -bildefil av logoen vår
2. En tittel -widget.

I den andre kolonnen består toppmenyen av vår navigasjonsmeny -widget.

Den tredje kolonnen inneholder:

1. En intern seksjon -widget (som styrer posisjonen til ikon -widgeten).
2. Kontaktinformasjonen vår for toppteksten

La oss se hvordan vi kan minimere antall seksjoner, widgets og seksjoner her.

Trinn 2: Lag den nye overskriften

Kolonne 1:

• Lag en seksjon med bare en kolonne.
• Legg til Widget for nettstedslogo og dra den inn i seksjonen.

Beste fremgangsmåter for bilder:

• Gi hver bildefil på nettstedet ditt en relevant tittel og alt tekst i mediebiblioteket.

Dette vil forbedre sidetilgjengeligheten og søkemotorrangeringen din. I logoen vi opprinnelig brukte, er tittelen irrelevant for det faktiske bildet, og det er ingen alt -tekst.

• Definer dimensjonene til bildet inne i widgeten.

Dette gjør at siden kan legges ut med riktig plass før bildene lastes inn, for å unngå layoutforsinkelse (en faktor målt av nettlesere).

I eksemplet vi jobber med sammen, løser du dette problemet ved å gå til kategorien Stil og sette bildebredden til 200px.

Kolonne 2

Gå tilbake til widgets -panelet:

• Dra og slipp navigasjonsmeny -widgeten under logoen
• Sett pekeren til "Ingen"
• Gå til kategorien "Stil" og legg til skriften du foretrekker (slik at den samsvarer med vårt tidligere design)

Beste fremgangsmåter for generell styling:

• Unngå å bruke mer enn 2 forskjellige fonter som inneholder flere vekter (Globale skrifter).
• Unngå å velge forskjellige farger for hvert element med fargevelgeren (Globale farger).
• Forbedre hastigheten på nettstedet ditt ved å generere færre søk (generelle fonter).
• Gjenta unødvendig kode to ganger (globale farger).
• Oppretthold konsistensen og kontrollen over modellen din (overordnet stil).

Globale fonter:

Dette kan gjøres ved hjelp av funksjonen Global Fonts:

• Gå til kategorien "Stil" og legg til den foretrukne skriften din (slik at den samsvarer med vårt tidligere design) ved å velge en, gjør en liten endring og hold markøren over plussikonet.
• Klikk på plussikonet og velg skriftfamilien du trenger
• Lagre stilene du vil bruke i malen som globale fonter

Du kan deretter bruke denne stilen på hver widget du lager.

Globale farger:

Den samme metoden kan brukes for dine generelle farger:

• Klikk på "Global"
• Hold markøren over fargevelgeren og klikk på den
• Velg en farge og pek på plussikonet
• Klikk på "Global" >> velg "Rektor"

Når du har gjort det, blir fargen lagret i malens fargepalett, slik at du kan velge den fra listen over globale farger når du trenger den for et element eller en widget.

La oss sette den vertikale polstringen til null før vi fortsetter med overskriften.

Trinn 3: Rediger overskriften

Kolonne 3

• Gå til "Widgets" -panelet
• Dra Icon List Widget under menyen.
• Fjern flere listeelementer
• Legg til teksten
• Velg ikonet du ønsker
• Gå til kategorien "Stil"
• Definer de generelle fargene og skriftene du ønsker

Nå må vi fikse en ting til - de tre topptekstelementene er for øyeblikket stablet og ikke justert med hverandre. Vi kan løse dette problemet ved å endre bredden på hvert element til den faktiske størrelsen, slik at det ikke tar all plassen i kolonnen.

Slik løser du dette problemet:

• Velg Widget for nettstedslogo >> 'Avansert' -fanen
• Velg "Positioning" og sett bredden til "Inline"

Gjenta dette trinnet for navigasjonsmenyen og widgeten Ikonliste.

Nå som alle overskriftselementene er på linje, gjenstår det bare å plassere dem riktig.

Definere posisjonering av kolonnen med innebygde elementer

• Velg din kolonne >> gå til "Layout" -fanen
• Velg "Bunn" i "Vertikal justering"
• "I horisontal justering" velger du "Mellomrom mellom"

Ved å velge "Mellomrom mellom" -justeringen plasseres den første og siste widgeten i begge ender, noe som gir lik avstand mellom alle andre widgets.

Imidlertid har den første og siste widgeten forskjellige bredder, så det er ikke sikkert at det samme rommet er sentrert i vår interne widget.

Vi kan løse dette problemet ved å justere marginene:

• Velg widgeten Navigasjonsmeny >> kategorien "Avansert"
• Oppdel marginen og fjern avstanden med en negativ verdi

Trinn 4: Gjør overskriften lydhør

La oss nå se hvordan den nåværende versjonen av nettstedet vårt ser ut på mobile enheter.

Beste fremgangsmåter for mobil respons:

• Forenkle designet og tenk på måter å gjøre de samme delene responsive på, for å unngå å bruke dobbelt så mye kode som vil påvirke sidehastigheten.

Akkurat som du ser i denne overskriften - Det er vanlig å se den samme delen redesignet spesielt for nettbrett og mobile enheter. Dette er det vi ser her: to versjoner av designet er opprettet: en versjon for skrivebord og en for mobil.

I stedet, når designet og koden din er responsiv, forbedres sidehastigheten fordi den bruker mindre kode.

La oss se hvordan vi kan oppnå dette ved å bruke "Tilpasset bredde" -innstillingen for widgets og elementer.

Angi en tilpasset bredde for nettbrett

• Klikk på 'Nav Meny' >> 'Avansert' -fanen
• Velg "Posisjonering" >> sett bredden til "Egendefinert".
• Velg "%" >> gi widgeten samme bredde (i prosent) av det tomme rommet rundt det.
• Klikk på "Innhold" -fanen >> "Toggle Align" >> velg "Høyre".

Dette lar deg justere veksle -menyen hvor som helst innenfor bredden på widgeten.

La oss nå fullføre tilpasningen av veksle -menyen.

• "Innhold" >> Klikk på "Full Width" -bryteren og sett den til "Ja".
• "Stil" >> Fjern bakgrunnen ved å dra "Fargevelger" -linjen helt til venstre.

La oss nå se hvordan ting ser ut på en mobilskjerm.

Definere en tilpasset bredde for mobil

I dette scenariet beholder vi de tre topptekst -widgetene i visningsporten. Men husk at for noen nettsteder kan det være mer fornuftig å utelate visse elementer fra overskriften når de vises på mobil eller nettbrett.

I dette tilfellet skjer det med overskriften vår når den vises på mobilen, at navigasjonsmenyen og logo -widgetene ikke kan passe inn i en enkelt rad.

Slik løser du dette problemet:

Plassering av navigasjonsmenyen

• Klikk på "Nav Meny" >> kategorien "Avansert"
• Velg "Posisjonering" >> sett bredden til "Egendefinert"
• Velg "%" >> Gi widgeten en bredde på 30%, slik at den passer ved siden av logoen vår

Plassering av ikonlisten

• Klikk på "Ikonliste" >> "Avansert" -fanen
• Velg "Fyll" >> Opphev gruppering av verdier
• Legg 12px polstring til "TOP"

Kan du tro det?

Overskriften vår ble opprinnelig brukt 2 seksjoner, 12 widgets og 10 kolonner. Nå bruker overskriften vår 1 seksjon, 3 widgets og 1 kolonne.

Og resultatet er det samme!

Trinn 5: Optimaliser Hero -delen

La oss gå videre til neste del av nettstedet vårt: heltseksjonen

Beste fremgangsmåter for heltseksjoner:

• Sørg for at helten din er lett synlig, spesielt når den har et bakgrunnsbilde.

Kontroller plasseringen av widgeten i en kolonne

En vanlig feil vi ser gjort i Elementor -editoren, er å bruke ekstra kolonner og mellomrom for å kontrollere plasseringen av en widget.

I vår eksempelmodell, vår heltebilde består av en seksjon med et bakgrunnsbilde. Tittelen og teksten er plassert horisontalt ved hjelp av to kolonner. Det er også en avstandsstykke inne i seksjonen for å plassere elementene vertikalt.

La oss se hvordan vi kan lage det samme designet med bare en seksjon:

• Slett den ekstra kolonnen til høyre for teksten.
• Fjern avstandsstykket.

I stedet for å plassere heltteksten vår der vi vil ha den, bruker vi alternativene for justering av kolonner:

• Velg kolonnen.
• Sett "Vertikal justering" til "Midt".
• Gå til kategorien "Avansert".
• Velg "Fyll" >> Opphev gruppering av verdier
• Sett høyre polstring til 50%.

• Velg delen.
• Velg "Minimumshøyde" >> sett den til 80.

Fast kontrast mellom tekster og bakgrunner

Det er viktig at hvert nettsted har en god kontrast mellom teksten og bakgrunnen. Ulesbar informasjon påvirker nettstedets poengsum og kan drive besøkende bort også. Uansett bør teksten alltid være godt leselig.

Det er flere måter å forbedre klarheten i et avsnitt hvis bakgrunn er et farget bilde (som vi ser i denne malen):

• Klikk på overskriften din.
• Gå til kategorien "Stil" >> Velg "Tekstskygge".

Dette vil forbedre lesbarheten til teksten ved å få den til å skille seg ut fra bakgrunnsbildet.

En annen måte å gjøre teksten tydeligere på er å bruke overlegg.

• Velg seksjonen >> 'Stil' -fanen >> 'Bakgrunnsoverlegg'
• Velg en av de overordnede fargene og lek med ugjennomsiktigheten til du får resultatet du ønsker

Trinn 6: Optimaliser delen med ikonbokser

La oss nå gå videre til vår neste seksjon, hvor vi for øyeblikket har en indre seksjon med fire kolonner. For øyeblikket har hver kolonne tre widgets: Image Widget, Title Widget og Text Editor Widget.

La oss se hvordan vi kan forenkle denne delen for å forbedre ytelsen.

Innhold i ikonområdet

• Velg »Widget Icon Box« -knappen i widgetmenyen og dra den inn i kolonnen
• Velg "Ikon -boksen"
• Pek på ikonbildet
• Velg "Last ned SVG" **
• Sett inn det egendefinerte ikonet

** Merk: Merker er SVG -filer. Hvis du ikke har gjort det, kan du gå til WordPress -dashbordet og deretter gå til Elementor >> Innstillinger. Du må aktivere Aktiver ufiltrerte filnedlastinger.

• Skriv inn "tittelen"
• Skriv inn "Beskrivelse"
• Velg "Style" >> Velg en overordnet farge
• Velg "Size" og dra baren til størrelsen du ønsker
• Velg "Polstring" og dra baren til nummeret du ønsker

Trinn 8: Optimaliser delen "Tjenester"

Vi skal nå bygge om delen "Tjenester", som for tiden bruker to kolonner, to bilder, tittel -widgeten og tekstredigerings -widgeten.

La oss lage det samme designet i en ny seksjon, men med bare en kolonne.

• Lag en ny seksjon med en kolonne
• I "Layout" >> sett "Innholdsbredde" til "Full bredde"
• Velg "Widget Image Box" i widgetpanelet og dra den inn i kolonnen

(Vi vil kunne integrere alle eiendelene i seksjonen i denne widgeten)

• Skriv inn tittelen
• Skriv inn beskrivelsen

For bildet beholder vi det nåværende designet vi brukte for bildene våre.

• Sett inn det samme bildet fra mediebiblioteket
• Gå til kategorien "Innhold" >> Sett "Bildeposisjon" til "Høyre"

• Gå til kategorien "Stil"
• Øk avstanden mellom elementene
• Øk "bredden" på bildet
• Utvid delen "Innhold"
• Velg "midtre" justering
• Sett "Vertikal justering" til "Midt"
• Definer de generelle fargene og skriftene du ønsker
• Gå til kategorien "Avansert"
• Legg til 10% utfylling i widgeten

Nå har Services -delen det samme designet, men med færre eiendeler.

Trinn 9: Optimaliser oppfordringsdelen

Beste fremgangsmåter for CTA -lenker:

• Sørg for at alle koblinger til sosiale medier fungerer som de skal, og at knappen inneholder lenken.
• Når du legger til en lenke til et annet nettsted, må du inkludere dette attributtet: "rel | noopener"

(Du kan gjøre dette ved å klikke på tannhjulikonet og skrive inn attributtet i "Egendefinerte attributter"). Dette åpner lenken i en ny nettleserfane og øker resultatresultatet ditt.

Den følgende delen presenterer en oppfordring til handling for våre tjenester.

Seksjonen har for tiden to kolonner, som inneholder:

1. Et bakgrunnsbilde med et mellomrom
2. To overskrifter, en intern seksjon, en tekstredigerer og en knapp

La oss lage det samme designet i en ny seksjon, men med bare en kolonne.

• Gå til "Layout" -fanen >> sett "Content Width" til "Full Width"
• Gå til kategorien "Avansert" >> Fjern eventuell ekstra fylling

• Velg "Call To Action Widget" i widgetpanelet og dra den inn i kolonnen
• Sett "Bildeposisjon" til "Venstre"
• Velg bildet ditt fra mediebiblioteket
• Utvid delen "Innhold"
• Skriv inn overskriften
• Skriv inn beskrivelsen
• Skriv inn knappeteksten

• Gå til kategorien "Stil"
• Legg til "Polstring" mellom elementene
• Juster bildebredde
• Utvid delen "Innhold"
• Velg den globale skriften for tittelen din
• Øk mellomrommet mellom beskrivelsen og knappen
• Velg de globale fargene som passer for hver ressurs
• Utvid delen "Knapp"
• Sett størrelsen til "Stor"
• Tilpass det etter dine behov, for eksempel bakgrunnsfarge og kantradius

Så langt har det vært en 2 -kolonne seksjon med 6 widgets. Nå er det en 1 kolonne seksjon med bare 1 widget!

Trinn 10: Optimaliser bildekarusellen

Den nåværende utformingen av vår Image Carousel -seksjon har en vanlig feil med måten den viser flere bilder på.

Dette designet består av 5 kolonner, en praksis som mange brukere pleier å gjøre for å kontrollere størrelsen på bildene sine.

La oss utforske en enklere måte som også vil optimalisere nettstedets ytelse.

• Lag en ny seksjon med 1 kolonne
• Gå til "Layout" -fanen >> sett "Content Width" til "Full Width"
• Velg knappen "Bildekarusell -widget" fra widgetpanelet og dra den inn i kolonnen
• Legg til ønskede bilder fra mediebiblioteket

• Gå til kategorien "Innhold"
• Sett "Bildestørrelse" til "Middels - 300 x 300"
• Juster "Lysbilder for å vise", "Lysbilder for å bla" og "Navigasjon" i henhold til dine preferanser

• Gå til kategorien "Stil"
• Sett "Vertikal justering" til "Senter"
• Tilpass "mellomrom"

• Gå til kategorien "Avansert"
• Tilsett nødvendig fyll

Det som en gang var en seksjoner med fem kolonner, er nå bare en kolonne.

La oss gå videre til neste avsnitt, hvor vi kan optimalisere videoene på nettstedet vårt.

Trinn 11: Optimaliser videoseksjonen

Beste fremgangsmåter for videoinnhold:

• Bruk Lazy Load når det er mulig, for å forbedre lastetiden på nettstedene dine.

Hva skjer når vi bruker alternativet "Lazy Load"?

Teknisk sett er videoinnbyggingskoden erstattet av et statisk bilde. På denne måten lastes videoen bare inn når brukeren klikker på bildet - noe som virkelig hjelper med sidens lastetid.

Det vi skal gjøre nå er å endre måten vi bruker video -widgeten på, slik at den ikke forsinker sidehastigheten eller nettstedets ytelse.

• Velg "Video Widget"
• Gå til kategorien "Stil"
• Velg "Lazy Load"

Trinn 12: Optimaliser bunnteksten og hold den oppdatert

En vanlig feil på mange nettsteder er at bunnteksten bruker flere overskrifter for dato og beskrivelse, samt et ikon for opphavsrettssymbolet.

La oss se hvordan du optimaliserer bunnteksten og sørger for at den alltid holder seg oppdatert.

Vi vil konfigurere denne kontinuerlige oppdateringsprosessen ved hjelp av Dynamiske koder. På denne måten trenger vi ikke å endre topptekstinnholdet hvert år, ettersom de dynamiske taggene automatisk oppdateres til inneværende år.

For å gjøre dette, fortsetter vi som følger:

• Fjern de ekstra widgetene, og bare igjen tittel -widgeten
• Velg Tittel -widgeten
• Klikk på "Dynamiske koder" -symbolet til høyre for "Tittel" -feltet (også kjent som "Foreldreknapp"

• Velg rullegardinmenyen menyelementet "Gjeldende dato og klokkeslett"
• Klikk på nøkkelens overordnede ikon
• Klikk på "Datoformat" -fanen og velg "Tilpasset" menyelement
• Slett det som er i "Tilpasset format" -feltet, bortsett fra "Y"
• Velg kategorien "Avansert"
• Merk "Frem" -feltet og hold nede "alternativ" og "G" -tastene samtidig (eller "kontroll", alt "og" C "samtidig) for å skrive" © "-symbolet.
• Legg til et mellomrom etter "©"

• Velg "Etter" -feltet
• Skriv inn et mellomrom og skriv teksten du vil skal vises etter året, for eksempel "Alle rettigheter forbeholdt"

Du vil kanskje legge merke til at på eksempelnettstedet i denne opplæringen har hver widget sin egen seksjon. Vi har gjort dette for å gjøre opplæringen tydeligere og lettere å følge.

Ideelt sett, jo færre seksjoner du har, desto mindre tilleggskode vil du ha.

Du kan slå sammen noen widgets i samme seksjon ved å dra og slippe dem i delen ovenfor og deretter slette den tomme delen.

Og det er det, oppsettet ditt er optimalisert!

Ny evaluering av nettstedets ytelse

Vi vil sjekke resultatene i DevTools (Inspector) -vinduet:

• Velg kategorien "Nettverk":

Det er noen fine og positive endringer her:

• Nettstedet tar nå 568 millisekunder å laste inn
• Vi gikk fra 81 forespørsler til 46
• Velg kategorien "Fyr", hvor du vil se at resultatresultatet vårt har økt fra 73 til 98

Husk at vi har optimalisert ytelsen vår uten å bruke tredjeparts plugins. Alt som trengs var enkle justeringer og gode fremgangsmåter.

Trinn 13: Test resultatene med bevegelseseffekter

Vi ønsker å gjøre nettstedet vårt mer interaktivt og morsomt, men hvordan påvirker det resultatene våre? La oss se hva vi kan gjøre.

Gjør overskriften til et "fast" element:

• Velg overskriften
• Gå til kategorien "Avansert"
• Utvid kategorien "Bevegelseeffekter"
• Sett alternativet "Sticky" til "Top"

Gjør heltseksjonen til et "fast" element:

• Velg heltseksjonen
• Gå til kategorien "Stil"
• Velg rullegardinlisten "Vedlegg" og velg "Fast"

Bruk en Inngangsanimasjon for heltens tekst (topptekst):

• Velg topptekst -widgeten
• Gå til kategorien "Avansert"
• Utvid kategorien "Bevegelseeffekter"
• Velg Input Animation og sett den til "Fade In"

Bruk en input -animasjon for heltens tekstbeskrivelse (Text Editor -widget):

• Velg widgeten Text Editor
• Gå til kategorien "Avansert"
• Utvid kategorien "Bevegelseeffekter"
• Velg "Input -animasjonen" og sett den til "Fade In"

Gjør det samme for widgetene som kommer etter, for subtile effekter når siden lastes inn.

La oss kjøre ytelsestesten igjen for å se hvordan bevegelseseffektene påvirket poengsummen vår:

• Gå tilbake til vinduet "Inspektør"
• Velg kategorien "Fyr"
• Klikk på "Generer en rapport"

Nå ser vi at resultatene våre er redusert til 97 - dette er definitivt ingen stor forskjell, og det gjør nettstedet mer interessant og morsomt.

Kan du tro vår nye prestasjonspoengsum?

Vi er glade for at du nå er fullt utstyrt for å øke prestasjonspoengene dine fra hvert Elementor -nettsted du lager. Det vil gjøre en stor forskjell for nettstedets byggemål og suksessen til virksomheten din.

Vi foreslår at du bokmerker denne opplæringen for fremtidig referanse, slik at du kan undersøke ytelsen til sidene på nettstedet ditt og bruke gode fremgangsmåter for å optimalisere oppsettet.

Og det er bare begynnelsen - neste del av dette kurset dekkerbildeoptimalisering.

I opplæringen går vi gjennom hvert bilde på eksempelnettstedet og lærer hvordan du kan forbedre dem for enda mer effektive lastetider.

Få Elementor Pro nå!

konklusjonen

Så! Det er det for denne artikkelen som viser deg hvordan du kan optimalisere nettstedets layout med Elementor. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...