{"id":125307,"date":"2022-04-05T11:50:46","date_gmt":"2022-04-05T11:50:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/"},"modified":"2025-12-28T10:30:59","modified_gmt":"2025-12-28T08:30:59","slug":"einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/","title":{"rendered":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen"},"content":{"rendered":"\n<p>In Elementor 3.6 f\u00fchren wir Flexbox Container ein, eine neue, schlanke Layoutstruktur, die <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4488\">CSS<\/a> Flexbox in den Editor integriert. Diese Struktur erm\u00f6glicht es Ihnen, pixelgenaue <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\" title=\"responsive\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"7396\">responsive<\/a> Designs und hochentwickelte Layouts schnell zu erreichen, und zwar mit einem wesentlich schlankeren Markup, was die Leistung signifikant verbessert. Diese Funktion markiert eine transformative Ver\u00e4nderung in der Art und Weise, wie Websites mit Elementors Builder erstellt werden, und ist die Grundlage f\u00fcr eine Vielzahl zus\u00e4tzlicher, fortgeschrittener F\u00e4higkeiten. <\/p>\n\n<p>Flexbox Container sind ein neuer Baustein in Elementor, der Sie bef\u00e4higt, Elemente in einem Container effizient anzuordnen, auszurichten und zu verteilen, und zwar auf eine leichtgewichtige und responsive Art und Weise. Mit Flexbox Containern k\u00f6nnen Sie <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/widgets\/\" title=\"Widgets\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"3991\">Widgets<\/a> direkt innerhalb des Containers platzieren sowie Container unendlich verschachteln. Anschlie\u00dfend k\u00f6nnen Sie das Layout und die Verteilung von Widgets innerhalb des Containers steuern und Ihren Inhalt an jede Bildschirmgr\u00f6\u00dfe anpassen, was zu einer h\u00f6heren Responsivit\u00e4t f\u00fchrt, ohne Kompromisse bei der Geschwindigkeit einzugehen und ohne eine einzige Zeile Code zu schreiben. <\/p>\n\n<p>Nach mehreren Monaten in der Dev Edition und der Implementierung zahlreicher R\u00fcckmeldungen aus der Community f\u00fchren wir Flexbox Container als Alpha-Experiment ein.<\/p>\n\n<p>Wenn das Experiment aktiviert ist, werden Sie in der Lage sein, neue Container anstelle von Abschnitten, Spalten und Inneren Abschnitten zu einer Seite hinzuzuf\u00fcgen. Sie werden auch in der Lage sein, Container zu einer bestehenden Seite hinzuzuf\u00fcgen, die zuvor mit dem Abschnitt-Spalten-Layout erstellt wurde. Bei aktiviertem Experiment werden Sie keine neuen Abschnitte oder Spalten zu Ihren Seiten hinzuf\u00fcgen k\u00f6nnen. <\/p>\n\n<h2 class=\"wp-block-heading\">Probieren Sie es zuerst im Flexbox Container Playground aus<\/h2>\n\n<p>Da Container eine neue Art des Aufbaus von Website-Strukturen in Elementor darstellen, wird diese Ver\u00f6ffentlichung von zus\u00e4tzlichem Schulungsmaterial begleitet, einschlie\u00dflich des <a rel=\"noreferrer noopener\" href=\"https:\/\/playground.elementor.com\/demo\/flexbox\/#\" target=\"_blank\">Flexbox Container Playgrounds<\/a>. Dieser Playground umfasst 10 Lektionen, die Ihnen helfen, sich mit dem Designen von Layouts mit Flexbox Containern vertraut zu machen. <\/p>\n\n<p><strong>Bitte beachten Sie<\/strong>: Experimente sollten mit Vorsicht verwendet werden &#8211; Funktionen werden als Experimente eingef\u00fchrt, wenn sie infrastrukturelle \u00c4nderungen beinhalten, die Ihre Website auf unvorhergesehene Weise beeinflussen k\u00f6nnen. Erfahren Sie <a rel=\"noreferrer noopener\" href=\"https:\/\/elementor.com\/help\/elementor-experiments-2\/\" target=\"_blank\">hier<\/a> mehr \u00fcber Experimente. <\/p>\n\n<p>Wenn Sie das Experiment deaktivieren, wird jeder von Ihnen erstellte Container von Ihrer Website entfernt. Sie k\u00f6nnen sie wiederherstellen, wenn Sie das Experiment reaktivieren und zu einer fr\u00fcheren Revision zur\u00fcckkehren. <\/p>\n\n<p><br\/><strong>Wichtiger Hinweis zur Version 3.6 von Elementor<\/strong><\/p>\n\n<p>Als Elementor 3.6 am 22. M\u00e4rz erstmals ver\u00f6ffentlicht wurde, stie\u00dfen einige Benutzer aufgrund von Inkompatibilit\u00e4ten mit Plugins von Drittanbietern auf technische Probleme. Wir haben umgehend einen Patch mit Elementor 3.6.1 ver\u00f6ffentlicht, der die meisten F\u00e4lle dieses Problems beheben sollte, indem die Fehlerdurchsetzungsregeln reduziert wurden, was das Laden des Editors erm\u00f6glicht.<\/p>\n\n<h2 class=\"wp-block-heading\">Was ist der Unterschied zwischen Containern und Abschnitten?<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/01-Containers-Sections-Difference.png\" alt=\"\" class=\"wp-image-83232\"\/><\/figure>\n\n<p>Wenn Sie das Container-Experiment aktivieren, k\u00f6nnen Sie Container zu Ihrer Seite hinzuf\u00fcgen sowie Container auf die Leinwand oder in einen anderen Container ziehen, indem Sie das Widget aus dem Editor-Panel verwenden. Sie werden auch bemerken, dass die R\u00e4nder des Containers einen dunkleren Blauton aufweisen als die R\u00e4nder des Abschnitts. <\/p>\n\n<p>Nachfolgend finden Sie einige zus\u00e4tzliche, technische Unterschiede zwischen Containern und Abschnitten. <\/p>\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>Flexbox-Container-Struktur<\/strong><\/td><td><strong>Abschnitt-Spalten-Struktur<\/strong><\/td><\/tr><tr><td><strong>Hinzuf\u00fcgen zur Seite<\/strong><\/td><td>F\u00fcgen Sie einen Container im Editor mit dem &#8218;+&#8216;-Symbol hinzu oder ziehen Sie das Container-Widget in den Editor<\/td><td>F\u00fcgen Sie einen Abschnitt im Editor mit dem &#8218;+&#8216;-Symbol hinzu<\/td><\/tr><tr><td><strong>Widget-Position <\/strong><\/td><td>Direkt innerhalb eines Containers<\/td><td>In einer Spalte innerhalb eines Abschnitts<\/td><\/tr><tr><td><strong>Widget-Breite<\/strong><\/td><td>Standardm\u00e4\u00dfig inline <\/td><td>Standardm\u00e4\u00dfig volle Breite <\/td><\/tr><tr><td><strong>Verschachtelung<\/strong><\/td><td>Unbegrenzte Verschachtelung <\/td><td>Ein innerer Abschnitt <\/td><\/tr><tr><td><strong>Widget-Richtung <\/strong><\/td><td>Spalte, Zeile, Spalte umgekehrt oder Zeile umgekehrt<\/td><td>Spalte oder Inline-Positionierung<\/td><\/tr><tr><td><strong>Responsives Design<\/strong><\/td><td>Benutzerdefinierte Reihenfolge von Widgets oder Containern f\u00fcr jedes Ger\u00e4t<\/td><td>Spalte umkehren oder Abschnitte duplizieren<\/td><\/tr><tr><td><strong>Ausrichtung <\/strong><\/td><td>Flex-Start, Flex-Center, Flex-End<\/td><td>Links, Zentriert, Rechts<\/td><\/tr><tr><td><strong>Hyperlinks<\/strong><\/td><td>Umschlie\u00dfen Sie den Container, um ihn zu verlinken<\/td><td>Verlinken Sie ein Widget, nicht einen Abschnitt oder eine Spalte<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h2 class=\"wp-block-heading\">Flexbox-Container werden die Art und Weise, wie Sie Websites erstellen, transformieren<\/h2>\n\n<p>Mit Flexbox-Containern k\u00f6nnen Sie schnell einfache und fortgeschrittene Layouts erstellen und die Benutzererfahrung sowie die Leistung verbessern. Nachfolgend finden Sie einige Beispiele daf\u00fcr:<\/p>\n\n<h3 class=\"wp-block-heading\">Erstellen Sie pixelgenaue Layouts mit einem schlanken Markup, und zwar schnell<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/02-Performance.png\" alt=\"\" class=\"wp-image-83233\"\/><\/figure>\n\n<p>Fr\u00fcher, wenn Sie ein <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"eine Website erstellen\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"289\">Website-Layout<\/a> erstellen wollten, das mehrere Widgets in einer Reihe enthielt, mussten Sie entweder die Breite jedes Widgets auf inline setzen, was einen redundanten Arbeitsablauf erzeugt, oder einen Abschnitt mit mehreren Spalten darin erstellen, was die Leistung beeintr\u00e4chtigt. Wenn Sie beispielsweise einen Logo-Abschnitt mit 4 Logos in einer Reihe erstellen wollten, m\u00fcssten Sie mit Abschnitten und Spalten entweder die Breite jedes Logos auf inline setzen oder einen Abschnitt mit 4 Spalten erstellen und in jede ein Logo platzieren. <\/p>\n\n<p>Mit Flexbox-Containern k\u00f6nnen Sie einen einzigen Container verwenden, alle gew\u00fcnschten Logos hinzuf\u00fcgen und die Richtung des Containers von Spalte zu Zeile \u00e4ndern, um alle Ihre Logos mit einem einzigen Klick in einer Reihe zu sehen. Sie k\u00f6nnen auch die Funktion &#8218;Inhalt rechtfertigen&#8216; nutzen, um die Logos nach Wunsch innerhalb des Containers zu verteilen. <\/p>\n\n<h3 class=\"wp-block-heading\">Passen Sie Ihr Design vollst\u00e4ndig an jeden Breakpoint an<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/03-Breakpoint.png\" alt=\"\" class=\"wp-image-83234\"\/><\/figure>\n\n<p>Bei der Gestaltung Ihrer Website ist es wichtig zu ber\u00fccksichtigen, wie sie auf verschiedenen Ger\u00e4ten aussieht. Ein Design, das auf dem Desktop funktioniert, bietet m\u00f6glicherweise nicht die gleiche Benutzererfahrung auf einem kleineren Bildschirm wie einem Mobilger\u00e4t. Durch die Nutzung der M\u00f6glichkeiten von CSS Flexbox k\u00f6nnen Sie das Design Ihrer Website an jedes Ger\u00e4t anpassen. Sie k\u00f6nnen die Richtung, Reihenfolge, Ausrichtung und Verteilung der Elemente innerhalb Ihres Containers f\u00fcr jedes Ger\u00e4t \u00e4ndern, ohne duplizierte Container erstellen zu m\u00fcssen. Dies f\u00fchrt zu einer verbesserten Benutzererfahrung, ohne die Leistung Ihrer Website zu beeintr\u00e4chtigen. <\/p>\n\n<h3 class=\"wp-block-heading\">Erm\u00f6glichen Sie intuitive Benutzererfahrungen mit anklickbaren Containern<\/h3>\n\n<p>Einige Designs lassen Besucher glauben, dass der gesamte Inhaltsbereich anklickbar ist &#8211; wie beispielsweise eine Karte. Wenn sie jedoch versuchen, darauf zu klicken, haben sie Schwierigkeiten, den tats\u00e4chlich anklickbaren Bereich der Karte zu finden. Mit Containern k\u00f6nnen Sie den gesamten Container umschlie\u00dfen und einen Link hinzuf\u00fcgen, wodurch der gesamte Container anklickbar wird. Dies schafft eine \u00e4u\u00dferst intuitive Erfahrung f\u00fcr Ihre Besucher. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/04-Clickable-Containers.png\" alt=\"\" class=\"wp-image-83237\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\">Verschachteln Sie Container unbegrenzt, um fortgeschrittene Layouts zu erstellen<\/h3>\n\n<p>Flexbox-Container erm\u00f6glichen es Ihnen, fortgeschrittene Layouts schneller zu erstellen. W\u00e4hrend Sie mit dem Abschnitt-Spalten-Layout nur einen einzigen inneren Abschnitt innerhalb einer Spalte platzieren k\u00f6nnten, k\u00f6nnen Sie mit Flexbox-Containern Container unbegrenzt verschachteln. Das Verschachteln von Containern erm\u00f6glicht es Ihnen, verschiedene Richtungen und Ausrichtungen f\u00fcr jeden Container festzulegen, um schnell hochkomplexe Layouts zu erstellen. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2400\" height=\"1256\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/05-Nested-Containers.png\" alt=\"\" class=\"wp-image-83238\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\">Nutzen Sie die Kraft von CSS Flexbox im Elementor-Editor<\/h2>\n\n<p>Flexbox-Container, die als Experiment eingef\u00fchrt wurden, stellen einen Quantensprung in der Designflexibilit\u00e4t dar. Mit aktiviertem Experiment k\u00f6nnen Sie alle Vorteile von CSS Flexbox im Elementor-Editor nutzen, was Sie in die Lage versetzt, anspruchsvolle Designs viel schneller und mit deutlich weniger DOM-Ausgabe zu erstellen. Abgesehen von den unmittelbaren Vorteilen hinsichtlich der Gestaltungsflexibilit\u00e4t bilden Container auch die Grundlage f\u00fcr mehrere bevorstehende aufregende Funktionen. Bleiben Sie daher auf dem Laufenden und erproben Sie diese zuerst im <a rel=\"noreferrer noopener\" href=\"https:\/\/playground.elementor.com\/demo\/flexbox\/#\" target=\"_blank\">Playground<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden. <\/p>\n","protected":false},"author":2024207,"featured_media":125309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[291,323],"tags":[446],"marketing_persona":[],"marketing_intent":[49],"class_list":["post-125307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-de","category-new-features-de","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen<\/title>\n<meta name=\"description\" content=\"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-05T11:50:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-28T08:30:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gabriella Laster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gabriella Laster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/\"},\"author\":{\"name\":\"Gabriella Laster\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#\\\/schema\\\/person\\\/840e05baf69a34292aefbd48f3372a2a\"},\"headline\":\"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/\"},\"wordCount\":1179,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"keywords\":[\"Video\"],\"articleSection\":[\"Elementor\",\"Neue Funktionen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/\",\"name\":\"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"datePublished\":\"2022-04-05T11:50:46+00:00\",\"dateModified\":\"2025-12-28T08:30:59+00:00\",\"description\":\"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/Introducing-Flexbox-Containers_BLOG-COVER.png\",\"width\":2400,\"height\":1256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Neue Funktionen\",\"item\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/category\\\/new-features-de\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"contentUrl\":\"https:\\\/\\\/elementor.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/elemntor\\\/\",\"https:\\\/\\\/x.com\\\/elemntor\",\"https:\\\/\\\/www.instagram.com\\\/elementor\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/#\\\/schema\\\/person\\\/840e05baf69a34292aefbd48f3372a2a\",\"name\":\"Gabriella Laster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g\",\"caption\":\"Gabriella Laster\"},\"description\":\"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.\",\"url\":\"https:\\\/\\\/elementor.com\\\/blog\\\/de\\\/author\\\/gabriellal\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen","description":"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/","og_locale":"de_DE","og_type":"article","og_title":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen","og_description":"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.","og_url":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2022-04-05T11:50:46+00:00","article_modified_time":"2025-12-28T08:30:59+00:00","og_image":[{"width":2400,"height":1256,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","type":"image\/png"}],"author":"Gabriella Laster","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Gabriella Laster","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/"},"author":{"name":"Gabriella Laster","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a"},"headline":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/"},"wordCount":1179,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","keywords":["Video"],"articleSection":["Elementor","Neue Funktionen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/","url":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/","name":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","datePublished":"2022-04-05T11:50:46+00:00","dateModified":"2025-12-28T08:30:59+00:00","description":"Elementor 3.6 markiert den ersten Schritt in einer Reihe von infrastrukturellen Aktualisierungen, die die Art und Weise, wie Sie Websites erstellen, transformieren werden, beginnend mit Flexbox Containern. Die Nutzung dieser Funktion wird es Ihnen erm\u00f6glichen, pixelgenaue, responsive und schlanke Designs zu kreieren.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Introducing-Flexbox-Containers_BLOG-COVER.png","width":2400,"height":1256},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-6-nutzen-sie-flexbox-container-um-hochleistungsfaehige-und-responsive-designs-zu-erstellen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Neue Funktionen","item":"https:\/\/elementor.com\/blog\/de\/category\/new-features-de\/"},{"@type":"ListItem","position":3,"name":"Einf\u00fchrung von Elementor 3.6: Nutzen Sie Flexbox Container, um hochleistungsf\u00e4hige und responsive Designs zu erstellen"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a","name":"Gabriella Laster","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d05a13ed44651430b9565d128ead6845482cddcafc9c725e89ecf083b78288e9?s=96&d=mm&r=g","caption":"Gabriella Laster"},"description":"Gabriella is a Product Marketing Director at Elementor, where she helps bridge the gap between complex web technology and seamless user experiences. With a decade of experience in marketing and entrepreneurship, she\u2019s passionate about empowering creators to build their digital dreams.","url":"https:\/\/elementor.com\/blog\/de\/author\/gabriellal\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024207"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=125307"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125307\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/125309"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=125307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=125307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=125307"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=125307"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=125307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}