Hoe u uw websitelay-out kunt optimaliseren met Elementor

Wil je weten hoe je de layout van je website kunt optimaliseren met Elementor ?

Het optimaliseren van websiteprestaties is een van de belangrijkste aspecten van zijn gebruikerservaring. Een langzaam ladende website kan elke gebruiker frustreren, wat vaak resulteert in een Bounce rate hoog, wat het succes van ons bedrijf negatief kan beïnvloeden.

De prestaties van de website kunnen door vele factoren worden beïnvloed, bijvoorbeeld: grote afbeeldingsformaten, serverconfiguraties, te veel plug-ins, naast andere factoren.

Websiteprestaties zijn een van onze sterkste waarden als webmakers. Daarom hebben we deze cursus in 5 delen gemaakt.

Nu kunt u leren hoe u lay-outs en berichten kunt maken met behulp van optimale technieken. Deze kennis zorgt ervoor dat uw websites geen overbodige secties, kolommen of widgets bevatten die gewoon niet nodig zijn. We zullen ook enkele ingebouwde widgetfuncties verkennen om de laadtijden te verbeteren.

Aan het einde van deze tutorial ben je helemaal klaar om de prestaties van elke website te optimaliseren Elementor je creëert en plukt er meteen de vruchten van.

Les 1: Best practices voor lay-outoptimalisatie

In onze eerste les bespreken we de meest efficiënte manier om uw pagina's en berichten in de editor te maken Elementor. We zien vaak het gebruik van veel te veel secties, kolommen, interne secties en widgets, terwijl dezelfde lay-out met veel minder elementen had kunnen worden bereikt.

Het gebruik van overmatige hoeveelheden elementen vertraagt ​​de prestaties van uw website, dus laten we erin duiken en leren hoe u op de meest efficiënte manier websites kunt bouwen met Elementor.

We zullen de volgende onderwerpen behandelen:

• Een nadere blik op de structuur van een correcte pagina
• De prestaties van uw website bekijken en testen
• Uw kop-, voettekst- en pagina-inhoud optimaliseren
• Voorbeelden van goede en slechte praktijken voor de lay-out van websites
• Correct gebruik van widgets, positionering en globale stijlen
• Tips om laadvertraging te voorkomen, te verbeteren SEO en verhoog de laadtijd
• Toegankelijkheidsoptimalisatie
• Het aantal DOM-elementen verminderen
• En veel meer !

Om de optimale lay-outs in Elementor beter te begrijpen, gaan we een Elementor-sjabloon verkennen die veelvoorkomend misbruik van secties, kolommen en widgets laat zien. Aan het einde van deze les hebben we deze hele pagina volledig opnieuw opgebouwd door het aantal kolommen en widgets te verminderen. Onze eerste pagina bestaat uit negen secties, 31 kolommen, vijf interne secties en 44 widgets.

Aan het einde van de tutorial wordt onze geoptimaliseerde pagina teruggebracht tot zes secties, zeven kolommen en 16 widgets.

We zullen de gratis, lichte Hallo themaen we zullen elk gedeelte van de sjabloon opnieuw maken en de algehele prestaties van de website verbeteren met behulp van best practices.

Testen op slechte praktijken

Voordat we ingaan op optimalisatie van de websitelay-out, laten we eerst een test uitvoeren op onze pagina om volledig te begrijpen wat er gebeurt als iemand onze website bezoekt. Zodra al onze optimalisaties zijn uitgevoerd, herhalen we de test en vergelijken we de resultaten.

Stap 1: Verifieer uw website in een incognitovenster

• Open een nieuw venster in "Incognitomodus" en typ de URL in van de webpagina die u aan het testen bent.

Stap 2: Controleer of u het directe URL-pad gebruikt

Als u niet zeker bent van uw paginalink, kunt u deze gemakkelijk vinden door naar uw WP-dashboard te gaan:

• Klik op "Pagina's" om alle pagina's op uw website te zien.
• Beweeg uw cursor over uw pagina en klik op de optie "Bekijken". Hiermee ga je direct naar je pagina.
• Kopieer en plak deze URL in het incognitovenster en zodra de website is geladen, bent u klaar om deze te testen!

Prestatieresultaten testen en bekijken

Stap 1: Test de prestatieresultaten

