Sitemap Menü umschalten

Erstellen Sie schnellere Layouts in Beaver Builder 2.9: Überspringen Sie die Zeilen und Spalten

Veröffentlicht: 2025-06-04

Beaver Builder Vorlage Marktplatz! Beginnen Sie bei Assistant.pro

build faster layouts with beaver builder 2.9
  • Biberbauer

Erstellen Sie schnellere Layouts in Beaver Builder 2.9: Überspringen Sie die Zeilen und Spalten

Sie fragen sich, wie Sie im Beaver Builder schnellere Layouts bauen können? Wenn Sie eine Weile mit WordPress gebaut haben, haben Sie wahrscheinlich viel Zeit damit verbracht, herauszufinden, wie komplexe Layouts mit Zeilen und Spalten strukturiert werden können. Es hat funktioniert - aber es war nicht immer der flexibelste oder effizienteste Ansatz.

Deshalb war Beaver Builder 2.9 für mich ein so spielerischer Veränderer. In diesem Update wurden zwei wichtige Verbesserungen eingeführt, die meine Seiten vollständig verändert haben, und ich denke, Sie werden die Flexibilität lieben, die es in Ihren Workflow bringt:

  • Containermodule wie das Boxmodul und das Loop-Modul können jetzt als Layoutelemente auf oberster Ebene verwendet werden-was bedeutet, dass Sie Zeilen und Spalten insgesamt überspringen können, wenn sie nicht benötigt werden.
  • Grundlegende Module geben nun standardmäßig Cleaner HTML aus, entfernen Sie zusätzliche Wrapper <div> und lassen Ihre Seiten schneller geladen und potenziell in Suchmaschinen besser rangieren.

Dies sind nicht nur schöne Funktionen-sie stellen eine Verschiebung zu einer intuitiveren, leistungsorientierteren Art zum Aufbau von WordPress-Sites dar. Wenn Sie Ihren Workflow, Seitengeschwindigkeit und Codequalität verbessern möchten, ist dieses Update absolut eine Erkundung wert.

Container steigen im Mittelpunkt

Sprechen wir zuerst über die größte Veränderung. In früheren Versionen von Beaver Builder war das Zeilen- und Spaltsystem Ihre einzige Option für Strukturlayouts. Jedes einzelne Element auf Ihrer Seite musste in diesem Framework leben.

Stellen Sie sich dieses gemeinsame Szenario vor: Sie möchten einen einfachen Abschnitt mit dem Anruf mit einer Überschrift, einem Text und einer Schaltfläche erstellen. Im alten Ansatz erstellen Sie eine Zeile, fügen dieser Zeile eine Spalte hinzu und fügen dann Ihre Module in die Spalte hinzu. Es hat funktioniert, aber es fügte Strukturschichten hinzu, die Sie nicht wirklich brauchten.

So sah das aus:

Reihe
└── Säule
└── Boxmodul
└── Überschriftmodul
└── Textmodul
└── Tastenmodul

Jetzt in Beaver Builder 2.9 können Sie diese zusätzlichen Schichten vollständig beseitigen. Containermodule wie das Boxmodul können jetzt als primäre Layoutelemente dienen und direkt auf der oberen Ebene Ihrer Seitenstruktur sitzen.

Der neue, optimierte Ansatz sieht so aus:

Boxmodul
└── Überschriftmodul
└── Textmodul
└── Tastenmodul

Hier geht es nicht nur darum, weniger Klicks in der Benutzeroberfläche zu haben (obwohl das auch schön ist). Es geht darum, Layouts zu erstellen, die entsprechen, wie Sie tatsächlich über Design denken. Wenn Sie wie ich sind, wenn Sie sich einen Abschnitt des Inhalts vorstellen, denken Sie über den Container und das, was darin geht - nicht über das abstrakte Zeilen- und Säulengitter, das sich darum hüllt.

Warum dieser Ansatz Sinn macht

Diese Veränderung entspricht perfekt der Funktionsweise des modernen CSS, insbesondere mit Flexbox und CSS -Netz. Mit diesen Technologien können Sie anspruchsvolle Layouts erstellen, ohne komplexe verschachtelte Strukturen zu benötigen, und jetzt entspricht die Schnittstelle von Beaver Builder zu dieser Realität.

