Search
Close this search box.

Bento Grid Layout mit CSS Generator in Elementor erstellen

Bento Grid Design mit Elementor

Das Bento Grid Layout zählt definitiv zu den Design Trends 2024. Von der aus japan stammenden Bento Box abgeleiteten Aufteilung an Inhalten hat sich regelrecht ein Trend im Webdesign abgezeichnet.

Ich zeige dir, wie du mit Hilfe eines CSS Grid Generators schnell Grids erstellen kannst und wie du dieses dann mit dem Page Builder Elementor in deiner Webseite umsetzen kannst.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Was ist das Bento Grid Design?

Ursprünglich kommt Bento aus Japan. Um für die Arbeiter am Feld Essen zu transportieren wurde eine Box gebaut, welche die Zutaten separat trennt. Diese Aufteilung von Inhalten wurde nun ins Webdesign gebracht und so werden verschachtelte Layouts geschaffen, welche Inhalte nicht nur schön voneinander trennen sondern damit lassen sich auch Prioritäten oder Wertigkeiten darstellen. Je größer der Bereich ist, desto prominenter wirkt er.

Worauf aufpassen?

Beim design sollte man aufpassen, nicht zu viele unterschiedliche Elemente oder Grafikstile zu verwenden. Hier gilt: simplicity is key. Denn wenn man zu viele grafische Elemente auf der vorgegebenen Fläche darstellt, weiß der Besucher am ersten Blick nicht mehr, wo er zuerst hinsehen soll. Daher wird empfohlen, das design schlicht zu halten.

Animation möglich?

Klar! Um die User Experience zu unterstützen kann man beispielsweise per Mouseover die einzelnen Inhalte zum Leben erwecken, in dem man die einzelnen Bereiche leicht animiert.

CSS Grid mit dem Generator erstellt

Es gibt mehrere CSS Generatoren, mit dem man den CSS Code für ein solches Grid erstellen lassen kann. Einen davon findest du hier: https://cssgrid-generator.netlify.app
Im obigen Video erfährst du, wie der Generator zu verwenden ist.

CSS Grid in Elementor verwenden

Mit dem PageBuilder Elementor* kannst du nicht nur Flexbox Container erstellen, sondern mittlerweile auch Grid Container. Damit du das Grid widget verwenden kannst, musst du zuvor in den Einstellungen von Elementor unter „Erweitert“ die Funktion „Grid Container“ aktivieren.

Danach kannst du dein Grid erstellen und einzelne Container darin einfügen. Anschließend musst du nur mehr den generierten CSS Code einfügen und die jeweiligen Klassen-Namen vergeben, schon sitzt das Layout so wie im Generator erstellt. Nun heißt es nur mehr Inhalte einfügen und styling.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Artikel

In diesem Artikel zeige ich dir, wie du animierte 3D Objekte mit Spline erstellen oder bearbeiten kannst und wie du diese dann in deiner Elementor …

In diesem Artikel erfährst du, was genau dieses neue Crypto-Projekt Desertgreener* ist, wie es den weltweiten Wassermangel bekämpfen kann und wie du damit auch noch …