Mogelijk hebt u in het verleden Chrome Developer Tools gebruikt.

Zo niet, om de HTML- en CSS-inhoud van uw pagina te inspecteren en weer te geven:

• Klik met de rechtermuisknop ergens op uw pagina en klik op 'Inspecteren'. U ziet verschillende tabbladen waar u uw HTML en CSS kunt lezen, fouten kunt vinden, SEO-resultaten kunt krijgen en verschillende tests kunt uitvoeren.
• Selecteer het tabblad Netwerk en druk op de knoppen cmd of ctrl + R om de resultaten te laden.

Zoals je kunt zien, duurt het laden van onze huidige lay-out 2,88 seconden en worden 81 verzoeken uitgevoerd.

Stap 2: Prestatieresultaten bekijken

• Schakel over naar het tabblad Lighthouse, waar we een auditrapport op onze pagina kunnen uitvoeren.

Dit geeft ons meer informatie over de huidige prestaties van de pagina.

• Selecteer "Rapport genereren". Na enkele ogenblikken verschijnt uw rapport.

Momenteel krijgen we een prestatiescore van 73/100, waar we zeker aan kunnen werken.

Idealiter zouden we willen dat al deze nummers groen zijn. Laten we nu verder gaan met het optimaliseren van onze pagina en het verbeteren van onze statistiek.

Houd er rekening mee dat we na elke optimalisatiestap die we doen, enkele praktische tips uit de wijzigingen kunnen halen en deze in gedachten kunnen houden voor toekomstige websites die we maken.

Pagina-elementen optimaliseren

Stap 1: Optimaliseer de kop

Laten we beginnen met de hoofd.

Zoals je in dit ontwerp kunt zien, is de kop gemaakt met drie kolommen.

In de eerste kolom bestaat ons logo uit twee widgets:

1. Un Widget-afbeelding waarin een .png-afbeeldingsbestand van ons logo wordt weergegeven
2. Een titelwidget.

In de tweede kolom bestaat het kopmenu uit onze Navigatie Menu Widget.

De derde kolom bevat:

1. Een interne sectiewidget (die de positie van de pictogramwidget regelt).
2. Onze contactgegevens voor de Header

Laten we eens kijken hoe we het aantal secties, widgets en secties hier kunnen minimaliseren.

Stap 2: Maak de nieuwe koptekst

Kolom 1:

• Maak 1 sectie met slechts 1 kolom.
• Voeg de . toe Website Logo Widget en sleep het naar de sectie.

Praktische tips voor afbeeldingen:

• Geef elk afbeeldingsbestand op je website een relevante titel en alt-tekst in de mediabibliotheek.

Dit zal de toegankelijkheid van uw pagina en uw positie in de zoekmachine verbeteren. In het logo dat we oorspronkelijk gebruikten, is de titel niet relevant voor de daadwerkelijke afbeelding en is er geen alt-tekst.

• Definieer de afmetingen van de afbeelding in de widget.

Hierdoor kan de pagina worden opgemaakt met de juiste ruimte voordat afbeeldingen worden geladen, waardoor lay-outvertraging wordt vermeden (een factor die wordt gemeten door browsers).

In het voorbeeld waar we samen aan werken, los je dit probleem op door naar het tabblad Stijl te gaan en de afbeeldingsbreedte in te stellen op 200px.

Colonne 2

Keer terug naar het widgets-paneel:

• Sleep de navigatiemenuwidget onder het logo
• Zet de aanwijzer op "Geen"
• Ga naar het tabblad "Stijl" en voeg het lettertype van uw voorkeur toe (zodat het overeenkomt met ons vorige ontwerp)

Praktische tips voor algemene styling:

• Vermijd het gebruik van meer dan 2 verschillende lettertypen die meerdere gewichten bevatten (Algemene lettertypen).
• Vermijd het selecteren van verschillende kleuren voor elk item met de kleurenkiezer (Globale kleuren).
• Verbeter de laadsnelheid van uw website door minder zoekopdrachten te genereren (algemene lettertypen).
• Herhaal onnodige code twee keer (globale kleuren).
• Behoud consistentie en controle over uw model (algemene stijl).

Algemene lettertypen:

Dit kan worden gedaan met behulp van de functie Globale lettertypen:

