Sind Sie bereit, Ihr Website-Design auf die nächste Stufe zu heben und Ihrer Kreativität freien Lauf zu lassen? Das Box-Modul von Beaver Builder hilft Ihnen dabei, Ihr Website-Design auf ein neues Niveau zu bringen!

Das Box-Modul ist ein leistungsstarkes Tool im Seitenersteller von Beaver Builder, mit dem Sie anpassbare Container zu Ihrer Website hinzufügen können. Mit der Unterstützung von Flexbox, CSS Grid und Layers können Sie Ihre Layouts an Ihre Designanforderungen anpassen, unabhängig davon, ob Sie wichtige Inhalte hervorheben, Produkte oder Dienstleistungen präsentieren oder Ihren Seiten einfach visuelles Interesse verleihen möchten.

Egal, ob Sie ein erfahrener Webdesigner sind oder gerade erst anfangen, das Box-Modul bietet endlose Möglichkeiten zum Erstellen beeindruckender und dynamischer Layouts. Verabschieden Sie sich von Standard-Websites und begrüßen Sie anpassbare Designs, mit denen Sie Ihr Können unter Beweis stellen und Ihre Kunden begeistern können.

In diesem Blogbeitrag erkunden wir die Vielseitigkeit und das kreative Potenzial des Box-Moduls und verraten, wie es Ihre Webdesign-Projekte auf ein höheres Niveau bringen kann.

Inhaltsverzeichnis:

• Was ist das Box-Modul?
• Flexbox vs. CSS Grid
• Wann sollte man Flexbox verwenden?
• Wann sollte man CSS Grid verwenden?
• Beispiele für die Verwendung von Box-Modulen
• So fügen Sie das Box-Modul hinzu
• Mit Box-Modul-Voreinstellungen können Sie schnell loslegen
• Containereinstellungen des Box-Moduls
• Abschluss

Was ist das Box-Modul?

Das Box-Modul funktioniert ähnlich wie eine Zeile oder Spalte und dient als Container. Es nutzt entweder Flexbox oder CSS-Grid, sodass Sie komplexe, flüssige und flexible Layouts erstellen können. Sie können Boxen sowohl in horizontaler als auch vertikaler Ausrichtung sowie in einem Raster verschachteln, stapeln und organisieren, um komplexe Strukturen zu erstellen:

Flexbox und CSS Grid, zwei unterschiedliche CSS-Layoutmodelle, spielen eine entscheidende Rolle bei der Gestaltung der Funktionalität des Box-Moduls:

• Flexbox eignet sich am besten für eindimensionale Layouts, bei denen Elemente in einer Zeile oder Spalte mit Flexibilität in Größe und Ausrichtung angeordnet werden müssen.
• CSS Grid eignet sich für zweidimensionale Layouts und bietet eine präzise Kontrolle über Zeilen und Spalten, was komplexere Designs ermöglicht.

Ab Beaver Builder 2.8 können Sie mit Box problemlos anpassbare Container zu Ihrer Website hinzufügen. Egal, ob Sie wichtige Inhalte hervorheben, Produkte oder Dienstleistungen präsentieren oder Ihren Seiten einfach visuelles Interesse verleihen, das Box-Modul bietet endlose Möglichkeiten für Kreativität.

Hauptmerkmale und Vorteile des Box-Moduls

• Anpassbares Design: Mit dem Box-Modul haben Sie die volle Kontrolle über das Aussehen und Design Ihrer Behälter. Von der Anpassung von Farben und Rändern bis hin zum Hinzufügen von Verknüpfungen zur gesamten Box sind die Möglichkeiten endlos.
• Vielseitigkeit: Egal, ob Sie ein erfahrener Designer oder ein Anfänger sind, das Box-Modul bietet Vielseitigkeit und Benutzerfreundlichkeit. Mit der intuitiven Benutzeroberfläche können Sie beeindruckende Designs ohne Programmierkenntnisse erstellen.
• Responsive Design: Sind Sie besorgt darüber, wie Ihre Container auf verschiedenen Geräten aussehen werden? Das Box-Modul soll sicherstellen, dass Ihre Designs responsive sind und auf allen Bildschirmgrößen gut aussehen.
• Nahtlose Integration: Das Box-Modul lässt sich nahtlos in andere Beaver Builder-Module integrieren, sodass Sie zusammenhängende und optisch ansprechende Layouts für Ihre Website erstellen können.

