So optimieren Sie Ihr Website-Layout mit Elementor

Möchten Sie wissen, wie Sie das Layout Ihrer Website optimieren können? Elementor ?

Die Optimierung der Website-Performance ist einer der wichtigsten Aspekte ihrer Benutzererfahrung. Eine langsam ladende Website kann jeden Benutzer frustrieren, was oft zu einem Absprungrate hoch, was sich nachteilig auf unseren Geschäftserfolg auswirken kann.

Die Leistung der Website kann durch viele Faktoren beeinflusst werden, zum Beispiel: große Bildgrößen, Serverkonfigurationen, zu viele Plugins und andere Faktoren.

Die Website-Performance ist einer unserer stärksten Werte als Web-Ersteller. Deshalb haben wir diesen Kurs in 5 Teilen erstellt.

Jetzt können Sie lernen, wie Sie Layouts und Beiträge mit optimalen Techniken erstellen. Dieses Wissen stellt sicher, dass Ihre Websites keine redundanten Abschnitte, Spalten oder Widgets enthalten, die einfach nicht benötigt werden. Wir werden auch einige integrierte Widget-Funktionen untersuchen, um die Ladezeiten zu verbessern.

Am Ende dieses Tutorials sind Sie vollständig darauf vorbereitet, die Leistung jeder Website zu optimieren Elementor Sie erstellen und ernten sofort die Belohnungen.

Lektion 1: Best Practices zur Layoutoptimierung

In unserer ersten Lektion zeigen wir Ihnen, wie Sie Ihre Seiten und Beiträge im Editor am effizientesten erstellen Elementor. Wir sehen oft die Verwendung viel zu vieler Abschnitte, Spalten, interner Abschnitte und Widgets, obwohl das gleiche Layout mit viel weniger Elementen hätte erreicht werden können.

Die Verwendung übermäßiger Mengen an Elementen verlangsamt die Leistung Ihrer Website. Lassen Sie uns also eintauchen und lernen, wie Sie Websites mit Elementor am effizientesten erstellen.

Wir werden folgende Themen behandeln:

• Ein genauerer Blick auf den Aufbau einer richtigen Seite
• Anzeigen und Testen der Leistung Ihrer Website
• Optimieren Sie Ihre Kopf-, Fuß- und Seiteninhalte
• Beispiele für gute und schlechte Website-Layout-Praktiken
• Korrekte Verwendung von Widgets, Positionierung und globalen Stilen
• Tipps zur Vermeidung von Ladeverzögerungen, Verbesserung SEO und die Ladezeit erhöhen
• Optimierung der Barrierefreiheit
• Reduzierung der Menge an DOM-Elementen
• Und vieles mehr !

Um die optimalen Layouts in Elementor besser zu verstehen, werden wir eine Elementor-Vorlage untersuchen, die häufige Missbräuche von Abschnitten, Spalten und Widgets zeigt. Am Ende dieser Lektion haben wir die gesamte Seite komplett neu erstellt, indem wir die Anzahl der Spalten und Widgets reduziert haben. Unsere Startseite besteht aus neun Abschnitten, 31 Spalten, fünf internen Abschnitten und 44 Widgets.

Am Ende des Tutorials wird unsere optimierte Seite auf sechs Abschnitte, sieben Spalten und 16 Widgets reduziert.

Wir werden das kostenlose Licht nutzen Hallo Themaund wir werden jeden Abschnitt der Vorlage neu erstellen und die Gesamtleistung der Website mithilfe von Best Practices verbessern.

Auf schlechte Praktiken testen

Bevor wir uns mit der Optimierung des Website-Layouts befassen, führen wir einen Test auf unserer Seite durch, um vollständig zu verstehen, was passiert, wenn jemand unsere Website besucht. Sobald alle unsere Optimierungen durchgeführt wurden, werden wir den Test wiederholen und die Ergebnisse vergleichen.

Schritt 1: Überprüfen Sie Ihre Website in einem Inkognito-Fenster

• Öffnen Sie ein neues Fenster im "Inkognito-Modus" und geben Sie die URL der zu testenden Webseite ein.

Schritt 2: Überprüfen Sie, ob Sie den direkten URL-Pfad verwenden

Wenn Sie sich bei Ihrem Seitenlink nicht sicher sind, können Sie ihn leicht finden, indem Sie zu Ihrem WP-Dashboard gehen:

• Klicken Sie auf "Seiten", um alle Seiten Ihrer Website anzuzeigen.
• Bewegen Sie den Cursor über Ihre Seite und klicken Sie auf die Option "Ansicht". Dadurch gelangen Sie direkt auf Ihre Seite.
• Kopieren Sie diese URL und fügen Sie sie in das Inkognito-Fenster ein. Sobald die Website geladen ist, können Sie sie testen!

Testen und Anzeigen von Leistungsergebnissen

Schritt 1: Testen Sie die Leistungsergebnisse

Möglicherweise haben Sie in der Vergangenheit die Chrome-Entwicklertools verwendet.

Wenn nicht, um den HTML- und CSS-Inhalt Ihrer Seite zu überprüfen und anzuzeigen:

• Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf Ihrer Seite und klicken Sie auf "Inspizieren". Sie sehen mehrere Registerkarten, auf denen Sie Ihr HTML und CSS lesen, Fehler finden, SEO-Ergebnisse erhalten und verschiedene Tests durchführen können.
• Wählen Sie die Registerkarte Netzwerk und drücken Sie die Tasten cmd oder Strg + R, um die Ergebnisse zu laden.

Wie Sie sehen, benötigt unser aktuelles Layout 2,88 Sekunden zum Laden und führt 81 Anfragen aus.

Schritt 2: Leistungsergebnisse anzeigen

• Wechseln Sie zum Tab Leuchtturm, wo wir auf unserer Seite einen Auditbericht erstellen können.

Dadurch erhalten wir weitere Informationen über die aktuelle Leistung der Seite.

• Wählen Sie „Bericht erstellen“. Nach wenigen Augenblicken wird Ihr Bericht angezeigt.

Aktuell erhalten wir eine Leistungsbewertung von 73/100, an der wir sicherlich noch arbeiten können.

Idealerweise möchten wir, dass alle diese Zahlen grün sind. Lassen Sie uns nun damit fortfahren, unsere Seite zu optimieren und unsere zu verbessern Statistik.

Denken Sie daran, dass wir nach jedem Optimierungsschritt möglicherweise einige Best Practices aus den Änderungen übernehmen und sie für zukünftige Websites, die wir erstellen, berücksichtigen.

Seitenelemente optimieren

Schritt 1: Optimieren Sie die Kopfzeile

Beginnen wir mit dem Kopfzeile.

Wie Sie in diesem Design sehen können, wurde die Kopfzeile mit drei Spalten erstellt.

In der ersten Spalte besteht unser Logo aus zwei Widgets:

1. Un Widget-Bild die eine .png-Bilddatei unseres Logos anzeigt
2. Ein Titel-Widget.

In der zweiten Spalte besteht das Kopfmenü aus unserem Navigationsmenü-Widget.

Die dritte Spalte enthält:

1. Ein internes Abschnitts-Widget (das die Position des Symbol-Widgets steuert).
2. Unsere Kontaktdaten für den Header

Sehen wir uns an, wie wir die Anzahl der Abschnitte, Widgets und Abschnitte hier minimieren können.

Schritt 2: Erstellen Sie die neue Kopfzeile

Spalte 1:

• Erstellen Sie 1 Abschnitt mit nur 1 Spalte.
• Ergänzen Sie die Website-Logo-Widget und ziehen Sie es in den Abschnitt.

Best Practices für Bilder:

• Geben Sie jeder Bilddatei auf Ihrer Website einen relevanten Titel und Alternativtext in der Mediathek.

Dies verbessert die Zugänglichkeit Ihrer Seite und Ihr Suchmaschinen-Ranking. In dem ursprünglich verwendeten Logo ist der Titel für das eigentliche Bild irrelevant und es gibt keinen Alternativtext.

• Definieren Sie die Abmessungen des Bildes im Widget.

Auf diese Weise kann die Seite vor dem Laden der Bilder mit dem richtigen Platz angeordnet werden, wodurch Layoutverzögerungen (ein von Browsern gemessener Faktor) vermieden werden.

In dem Beispiel, an dem wir gemeinsam arbeiten, lösen Sie dieses Problem, indem Sie auf die Registerkarte Stil gehen und die Bildbreite auf 200px einstellen.

Spalten 2

Kehren Sie zum Widgets-Bedienfeld zurück:

• Ziehen Sie das Navigationsmenü-Widget per Drag & Drop unter das Logo
• Setzen Sie den Zeiger auf "Keine"
• Gehen Sie zur Registerkarte "Stil" und fügen Sie die gewünschte Schriftart hinzu (damit sie unserem vorherigen Design entspricht).

Best Practices für das allgemeine Styling:

• Vermeiden Sie die Verwendung von mehr als 2 verschiedenen Schriftarten mit mehreren Strichstärken (Globale Schriftarten).
• Vermeiden Sie die Auswahl unterschiedlicher Farben für jedes Element mit der Farbauswahl (Globale Farben).
• Verbessern Sie die Ladegeschwindigkeit Ihrer Website, indem Sie weniger Abfragen (Gesamtschriftarten) generieren.
• Wiederholen Sie unnötigen Code zweimal (globale Farben).
• Behalten Sie die Konsistenz und Kontrolle Ihres Modells (Gesamtstil) bei.

Globale Schriftarten:

Dies kann mit der Funktion Globale Schriftarten erfolgen:

• Gehen Sie zur Registerkarte "Stil" und fügen Sie Ihre bevorzugte Schriftart hinzu (so dass sie unserem vorherigen Design entspricht), indem Sie eine auswählen, eine kleine Änderung vornehmen und den Mauszeiger über das Plus-Symbol bewegen.
• Klicken Sie auf das Plus-Symbol und wählen Sie die gewünschte Schriftfamilie aus
• Speichern Sie die Stile, die Sie in der Vorlage verwenden werden, als globale Schriftarten

Sie können diesen Stil dann für jedes Widget verwenden, das Sie erstellen.

Globale Farben:

Die gleiche Methode kann für Ihre Gesamtfarben verwendet werden:

• Klicken Sie auf "Global"
• Bewegen Sie den Mauszeiger über den Farbwähler und klicken Sie darauf
• Wählen Sie eine Farbe aus und zeigen Sie auf das Plus-Symbol
• Klicken Sie auf "Global" >> wählen Sie "Principal"

Sobald Sie dies getan haben, wird die Farbe in der Farbpalette Ihrer Vorlage gespeichert, sodass Sie sie jederzeit aus der Liste der globalen Farben auswählen können, wenn Sie sie für ein Element oder Widget benötigen.

Bevor wir mit unserem Header fortfahren, setzen wir den vertikalen Abstand auf Null.

Schritt 3: Bearbeiten Sie die Kopfzeile

Spalte 3

• Gehen Sie zum Bereich "Widgets"
• Ziehen Sie das Symbollisten-Widget unter das Menü.
• Zusätzliche Listenelemente entfernen
• Fügen Sie Ihren Text hinzu
• Wählen Sie das Symbol Ihrer Wahl
• Gehen Sie zum Tab "Stil"
• Definieren Sie die allgemeinen Farben und Schriftarten Ihrer Wahl

Jetzt müssen wir noch eine Sache korrigieren - die drei Header-Elemente sind derzeit gestapelt und nicht aufeinander ausgerichtet. Wir können dieses Problem lösen, indem wir die Breite jedes Elements auf seine tatsächliche Größe ändern, damit es nicht den gesamten Platz in der Spalte einnimmt.

Um dieses Problem zu beheben:

• Wählen Sie das Site-Logo-Widget >> Registerkarte "Erweitert"
• Wählen Sie "Positionierung" und stellen Sie die Breite auf "Inline"

Wiederholen Sie genau diesen Schritt für das Navigationsmenü-Widget und das Symbollisten-Widget.

Nachdem nun alle Kopfzeilenelemente in einer Linie sind, müssen sie nur noch richtig positioniert werden.

Definieren der Positionierung der Spalte mit Inline-Elementen

• Wählen Sie Ihre Spalte aus >> gehen Sie zum Tab "Layout"
• Wählen Sie in "Vertikale Ausrichtung" "Unten"
• "In horizontaler Ausrichtung" wählen Sie "Abstand zwischen"

Wählen Sie die Ausrichtung „Abstand zwischen“ und positioniert das erste und das letzte Widget an beiden Enden, sodass alle anderen Widgets einen gleichen Abstand haben.

Das erste und das letzte Widget haben jedoch unterschiedliche Breiten, sodass der gleiche Platz möglicherweise nicht immer unser internes Widget zentriert.

Wir können dieses Problem lösen, indem wir die Margen anpassen:

• Wählen Sie das Navigationsmenü-Widget >> Registerkarte „Erweitert“
• Gruppieren Sie den Rand auf und entfernen Sie den Abstand mit einem negativen Wert

Schritt 4: Machen Sie den Header responsiv

Sehen wir uns nun an, wie die aktuelle Version unserer Website auf mobilen Geräten aussieht.

Best Practices für die mobile Reaktionsfähigkeit:

• Vereinfachen Sie Ihr Design und überlegen Sie, wie Sie dieselben Abschnitte responsiv gestalten können, um zu vermeiden, dass doppelt so viel Code verwendet wird, der sich auf die Seitengeschwindigkeit auswirkt.

Wie Sie in dieser Kopfzeile sehen: Es ist üblich, dass derselbe Abschnitt speziell für Tablets und Mobilgeräte neu gestaltet wurde. Das sehen wir hier: Es wurden zwei Versionen des Designs erstellt: eine Version für Desktop und eine für Mobile.

Wenn Ihr Design und Ihr Code responsive sind, verbessert sich Ihre Seitengeschwindigkeit, da weniger Code verwendet wird.

Sehen wir uns an, wie wir dies erreichen können, indem wir die Einstellung „Benutzerdefinierte Breite“ für unsere Widgets und Elemente verwenden.

Festlegen einer benutzerdefinierten Breite für das Tablet

• Klicken Sie auf 'Nav-Menü' >> Registerkarte 'Erweitert'
• Wählen Sie "Positionierung" >> stellen Sie die Breite auf "Benutzerdefiniert".
• Wählen Sie "%" aus >> geben Sie dem Widget die gleiche Breite (in Prozent) des leeren Raums um ihn herum.
• Klicken Sie auf die Registerkarte „Inhalt“ >> „Ausrichten umschalten“ >> wählen Sie „Rechts“.

Auf diese Weise können Sie das Umschaltmenü an einer beliebigen Stelle innerhalb der Breite des Widgets ausrichten.

Lassen Sie uns nun die Anpassung des Umschaltmenüs abschließen.

• "Inhalt" >> Klicken Sie auf den Schalter "Volle Breite" und stellen Sie ihn auf "Ja".
• "Stil" >> Entfernen Sie den Hintergrund, indem Sie die Leiste "Color Picker" ganz nach links ziehen.

Sehen wir uns nun an, wie die Dinge auf einem mobilen Bildschirm aussehen.

Definieren einer benutzerdefinierten Breite für Mobilgeräte

In diesem Szenario behalten wir die drei Header-Widgets im Viewport. Beachten Sie jedoch, dass es für einige Websites sinnvoller sein kann, bestimmte Elemente aus der Kopfzeile bei der Anzeige auf einem Handy oder Tablet wegzulassen.

In diesem Fall passiert mit unserem Header, wenn er auf dem Handy angezeigt wird, dass das Navigationsmenü und die Logo-Widgets nicht in eine einzige Zeile passen.

Um dieses Problem zu beheben:

Positionierung des Nav-Menüs

• Klicken Sie auf "Nav-Menü" >> Registerkarte "Erweitert"
• Wählen Sie "Positionierung" >> stellen Sie die Breite auf "Benutzerdefiniert"
• Wählen Sie "%" aus >> Geben Sie dem Widget eine Breite von 30%, damit es neben unserem Logo passt

Positionierung der Symbolliste

• Klicken Sie auf "Symbolliste" >> '' Erweitert 'Tab
• Wählen Sie "Füllen" >> Gruppierung von Werten aufheben
• 12px-Auffüllung zu "TOP" hinzufügen

Können Sie das glauben?

Unser ursprünglich verwendeter Header 2 Abschnitte, 12 Widgets und 10 Spalten. Jetzt verwendet unser Header 1 Abschnitt, 3 Widgets und 1 Spalte.

Und das Ergebnis ist das gleiche!

Schritt 5: Optimieren Sie den Hero-Bereich

Kommen wir zum nächsten Abschnitt unserer Website: dem Heldenabschnitt

Best Practices für Heldenabschnitte:

• Stellen Sie sicher, dass der Text Ihres Heldenabschnitts gut sichtbar ist, insbesondere wenn er ein Hintergrundbild hat.

Steuern Sie die Position des Widgets in einer Spalte

Ein häufiger Fehler, den wir im Elementor-Editor sehen, besteht darin, zusätzliche Spalten und Leerzeichen zu verwenden, um die Positionierung eines Widgets zu steuern.

