Einführung von Elementor 3.10 – Neue verschachtelte Elemente – die Zukunft des Designs mit Elementor-Widgets

Elementor und Elementor Pro 3.10 enthalten neue Designfunktionen, die eine völlig neue Welt der Kreativität beim Entwerfen Ihrer Websites mit verschachtelten Elementen erschließen, und führen eine neue benutzerdefinierte Einheit bei der Größensteuerung ein, mit der Sie ein höheres Maß an Genauigkeit erreichen können wann es geht um die Gestaltung Ihrer Websites. Diese Versionen enthalten auch eine neue Container-basierte Bibliothek und Leistungsverbesserungen.

Neue verschachtelte Elemente, die das Design Ihrer Website verbessern

Verschachtelte Elemente eröffnen eine völlig neue Möglichkeit, das Design Ihrer Website zu konzipieren. Mit verschachtelten Elementen können Sie jedes Element in einem anderen platzieren, indem Sie die Leistungsfähigkeit von Flexbox-Containern nutzen. Ähnlich wie Sie einen Container in einem anderen platzieren und unendlich verschachteln können, können Sie mit verschachtelten Elementen jedes Element (Widget oder Container) in einem anderen platzieren.

Da Flexbox-Container offiziell stabil sind, werden wir in den kommenden Versionen die Nesting-Funktion in eine Reihe bestehender Widgets einführen, wie z. B. Karussell, Akkordeon, Registerkarten und mehr. Wir werden auch völlig neue verschachtelte Widgets wie das Mega-Menü einführen.

Einführung des Renewed Tabs Widget – Das erste verschachtelte Elementor-Widget, das Designflexibilität freisetzt

Mit dem neuen Tabs-Widget können Sie Ihrer Designkreativität freien Lauf lassen und ein hohes Maß an Raffinesse erreichen. Das neue Tabs-Widget ist containerbasiert und enthält drei Hauptverbesserungen im Vergleich zum ursprünglichen Tabs-Widget:

• Registerkarten und Titel – Mit dem neuen Registerkarten-Widget können Sie das Layout und die Positionierung der Registerkarten anpassen, um zu bestimmen, wo sie sich in Bezug auf den Inhalt der Registerkarte befinden – oben, unten oder an einer ihrer Seiten. Darüber hinaus haben Sie mehr Gestaltungsoptionen, einschließlich der Möglichkeit, dem Registerkartentitel Symbole hinzuzufügen.
• Neuer Inhaltsbereich – Mit der Leistungsfähigkeit von Flexbox-Containern wird der Inhaltsbereich jedes Tabs zu einem Hauptcontainer, in dem Sie jedes Element platzieren, sein Layout anpassen und jeden gewünschten Inhalt präsentieren können – genau wie die leere Leinwand des Editor.
• Neue Responsive-Einstellung – Um das Design und die Benutzererfahrung pro Gerätegröße zu verbessern, können Sie den Haltepunkt auswählen, an dem die Registerkarte automatisch als Akkordeon angezeigt wird. Das bedeutet, dass Sie nicht für jedes Gerät unterschiedliche Inhalte erstellen müssen, was auch die Leistung verbessert.

Da das Tabs-Widget containerbasiert ist, müssen Sie zur Verwendung auf Ihrer Website sicherstellen, dass der Flexbox-Container und die Experimente mit verschachtelten Elementen aktiviert sind. Nach der Aktivierung ersetzt das neue Tabs-Widget automatisch das vorhandene im Widget-Panel (dies hat keinen Einfluss auf das Design vorhandener Tabs auf Ihrer Website).

Neue benutzerdefinierte Einheiten – Wählen Sie eine beliebige Einheit aus, einschließlich mathematischer CSS-Funktionen

Die numerischen Steuerelemente im Editor erhalten ein Upgrade, und Sie können jetzt jede gewünschte Einheit auswählen, numerische Einheiten mischen und CSS-Funktionsberechnungen darin ausführen. Viele Elemente im Editor enthalten Optionen zur Größenanpassung, z. B. Auffüllung und Ränder, Schriftgröße und mehr. Die kluge Verwendung dieser Größeneinheiten kann sich positiv auf die Genauigkeit des Designs und die Reaktionsfähigkeit der Website auswirken.