• Ga naar het tabblad "Stijl" en voeg het gewenste lettertype toe (zodat het overeenkomt met ons vorige ontwerp) door er een te selecteren, een kleine wijziging aan te brengen en de muisaanwijzer op het pluspictogram te plaatsen.
• Klik op het pluspictogram en selecteer de lettertypefamilie die u nodig hebt
• Bewaar de stijlen die u in de sjabloon gaat gebruiken als algemene lettertypen

U kunt deze stijl vervolgens gebruiken op elke widget die u maakt.

Globale kleuren:

Dezelfde methode kan worden gebruikt voor uw algemene kleuren:

• Klik op "Globaal"
• Plaats de muisaanwijzer op de kleurenkiezer en klik erop
• Selecteer een kleur en wijs naar het pluspictogram
• Klik op "Globaal" >> selecteer "Principaal"

Zodra u dat heeft gedaan, wordt de kleur opgeslagen in het kleurenpalet van uw sjabloon, zodat u deze kunt selecteren in uw lijst met algemene kleuren wanneer u deze nodig hebt voor een item of widget.

Voordat we verder gaan met onze koptekst, laten we de verticale opvulling op nul zetten.

Stap 3: Bewerk de kop

Kolom 3

• Ga naar het "Widgets" paneel
• Sleep de Icon List Widget onder het menu.
• Extra lijstitems verwijderen
• Voeg je tekst toe
• Kies het icoon van je keuze
• Ga naar het tabblad "Stijl"
• Definieer de algemene kleuren en lettertypen van uw keuze

Nu moeten we nog een ding oplossen - de drie kopelementen zijn momenteel gestapeld en niet uitgelijnd met elkaar. We kunnen dit probleem oplossen door de breedte van elk element te wijzigen in de werkelijke grootte, zodat het niet alle ruimte in de kolom in beslag neemt.

Om dit probleem op te lossen:

• Selecteer de widget Site-logo >> tabblad 'Geavanceerd'
• Selecteer "Positionering" en stel de breedte in op "Inline"

Herhaal deze exacte stap voor de widget Navigatiemenu en voor de widget Icon List.

Nu alle header-elementen in lijn zijn, hoeft u ze alleen nog maar correct te positioneren.

De positionering van de kolom definiëren met inline-elementen

• Selecteer je kolom >> ga naar het tabblad "Lay-out"
• Kies bij "Verticale uitlijning" voor "Onder"
• "In Horizontale uitlijning" kies "Ruimte tussen"

Kies de uitlijning "Ruimte tussen" positioneert de eerste en laatste widget aan beide uiteinden, zodat er gelijke afstand tussen alle andere widgets wordt verkregen.

De eerste en laatste widgets hebben echter verschillende breedtes, dus de gelijke ruimte kan onze interne widget niet altijd centreren.

We kunnen dit probleem oplossen door de marges aan te passen:

• Selecteer de widget Navigatiemenu >> tabblad "Geavanceerd"
• Maak de groepering van de marge ongedaan en verwijder de afstand met een negatieve waarde

Stap 4: Maak de koptekst responsief

Laten we nu eens kijken hoe de huidige versie van onze website eruitziet op mobiele apparaten.

Praktische tips voor mobiel reageren:

• Vereenvoudig uw ontwerp en bedenk manieren om dezelfde secties responsief te maken, om te voorkomen dat u twee keer zoveel code gebruikt die uw paginasnelheid beïnvloedt.

Net zoals je in deze kop ziet: het is gebruikelijk om dezelfde sectie te zien die speciaal opnieuw is ontworpen voor tablets en mobiele apparaten. Dit is wat we hier zien: er zijn twee versies van het ontwerp gemaakt: een versie voor desktop en een voor mobiel.

In plaats daarvan, wanneer uw ontwerp en code responsief zijn, verbetert uw paginasnelheid omdat er minder code wordt gebruikt.

Laten we eens kijken hoe we dit kunnen bereiken met de instelling "Aangepaste breedte" voor onze widgets en elementen.

Een aangepaste breedte instellen voor tablet

• Klik op 'Nav Menu' >> 'Geavanceerd' tabblad
• Selecteer "Positionering" >> stel de breedte in op "Aangepast".
• Selecteer "%" >> geef de widget dezelfde breedte (in percentage) van de lege ruimte eromheen.
• Klik op het tabblad "Inhoud" >> "Toggle Align" >> selecteer "Rechts".