In unserem Beispielmodell ist unser Heldenbild besteht aus einem Abschnitt mit einem Hintergrundbild. Titel und Text werden in zwei Spalten horizontal positioniert. Es gibt auch einen Abstandshalter innerhalb des Abschnitts, um die Elemente vertikal zu beabstanden.

Sehen wir uns an, wie wir das gleiche Design mit nur einem Abschnitt erstellen können:

• Löschen Sie die zusätzliche Spalte rechts vom Text.
• Entfernen Sie den Abstandshalter.

Um unseren Heldentext dort zu positionieren, wo wir ihn haben möchten, verwenden wir stattdessen die Spaltenausrichtungsoptionen:

• Wählen Sie die Spalte aus.
• Stellen Sie „Vertikale Ausrichtung“ auf „Mitte“.
• Gehen Sie auf die Registerkarte "Erweitert".
• Wählen Sie "Füllen" >> Gruppierung von Werten aufheben
• Stellen Sie die rechte Polsterung auf 50 % ein.

• Wählen Sie den Abschnitt aus.
• Wählen Sie "Mindesthöhe" >> stellen Sie es auf 80 ein.

Fester Kontrast zwischen Texten und Hintergründen

Es ist wichtig, dass jede Website einen guten Kontrast zwischen Text und Hintergrund hat. Unlesbare Informationen wirken sich auf Ihre Website-Scores aus und können auch Besucher abschrecken. In jedem Fall sollte der Text immer gut lesbar sein.

Es gibt mehrere Möglichkeiten, die Klarheit eines Abschnitts zu verbessern, dessen Hintergrund ein farbiges Bild ist (wie wir in dieser Vorlage sehen):

• Klicken Sie auf Ihre Kopfzeile.
• Gehen Sie zur Registerkarte "Stil" >> Wählen Sie "Textschatten".

Dadurch wird die Lesbarkeit des Textes verbessert, indem er sich vom Hintergrundbild abhebt.

Eine andere Möglichkeit, Ihren Text klarer zu machen, ist die Verwendung von Überlagerungen.

• Wählen Sie den Abschnitt >> Registerkarte 'Stil' >> 'Hintergrund-Overlay'
• Wählen Sie eine Ihrer Gesamtfarben aus und spielen Sie mit der Deckkraft, bis Sie das gewünschte Ergebnis erhalten

Schritt 6: Optimieren Sie den Abschnitt mit Symbolfeldern

Kommen wir nun zu unserem nächsten Abschnitt, in dem wir derzeit einen inneren Abschnitt mit vier Spalten haben. Derzeit hat jede Spalte drei Widgets: Bild-Widget, Titel-Widget und Text-Editor-Widget.

Sehen wir uns an, wie wir diesen Abschnitt vereinfachen können, um seine Leistung zu verbessern.

Inhalt des Symbolbereichs

• Wählen Sie im Widget-Menü die Schaltfläche »Widget Icon Box« und ziehen Sie diese in die Spalte
• Wählen Sie das "Symbolfeld"
• Zeigen Sie auf das Symbolbild
• Wählen Sie "SVG herunterladen" **
• Fügen Sie Ihr benutzerdefiniertes Symbol ein

** Hinweis: Abzeichen sind SVG-Dateien. Wenn nicht, gehen Sie zum WordPress-Dashboard und dann zu Elementor >> Einstellungen. Sie müssen Ungefilterte Dateidownloads aktivieren aktivieren.

• Geben Sie Ihren "Titel" ein
• Geben Sie Ihre "Beschreibung" ein
• Wählen Sie "Stil" >> Wählen Sie eine Gesamtfarbe
• Wählen Sie "Größe" und ziehen Sie die Leiste auf die gewünschte Größe
• Wähle "Padding" und ziehe den Balken auf die Zahl deiner Wahl

Schritt 8: Optimieren Sie den Abschnitt "Dienste"

Wir werden jetzt den Abschnitt „Dienste“ neu aufbauen, der derzeit zwei Spalten, zwei Bilder, das Titel-Widget und das Texteditor-Widget verwendet.

Lassen Sie uns das gleiche Design in einem neuen Abschnitt erstellen, jedoch mit nur einer Spalte.