Die Vorteile gehen über die Einfachheit hinaus. Wenn Sie Containermodule als primäre Layoutelemente verwenden, erhalten Sie:

  • Direktere Kontrolle über Abstand, Ausrichtung und reaktionsschnelles Verhalten. Anstatt Einstellungen über mehrere Nistebenen hinweg zu verwalten, können Sie alles auf der Behälterebene bewältigen.
  • Schnellere Design -Iterationen, da Sie weniger Zeit verbringen, um durch Strukturschichten zu navigieren und sich mehr auf das tatsächliche Design zu konzentrieren.
  • Bessere Leistung , da weniger HTML -Markup vom Browser generiert und verarbeitet wird.
  • Eine einfachere Wartung , wenn Sie später zurückkommen und Layouts ändern müssen - ob Sie oder eine andere Person in Ihrem Team.

Das Boxmodul: Ihr Layout -Kraftpaket

Das Box-Modul wurde ein bahnbrechendes Upgrade erhalten. Was einst ein einfaches Versorgungswerkzeug war, hat sich zu der Kerngrundlage für den Aufbau flexibler, moderner Layouts im Beaver Builder entwickelt. Dies ist kein kleines Update-es ist eine vollständige Neugestaltung, die das Boxmodul im Mittelpunkt Ihres Seitenaufbauprozesses positioniert:

Bento Grid Design | Boxmodul hinzufügen

Mit seiner neuen Fähigkeit, als Layoutelement auf oberster Ebene zu fungieren, kann das Boxmodul herkömmliche Zeilenverpackungen ersetzen, indem sie alles von Hintergrundfarben und Bildern bis hin zu Polster und Rändern verwaltet-ohne einen zusätzlichen Elternbehälter zu benötigen.

Außerdem unterstützt das Box -Modul die Flexbox -Eigenschaften vollständig und bietet Ihnen eine genaue Kontrolle über die Ausrichtung, den Abstand und die Verteilung von untergeordneten Elementen in Ihrem Layout. Egal, ob Sie Text, Bilder, Schaltflächen, Formulare oder ein anderes Inhaltsmodul nisten möchten, das Boxmodul verarbeitet es nahtlos.

Dies bedeutet, dass Sie komplexe, reaktionsschnelle Layouts mit nur dem Boxmodul und den Inhaltsmodulen erstellen können, die Sie tatsächlich benötigen. Keine Strukturelemente mehr, nur weil die Schnittstelle dies erforderte.

Reiniger HTML unter der Motorhaube

Während Sie überdenken, wie Sie Layouts in Beaver Builder 2.9 strukturieren, wird der Bauunternehmer selbst hinter den Kulissen aufräumen. Das zweite Hauptaktualisierung in dieser Version beseitigt unnötige Wrapper <div> -Elemente aus grundlegenden Modulen - was zu einer signifikant magereren HTML -Ausgabe führt.

In früheren Versionen enthielten Module wie Überschriften, Bilder und Schaltflächen zusätzliche <div> rund um den tatsächlichen Inhalt. Das fügte dem Markup die Komplexität und das Aufblähen, wie im folgenden Beispiel gezeigt:

Vor Beaver Builder 2.9:

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

Nach Beaver Builder 2.9:

 <h2>Welcome to Our Site</h2>

Diese Änderung liefert mehr als nur sauberer Code-er verbessert die reale Leistung:

  • Vereinfachtes Styling: Mit weniger Wrapper -Klassen können Sie CSS direkter schreiben - keine mehr kämpfenden verschachtelten Selektoren.
  • Schnellere Ladezeiten: Weniger Elemente bedeuten weniger, dass der Browser verarbeitet wird.
  • Bessere SEO: sauberer, mehr semantischeres HTML hilft Suchmaschinen, Ihre Inhalte zu verstehen.

Wenn Sie ein Entwickler oder eine Agentur sind, die an benutzerdefinierten Themen oder Kundenseiten arbeiten, werden Sie die Klarheit und Effizienz dieses Updates zu schätzen wissen. Und da die Änderung nur für Module gilt, die nach 2.9 hinzugefügt wurden (oder wenn Sie die Legacy -Einstellung aktivieren), bleiben Ihre vorhandenen Layouts sicher und kompatibel.

Flexibilität, ohne Dinge zu brechen

Wenn Sie jetzt denken: "Warte - mein benutzerdefiniertes CSS verlässt sich auf diese Wrapper -Klassen!" -Mach dir keine Sorgen. Beaver Builder 2.9 wurde im Auge entworfen. Um die Kompatibilität mit dem älteren Styling zu erhalten, können Sie Wrapper <div> mit einer einzigen Einstellung erneut anerkannt:

So stellen Sie den Legacy Wrapper Markup wieder her:

  1. Gehen Sie zu Ihrem WordPress -Dashboard
  2. Navigieren Sie zu Einstellungen> Beaver Builder> Fortgeschritten
  3. Aktivieren Sie "Force Modul Wrapper Divs"

