Hur du optimerar din webbplatslayout med Elementor

Vill du veta hur du optimerar layouten på din webbplats med Elementor ?

Optimering av webbplatsens prestanda är en av de viktigaste aspekterna av dess användarupplevelse. En webbplats med långsam laddning kan frustrera alla användare, vilket ofta resulterar i en avvisningsfrekvens hög vilket kan påverka framgången för vår verksamhet negativt.

Webbplatsens prestanda kan påverkas av många faktorer, till exempel: stora bildstorlekar, serverkonfigurationer, för många plugins, bland andra faktorer.

Webbplatsprestanda är en av våra starkaste värderingar som webbskapare. Det är därför vi har skapat denna kurs i 5 delar.

Nu kan du lära dig hur du skapar layouter och inlägg med optimala tekniker. Denna kunskap kommer att säkerställa att dina webbplatser inte kommer att innehålla redundanta avsnitt, kolumner eller widgets som bara inte behövs. Vi kommer också att utforska några inbyggda widgetfunktioner för att förbättra laddningstiderna.

I slutet av denna handledning kommer du att vara helt redo att optimera prestandan för varje webbplats Elementor du skapar och omedelbart skördar frukterna.

Lektion 1: Bästa praxis för layoutoptimering

I vår första lektion tar vi upp det mest effektiva sättet att skapa dina sidor och inlägg i redigeraren Elementor. Vi ser ofta användningen av alldeles för många sektioner, kolumner, interna sektioner och widgets, när samma layout kunde ha uppnåtts med mycket färre element.

Om du använder för mycket element saktar ner din webbplatsprestanda, så låt oss dyka in och lära oss hur man bygger webbplatser med Elementor på det mest effektiva sättet.

Vi kommer att ta upp följande ämnen:

• En närmare titt på strukturen på en korrekt sida
• Visa och testa din webbplats prestanda
• Optimera sidhuvud, sidfot och sidinnehåll
• Exempel på bra och dåliga webbplatslayoutmetoder
• Korrekt användning av widgets, positionering och globala stilar
• Tips för att undvika belastningsfördröjning, förbättra SEO och öka laddningstiden
• Tillgänglighetsoptimering
• Minska mängden DOM -element
• Och mycket mer !

För att bättre förstå de optimala layouterna i Elementor ska vi utforska en Elementor -mall som visar vanliga övergrepp mot sektioner, kolumner och widgets. I slutet av denna lektion kommer vi att ha byggt om hela sidan helt genom att minska antalet kolumner och widgets. Vår första sida består av nio sektioner, 31 kolumner, fem interna sektioner och 44 widgets.

I slutet av självstudien kommer vår optimerade sida att reduceras till sex sektioner, sju kolumner och 16 widgets.

Vi kommer att använda det fria, ljusa Hej temaoch vi kommer att återskapa varje avsnitt i mallen och förbättra webbplatsens övergripande prestanda med bästa praxis.

Testar för dåliga metoder

Innan vi dyker in i optimering av webbplatslayout, låt oss köra ett test på vår sida för att helt förstå vad som händer när någon besöker vår webbplats. När alla våra optimeringar har gjorts kommer vi att upprepa testet och jämföra resultaten.

Steg 1: Verifiera din webbplats i ett inkognitofönster

• Öppna ett nytt fönster i "inkognitoläge" och skriv in webbadressen till webbsidan du testar.

Steg 2: Kontrollera att du använder sökvägen för direkt URL

Om du är osäker på din sidlänk kan du enkelt hitta den genom att gå till din WP -instrumentpanel:

• Klicka på "Sidor" för att se alla sidor på din webbplats.
• För muspekaren över din sida och klicka på alternativet "Visa". Detta tar dig direkt till din sida.
• Kopiera och klistra in denna URL i inkognitofönstret och när webbplatsen laddas är du redo att testa den!

Testa och se resultatresultat

Steg 1: Testa resultat

Du kanske har använt Chrome Developer Tools tidigare.

Om inte, för att inspektera och visa HTML- och CSS -innehållet på din sida:

• Högerklicka var som helst på din sida och klicka på välj “Inspektera.” Du kommer att se flera flikar där du kan läsa HTML och CSS, hitta fel, få SEO -resultat och köra olika tester.
• Välj fliken Nätverk och tryck på cmd- eller ctrl + R -knapparna för att ladda resultaten.