Bisher mussten Sie beispielsweise beim Anpassen der Polsterung oder der Ränder einen der folgenden Einheitentypen auswählen: PX, EM, REM, % oder VW. Mit diesem Update können Sie auch die benutzerdefinierte Option auswählen, um Ihre Einheitenauswahl genauer zu bestimmen. Sie können beispielsweise PX für die Seiten und % für die Ober- und Unterseite auswählen. Außerdem wurden mit diesem Update die Einheitenbezeichnungen in eine Dropdown-Liste verschoben, um die neue benutzerdefinierte Option aufzunehmen.

Wenn Sie die Option „Benutzerdefiniert“ auswählen, können Sie auch Berechnungen für die Messung eines Werts innerhalb des Werteingabefelds ausführen, sodass Sie eine größere Konstruktionsgenauigkeit und einen reaktionsschnellen Support erreichen können.

Wenn Sie beispielsweise die benutzerdefinierte Option in den Steuerelementen für die Typografiegröße auswählen, können Sie die CSS-Funktion „clamp()“ verwenden, um Ihre Typografiegröße an verschiedene Gerätegrößen anzupassen, oder die CSS-Funktion „calc()“ zum Berechnen und Berechnen Legen Sie einen Wert fest, der Einheiten mischt, und mehr.

Als Teil dieser Version erhalten die folgenden Größensteuerungen benutzerdefinierte Optionen:

• Container, Abschnitte und Spalten – überall möglich, einschließlich benutzerdefinierter Breite, Rahmen usw.
• Typografie-Steuerelemente – Zeilenhöhe, Buchstabenabstand und Wortabstand.

Weitere Bereiche werden in Zukunft ebenfalls aktualisiert.

Containerbasierte vollständige Website-Kits, Vorlagen und Blöcke

Da Flexbox-Container als Beta gekennzeichnet sind, wodurch sie stabil und einsatzbereit sind, war es wichtig, Ihnen containerbasierte vollständige Website-Kits und Vorlagen bereitzustellen. In den letzten Wochen hat das Bibliotheksteam daran gearbeitet, eine vollständige Container-basierte Bibliothek zu erstellen, damit Sie Ihren Website-Erstellungs- und Designprozess starten können, wenn Sie das Flexbox-Container-Experiment aktivieren, indem Sie die aktuellsten Designtrends verwenden .

Wenn Sie jetzt das Flexbox-Container-Experiment auf Ihrer Website aktivieren, verfügen Sie über eine völlig neue Kit- und Vorlagenbibliothek. Die Updates umfassen auch Dutzende der beliebtesten vollständigen Website-Kits und Seitenvorlagen, die vom abschnittsbasierten Layout in Flexbox-Container umgewandelt wurden, sowie brandneue Website-Kits und Seitenvorlagen.

Mit der neuen Bibliothek gibt es zwei weitere bemerkenswerte Updates. Das erste ist, dass wir einige Mini-Shops eingeführt haben, ein einseitiges vollständiges Website-Kit für E-Commerce-Websites, einschließlich PayPal- und Stripe-Schaltflächen für den Zahlungseinzug. Das zweite ist, dass alle vorherigen Blöcke (wie Kontakt, 404 usw.) durch völlig neue Designs ersetzt wurden.

[Pro] Dynamisches Fälligkeitsdatum im Countdown-Widget

Das Countdown-Widget, ein großartiges Tool zum Erstellen von FOMO und zum Steigern der Konversion, verfügt jetzt über eine dynamische Tag-Steuerung im Fälligkeitsdatum. Mit diesem Update können Sie native benutzerdefinierte WordPress-Felder sowie benutzerdefinierte Felder von ACF und PODS verwenden, um das Fälligkeitsdatum auf jeder Seite dynamisch auszufüllen.

Mit den neuen dynamischen Tag-Steuerelementen können Sie beispielsweise das Countdown-Widget in der Vorlage für einzelne Posts verwenden und jedem Ihrer Posts ein benutzerdefiniertes Feld in WordPress hinzufügen, das das Fälligkeitsdatum enthält, das Sie in jeden Post aufnehmen möchten. Auf diese Weise können Sie auch eine Website an einen Kunden liefern und ihm gleichzeitig ermöglichen, das Fälligkeitsdatum in WordPress zu aktualisieren, ohne ihn an den Editor zu senden, wo er Ihr Design ändern kann.

Neu: Deaktivieren Sie Google Fonts vollständig