• Erstellen Sie einen neuen Abschnitt mit einer Spalte
• In "Layout" >> "Inhaltsbreite" auf "Volle Breite" setzen
• Wählen Sie im Widget-Panel die "Widget-Bildbox" aus und ziehen Sie sie in die Spalte

(Wir werden in der Lage sein, alle Assets des Abschnitts in dieses Widget zu integrieren)

• Geben Sie den Titel ein
• Geben Sie die Beschreibung ein

Für das Bild behalten wir das aktuelle Design bei, das wir für unsere Bilder verwendet haben.

• Fügen Sie dasselbe Bild aus der Medienbibliothek ein
• Gehen Sie zur Registerkarte „Inhalt“ >> Setzen Sie „Bildposition“ auf „Rechts“

• Gehen Sie zum Tab "Stil"
• Erhöhen Sie den Abstand zwischen den Elementen
• Erhöhen Sie die "Breite" des Bildes
• Erweitern Sie den Abschnitt "Inhalt"
• Wählen Sie die Ausrichtung "Mitte"
• Stellen Sie "Vertikale Ausrichtung" auf "Mitte"
• Definieren Sie die allgemeinen Farben und Schriftarten Ihrer Wahl
• Gehen Sie zum Reiter "Erweitert"
• Fügen Sie dem Widget 10 % Füllung hinzu

Jetzt hat der Abschnitt Dienste das gleiche Design, aber mit weniger Assets.

Schritt 9: Optimieren Sie den Call-to-Action-Bereich

Best Practices für CTA-Links:

• Stellen Sie sicher, dass alle Ihre Social-Media-Links ordnungsgemäß funktionieren und die Schaltfläche den Link enthält.
• Wenn Sie einen Link zu einer anderen Website hinzufügen, fügen Sie dieses Attribut hinzu: "rel | noopener"

(Sie können dies tun, indem Sie auf das Zahnradsymbol klicken und das Attribut in "Benutzerdefinierte Attribute" eingeben). Dadurch wird der Link in einem neuen Browser-Tab geöffnet und Ihre Leistungsbewertung erhöht.

Der folgende Abschnitt enthält einen Aufruf zum Handeln für unsere Dienstleistungen.

Der Abschnitt hat derzeit zwei Spalten, die Folgendes enthalten:

1. Ein Hintergrundbild mit einem Abstandshalter
2. Zwei Kopfzeilen, ein interner Abschnitt, ein Texteditor und eine Schaltfläche

Lassen Sie uns das gleiche Design in einem neuen Abschnitt erstellen, jedoch mit nur einer Spalte.

• Gehen Sie zur Registerkarte "Layout" >> setzen Sie "Inhaltsbreite" auf "Volle Breite"
• Gehen Sie auf die Registerkarte "Erweitert" >> Entfernen Sie alle zusätzlichen Füllungen

• Wählen Sie das "Call-to-Action-Widget" im Widget-Panel aus und ziehen Sie es in die Spalte
• Setzen Sie "Bildposition" auf "Links"
• Wählen Sie Ihr Bild aus der Mediathek
• Erweitern Sie den Abschnitt "Inhalt"
• Geben Sie die Kopfzeile ein
• Geben Sie die Beschreibung ein
• Geben Sie den Schaltflächentext ein

• Gehen Sie zum Tab "Stil"
• Fügen Sie "Padding" zwischen den Elementen hinzu
• Bildbreite anpassen
• Erweitern Sie den Abschnitt "Inhalt"
• Wählen Sie die globale Schriftart für Ihren Titel
• Vergrößern Sie den Abstand zwischen der Beschreibung und der Schaltfläche
• Wählen Sie die globalen Farben, die für jede Ressource geeignet sind
• Erweitern Sie den Abschnitt "Schaltfläche"
• Stellen Sie die Größe auf "Groß" ein
• Passen Sie es an Ihre Bedürfnisse an, z. B. Hintergrundfarbe und Randradius

Bisher war es ein 2-spaltiger Abschnitt mit 6 Widgets. Jetzt ist es ein 1-spaltiger Abschnitt mit nur 1 Widget!

Schritt 10: Optimieren Sie das Bildkarussell

Das aktuelle Design unseres Bildkarussell-Bereichs weist einen häufigen Fehler in der Art und Weise auf, wie mehrere Bilder angezeigt werden.

Dieses Design besteht aus 5 Spalten, eine Praxis, die viele Benutzer verwenden, um die Größe ihrer Bilder zu steuern.