Hiermee kunt u het schakelmenu overal binnen de breedte van de widget uitlijnen.

Laten we nu klaar zijn met het aanpassen van het schakelmenu.

• "Inhoud" >> Klik op de schakelaar "Volledige breedte" en stel deze in op "Ja".
• "Stijl" >> Verwijder de achtergrond door de balk "Kleurkiezer" helemaal naar links te slepen.

Laten we nu eens kijken hoe de dingen eruit zien op een mobiel scherm.

Een aangepaste breedte definiëren voor mobiel

In dit scenario houden we de drie header-widgets in de viewport. Maar houd er rekening mee dat het voor sommige websites logischer kan zijn om bepaalde elementen uit de koptekst weg te laten wanneer ze op mobiel of tablet worden bekeken.

Wat er in dit geval met onze koptekst gebeurt wanneer deze op mobiel wordt weergegeven, is dat het navigatiemenu en de logo-widgets niet in een enkele rij passen.

Om dit probleem op te lossen:

Positionering van het navigatiemenu

• Klik op "Nav Menu" >> tabblad "Geavanceerd"
• Selecteer "Positionering" >> stel de breedte in op "Aangepast"
• Selecteer "%" >> Geef de widget een breedte van 30%, zodat deze naast ons logo past

Positionering van de lijst met pictogrammen

• Klik op "Icoonlijst" >> '' Geavanceerd 'tabblad
• Selecteer "Vullen" >> Waarden degroeperen
• 12px opvulling toevoegen aan "TOP"

Kun je het geloven?

Onze header gebruikte oorspronkelijk 2 secties, 12 widgets en 10 kolommen. Nu gebruikt onze koptekst 1 sectie, 3 widgets en 1 kolom.

En het resultaat is hetzelfde!

Stap 5: Optimaliseer het gedeelte Held

Laten we verder gaan naar het volgende gedeelte van onze website: het heldengedeelte

Best practices voor Hero-secties:

• Zorg ervoor dat de tekst van uw heldensectie goed zichtbaar is, vooral wanneer deze een achtergrondafbeelding heeft.

De positie van de widget in een kolom bepalen

Een veelgemaakte fout die we in de Elementor-editor zien, is het gebruik van extra kolommen en spaties om de positionering van een widget te bepalen.

In ons voorbeeldmodel, onze held afbeelding bestaat uit een sectie met een achtergrondafbeelding. De titel en de tekst zijn horizontaal gepositioneerd, gebruikmakend van twee kolommen. Er is ook een afstandhouder in de sectie om de elementen verticaal te plaatsen.

Laten we eens kijken hoe we hetzelfde ontwerp kunnen maken met slechts één sectie:

• Verwijder de extra kolom rechts van de tekst.
• Verwijder de afstandhouder.

In plaats daarvan gebruiken we de opties voor kolomuitlijning om onze heldtekst te positioneren waar we hem willen hebben:

• Selecteer de kolom.
• Stel de "Verticale uitlijning" in op "Midden".
• Ga naar het tabblad "Geavanceerd".
• Selecteer "Vullen" >> Waarden degroeperen
• Stel Rechter opvulling in op 50%.

• Selecteer de sectie.
• Selecteer "Minimale hoogte" >> stel deze in op 80.

Vast contrast tussen teksten en achtergronden

Het is belangrijk dat elke website een goed contrast heeft tussen de tekst en de achtergrond. Onleesbare informatie beïnvloedt uw websitescores en kan ook bezoekers wegjagen. Hoe dan ook, de tekst moet altijd duidelijk leesbaar zijn.

Er zijn verschillende manieren om de duidelijkheid te verbeteren van een sectie waarvan de achtergrond een gekleurde afbeelding is (zoals we in deze sjabloon zien):

• Klik op je kop.
• Ga naar het tabblad "Stijl" >> Selecteer "Tekstschaduw".

Dit verbetert de leesbaarheid van de tekst door deze te laten opvallen ten opzichte van de achtergrondafbeelding.

Een andere manier om uw tekst duidelijker te maken, is door overlays te gebruiken.

• Selecteer de sectie >> tabblad 'Stijl' >> 'Achtergrondoverlay'
• Selecteer een van je algemene kleuren en speel met de dekking totdat je het gewenste resultaat krijgt

