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.
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.
One Response
Diese Anleitung bietet eine klare und präzise Einführung in das Erstellen von Bento Grid layout mit css generator in elementor. Besonders hilfreich ist die Empfehlung, wie man mit Hilfe von CSS Grid Generatoren schnell und effizient komplexe Layouts erstellen kann, die nicht nur ästhetisch ansprechend sind, sondern auch die Inhalte effektiv strukturieren und priorisieren.