Alle Benutzer unseres Seitenerstellers, einschließlich der Lite-Version, haben Zugriff auf erweiterte Flex-, Raster- und Ebenenoptionen im Box-Modul. Als Nächstes werfen wir einen Blick auf die wichtigsten Unterschiede zwischen Flexbox und Grid.

Flexbox vs. CSS Grid

Flexbox und CSS Grid sind beide Layoutmodelle in CSS, dienen jedoch unterschiedlichen Zwecken und weisen unterschiedliche Eigenschaften auf:

• Flexbox:
  • Zweck: Entwickelt für eindimensionale Layouts, entweder in einer Zeile oder einer Spalte.
  • Anwendungsfälle: Ideal zum horizontalen oder vertikalen Anordnen von Elementen in einem Container und zum Erstellen flexibler und dynamischer Layouts.
  • Hauptmerkmale:
    • Ermöglicht die Anpassung der Inhaltsgröße an den verfügbaren Platz.
    • Elemente können sowohl horizontal als auch vertikal ausgerichtet werden.
    • Gut geeignet für Navigationsleisten, Kartenlayouts und Zentrierelemente.
• CSS-Raster:
  • Zweck: Entwickelt für zweidimensionale Layouts, die die Kontrolle über Zeilen und Spalten ermöglichen.
  • Anwendungsfälle: Geeignet für komplexe Layouts, bei denen Elemente sowohl in Zeilen als auch in Spalten positioniert werden müssen, z. B. Raster, Tabellen und die gesamte Seitenstruktur.
  • Hauptmerkmale:
    • Bietet explizite Kontrolle über Zeilen und Spalten.
    • Elemente können an einer beliebigen Stelle im Raster platziert werden.
    • Ideal für die Erstellung responsiver Designs und die komplexere Ausrichtung von Inhalten.

Darüber hinaus arbeiten diese Layout-Modelle häufig Hand in Hand und ergeben umfassende Layout-Lösungen. Flexbox kann beispielsweise nahtlos in einzelne Rasterelemente integriert werden, um deren interne Struktur zu verwalten und die kombinierten Vorteile beider Modelle für optimale Designergebnisse zu nutzen.

Wann sollte man Flexbox verwenden?

Flexbox, kurz für Flexible Box Layout, ist ein Game-Changer in der Welt des Webdesigns. Es handelt sich um ein leistungsstarkes CSS-Layoutmodell, das das Anordnen von Elementen auf einer Webseite zum Kinderspiel macht. Stellen Sie sich vor, Sie erstellen eine Website und möchten einige Felder horizontal oder vertikal ausrichten. Mit Flexbox können Sie das ganz einfach tun.

Mit Flexbox können Sie das Layout von Elementen innerhalb eines Containers in eine Richtung steuern – entweder vertikal oder horizontal. Egal, ob Sie eine Navigationsleiste, eine Bildergalerie oder eine Liste von Elementen erstellen, Flexbox bietet Ihnen die Tools, um diese genau nach Ihren Wünschen anzuordnen:

Typischerweise werden Flexbox-Eigenschaften auf das übergeordnete Element angewendet und beeinflussen die Positionierung seiner untergeordneten Elemente. Aber das Beste daran ist, dass jedes Kind seine eigenen Layoutregeln haben kann, was Ihnen unglaubliche Flexibilität und Kontrolle über Ihr Design gibt.

Mit Flexbox können Sie den Abstand zwischen Elementen anpassen, steuern, wie sie in neue Zeilen eingefügt werden, und sogar ihre Ausrichtung und Ausrichtung innerhalb des Containers anpassen. Es ist, als hätte man einen Zauberstab für das Weblayout!

Um Flexbox wirklich zu verstehen, ist es wichtig, das Konzept der „Flex“-Eigenschaft zu verstehen. Diese Eigenschaft bestimmt, wie viel Platz jedes Element im Verhältnis zu den anderen einnimmt. Ganz gleich, ob Sie möchten, dass ein Element wächst und mehr Platz einnimmt oder kleiner wird, um es an seinen Inhalt anzupassen, mit Flexbox haben Sie die Lösung.

Wann sollte CSS Grid verwendet werden?