Google Fonts, eine beliebte Online-Schriftenbibliothek, ermöglicht es Ihnen, eine Vielzahl von Schriftarten auf Ihrer Website zu verwenden. In jüngster Zeit wurde jedoch festgestellt, dass Google Fonts in einigen Fällen gegen die DSGVO und Datenschutzbestimmungen verstößt.

Um dieses Risiko zu eliminieren, ermöglicht Ihnen Elementor, alle Google-Schriftarten von Ihrer Website zu entfernen. Wenn Sie Google-Schriftarten deaktivieren, können Sie die Online-Schriftenbibliothek von Google im Editor nicht mehr verwenden, wodurch die Anzahl der Ihnen im Editor zur Verfügung stehenden Schriftarten auf 7 Schriftarten reduziert wird. Wenn Sie bereits eine Google-Schriftart auf Ihrer Website verwendet haben, sich aber dafür entscheiden, Google-Schriftarten mit diesem Update zu deaktivieren, werden alle Schriftarten auf Ihrer Website standardmäßig auf eine der verfügbaren Schriftarten auf Ihrer Website gesetzt. Um Ihre bevorzugten Schriftarten weiterhin zu verwenden, können Sie lokal gehostete Schriftarten in Elementor hochladen, indem Sie die Funktion „Benutzerdefinierte Schriftarten“ verwenden, die Benutzern von Elementor Pro zur Verfügung steht.

Leistungs- und Zugänglichkeitsverbesserungen

In Elementor 3.10 führen wir weiterhin Leistungs- und Zugänglichkeitsverbesserungen ein. Dieses Update enthält drei neue Updates zur Leistungsverbesserung und zwei Updates zur Verbesserung der Barrierefreiheit.

Lazy Load Google Maps

Mit dem Google Maps-Widget von Elementor können Sie überall auf Ihrer Website eine Karte platzieren, das perfekte Widget, wenn Sie einen bestimmten Standort mit Ihren Website-Besuchern teilen möchten. Mit diesem Update können Sie Google Map-Iframes lazy loaden, wodurch das anfängliche Laden der Seite beschleunigt wird.

Faules Laden von Bildern mit benutzerdefinierten Größen

Die Größe des von Ihnen verwendeten Bildes kann sich erheblich auf die Leistung Ihrer Website auswirken. In früheren Updates haben wir die Möglichkeit hinzugefügt, fast jedes Bild, das in die Medienbibliothek hochgeladen wurde, träge zu laden. Mit Elementor 3.10 können Sie auch Bilder in benutzerdefinierter Größe faul laden.

Steuern des Vorladens von selbst gehosteten Videos

Ähnlich wie Bilder wirken sich auch Videos auf die Geschwindigkeit und Leistung Ihrer Website aus, wobei selbst gehostete Videos im Allgemeinen einen größeren Einfluss haben als beispielsweise auf YouTube gehostete Videos, die Optimierungstechniken anwenden. Anstatt selbst gehostete Videos während des anfänglichen Ladens der Seite zu laden, können Sie mit diesem Update wählen, ob Sie das Video, die Metadaten des Videos vorab laden oder keinen seiner Inhalte vorladen möchten, bevor der Besucher auf „Play“ klickt.

Verbesserungen der Barrierefreiheit für die Seitennavigation

Das Widget „Block Quote“ und das Widget „Post Comments“, zwei Elementor Pro-Widgets, erhielten Markup-Updates, um sie für Menschen mit Behinderungen, die Hilfstechnologien zum Navigieren durch die Seite verwenden, noch zugänglicher zu machen.

Genießen Sie mehr Designoptionen, mehr Reaktionsfähigkeit und bessere Leistung

Elementor 3.10 eröffnet Ihnen eine Vielzahl neuer Gestaltungsmöglichkeiten, die Sie auf Ihrer Website verwenden können. Die Einführung des neuen Tabs-Widgets, das erste Update, das die Nested Elements-Funktion nutzt, ermöglicht es Ihnen, hochentwickelte und kreative Layouts mit allen Elementor-Widgets in einer vertrauten Drag-and-Drop-Methode zu erstellen. Wenn Sie Flexbox Containers die Verwendung dieses neuen Widgets ermöglichen, werden Sie auch einem völlig neuen Container-basierten Kit und einer Vorlagenbibliothek ausgesetzt, um Ihren kreativen Prozess zu beschleunigen.

Probieren Sie Elementor 3.10 unbedingt aus und teilen Sie uns Ihre Meinung in den Kommentaren unten mit.