Som du kan se tar vår nuvarande layout 2,88 sekunder att ladda och utför 81 förfrågningar.

Steg 2: Visa resultatresultat

• Byt till fliken Fyr, där vi kan köra en granskningsrapport på vår sida.

Detta kommer att ge oss mer information om sidans nuvarande prestanda.

• Välj "Generera rapport". Efter några ögonblick visas din rapport.

Vi får för närvarande ett prestationsbetyg på 73/100, vilket vi säkert kan arbeta med.

Helst skulle vi vilja att alla dessa siffror är gröna. Låt oss nu gå vidare till att optimera vår sida och förbättra vår statistik.

Tänk på att efter varje optimeringssteg vi gör kan vi ta några bästa praxis från ändringarna och ha dem i åtanke för framtida webbplatser vi skapar.

Optimera sidelement

Steg 1: Optimera rubriken

Låt oss börja med Header.

Som du kan se i denna design gjordes rubriken med tre kolumner.

I den första kolumnen består vår logotyp av två widgets:

1. Un Bildwidget som visar en .png -bildfil av vår logotyp
2. En titelwidget.

I den andra kolumnen består rubrikmenyn av vår navigeringsmeny -widget.

Den tredje kolumnen innehåller:

1. En intern sektionswidget (som styr positionen för ikonwidgeten).
2. Våra kontaktuppgifter till sidhuvudet

Låt oss se hur vi kan minimera antalet sektioner, widgets och avsnitt här.

Steg 2: Skapa den nya rubriken

Kolumn 1:

• Skapa en sektion med endast en kolumn.
• Lägg till Widget för webbplatslogotyp och dra den till sektionen.

Bästa metoder för bilder:

• Ge varje bildfil på din webbplats en relevant titel och alt -text i mediebiblioteket.

Detta kommer att förbättra din sidans tillgänglighet och din sökmotor ranking. I logotypen som vi ursprungligen använde är titeln irrelevant för själva bilden, och det finns ingen alt -text.

• Definiera bildens dimensioner inuti widgeten.

Detta gör att sidan kan läggas ut med rätt utrymme innan bilder laddas, vilket undviker layoutfördröjning (en faktor som mäts av webbläsare).

I exemplet vi arbetar på tillsammans löser du detta problem genom att gå till fliken Stil och ställa in bildbredden till 200px.

kolonn 2

Återgå till widgetpanelen:

• Dra och släpp navigeringsmenyn widget under logotypen
• Ställ pekaren på "Ingen"
• Gå till fliken "Stil" och lägg till det teckensnitt du föredrar (så att det matchar vår tidigare design)

Bästa praxis för övergripande styling:

• Undvik att använda mer än 2 olika teckensnitt som innehåller flera vikter (Globala typsnitt).
• Undvik att välja olika färger för varje objekt med färgväljaren (Globala färger).
• Förbättra din webbplats laddningshastighet genom att generera färre frågor (övergripande teckensnitt).
• Upprepa onödig kod två gånger (globala färger).
• Behåll konsekvensen och kontrollen över din modell (övergripande stil).

Globala teckensnitt:

Detta kan göras med funktionen Global Fonts:

• Gå till fliken "Stil" och lägg till ditt föredragna teckensnitt (så att det matchar vår tidigare design) genom att välja ett, gör en liten ändring och för musen över plusikonen.
• Klicka på plusikonen och välj den teckensnittsfamilj du behöver
• Spara de stilar du använder i mallen som globala teckensnitt

Du kan sedan använda den här stilen på varje widget du skapar.

Globala färger:

Samma metod kan användas för dina övergripande färger:

• Klicka på "Global"
• Håll muspekaren över färgväljaren och klicka på den
• Välj en färg och peka på plusikonen
• Klicka på "Global" >> välj "Principal"

När du har gjort det sparas färgen i mallens färgpalett, så att du kan välja den från din lista över globala färger när du behöver den för ett objekt eller en widget.

Innan vi fortsätter med vår rubrik, låt oss ställa den vertikala stoppningen till noll.

Steg 3: Redigera rubriken

Kolumn 3

• Gå till panelen "Widgets"
• Dra Icon List Widget under menyn.
• Ta bort ytterligare listobjekt
• Lägg till din text
• Välj den ikon du väljer
• Gå till fliken "Stil"
• Definiera övergripande färger och teckensnitt efter eget val