CSS Grid ist ein weiteres leistungsstarkes Layoutsystem in CSS, das die Art und Weise, wie Webdesigner Webinhalte strukturieren und organisieren, revolutioniert. Im Gegensatz zu herkömmlichen Layoutmethoden wie Floats oder Positionierung ermöglicht CSS Grid die Erstellung zweidimensionaler, gitterbasierter Layouts mit Präzision und Flexibilität.

Mit CSS Grid können Designer Zeilen und Spalten definieren und dann Elemente innerhalb dieser definierten Bereiche platzieren, wodurch sie eine detaillierte Kontrolle über das Layout, die Ausrichtung und den Abstand des Inhalts erhalten:

Einer der Hauptvorteile von CSS Grid ist die Fähigkeit, komplexe Layouts problemlos zu verarbeiten. Ganz gleich, ob Sie mehrspaltige Websites, rasterbasierte Galerien oder responsive Webanwendungen entwerfen, CSS Grid bietet eine vielseitige Lösung, um Inhalte optisch ansprechend zu strukturieren.

Darüber hinaus vereinfacht CSS Grid den Prozess der Erstellung responsiver Designs, indem es Designern ermöglicht, zu definieren, wie Rasterelemente auf unterschiedliche Ansichtsfenstergrößen reagieren, wodurch es einfacher wird, Layouts zu erstellen, die sich nahtlos an verschiedene Geräte und Bildschirmauflösungen anpassen.

CSS Grid ist besonders nützlich beim Erstellen moderner, responsiver Websites, die komplexe Layouts und eine präzise Kontrolle über Designelemente erfordern. Es ist eine ausgezeichnete Wahl für Projekte, bei denen Flexibilität, Skalierbarkeit und Wartbarkeit im Vordergrund stehen.

Beispiele für die Verwendung von Box-Modulen

Das Box-Modul eröffnet Designern eine Welt voller kreativer Möglichkeiten. Hier sind einige Beispiele dafür, wie dieses Modul zur Verbesserung Ihrer Website-Layouts verwendet werden kann:

• Mühelose Zentrierung: Erzielen Sie eine perfekte Ausrichtung, indem Sie Inhalte sowohl vertikal als auch horizontal innerhalb Ihrer Boxen mühelos zentrieren und so optisch ansprechende und ausgewogene Layouts erstellen.
• Verschachtelte Box-Layouts: Tauchen Sie ein in die Welt des komplexen Designs, indem Sie Boxen in Boxen verschachteln und so komplexe und dynamische Layouts erstellen.
• Responsive Grids: Entwerfen Sie reaktionsfähige Rasterlayouts, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen und so ein nahtloses und optimiertes Benutzererlebnis auf allen Geräten gewährleisten.
• Rasterbasierte Strukturen: Nutzen Sie das Box-Modul, um anspruchsvolle rasterbasierte Layouts zu erstellen, die als Grundlage für Ihre gesamte Webseite dienen und Ihren Inhalten Struktur und Klarheit verleihen.
• Kartenlayouts: Werden Sie kreativ bei der Präsentation Ihrer Inhalte, indem Sie die Link-Option im Box-Modul nutzen, um elegante und moderne Kartenlayouts zu erstellen, die die Benutzerinteraktion und Lesbarkeit verbessern.
• Müheloses Stapeln: Stapeln Sie Module einfach übereinander, ohne dass benutzerdefiniertes CSS erforderlich ist, was Ihren Designprozess rationalisiert und eine nahtlose Integration von Inhaltselementen gewährleistet.

So fügen Sie das Box-Modul hinzu

Sind Sie bereit, das Box-Modul in Ihren Webdesign-Projekten zu verwenden? Hier ist eine Kurzanleitung, die Ihnen den Einstieg erleichtert:

1. Greifen Sie auf das Box-Modul zu

Starten Sie Beaver Builder auf der Seite, auf der Sie das Box-Modul hinzufügen möchten. Klicken Sie auf das „ + “-Symbol, um den Inhaltsbereich zu öffnen, wählen Sie dann das Box- Modul aus und ziehen Sie es an die gewünschte Stelle auf der Seite. Alternativ können Sie einen Modulalias auswählen, um schnell loszulegen.

Beachten Sie, dass das Box-Modul innerhalb einer Reihe platziert werden sollte. Wenn Sie versuchen, das Box-Modul auf die Seite zu ziehen, ohne es zuvor in einer Zeile zu platzieren, wird automatisch eine Zeile für Sie erstellt.