Stap 6: Optimaliseer de sectie met pictogramvakken

Laten we nu verder gaan met onze volgende sectie, waar we momenteel een binnenste sectie hebben met vier kolommen. Momenteel bevat elke kolom drie widgets: Image Widget, Title Widget en Text Editor Widget.

Laten we eens kijken hoe we deze sectie kunnen vereenvoudigen om de prestaties te verbeteren.

Inhoud van pictogramgebied

• Selecteer de knop »Icon Box Widget« in het widgetmenu en sleep deze naar de kolom
• Selecteer de "Icoonbox"
• Wijs naar de pictogramafbeelding
• Selecteer "Download SVG" **
• Voeg uw aangepaste pictogram in

** Opmerking: Badges zijn SVG-bestanden. Zo niet, ga dan naar het WordPress-dashboard en vervolgens naar Elementor >> Instellingen. U moet Ongefilterde bestandsdownloads inschakelen inschakelen.

• Typ je "titel"
• Typ uw "Beschrijving"
• Selecteer "Stijl" >> Kies een algemene kleur
• Selecteer "Grootte" en sleep de balk naar de grootte van uw keuze
• Selecteer "Opvulling" en sleep de balk naar het nummer van uw keuze

Stap 8: Optimaliseer het gedeelte "Services"

We gaan nu de sectie "Services" opnieuw opbouwen, die momenteel twee kolommen, twee afbeeldingen, de titelwidget en de teksteditorwidget gebruikt.

Laten we hetzelfde ontwerp in een nieuwe sectie maken, maar met slechts één kolom.

• Maak een nieuwe sectie met een kolom
• Stel in "Lay-out" >> "Inhoudsbreedte" in op "Volledige breedte"
• Selecteer de "Widget Image Box" in het widgetpaneel en sleep het naar de kolom

(We zullen in staat zijn om alle activa van de sectie in deze widget te integreren)

• Typ de titel
• Typ de beschrijving

Voor de afbeelding behouden we het huidige ontwerp dat we voor onze afbeeldingen hebben gebruikt.

• Voeg dezelfde afbeelding in vanuit de mediabibliotheek
• Ga naar het tabblad "Inhoud" >> Stel "Beeldpositie" in op "Rechts"

• Ga naar het tabblad "Stijl"
• Ruimte tussen elementen vergroten
• Vergroot de "Breedte" van de afbeelding
• Vouw het gedeelte 'Inhoud' uit
• Kies de "midden" uitlijning
• Stel "Verticale uitlijning" in op "Midden"
• Definieer de algemene kleuren en lettertypen van uw keuze
• Ga naar het tabblad "Geavanceerd"
• Voeg 10% opvulling toe aan de widget

Nu heeft de sectie Services hetzelfde ontwerp, maar met minder middelen.

Stap 9: Optimaliseer de call-to-action-sectie

Praktische tips voor CTA-links:

• Zorg ervoor dat al uw links naar sociale media correct werken en dat de knop de link bevat.
• Wanneer u een link naar een andere website toevoegt, neemt u dit kenmerk op: "rel | noopener"

(U kunt dit doen door op het tandwielpictogram te klikken en het kenmerk in "Aangepaste kenmerken" te typen). Dit opent de link in een nieuw browsertabblad en verhoogt uw prestatiescore.

Het volgende gedeelte bevat een oproep tot actie voor onze diensten.

De sectie heeft momenteel twee kolommen, die het volgende bevatten:

1. Een achtergrondafbeelding met een spacer
2. Twee koppen, een interne sectie, een teksteditor en een knop

Laten we hetzelfde ontwerp in een nieuwe sectie maken, maar met slechts één kolom.

• Ga naar het tabblad "Indeling" >> stel "Inhoudsbreedte" in op "Volledige breedte"
• Ga naar het tabblad "Geavanceerd" >> Verwijder eventuele extra vulling

• Selecteer de "Call To Action Widget" in het widgetpaneel en sleep deze naar de kolom
• Stel "Beeldpositie" in op "Links"
• Selecteer uw afbeelding uit de mediabibliotheek
• Vouw het gedeelte 'Inhoud' uit
• Typ de koptekst
• Typ de beschrijving
• Typ de knoptekst