Nu måste vi fixa en sak till - de tre rubrikelementen är för närvarande staplade och inte i linje med varandra. Vi kan lösa detta problem genom att ändra bredden på varje element till dess faktiska storlek, så att det inte tar upp allt utrymme i kolumnen.

Så här löser du problemet:

• Välj platslogotypwidget >> fliken "Avancerat"
• Välj "Positionering" och ställ in dess bredd till "Inline"

Upprepa detta steg för navigeringsmenyn och widgeten Ikonlista.

Nu när alla rubrikelement är i linje är det bara att placera dem korrekt.

Definiera positionen för kolumnen med inline -element

• Välj din kolumn >> gå till fliken "Layout"
• I "Vertikal inriktning" väljer du "Botten"
• "I horisontell inriktning" välj "Mellanrum mellan"

Genom att välja "Mellanrummet" -inriktningen placeras den första och sista widgeten i båda ändar, vilket ger lika avstånd mellan alla andra widgets.

De första och sista widgetarna har dock olika bredder, så det kan hända att lika utrymme inte alltid centrerar vår interna widget.

Vi kan lösa detta problem genom att justera marginalerna:

• Välj widgeten Navigeringsmeny >> fliken "Avancerat"
• Ta bort marginalen och ta bort avståndet med ett negativt värde

Steg 4: Gör rubriken lyhörd

Låt oss nu se hur den aktuella versionen av vår webbplats ser ut på mobila enheter.

Bästa metoder för mobil respons:

• Förenkla din design och tänk på sätt att göra samma avsnitt lyhörd, för att undvika att använda dubbelt så mycket kod som påverkar din sidhastighet.

Precis som du ser i den här rubriken - Det är vanligt att samma avsnitt omdesignas specifikt för surfplattor och mobila enheter. Detta är vad vi ser här: två versioner av designen skapades: en version för stationär och en för mobil.

Istället, när din design och kod reagerar, förbättras din sidhastighet eftersom den kommer att använda mindre kod.

Låt oss se hur vi kan uppnå detta med hjälp av inställningen "Anpassad bredd" för våra widgets och element.

Ange en anpassad bredd för surfplatta

• Klicka på fliken Navigering >> Avancerad
• Välj "Positionering" >> ange bredden till "Anpassad".
• Välj "%" >> ge widgeten samma bredd (i procent) av det tomma utrymmet runt den.
• Klicka på fliken "Innehåll" >> "Toggle Align" >> välj "Right".

Detta låter dig justera växlingsmenyn var som helst inom widgetens bredd.

Låt oss nu avsluta anpassningen av växlingsmenyn.

• "Innehåll" >> Klicka på "Full Width" -knappen och ställ den till "Yes".
• "Style" >> Ta bort bakgrunden genom att dra "Color Picker" -fältet hela vägen till vänster.

Låt oss nu se hur saker ser ut på en mobil skärm.

Definiera en anpassad bredd för mobilen

I det här scenariot behåller vi de tre sidhuvud -widgetsna i vyporten. Men kom ihåg att för vissa webbplatser kan det vara mer meningsfullt att utelämna vissa element från rubriken när de visas på mobil eller surfplatta.

I det här fallet, vad som händer med vår rubrik när den visas på mobilen är att navigeringsmenyn och logotypen inte kan passa in i en enda rad.

Så här löser du problemet:

Placering av navigeringsmenyn

• Klicka på "Navigationsmeny" >> fliken "Avancerat"
• Välj "Positionering" >> ställ in bredden på "Anpassad"
• Välj "%" >> Ge widgeten en bredd på 30%, så att den passar bredvid vår logotyp

Placering av ikonlistan

• Klicka på fliken "Ikonlista" >> "Avancerad"
• Välj "Fyll" >> Uppdela värden
• Lägg till 12px stoppning till "TOP"

Kan du tro det?

Vår rubrik användes ursprungligen 2 sektioner, 12 widgets och 10 kolumner. Nu använder vår rubrik 1 sektion, 3 widgets och 1 kolumn.

Och resultatet är detsamma!

Steg 5: Optimera avsnittet Hjälte

Låt oss gå vidare till nästa avsnitt på vår webbplats: hjältesektionen

Bästa praxis för hjältsektioner:

• Se till att texten i din hjältesektion är lätt synlig, särskilt när den har en bakgrundsbild.

Kontrollera widgetens position i en kolumn