Lassen Sie uns einen einfacheren Weg erkunden, der auch die Leistung Ihrer Website optimiert.

• Erstellen Sie einen neuen Abschnitt mit 1 Spalte
• Gehen Sie zur Registerkarte "Layout" >> setzen Sie "Inhaltsbreite" auf "Volle Breite"
• Wählen Sie im Widget-Panel die Schaltfläche »Image Carousel Widget« und ziehen Sie sie in die Spalte
• Gewünschte Bilder aus der Medienbibliothek hinzufügen

• Gehen Sie zum Tab "Inhalt"
• Setzen Sie "Bildgröße" auf "Mittel - 300 x 300"
• Passen Sie "Folien zum Anzeigen", "Folien zum Scrollen" und "Navigation" nach Ihren Wünschen an

• Gehen Sie zum Tab "Stil"
• Setzen Sie "Vertikale Ausrichtung" auf "Mitte"
• Passen Sie den "Abstand" an

• Gehen Sie zum Reiter "Erweitert"
• Fügen Sie die notwendige Füllung hinzu

Was einst ein 5-Säulen-Abschnitt war, ist jetzt nur noch 1-Säulen.

Kommen wir zum nächsten Abschnitt, in dem wir die Videos auf unserer Website optimieren können.

Schritt 11: Optimieren Sie den Videobereich

Best Practices für Videoinhalte:

• Verwenden Sie nach Möglichkeit Lazy Load, um die Ladezeiten Ihrer Websites zu verbessern.

Was passiert, wenn wir die Option „Lazy Load“ anwenden?

Technisch gesehen wird der Video-Einbettungscode durch ein statisches Bild ersetzt. Auf diese Weise wird das Video nur geladen, wenn der Benutzer auf das Bild klickt - was bei unseren Seitenladezeiten wirklich hilft.

Was wir jetzt tun werden, ist die Art und Weise zu ändern, wie wir das Video-Widget verwenden, damit es weder die Seitengeschwindigkeit noch die Website-Leistung verzögert.

• Wählen Sie das "Video-Widget" aus
• Gehen Sie zum Tab "Stil"
• Wählen Sie "Lazy Load"

Schritt 12: Optimieren Sie die Fußzeile und halten Sie sie aktuell

Ein häufiger Fehler auf vielen Websites besteht darin, dass ihre Fußzeile mehrere Kopfzeilen für das Datum und die Beschreibung sowie ein Symbol für das Copyright-Symbol verwendet.

Sehen wir uns an, wie Sie die Fußzeile optimieren und sicherstellen, dass sie immer auf dem neuesten Stand bleibt.

Wir konfigurieren diesen kontinuierlichen Aktualisierungsprozess mit Dynamische Tags. Auf diese Weise müssen wir den Kopfzeileninhalt nicht jedes Jahr ändern, da die dynamischen Tags automatisch auf das aktuelle Jahr aktualisiert werden.

Dazu gehen wir wie folgt vor:

• Entfernen Sie die zusätzlichen Widgets, sodass nur das Titel-Widget übrig bleibt
• Wählen Sie das Titel-Widget
• Klicken Sie rechts neben dem Feld "Titel" auf das Symbol "Dynamische Tags" (auch bekannt als "Parent-Button"

• Wählen Sie aus dem Drop-Down-Menü den Menüpunkt "Aktuelles Datum und Uhrzeit"
• Klicken Sie auf das Elternsymbol des Schlüssels
• Klicken Sie auf die Registerkarte "Datumsformat" und wählen Sie den Menüpunkt "Benutzerdefiniert"
• Löschen Sie, was sich derzeit im Feld "Benutzerdefiniertes Format" befindet, mit Ausnahme des "Y"
• Wählen Sie die Registerkarte "Erweitert"
• Markieren Sie das Feld "Vorwärts" und halten Sie die Tasten "Option" und "G" gleichzeitig (oder "Strg", Alt "und" C "gleichzeitig) gedrückt, um das Symbol "©" einzugeben.
• Fügen Sie nach dem "©" ein Leerzeichen hinzu

• Wählen Sie das Feld "Nachher" aus
• Geben Sie ein Leerzeichen ein und schreiben Sie den Text, der nach dem Jahr erscheinen soll, z. B. "Alle Rechte vorbehalten".

Sie werden vielleicht feststellen, dass in der Beispielwebsite in diesem Tutorial jedes Widget seinen eigenen Abschnitt hat. Wir haben dies getan, um das Tutorial klarer und einfacher zu machen.

Im Idealfall gilt: Je weniger Abschnitte Sie haben, desto weniger zusätzlicher HTML-CODE haben Sie.

Sie können einige Widgets im selben Abschnitt zusammenführen, indem Sie sie per Drag & Drop in den obigen Abschnitt ziehen und dann den leeren Abschnitt löschen.

Und das war's, Ihr Layout ist optimiert!

Leistungsbewertung der neuen Website

Wir überprüfen die Ergebnisse im Fenster DevTools (Inspektor):

• Wählen Sie die Registerkarte "Netzwerk":

Hier gibt es einige schöne und positive Veränderungen:

• Das Laden der Website dauert jetzt 568 Millisekunden
• Wir sind von 81 Anfragen auf 46 gestiegen
• Wählen Sie die Registerkarte "Leuchtturm", wo Sie sehen, dass unsere Leistungsbewertung von 73 auf 98 gestiegen ist

Denken Sie daran, dass wir unsere Leistung optimiert haben, ohne Plugins von Drittanbietern zu verwenden. Alles was es brauchte waren einfache Optimierungen und Best Practices.

Schritt 13: Testen Sie die Ergebnisse mit Bewegungseffekten

Wir möchten unsere Website interaktiver und unterhaltsamer gestalten, aber wie wirkt sich das auf unsere Leistungswerte aus? Mal sehen, was wir tun können.

Machen Sie die Kopfzeile zu einem "festen" Element:

• Wählen Sie die Kopfzeile aus
• Gehen Sie zum Reiter "Erweitert"
• Erweitern Sie die Registerkarte "Bewegungseffekte"
• Setzen Sie die Option "Sticky" auf "Top"

Machen Sie den Heldenabschnitt zu einem "festen" Element:

• Wählen Sie den Heldenbereich
• Gehen Sie zum Tab "Stil"
• Wählen Sie die Dropdown-Liste "Anhang" und wählen Sie "Fest"

verwenden Sie ein Eingangsanimation für den Heldentext (Kopfzeile):

• Wählen Sie das Kopfzeilen-Widget
• Gehen Sie zum Reiter "Erweitert"
• Erweitern Sie die Registerkarte "Bewegungseffekte"
• Wählen Sie Eingabeanimation und stellen Sie sie auf „Einblenden“

Verwenden Sie eine Eingabeanimation für die Textbeschreibung des Helden (Texteditor-Widget):

• Wählen Sie das Texteditor-Widget
• Gehen Sie zum Reiter "Erweitert"
• Erweitern Sie die Registerkarte "Bewegungseffekte"
• Wählen Sie die "Eingabeanimation" und stellen Sie sie auf "Einblenden"

Machen Sie dasselbe für die nachfolgenden Widgets, um subtile Effekte beim Laden der Seite zu erzielen.

Lassen Sie uns nun den Leistungstest erneut ausführen, um zu sehen, wie sich die Bewegungseffekte auf unsere Punktzahl ausgewirkt haben:

• Zurück zum Fenster "Inspektor"
• Wählen Sie die Registerkarte "Leuchtturm"
• Klicken Sie auf "Bericht erstellen"

Jetzt sehen wir, dass unsere Leistungsbewertung auf 97 reduziert wurde - das ist definitiv kein großer Unterschied und macht die Website interessanter und unterhaltsamer.

Können Sie unserer neuen Leistungsbewertung glauben?

Wir freuen uns, dass Sie jetzt vollständig gerüstet sind, um Ihre Leistungsbewertung von jeder Elementor-Website, die Sie erstellen, zu verbessern. Es wird einen großen Unterschied für Ihre Website-Erstellungsziele und den Erfolg Ihres Unternehmens ausmachen.

Wir empfehlen Ihnen, dieses Tutorial als Lesezeichen für zukünftige Referenzen zu speichern, damit Sie die Leistung Ihrer Website-Seiten überprüfen und Best Practices anwenden können, um Ihr Layout zu optimieren.

Und das ist erst der Anfang - der nächste Teil dieses Kurses behandeltBildoptimierung.

Im Tutorial gehen wir jedes Bild auf der Beispiel-Website durch und erfahren, wie man sie für noch effizientere Ladezeiten verbessert.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie Ihr Website-Layout mit Elementor optimieren können. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...