Wir stellen Elementor 3.4 vor: Additional Custom Breakpoints für grenzenloses Design

Elementor 3.4 führt vier neue benutzerdefinierte Haltepunkte zu den bestehenden zwei ein, darunter Widescreen, Laptop und zwei zusätzliche Custom Breakpoints für Mobile und Tablet. Passe sie vollständig an, um sie an jede Bildschirmgröße anzupassen. Mache deine Websites responsive und adaptiv für jedes Gerät!

Du hast gerade eine spektakuläre Website für deinen Kunden*in entworfen, aber plötzlich will er sie auf dem großen Bildschirm in seinem Büro sehen. Du frägst dich, wie deine Website auf einem 70-Zoll-Fernseher im 16:9-Format aussehen wird? Nun, keine Sorge! Elementor hält dir den Rücken frei.

Dürfen wir vorstellen: Additional Custom Breakpoints!

Du kannst deine Designs jetzt für mehr mobile Bildschirme, Tablet-Bildschirme, Laptops und Breitbildgeräte anpassen. Du erhältst jetzt sechs benutzerdefinierte Haltepunkte, mit denen du herumspielen kannst, was dir mehr Kontrolle und die Freiheit gibt, für jedes Gerät zu gestalten. Erfahre mehr über diese Funktion und darüber, was sie so einzigartig macht.

Design-Grenzen mit Custom Breakpoints durchbrechen

Zunächst einmal sollten wir uns darüber im Klaren sein, wie Haltepunkte dir helfen, bessere und reaktionsfähigere Websites zu gestalten. Ein Custom Breakpoint ist ein „Punkt“, an dem der Inhalt auf die Breite des Geräts reagiert. Dadurch hast du die Möglichkeit, den Stil für jeden Haltepunkt anzupassen, um dem Besucher das bestmögliche Erlebnis zu bieten.

Du hast vielleicht eine Galerie mit drei Bildern in einer Reihe platziert, möchtest aber, dass Besucher auf mobilen Geräten nur zwei Bilder in einer Reihe sehen. Hier kommen Custom Breakpoints ins Spiel, denn sie ermöglichen es dir, das Layout deiner Website je nach Gerät und Bildschirmgröße anzupassen. Elementor Core 3.4 gibt dir die Möglichkeit, dein Design-Layout an sieben Geräte anzupassen.
Bei der Verwendung von Custom Breakpoints hast du die volle Flexibilität:

Wähle, welche Haltepunkte aktiv sind. Neben den ursprünglichen Custom Breakpoints für Desktop, Mobile und Tablet kannst du jetzt Haltepunkte für weitere Bildschirmgrößen hinzufügen.
Wähle den Wert jedes Haltepunkts. Du kannst die Werte jedes Haltepunkts individuell verwalten.
• Skaliere die Vorschau nach oben oder unten. Verkleinere die Vorschau bei Geräten mit Breitbildschirm. Arbeite auf einem kleineren Bildschirm als dem, für den du entwirfst, während du das Gesamtbild siehst.

Wie man mit Custom Breakpoints für verschiedene Geräte gestaltet

Elementor verwendet ein kaskadierendes Konzept für Haltepunkte, das für jedes Gerät außer Widescreen herunter skaliert. Eine einfache Möglichkeit, sich zu merken, wie jeder Haltepunkt die anderen beeinflusst, ist: Desktop ist immer der Standard.

Der Desktop ist die Standardbildschirmeinstellung, die alle anderen Haltepunkte sowohl für größere als auch für kleinere Bildschirme beeinflusst.

Beispiel: Einstellen verschiedener Titel pro Haltepunkt

Schauen wir uns ein einfaches Beispiel an, um zu verstehen, wie es funktioniert. Du legst für deinen Titel eine Textgröße von 80 px für die Standardbildschirmeinstellung Desktop fest. Diese Textgröße gilt dann für alle anderen Haltepunkte. Wenn du dann zum Haltepunkt Tablet gehst und die Titelgröße auf 60 Pixel einstellst, gilt sie für alle kleineren Haltepunkte, einschließlich Mobile und Mobile-Extra. Der Stil, den du für Tablet einstellst, gilt nicht für größere Haltepunkte, was in diesem Fall Laptop und Tablet-Extra einschließt. Die Haltepunkte für diese größeren Geräte bleiben bei 80px, genau wie bei Desktop.

