Elementor 3.0: Was sind die neuen Funktionen?

Blair2004 WordPress-Tutorials Nov 30, 2020

Ein neues Hauptupdate von Elementor wurde veröffentlicht. Wir sind von Version 2.x auf Version 3.0 umgezogen. Diese neue Version bietet eine neue Möglichkeit, Websites mit WordPress und Elementor zu erstellen. Wir werden versuchen, diese neuen Funktionen zu konvertieren.

Was sind die wichtigsten Ergänzungen zu Elementor 3.0?

Elementor 3.0 enthält drei Hauptzusätze: Design System Features, New Theme Builder und signifikante Leistungsverbesserungen.

Systemfunktionen entwerfen

Haben Sie sich jemals gefragt, wie große Unternehmen unabhängig von der Plattform, auf der sie sich befinden, so gute Leistungen erbringen? Alles, was sie erstellen, sieht konsistent aus und hat das gleiche Design. Dies ist dank des sogenannten "Design Systems" möglich. Laut UnxDesign.cc lautet das Design-System:

Die einzige Quelle der Wahrheit, die alle Elemente zusammenfasst, die es den Teams ermöglichen, ein Produkt zu entwerfen, zu realisieren und zu entwickeln. Ein Design-System ist also kein Ergebnis, sondern eine Reihe von Ergebnissen. Es wird sich ständig mit dem Produkt, den Werkzeugen und den neuen Technologien weiterentwickeln.

UX Collective

Durch die Implementierung eines Designsystems können Sie Ihr gesamtes Team in einer Designsprache konsistent halten, die Arbeitsweise Ihres Teams revolutionieren und einen schnelleren Workflow sicherstellen.

Zu den Design System Features von Elementor 3.0 gehören:

  • Globale Farben
  • Fenster "Neue Site-Einstellungen"
  • Globale Schriftarten

Lassen Sie uns genauer sehen, wie Sie auf diese Weise bessere professionelle Websites erstellen können.

Globale Farben

Elementor 3.0 bietet eine neue Möglichkeit, mit Site-Farben zu arbeiten. Diese neue Methode heißt Global Colors.

Mit den globalen Farben können Sie die Farbe von einem Ort aus ändern und diese Farbe überall dort aktualisieren, wo sie verwendet wird.

Sie wählen die grundlegenden globalen Farben für Ihre Website aus. Gehen Sie dann in Elementor zu einem beliebigen Farbstil und definieren Sie ihn als eine der vier Farben. Beachten Sie, dass Sie der globalen Liste so viele benutzerdefinierte Farben hinzufügen können.

Jetzt kommen die CSS-Variablen ins Spiel. Kehren Sie zu Globale Farben zurück und ändern Sie eine der Farben. Das Farbschema Ihrer gesamten Website ändert sich entsprechend der neuen globalen Farbe. Haben Sie jemals etwas so Einfaches erlebt?

Sie können auch eine andere globale Farbe in der Steuereingabe entwerfen oder eine neue globale Farbe erstellen, wobei alle denselben Farbwähler in der Steuereingabe verwenden.

Seiteneinstellungen

Das Erstellen der ersten Designeinstellungen für eine Website nimmt viel Zeit in Anspruch. Sie müssen zwischen dem Themencode Customizer, functions.php jonglieren. Das sind genug Gründe, um Ihre Kopfschmerzen zu rechtfertigen.

Die neuen Site-Einstellungen zeigen verschiedene Konfigurationstools. Auf diese Weise erledigen Sie alle diese Aufgaben an einem einzigen Ort.

Klicken Sie zunächst auf einer Seite, die Sie mit Elementor bearbeiten, im linken Seitenbereich auf das Symbol oben links. Dadurch wechseln Sie zum Bereich "Globale Einstellungen".

In diesem Bereich "Globale Einstellungen" finden Sie:

  • Layout: Zum Konfigurieren der Standardlayouteinstellungen von Elementor, z. B. Standardinhaltsbreite oder Standardseitenlayout.
  • Site-Identität: Passen Sie Ihre standortübergreifenden Identitäten wie Logo, Titel, Slogan und sogar Favicon an.
  • Themenstil: Passen Sie HTML-Elemente, die nicht mit Elementor zusammenhängen (normalerweise vom Thema festgelegt), für Typografie, Schaltflächen und Formularfelder an.
  • Leuchtkasten: Definieren Sie das Standard-Styling von Elementor-Leuchtkästen
  • Globale Farben und Schriftarten: Mit dieser Option können Sie die globalen Farben und Schriftarten konfigurieren, die für Ihre Website gelten.