2. Passen Sie Ihr Layout an

Sobald Sie das Box-Modul hinzugefügt haben, können Sie damit beginnen, es an Ihre Bedürfnisse anzupassen. Experimentieren Sie mit verschiedenen Displays, Flex , Grid oder Layers , bis Sie das gewünschte Layout erreicht haben.

3. Inhalte hinzufügen

Fügen Sie als Nächstes Inhalte zu Ihrer/Ihren Box(en) hinzu. Dies kann Text, Bilder, Schaltflächen oder sogar ein anderes Boxmodul umfassen.

Um Boxen innerhalb von Boxen zu verschachteln, ziehen Sie einfach ein Box-Modul in ein anderes Box-Modul. Dies erleichtert die Erstellung komplizierter Layouts. Darüber hinaus können Sie Flexbox und CSS-Raster nahtlos kombinieren, um anspruchsvolle Layouts zu entwerfen.

4. Vorschau und Veröffentlichung

Sehen Sie sich abschließend eine Vorschau Ihres Designs an, um sicherzustellen, dass alles genau so aussieht, wie Sie es möchten. Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen auf Ihrer Website zu veröffentlichen.

Mit Box-Modul-Voreinstellungen können Sie schnell loslegen

Neben dem Box-Modul selbst werden Sie feststellen, dass wir die folgenden Modul-Aliase hinzugefügt haben, die Ihnen den schnellen Einstieg erleichtern können:

• Flex-Spalten: Diese Voreinstellung erstellt eine horizontale Reihe von drei Flex-Boxen, die sich innerhalb der übergeordneten Box befinden.
• 3×2-Raster: Eine Layoutstruktur mit Rasterfeldern, die aus drei Spalten und zwei Zeilen innerhalb des übergeordneten Felds bestehen.
• 4×2-Raster: Eine Layoutstruktur aus Rasterfeldern, die aus vier Spalten und zwei Zeilen innerhalb des übergeordneten Felds besteht.
• Geteilte Kopfzeile: Bei dieser Struktur handelt es sich um ein Raster, das drei Spalten mit einem zentralen Fotomodul und Menümodulen auf beiden Seiten definiert.
• Fotoraster: Dieses Layout besteht aus einem 4×3-Raster und Fotomodulen.

Obwohl wir bestrebt sind, das Box-Modul so benutzerfreundlich wie möglich zu gestalten, empfehlen wir dringend, über solide Kenntnisse von Flexbox und CSS Grid zu verfügen. Wir hoffen, dass Modul-Aliase eine praktische Verknüpfung zum schnellen Erstellen von Layouts mithilfe der Box-Module auf der Seite darstellen.

Containereinstellungen des Box-Moduls

Wenn es darum geht, fesselnde Website-Layouts zu erstellen, bietet das Box-Modul eine Fülle vielseitiger Containereinstellungen, die es Designern ermöglichen, Anzeige, Ausrichtung und Abstände präzise zu steuern. Lassen Sie uns in die wichtigsten Funktionen und Einstellungen der Containeroptionen des Box-Moduls eintauchen:

Anzeigeoptionen

Das Box-Modul bietet drei verschiedene Anzeigetypen: Flex, Raster und Ebenen, die jeweils einzigartige Vorteile für die Layoutanpassung bieten. Während sich Flex durch eindimensionale Layouts auszeichnet, bietet Grid eine präzise Kontrolle über Zeilen und Spalten, und Layers ermöglichen mehrschichtige Designs für eine verbesserte visuelle Attraktivität.

Beachten Sie, dass sich die Einstellungsoptionen Ihres Box-Moduls je nach ausgewähltem Anzeigetyp ändern:

Flex-Display

Mit der Flex-Option können Designer Elemente innerhalb einer Box entweder horizontal oder vertikal organisieren und dabei CSS Flexbox für flexible Größe und Ausrichtung nutzen. Die Einstellungen „Richtung“, „Ausrichtung“ und „Umbruch“ verbessern die Layoutkontrolle weiter und sorgen für eine nahtlose Anordnung von Inhaltselementen:

Rasteranzeige

Unter Verwendung von CSS Grid ermöglicht die Grid-Option komplizierte gitterbasierte Layouts mit anpassbaren Zeilen und Spalten. Designer können die Anzahl der Spuren festlegen, die Flussrichtung anpassen und die Ausrichtung optimieren, um pixelgenaue Designs zu erhalten, die Besucher fesseln und fesseln:

Ebenenanzeige

Bei Ebenenlayouts ermöglicht die Option „Ebenen“ die Anordnung von Elementen innerhalb einer Box in einem gestapelten Format, ideal zum Hinzufügen von Textüberlagerungen oder visuellen Elementen zu Bildern. Durch Anpassen der Ausrichtungseinstellungen können Designer eine optimale Platzierung für ein elegantes und professionelles Erscheinungsbild erreichen:

Universelle Einstellungen

Die nächsten vier Abschnitte der Registerkarte „Container“ , „Abstand“, „Größe und Platzierung“, „Darstellung“ und „Verknüpfung“, sind universelle Einstellungen, die für jeden Box-Anzeigetyp gelten:

Beachten Sie, dass auch alle Einstellungen der Registerkarte „Erweitert“ für jeden Anzeigetyp gleich sind.

Abstand, Größe und Platzierung

Mit den umfassenden Einstellungen des Box-Moduls ist die Feinabstimmung von Abständen und Größen ganz einfach. Von der Steuerung des Abstands zwischen Elementen mit Flex- und Grid-Layouts bis hin zur Festlegung von Seitenverhältnis, Abstand und Breite/Höhe haben Designer die volle Kontrolle über die visuelle Präsentation ihrer Inhalte.

Aussehen und Verlinkung

Mit den anpassbaren Einstellungen für Textfarbe, Hintergrundfarbe, Rahmen und Boxschatten lässt sich die optische Attraktivität von Boxen mühelos verbessern. Darüber hinaus können Designer für eine nahtlose Navigation Links zu Feldern hinzufügen und so ganz einfach interaktive Kartenlayouts erstellen, die das Benutzererlebnis verbessern.

Abschluss

Das Box-Modul verschiebt die Grenzen der Kreativität und bietet unzählige Möglichkeiten für die Erstellung fesselnder und optisch ansprechender Layouts. Egal, ob Sie ein erfahrener Designer oder ein Anfänger sind, die Beherrschung des Box-Moduls eröffnet Ihnen unzählige Designmöglichkeiten, die Ihre Website auf ein neues Niveau heben.

Probieren Sie das Box-Modul von Beaver Builder aus und sehen Sie, welchen Unterschied es für Ihre Projekte machen kann. Ganz gleich, ob Sie einen persönlichen Blog, eine E-Commerce-Website oder eine Unternehmenswebsite erstellen, das Box-Modul bietet die Flexibilität und Vielseitigkeit, die Sie benötigen, um Ihre Vision zum Leben zu erwecken.

Verwandte Fragen

Wann sollten Sie Flexbox verwenden?  

Mit Flexbox können Sie Elemente innerhalb eines Containers anordnen und ausrichten, unabhängig von ihrer Größe oder möglichen Änderungen. Die Flexibilität eines Flex-Containers sorgt dafür, dass sich die Flex-Elemente ausdehnen, um den verfügbaren Platz auszufüllen, und bei Bedarf schrumpfen, um ein Überlaufen zu verhindern.

Können Sie CSS Grid und Flexbox kombinieren?

Sie können CSS Grid und Flexbox innerhalb desselben Layouts kombinieren, um ihre jeweiligen Stärken für verschiedene Teile des Designs zu nutzen. Sie können beispielsweise CSS Grid verwenden, um die Gesamtstruktur Ihres Layouts zu erstellen, und dann Flexbox innerhalb bestimmter Rasterelemente verwenden, um die Ausrichtung und Verteilung des Inhalts innerhalb dieser Bereiche zu steuern. Diese Kombination ermöglicht eine größere Flexibilität und Präzision bei der Gestaltung komplexer Layouts.

Wann sollten Sie Flexbox nicht verwenden?

Flexbox ist für die meisten Layoutszenarien vielseitig, eignet sich jedoch nicht für komplexe Rasterlayouts oder bidirektionale Layouts. Erwägen Sie die Verwendung von CSS Grid für eine erweiterte Rastersteuerung oder beim Umgang mit dynamischen Inhalten. Berücksichtigen Sie außerdem die Browserkompatibilität und die Leistung, wenn Sie entscheiden, ob Sie Flexbox für Ihre Layoutanforderungen verwenden möchten.