Sei dir den Styles bewusst die du an anderen Custom Breakpoints einsetzt

Mit jedem zusätzlichen benutzerdefinierten Haltepunkt kommt die Notwendigkeit, genau zu verstehen, was von einem Haltepunkt zum anderen vererbt wird. Aus diesem Grund haben wir eine neue UI-Verbesserung hinzugefügt, mit der du erkennen kannst, welche Stile von anderen Haltepunkten geerbt werden. Du hast also den Rand auf Tablet auf 10px gesetzt und bist dann zur Ansicht Mobile-Extra gewechselt.

Jetzt kannst du sehen, dass die geerbten Werte für Steuerelemente wie padding, margin, Hintergrundbilder und jedes andere numerische Steuerelement als Platzhalter dargestellt wird. In unserem Beispiel werden die 10px, die du auf Tablet eingestellt hast, auf allen Geräten, die kleiner als Tablet sind, als ausgegrauter Platzhalter angezeigt. Kleiner Tipp! Denke daran, dass du den Stil pro Haltepunkt nur für die Werte ändern kannst, die das Gerätesymbol neben dem Titel haben, wie auf dem Bild unten zu sehen.

Haltepunkte, die die Geschwindigkeitsgrenze überschreiten

Um die benutzerdefinierten Haltepunkte so weit wie möglich zu optimieren, haben wir unseren Mechanismus zum Laden von Steuerelementen überarbeitet. Dies verbesserte die Reaktionszeit des Servers um bis zu 23%(!) und reduzierte die Speichernutzung um ~5%. Wir sparten auch ca. 30 % des Datenverkehrs zum Laden des Editors ein. Mit anderen Worten: Alles läuft jetzt schneller und reibungsloser.

Wegfall der IE-Unterstützung und Verbesserung der Font Awesome-Ladung

Elementor wurde vor 5 Jahren eingeführt, als der Internet Explorer und andere Alternativen noch umfangreiche Unterstützung und Code-Duplikation benötigten, um modernen Code zu interpretieren. Heutzutage sind die Webbrowser in der Lage, diese moderne Sprache nativ zu interpretieren, ohne dass zusätzliche Erklärungen erforderlich sind. Warum ist das wichtig? Dadurch konnten wir bei jedem Laden einer Seite bis zu 110 KB einsparen, was für dich und deine Besucher*innen schnellere Seiten bedeutet. Auch das Laden von Font Awesome hat ein Upgrade erhalten! Bisher wurde beim Hinzufügen eines Icons von Font Awesome die gesamte Bibliothek auf der Website verwendet. Indem wir den Lademechanismus eines Icons in SVG ändern, reduzieren wir die Anfragen und verbessern so die Leistung und die Ladezeit auf der ganzen Linie. Jeder reduzierte KB bedeutet schnellere Seitenladezeiten für jede Seite, die Sie mit Elementor erstellen! Keine Sorge, wir werden weiterhin mehr und mehr dieser Verbesserungen bereitstellen.
Dank der von uns vorgenommenen Aktualisierungen hat das Hinzufügen von benutzerdefinierten Custom Breakpoints keine signifikanten Auswirkungen auf die Leistung, im Gegensatz zu anderen Lösungen, die hierfür doppelten Code verwenden.

Bessere Custom Breakpoints, bessere Leistung

Die neuen benutzerdefinierten Haltepunkte machen es viel einfacher, deine Entwürfe an verschiedene Bildschirme anzupassen. Auch in dieser Version setzen wir unser Engagement fort, dir drei verschiedenen Leistungsverbesserungen Tools, mit der besten Leistung der Welt, zur Verfügung zu stellen. Ganz gleich, ob du dein Design an das neueste iPhone, den Breitbildfernseher deiner Kunden*innen oder an Geräte im Querformat anpassen möchtest.

Übersetzt von Sarah van der Linden
von Website Freiburg

Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/introducing-elementor-3-4