Wir empfehlen jedoch, diese Funktion fernzuhalten, sofern dies nicht unbedingt erforderlich ist. Das sauberere Markup verbessert nicht nur die Leistung, sondern spiegelt auch moderne Best Practices der Webentwicklung wider. Wenn Sie sich auf Legacy CSS verlassen, ist dies möglicherweise eine großartige Gelegenheit, die Einfachheit und langfristige Wartbarkeit wieder aufzunehmen.

Rückwärtskompatibilität eingebaut

Einer der besten Teile von Beaver Builder 2.9? Sie erhalten all diese modernen Verbesserungen, ohne das Risiko, Ihre vorhandenen Websites zu brechen.

So funktioniert es:

  • Vorhandene Module (die vor der Aktualisierung auf 2.9 platziert sind) werden mit ihrer ursprünglichen Wrapper -Struktur weiterhin rendern.
  • Neue Module, die nach dem Update hinzugefügt wurden, werden das neue Reinigungsmittel -Markup standardmäßig automatisch verwendet.

Diese doppelte Rendering -Strategie bietet Ihnen einen reibungslosen Übergangspfad: Ihre aktuellen Layouts bleiben intakt, während alle neuen Inhalte, die Sie aufbauen, von der schnelleren und leichteren Struktur profitiert.

Wie diese Änderungen Ihre Website -Leistung verbessern

Beaver Builder 2.9 führte leistungsstarke Leistungs- und Workflow -Verbesserungen ein, die Ihre Websites helfen, schneller zu laden, höher zu rangieren und ein reibungsloseres Benutzererlebnis zu bieten.

Schnellere, schlanke Seiten
Mit reduzierten <div> Elementen und Unterstützung für Containermodule als Elemente auf höchstem Niveau sind Ihre Layouts sauberer und leichter-translieren zu schnelleren Ladezeiten und besseren SEO.

Intelligentere Zielseiten
Überspringen Sie die Unordnung unnötiger Zeilen und Spalten. Jetzt können Sie flexible, hochkonvertierende Zielseiten mit nur Containermodulen wie dem Box-Modul für Heldenabschnitte und CTAs erstellen.

Reinigungsmittel und Fußzeilen
Das Box -Modul scheint auch in Header und Fußzeilen und hilft Ihnen dabei, strukturierte, reaktionsschnelle Layouts mit weniger Aufwand und mehr Kontrolle zu erstellen.

Entwickler-freundlicher Markup
Verabschieden Sie sich von übermäßigem Nisting. Die optimierte HTML -Ausgabe vereinfacht das CSS -Targeting und reduziert die Spezifitätsprobleme, wodurch die benutzerdefinierte Entwicklung einfacher und wartbarer wird.

Kunden mit Gewinner
Für Agenturen sind die Vorteile klar: schnellere Websites, sauberer Code und ein modernerer Build -Prozess. Auch wenn Ihre Kunden nicht „Dev“ sprechen, werden sie den Unterschied in der Leistung und des Politurs bemerken.

Eine intelligentere Art, Layouts zu bauen

Beaver Builder 2.9 ist nicht nur ein weiteres Feature -Update - es ist ein nachdenklicher Schritt nach vorne, wie wir uns dem Layout -Aufbau nähern. Durch die Einführung von Containermodulen als flexible Layout -Fundamente und die Straffung der HTML -Ausgabe bringt diese Version den Beaver Builder im Einklang mit modernen Design- und Entwicklungspraktiken.

Das Ergebnis? Ein schnellerer, sauberer, intuitiverer Workflow, der Ihnen Zeit spart und Seiten leistungsfähiger Seiten liefert. Unabhängig davon, ob Sie eine einfache Broschüre -Site erstellen oder ein komplexes Kundenprojekt verwalten, können Sie diese Verbesserungen erleichtert und das Vertrauen aufbauen.

Bereit, Ihre Layouts aufzunehmen?
Aktualisieren Sie den Beaver Builder 2.9 und bauen Sie heute intelligentere, schlankere und zukünftigere Websites auf.

Hinterlassen Sie einen Kommentar Absage Antwort





Unser Newsletter

Unser Newsletter ist persönlich geschrieben und ungefähr einmal im Monat verschickt. Es ist nicht der geringste ein bisschen nervig oder spammy.
Wir versprechen.

Treten Sie dem Newsletter bei

Versuchen Sie es noch heute Beaver Builder

Beaver Builder