Globale Schriftarten

Die Farben und die Typografie sind Teil der Bauelemente jeder Website. Dies ist eine neue Methode zum Arbeiten mit den Textstilen Ihrer Site, die dieselbe Logik wie die Funktion "Globale Farben" verwendet.

Mit den globalen Schriftarten können alle Typografieeinstellungen global angewendet werden. Sie können jetzt alle Einstellungen für Ihre Site-Typografie global einrichten, einschließlich Schriftfamilie, Schriftgröße und -skalierung, Schriftgewicht, Schrifttransformation, Schriftstil, Schriftdekoration, Zeilenhöhe, Buchstabenabstand und sogar reaktionsschnelle Einstellungen. Sie können diese Einstellungen auch für jedes Widget festlegen, das einen Text enthält, und Ihre eigenen globalen Schriftarten anpassen.

Mit einer korrekt gestalteten Typografie können Sie diese Änderungen global anwenden.

Ganze Site an einem Ort visualisiert und organisiert

Während der bekannte Theme Builder zum Branchenführer geworden ist, um einen vollständigen Überblick über das Website-Design zu erhalten, geht diese neue Benutzeroberfläche noch weiter. Der neue Theme Builder gibt Ihnen jetzt auf sehr intuitive Weise einen Überblick über eine gesamte Website.

Dieser Theme Builder bietet einen Überblick über die Site. Dazu gehören alle Site-Teile: Kopfzeile, Fußzeile, globale Seitenvorlage, globale Post-Vorlage und mehr. Jeder Teil der Website kann in der Vorschau angezeigt werden, was die Gestaltung einer vollständigen Website erheblich erleichtert.

Leistungsverbesserungen

Während eine Anwendung wächst, ist es offensichtlich, dass sich der Entwickler um die Leistung kümmern sollte. Die auf Elementor 3.0 vorgenommenen Aktualisierungen sollen eine schöne Code-Infrastruktur gewährleisten, die zu bemerkenswerten Leistungsverbesserungen geführt hat.

Es wurde viel DOM-Elemente gelöscht, wodurch Elementor schneller gerendert wird. Dies sollte auf jeden Fall Ihre Seitengeschwindigkeits-Rankings und die allgemeine Erfahrung für Benutzer auf Ihrer Website verbessern.

Was hat sich konkret in Bezug auf die Seitengeschwindigkeit geändert?

Elementor 3.0 bietet signifikante Verbesserungen für die serverseitigen Rendering-Prozesse und für die Art und Weise, wie Elementor dynamische CSS-Werte rendert. Auf diese Weise können Sie dynamische Elemente und Werte in Ihre Website integrieren. Sie können beispielsweise eine Vorlage für Website-Posts erstellen und festlegen, dass das ausgewählte Bild jedes Posts als Hintergrund hinter dem Post-Titel angezeigt werden soll.

Wenn Elementor im Hintergrund einen Beitrag vorbereitet, der an den Browser gesendet werden soll, analysiert es den Beitrag nach dynamischen Werten, ruft sie ab und druckt diesen CSS, wenn sie CSS-Werte enthalten.

Mit Elementor 3.0 wurde der Zeitaufwand für diesen Prozess erheblich reduziert. Dank dynamischer Werte, die für jeden Ihrer Beiträge gespeichert werden. Sobald diese Liste gespeichert wurde und jeder den Beitrag besucht, wechselt Elementor direkt zu dieser Liste, wodurch der Prozess beschleunigt wird. Zu den von dieser Optimierung betroffenen dynamischen Werten gehören Hintergrundbilder, Farben und vieles mehr. Diese Verbesserung führt zu einer spürbaren Reduzierung der Serverlasten.

Zusammenfassung zum Elementor 3.0-Update

Wie oben erwähnt, enthält diese Version interessante Extras, die sich wirklich auf Ihre tägliche Arbeit auswirken sollten. Wir gingen durch :

Die Design System Features, mit denen Sie konsistenter und effizienter arbeiten können.

Der neue Theme Builder ist ein leistungsstarkes visuelles Tool zum Verwalten jedes Teils Ihrer Website von einem einzigen Ort aus.

Leistungsverbesserungen für eine bessere Benutzererfahrung.

Elementor 3.0 bringt Sie als professioneller Web-Ersteller mit Sicherheit an den Rand. Wenn Sie dies noch nicht getan haben, aktualisieren Sie jetzt auf Elementor Pro. Lesen Sie auch unseren Beitrag, in dem erläutert wird, warum Elementor ist sicherlich der beste kostenlose Page Builder für WordPress.