Ett vanligt misstag som vi ser gjort i Elementor -redigeraren är att använda extra kolumner och mellanslag för att styra placeringen av en widget.

I vår exempelmodell, vår hjältebild består av ett avsnitt med en bakgrundsbild. Titeln och texten placeras horisontellt med två kolumner. Det finns också en distans inuti sektionen för att placera elementen vertikalt.

Låt oss se hur vi kan skapa samma design med bara ett avsnitt:

• Ta bort den extra kolumnen till höger om texten.
• Ta bort distansen.

I stället, för att placera vår hjältext där vi vill ha den, använder vi kolumnjusteringsalternativen:

• Välj kolumnen.
• Ställ in "Vertikal inriktning" till "Mitt".
• Gå till fliken "Avancerat".
• Välj "Fyll" >> Uppdela värden
• Ställ in höger vaddering till 50%.

• Välj avsnittet.
• Välj "Minimihöjd" >> ställ in den på 80.

Fast kontrast mellan texter och bakgrunder

Det är viktigt att varje webbplats har en bra kontrast mellan texten och bakgrunden. Oläslig information påverkar dina webbplatsresultat och kan driva bort besökare också. Hur som helst ska texten alltid vara klart läsbar.

Det finns flera sätt att förbättra tydligheten i ett avsnitt vars bakgrund är en färgad bild (som vi ser i den här mallen):

• Klicka på din rubrik.
• Gå till fliken "Stil" >> Välj "Textskugga".

Detta kommer att förbättra textens läsbarhet genom att den sticker ut från bakgrundsbilden.

Ett annat sätt att göra din text tydligare är att använda överlägg.

• Välj avsnittet >> fliken ”Stil” >> ”Bakgrundsöverlägg”
• Välj en av dina övergripande färger och lek med opaciteten tills du får det resultat du vill ha

Steg 6: Optimera avsnittet med ikonrutor

Låt oss nu gå vidare till vårt nästa avsnitt, där vi för närvarande har ett inre avsnitt med fyra kolumner. För närvarande har varje kolumn tre widgets: Image Widget, Title Widget och Text Editor Widget.

Låt oss se hur vi kan förenkla det här avsnittet för att förbättra dess prestanda.

Innehåll i ikonområdet

• Välj knappen »Icon Box Widget« i widgetmenyn och dra den till kolumnen
• Välj "Ikonrutan"
• Peka på ikonbilden
• Välj "Ladda ner SVG" **
• Sätt in din anpassade ikon

** Obs! Märken är SVG -filer. Om du inte har gjort det, gå till WordPress -instrumentpanelen och sedan till Elementor >> Inställningar. Du måste aktivera Aktivera ofiltrerade filnedladdningar.

• Skriv din "titel"
• Skriv din "Beskrivning"
• Välj "Style" >> Välj en övergripande färg
• Välj "Storlek" och dra fältet till önskad storlek
• Välj "Padding" och dra fältet till det nummer du väljer

Steg 8: Optimera avsnittet "Tjänster"

Vi ska nu bygga om avsnittet "Tjänster", som för närvarande använder två kolumner, två bilder, titelwidgeten och textredigeringswidgeten.

Låt oss skapa samma design i ett nytt avsnitt, men med bara en kolumn.

• Skapa ett nytt avsnitt med en kolumn
• I "Layout" >> ställ in "Content Width" till "Full Width"
• Välj "Widget Image Box" i widgetpanelen och dra den till kolumnen

(Vi kommer att kunna integrera alla tillgångar i sektionen i denna widget)

• Skriv in rubriken
• Skriv beskrivningen

För bilden kommer vi att behålla den nuvarande designen vi använde för våra bilder.

• Infoga samma bild från mediebiblioteket
• Gå till fliken "Innehåll" >> Ställ in "Bildposition" till "Höger"

• Gå till fliken "Stil"
• Öka avståndet mellan element
• Öka bildens "bredd"
• Utöka avsnittet "Innehåll"
• Välj "mitt" -inriktningen
• Ställ in "Vertikal justering" på "Mitt"
• Definiera övergripande färger och teckensnitt efter eget val
• Gå till fliken "Avancerat"
• Lägg till 10% infill i widgeten

Nu har Services -sektionen samma design, men med färre tillgångar.

Steg 9: Optimera uppmaningsavsnittet

Bästa praxis för CTA -länkar:

• Se till att alla dina sociala medialänkar fungerar korrekt och att knappen innehåller länken.
• När du lägger till en länk till en annan webbplats, inkludera detta attribut: "rel | noopener"

(Du kan göra detta genom att klicka på kugghjulsikonen och skriva attributet i "Anpassade attribut"). Detta öppnar länken i en ny webbläsarflik och ökar din prestationspoäng.

I följande avsnitt presenteras en uppmaning till våra tjänster.

Sektionen har för närvarande två kolumner som innehåller:

1. En bakgrundsbild med en distans
2. Två rubriker, en intern sektion, en textredigerare och en knapp

Låt oss skapa samma design i ett nytt avsnitt, men med bara en kolumn.

• Gå till fliken "Layout" >> ställ in "Innehållsbredd" till "Full bredd"
• Gå till fliken "Avancerat" >> Ta bort eventuell extra fyllning

• Välj "Call To Action Widget" i widgetpanelen och dra den till kolumnen
• Ställ in "Bildposition" på "Vänster"
• Välj din bild från mediebiblioteket
• Utöka avsnittet "Innehåll"
• Skriv rubriken
• Skriv beskrivningen
• Skriv knapptexten

• Gå till fliken "Stil"
• Lägg till "vaddering" mellan elementen
• Justera bildbredd
• Utöka avsnittet "Innehåll"
• Välj det globala teckensnittet för din titel
• Öka utrymmet mellan beskrivningen och knappen
• Välj de globala färgerna som är lämpliga för varje resurs
• Utöka avsnittet "Knapp"
• Ställ in storleken på "Stor"
• Anpassa den efter dina behov, till exempel bakgrundsfärg och kantradie

Hittills har det varit en 2 -kolums sektion med 6 widgets. Nu är det en sektion med 1 kolumn med bara 1 widget!

Steg 10: Optimera bildkarusellen

Den nuvarande utformningen av vår bildkarusell -sektion har ett vanligt misstag med hur den visar flera bilder.

Denna design består av fem kolumner, en praxis som många användare tenderar att göra för att kontrollera storleken på sina bilder.

Låt oss utforska ett enklare sätt som också optimerar din webbplatsprestanda.

• Skapa ett nytt avsnitt med 1 kolumn
• Gå till fliken "Layout" >> ställ in "Innehållsbredd" till "Full bredd"
• Välj knappen »Image Carousel Widget« från widgetpanelen och dra den till kolumnen
• Lägg till önskade bilder från mediebiblioteket

• Gå till fliken "Innehåll"
• Ställ in "Bildstorlek" på "Medium - 300 x 300"
• Justera "Diabilder att visa", "Bildar att rulla" och "Navigation" enligt dina önskemål

• Gå till fliken "Stil"
• Ställ in "Vertikal inriktning" på "Center"
• Anpassa "mellanrum"

• Gå till fliken "Avancerat"
• Tillsätt nödvändig fyllning

Det som en gång var en sektion med fem kolumner är nu bara en kolumn.

Låt oss gå vidare till nästa avsnitt, där vi kan optimera videorna på vår webbplats.

Steg 11: Optimera videosektionen

Bästa metoder för videoinnehåll:

• Använd Lazy Load när det är möjligt för att förbättra laddningstiderna för dina webbplatser.

Vad händer när vi använder alternativet "Lazy Load"?

Tekniskt sett ersätts inbäddningskoden för video med en statisk bild. På det här sättet laddas videon bara när användaren klickar på bilden - vilket verkligen hjälper till med sidens laddningstider.

Vad vi ska göra nu är att ändra hur vi använder videowidgeten, så att det inte försenar vår sidhastighet eller webbplatsens prestanda.

• Välj "Video Widget"
• Gå till fliken "Stil"
• Välj "Lazy Load"

Steg 12: Optimera sidfoten och håll den uppdaterad

Ett vanligt misstag som ses på många webbplatser är att deras sidfot använder flera rubriker för datum och beskrivning, samt en ikon för upphovsrättssymbolen.

Låt oss se hur du optimerar sidfoten och se till att den alltid håller sig uppdaterad.

Vi kommer att konfigurera denna kontinuerliga uppdateringsprocess med Dynamiska taggar. På så sätt behöver vi inte ändra rubrikinnehållet varje år, eftersom de dynamiska taggarna automatiskt uppdateras till det aktuella året.

För att göra detta fortsätter vi enligt följande:

• Ta bort de extra widgetarna och lämna bara widgeten Titel
• Välj widgeten Titel
• Klicka på symbolen "Dynamiska taggar" till höger om fältet "Titel" (även känd som "Föräldraknapp"

• Från menyn väljer du menyalternativet "Aktuellt datum och tid"
• Klicka på nyckelns överordnade ikon
• Klicka på fliken "Datumformat" och välj menyposten "Anpassad"
• Ta bort det som för närvarande finns i fältet "Anpassat format", förutom "Y"
• Välj fliken "Avancerat"
• Markera fältet "Framåt" och håll ner "alternativ" och "G" samtidigt (eller "kontroll", alt "och" C "samtidigt) för att skriva" © "symbolen.
• Lägg till ett mellanslag efter "©"

• Välj fältet "Efter"
• Skriv in ett mellanslag och skriv texten du vill ska visas efter året, till exempel "Alla rättigheter förbehållna"

Du kanske märker att varje exempel på webbplatsen i den här självstudien har sin egen sektion. Vi har gjort detta för att göra handledningen tydligare och lättare att följa.

Helst, ju färre sektioner du har, desto mindre HTML -kod kommer du att ha.

Du kan slå ihop några widgets i samma avsnitt genom att dra och släppa dem i avsnittet ovan och sedan radera det tomma avsnittet.

Och det är det, din layout är optimerad!

Ny utvärdering av webbplatsens prestanda

Vi kommer att kontrollera resultaten i fönstret DevTools (Inspector):

• Välj fliken "Nätverk":

Det finns några fina och positiva förändringar här:

• Webbplatsen tar nu 568 millisekunder att ladda
• Vi gick från 81 förfrågningar till 46
• Välj fliken "Fyr", där du kommer att se att vår prestationspoäng har ökat från 73 till 98

Tänk på att vi har optimerat våra prestanda utan att använda några plugins från tredje part. Allt som krävdes var enkla justeringar och bästa praxis.

Steg 13: Testa resultaten med rörelseeffekter

Vi vill göra vår webbplats mer interaktiv och rolig, men hur påverkar det våra prestandapoäng? Låt oss se vad vi kan göra.

Gör rubriken till ett "fast" element:

• Välj rubriken
• Gå till fliken "Avancerat"
• Expandera fliken "Rörelseeffekter"
• Ställ in alternativet "Sticky" till "Top"

Gör hjältsektionen till ett "fast" element:

• Välj hjältsektionen
• Gå till fliken "Stil"
• Välj rullgardinsmenyn "Bilaga" och välj "Fixed"

Använd Entré animation för hjältens text (rubrik):

• Välj widgeten Rubrik
• Gå till fliken "Avancerat"
• Expandera fliken "Rörelseeffekter"
• Välj Inmatningsanimation och ställ in den på "Fade In"

Använd en inmatningsanimation för hjältens textbeskrivning (textredigeringswidget):

• Välj widgeten Textredigerare
• Gå till fliken "Avancerat"
• Expandera fliken "Rörelseeffekter"
• Välj "Inmatningsanimering" och ställ in den på "Fade In"

Gör samma sak för widgets som kommer efter, för subtila effekter när sidan laddas.

Låt oss nu köra prestandatestet igen för att se hur rörelseeffekterna påverkade vår poäng:

• Återgå till fönstret "Inspektör"
• Välj fliken "Fyr"
• Klicka på "Generera en rapport"

Nu ser vi att vår prestationspoäng har reducerats till 97 - det här är definitivt ingen stor skillnad och det gör webbplatsen mer intressant och rolig.

Kan du tro vår nya prestationspoäng?

Vi är glada över att du nu är fullt utrustad för att öka din prestationspoäng från varje Elementor -webbplats du skapar. Det kommer att göra stor skillnad för dina webbplatsbyggnadsmål och ditt företags framgång.

Vi föreslår att du bokmärker den här självstudien för framtida referens, så att du kan granska prestandan på dina webbsidor och tillämpa bästa praxis för att optimera din layout.

Och det är bara början - nästa del av denna kurs täckerbildoptimering.

I handledningen går vi igenom varje bild på exempelwebbplatsen och lär oss hur vi kan förbättra dem för ännu effektivare laddningstider.

Skaffa Elementor Pro nu!

Slutsats

Så ! Det är allt för den här artikeln som visar hur du optimerar din webbplatslayout med Elementor. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.