• Ga naar het tabblad "Stijl"
• Voeg "Opvulling" toe tussen de elementen
• Afbeeldingsbreedte aanpassen
• Vouw het gedeelte 'Inhoud' uit
• Selecteer het algemene lettertype voor uw titel
• Vergroot de ruimte tussen de beschrijving en de knop
• Kies de globale kleuren die geschikt zijn voor elke bron
• Vouw het gedeelte "Knop" uit
• Stel de grootte in op "Groot"
• Pas het aan volgens uw behoeften, zoals achtergrondkleur en randradius

Tot nu toe was het een sectie met 2 kolommen met 6 widgets. Nu is het een sectie met 1 kolom met slechts 1 widget!

Stap 10: Optimaliseer de beeldcarrousel

Het huidige ontwerp van onze afbeeldingscarrouselsectie heeft een veelgemaakte fout met de manier waarop meerdere afbeeldingen worden weergegeven.

Dit ontwerp bestaat uit 5 kolommen, een gewoonte die veel gebruikers doen om de grootte van hun afbeeldingen te bepalen.

Laten we een eenvoudigere manier onderzoeken die ook de prestaties van uw website optimaliseert.

• Maak een nieuwe sectie met 1 kolom
• Ga naar het tabblad "Indeling" >> stel "Inhoudsbreedte" in op "Volledige breedte"
• Selecteer de knop »Image Carousel Widget« in het widgetpaneel en sleep deze naar de kolom
• Voeg gewenste afbeeldingen toe vanuit de mediabibliotheek

• Ga naar het tabblad "Inhoud"
• Stel "Afbeeldingsgrootte" in op "Medium - 300 x 300"
• Pas "Dia's om weer te geven", "Dia's om te scrollen" en "Navigatie" aan volgens uw voorkeuren

• Ga naar het tabblad "Stijl"
• Stel "Verticale uitlijning" in op "Midden"
• Pas de "afstand" aan

• Ga naar het tabblad "Geavanceerd"
• Voeg de nodige vulling toe

Wat ooit een sectie met 5 kolommen was, is nu slechts 1 kolom.

Laten we naar het volgende gedeelte gaan, waar we de video's op onze website kunnen optimaliseren.

Stap 11: Optimaliseer het videogedeelte

Praktische tips voor video-inhoud:

• Gebruik Lazy Load waar mogelijk om de laadtijden van uw websites te verbeteren.

Wat gebeurt er als we de optie "Lazy Load" toepassen?

Technisch gezien wordt de video-insluitcode vervangen door een statische afbeelding. Op deze manier laadt de video alleen wanneer de gebruiker op de afbeelding klikt - wat echt helpt bij het laden van onze pagina's.

Wat we nu gaan doen, is de manier veranderen waarop we de Video Widget gebruiken, zodat het onze paginasnelheid of websiteprestaties niet vertraagt.

• Selecteer de "Video-widget"
• Ga naar het tabblad "Stijl"
• Selecteer "Lazy Load"

Stap 12: Optimaliseer de voettekst en houd deze up-to-date

Een veelgemaakte fout die op veel websites wordt gezien, is dat hun voettekst meerdere kopteksten gebruikt voor de datum en beschrijving, evenals een pictogram voor het copyrightsymbool.

Laten we eens kijken hoe we de footer kunnen optimaliseren en ervoor zorgen dat deze altijd up-to-date blijft.

We zullen dit continue updateproces configureren met: Dynamische tags. Op deze manier hoeven we de inhoud van de koptekst niet elk jaar te wijzigen, omdat de dynamische tags automatisch worden bijgewerkt naar het huidige jaar.

Hiervoor gaan we als volgt te werk:

• Verwijder de extra widgets en laat alleen de titelwidget over
• Selecteer de titelwidget
• Klik op het symbool "Dynamische tags" rechts van het veld "Titel" (ook bekend als de "Ouderknop"

• Selecteer in het vervolgkeuzemenu het menu-item "Huidige datum en tijd"
• Klik op het bovenliggende pictogram van de sleutel
• Klik op het tabblad "Datumnotatie" en selecteer het menu-item "Aangepast"
• Verwijder wat zich momenteel in het veld "Aangepast formaat" bevindt, behalve de "Y"
• Selecteer het tabblad "Geavanceerd"
• Markeer het veld "Forward" en houd de "option"- en "G"-toetsen tegelijkertijd (of "control", alt "en" C "tegelijkertijd) ingedrukt om het "©"-symbool te typen.
• Voeg een spatie toe na de "©"

• Selecteer het veld "Na"
• Typ een spatie en schrijf de tekst die u na het jaar wilt weergeven, zoals "Alle rechten voorbehouden"

Het is u misschien opgevallen dat in de voorbeeldwebsite in deze zelfstudie elke widget zijn eigen sectie heeft. We hebben dit gedaan om de tutorial duidelijker en gemakkelijker te volgen te maken.

In het ideale geval, hoe minder secties u heeft, hoe minder extra HTML CODE u zult hebben.

U kunt enkele widgets in dezelfde sectie samenvoegen door ze naar de bovenstaande sectie te slepen en neer te zetten en vervolgens de lege sectie te verwijderen.

En dat is alles, uw lay-out is geoptimaliseerd!

Evaluatie van nieuwe websiteprestaties

We controleren de resultaten in het DevTools (Inspector)-venster:

• Selecteer het tabblad "Netwerk":

Er zijn een aantal leuke en positieve veranderingen hier:

• Website heeft nu 568 milliseconden nodig om te laden
• We gingen van 81 verzoeken naar 46
• Selecteer het tabblad "Vuurtoren", waar u zult zien dat onze prestatiescore is gestegen van 73 naar 98

Houd er rekening mee dat we onze prestaties hebben geoptimaliseerd zonder plug-ins van derden te gebruiken. Het enige dat nodig was, waren eenvoudige aanpassingen en best practices.

Stap 13: Test de resultaten met bewegingseffecten

We willen onze site interactiever en leuker maken, maar welke invloed heeft dat op onze prestatiescores? Laten we eens kijken wat we kunnen doen.

Maak van de header een "vast" element:

• Selecteer de kop
• Ga naar het tabblad "Geavanceerd"
• Vouw het tabblad "Bewegingseffecten" uit
• Zet de optie "Sticky" op "Top"

Maak van de hero-sectie een "vast" element:

• Selecteer de heldensectie
• Ga naar het tabblad "Stijl"
• Selecteer de vervolgkeuzelijst "Bijlage" en selecteer "Vast"

Gebruik a Entree animatie voor de tekst van de held (header):

• Selecteer de Header-widget
• Ga naar het tabblad "Geavanceerd"
• Vouw het tabblad "Bewegingseffecten" uit
• Selecteer Input Animation en stel deze in op "Fade In"

Gebruik een invoeranimatie voor de tekstbeschrijving van de held (Text Editor-widget):

• Selecteer de widget Teksteditor
• Ga naar het tabblad "Geavanceerd"
• Vouw het tabblad "Bewegingseffecten" uit
• Selecteer de "Input animatie" en stel deze in op "Fade In"

Doe hetzelfde voor de widgets die erna komen, voor subtiele effecten wanneer de pagina wordt geladen.

Laten we nu de prestatietest opnieuw uitvoeren om te zien hoe de bewegingseffecten onze score beïnvloedden:

• Keer terug naar het "Inspecteur"-venster
• Selecteer het tabblad "Vuurtoren"
• Klik op "Een rapport genereren"

Nu zien we dat onze prestatiescore is verlaagd naar 97 - dit is zeker geen groot verschil en het maakt de website interessanter en leuker.

Kun je onze nieuwe prestatiescore geloven?

We zijn verheugd dat u nu volledig uitgerust bent om uw prestatiescore te verhogen van elke Elementor-website die u maakt. Het zal een groot verschil maken voor het bouwen van uw website en het succes van uw bedrijf.

We raden u aan een bladwijzer te maken voor deze zelfstudie voor toekomstig gebruik, zodat u de prestaties van uw webpagina's kunt onderzoeken en de beste werkwijzen kunt toepassen om uw lay-out te optimaliseren.

En dat is nog maar het begin - het volgende deel van deze cursus behandeltbeeldoptimalisatie.

In de zelfstudie gaan we door elke afbeelding op de voorbeeldwebsite en leren we hoe we ze kunnen verbeteren voor nog efficiëntere laadtijden.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat was het voor dit artikel dat u laat zien hoe u uw website-indeling kunt optimaliseren met Elementor. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...