{"id":116946,"date":"2023-05-17T12:02:28","date_gmt":"2023-05-17T12:02:28","guid":{"rendered":"https:\/\/elementor.com\/blog\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/"},"modified":"2025-12-01T15:17:39","modified_gmt":"2025-12-01T13:17:39","slug":"einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/","title":{"rendered":"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid"},"content":{"rendered":"\n<p>Verbessern Sie Ihre Designf\u00e4higkeiten und genie\u00dfen Sie neue M\u00f6glichkeiten, Ihre Website mit <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"Elementor\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1283\">Elementor<\/a> 3.13 zu gestalten, damit Sie einzigartige Designs erzielen k\u00f6nnen, die Ihre Website-Besucher fesseln.\nDiese Version enth\u00e4lt eine neue Layout-Option in Containern &#8211; <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4532\">CSS<\/a> Grid, eine gro\u00dfartige M\u00f6glichkeit, anspruchsvolle und leichte Website-Layouts zu entwerfen und gleichzeitig ein hohes Ma\u00df an Konsistenz zu bewahren.\nDar\u00fcber hinaus f\u00fchrt dieses Update weitere Styling-Optionen im Men\u00fc-Widget ein und f\u00fcgt der neuen Top-Bar neue Funktionen hinzu.  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Container-CSS-Grid.png\" alt=\"\" class=\"wp-image-85167\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>Neu &#8211; CSS Grid Container &#8211; Entwerfen Sie leichte, responsive und professionelle Layouts<\/strong><\/h2>\n\n<p>Jetzt, wenn Sie einen Container hinzuf\u00fcgen, k\u00f6nnen Sie zwischen Flexbox- oder Grid-Containern w\u00e4hlen.\nDie Verwendung von Grid-Containern ist ideal f\u00fcr gitterartige Layouts, hilft Ihnen, die Ausrichtung der Elemente im Container beizubehalten, und reduziert die Lernkurve, die mit dem \u00dcbergang vom Abschnitt-Spalten-Layout zum Container-Layout verbunden ist.  <\/p>\n\n<p>Mit Grid-Containern k\u00f6nnen Sie die Anzahl der Zeilen und Spalten w\u00e4hlen, die Sie f\u00fcr Ihr Raster zusammenstellen m\u00f6chten, den Abstand zwischen Ihren Spalten und Zeilen mit der Gaps-Steuerung bestimmen und w\u00e4hlen, ob der Auto-Flow basierend auf Spalte oder Zeile verlaufen soll.\nSie k\u00f6nnen auch Inhalte und Elemente rechtfertigen und ausrichten, \u00e4hnlich wie bei einem Flexbox-Container.  <\/p>\n\n<p>Jede Zelle im Raster kann ein Element aufnehmen, das wie gewohnt gestylt und bearbeitet werden kann.\nUm ein h\u00f6heres Ma\u00df an Raffinesse zu erreichen, k\u00f6nnen Sie einen Flexbox-Container in die Zelle eines Rasters platzieren und so viele Elemente wie gew\u00fcnscht innerhalb des Flexbox-Containers platzieren.  <\/p>\n\n<p>Um das Container-Raster zu verwenden, stellen Sie sicher, dass Sie die Flexbox-Container- und die Grid-Container-Funktionen im WordPress-Dashboard \u2192 Elementor \u2192 Einstellungen \u2192 Funktionen aktivieren.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-4.png\" alt=\"\" class=\"wp-image-85169\"\/><\/figure>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\"><strong>[Pro] Neue Styling-F\u00e4higkeiten im Men\u00fc-Widget<\/strong><\/h2>\n\n<p>In der vorherigen Version f\u00fchrte Elementor ein neues Men\u00fc-Widget ein, mit dem Sie einfache, einstufige Men\u00fcs und anspruchsvolle Dropdown-Inhaltsmen\u00fcs mit verschachtelbaren Inhalten erstellen k\u00f6nnen.\nDieses Widget ist ein Game-Changer f\u00fcr die Website-Erstellung und erm\u00f6glicht es Ihnen, sch\u00f6ne und funktionale Men\u00fcs f\u00fcr Ihre Websites zu entwerfen. <\/p>\n\n<p><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/pro\/\" title=\"Elementor Pro\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2910\">Elementor Pro<\/a> 3.13 f\u00fchrt zwei neue Funktionen ein, die jetzt im Men\u00fc-Widget verf\u00fcgbar sind:<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Icons im Men\u00fc auf oberster Ebene<\/strong> &#8211; Diese neue Styling-F\u00e4higkeit erm\u00f6glicht es Ihnen, das Design Ihrer Men\u00fcs zu verbessern, indem Sie auff\u00e4llige Icons hinzuf\u00fcgen, die die Aufmerksamkeit der Besucher auf sich ziehen.\nMit einer Vielzahl von Icons zur Auswahl in der Icon-Bibliothek oder der M\u00f6glichkeit, beliebige <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/svg\/\" title=\"SVG\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4911\">SVG<\/a> hochzuladen, k\u00f6nnen Sie Ihre Men\u00fcs an den Stil Ihrer Website anpassen und hervorheben. <\/li><\/ul>\n\n<p><strong>Aktiver Zustand f\u00fcr Ankerlinks<\/strong> &#8211; Zeigen Sie den Website-Besuchern an, welchen Teil der Seite sie gescrollt oder angeklickt haben, wenn Ihr Men\u00fc Ankerlinks enth\u00e4lt.\nAuf diese Weise k\u00f6nnen Sie das Besuchererlebnis verbessern, indem Sie ihnen helfen, sich auf Ihrer Website zu orientieren. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Editor-UI-Revamp-Next-Steps.png\" alt=\"\" class=\"wp-image-85170\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\">Top-Bar-Verbesserungen &#8211; Elementor\u2019s UI-\u00dcberarbeitung fortgesetzt<\/h2>\n\n<p>In Elementor 3.12 haben wir mit der schrittweisen Einf\u00fchrung der bevorstehenden \u00c4nderungen an der Elementor-Oberfl\u00e4che begonnen.\nDiese \u00c4nderungen sind in React geschrieben, was die Leistung verbessert und zuk\u00fcnftiges Produktwachstum und Skalierung erm\u00f6glicht.\nDar\u00fcber hinaus f\u00f6rdern diese \u00c4nderungen die besten Praktiken von Elementor, was zu einer besseren und optimierteren Benutzererfahrung f\u00fchrt.   <\/p>\n\n<p>Eine der gr\u00f6\u00dften \u00c4nderungen ist die neue Top-Bar, die als Experiment eingef\u00fchrt wurde und die Sie auf der Elementor-Feature-Seite in WordPress aktivieren k\u00f6nnen (Elementor \u2192 Einstellungen \u2192 Funktionen \u2192 Editor-Top-Bar).\nIn dieser Version enth\u00e4lt die Top-Bar zwei Updates:  <\/p>\n\n<ol class=\"wp-block-list\"><li><strong>Speicheroptionen im Ver\u00f6ffentlichungsbutton<\/strong> &#8211; obwohl dies keine neue Funktion ist, war diese Funktion in der ersten Version der Top-Bar nicht verf\u00fcgbar.\nJetzt haben Sie Zugriff auf alle Speicheroptionen, die im Editor verf\u00fcgbar sind &#8211; Als Entwurf speichern, Als Vorlage speichern und Anzeigebedingungen (falls zutreffend).\nDies bedeutet auch, dass die Top-Bar jetzt alle Funktionen enth\u00e4lt, die zuvor in der alten Benutzeroberfl\u00e4che des Editors verf\u00fcgbar waren.   <\/li><li><strong>Seitennavigation<\/strong> &#8211; eine neue Funktion, die Ihren Workflow optimiert und den \u00dcbergang zwischen verschiedenen Seiten und Themenbereichen reibungsloser macht.\nDurch Klicken auf die Seitenanzeige in der Mitte der Top-Bar wird ein Dropdown-Men\u00fc ge\u00f6ffnet, das die f\u00fcnf zuletzt bearbeiteten Seiten \/ Beitr\u00e4ge \/ Themenbereiche enth\u00e4lt und es Ihnen erm\u00f6glicht, mit einem einzigen Klick zu einem von ihnen zu wechseln, ohne zum WordPress-Dashboard zur\u00fcckkehren zu m\u00fcssen.  <\/li><\/ol>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Automatically-Populate-The-Post-Excerpt-from-Your-Posts-Content.png\" alt=\"\" class=\"wp-image-85171\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>[Pro] Dynamisch Ihren Post-Auszugs mit dem Inhalt Ihres Beitrags f\u00fcllen<\/strong><\/h2>\n\n<p>Bisher bedeutete die Verwendung des Post-Auszugs-Widgets oder des dynamischen Tags in WordPress, dass der Inhalt automatisch aus dem benutzerdefinierten Auszug, den Sie manuell in WordPress eingef\u00fcgt haben, \u00fcbernommen wurde.\nMit Elementor 3.13 haben Sie jedoch jetzt die M\u00f6glichkeit zu w\u00e4hlen, ob der Inhalt automatisch aus den ersten Zeichen Ihres Beitrags oder aus dem benutzerdefinierten Auszug in WordPress \u00fcbernommen werden soll.\nDieses Update l\u00f6st eine der wichtigsten Anfragen seit der Einf\u00fchrung des Loop-Builders und insbesondere seit der M\u00f6glichkeit, das Post-Auszugs-Widget in Ihrem Loop-Element hinzuzuf\u00fcgen.  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Performance-Improvements-2.png\" alt=\"\" class=\"wp-image-85180\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>Neu: Nutzen Sie Elementor AI, perfekt auf Elementor zugeschnitten <\/strong><\/h2>\n\n<p>Elementor 3.13 enth\u00e4lt auch <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/products\/ai\/\" title=\"Elementor AI\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"2303\">Elementor AI<\/a>, das nativ im Editor integriert ist und die Art und Weise, wie Sie Websites erstellen, ver\u00e4ndern wird.\nDiese Version f\u00fchrt die erste Phase von Elementor AI ein, die es Ihnen erm\u00f6glicht, Texte und Code mit der Kraft der KI zu erstellen.\nSie k\u00f6nnen es verwenden, um Inhalte von Grund auf neu zu erstellen, vorhandene Inhalte auf Ihrer Website zu verbessern, sie auf jede Website zu \u00fcbersetzen und mehr.\nZus\u00e4tzlich k\u00f6nnen Sie Elementor AI verwenden, um Code f\u00fcr benutzerdefiniertes CSS oder benutzerdefinierten Code (erfordert Elementor Pro oder <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/wordpress-hosting\/\" title=\"Hosting\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"3362\">Hosting<\/a>) oder HTML-Snippets zu schreiben.\nSie k\u00f6nnen mehr dar\u00fcber lesen, was Sie mit Elementor AI tun k\u00f6nnen <a href=\"https:\/\/elementor.com\/blog\/introducing-elementor-ai\/\">hier<\/a>.     <\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Performance-Improvements-1.png\" alt=\"\" class=\"wp-image-85173\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>Leistungsverbesserungen<\/strong><\/h2>\n\n<p>In fr\u00fcheren Versionen konzentrierten sich Leistungsverbesserungen auf die am h\u00e4ufigsten verwendeten <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/widgets\/\" title=\"Widgets\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4034\">Widgets<\/a> auf den Hauptseiten.\nMit Elementor 3.13 wurde der Fokus auf Widgets verlagert, die haupts\u00e4chlich auf Unterseiten verwendet werden, auf denen Besucher oft die meiste Zeit verbringen. <\/p>\n\n<p>Die Widgets Autorenbox, Post-Info und Preisliste zeigen Bilder und Benutzerprofilbilder an, diese Bilder haben jetzt ein Lazy Load angewendet.\nDiese \u00c4nderung sollte die anf\u00e4ngliche Ladezeit Ihrer Unterseiten verbessern. <\/p>\n\n<p>Dar\u00fcber hinaus sollte der Header, da er oberhalb des Faltbereichs erscheint, immer sofort beim Laden der Seite geladen werden.\nDaher wurde Lazy Load von Headern entfernt, um die Besuchererfahrung beim Verwenden des Lazy Load Background Images-Experiments zu verbessern. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2401\" height=\"1261\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Accessibility.png\" alt=\"\" class=\"wp-image-85174\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\"><strong>Zug\u00e4nglichkeitsverbesserungen<\/strong><\/h2>\n\n<p>Elementor 3.13 ist voll von Anpassungen und Fehlerbehebungen, die die Zug\u00e4nglichkeit Ihrer Website sowie des Editors verbessern.\nIn dieser Version haben wir uns auf die Tastaturnavigation konzentriert, zus\u00e4tzliche ARIA-Tags implementiert, bestehende ARIA-Konformit\u00e4tsprobleme behoben und semantisches Markup angewendet.  <\/p>\n\n<p>Sie k\u00f6nnen mehr \u00fcber diese Verbesserungen der Zug\u00e4nglichkeit im <a href=\"https:\/\/developers.elementor.com\/elementor-3-13-developers-update\/\">Entwickler-Blog<\/a> lesen. <\/p>\n\n<h2 class=\"wp-block-heading\"><strong>Genie\u00dfen Sie mehr Styling- und Designoptionen f\u00fcr hochgradig gebrandete und ansprechende Website-Erlebnisse <\/strong><\/h2>\n\n<p>Erh\u00f6hen Sie das Design Ihrer Website und erschlie\u00dfen Sie neue Styling-M\u00f6glichkeiten zur Anpassung Ihrer Website mit Elementor 3.13.\nMit CSS-Grid-Containern k\u00f6nnen Sie nahtlos leichte, flexible, gitterartige Layouts erstellen, und mit den neuen Styling-F\u00e4higkeiten im Men\u00fc-Widget k\u00f6nnen Sie unverwechselbare Designs erstellen, die Ihre Website-Besucher fesseln und engagieren.  <\/p>\n\n<p>Diese Version enth\u00e4lt auch neue Funktionen im Top-Bar-Feature, was bedeutet, dass alle zuvor im Editor verf\u00fcgbaren Funktionen jetzt beim Verwenden des Top-Bar-Experiments verf\u00fcgbar sind. <\/p>\n\n<p>Elementor 3.13 enth\u00e4lt auch eine kostenlose Testversion von Elementor AI, die die Art und Weise, wie Sie Websites erstellen, ver\u00e4ndern wird, indem sie Ihnen erm\u00f6glicht, sofort originelle Texte zu erstellen, vorhandene Texte zu verbessern und Code zu schreiben, um Ihre Website und ihr Design zu verbessern. <\/p>\n\n<p>Probieren Sie die neuen Funktionen in Elementor 3.13 aus und lassen Sie uns unten in den Kommentaren wissen, was Sie davon halten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs. <\/p>\n","protected":false},"author":2024207,"featured_media":146187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[255,291,323],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-116946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-de","category-elementor-de","category-new-features-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid<\/title>\n<meta name=\"description\" content=\"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.\" \/>\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-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\" \/>\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.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid\" \/>\n<meta property=\"og:description\" content=\"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\" \/>\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=\"2023-05-17T12:02:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-01T13:17:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Container-CSS-Grid.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2401\" \/>\n\t<meta property=\"og:image:height\" content=\"1261\" \/>\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-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\"},\"author\":{\"name\":\"Gabriella Laster\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a\"},\"headline\":\"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid\",\"datePublished\":\"2023-05-17T12:02:28+00:00\",\"dateModified\":\"2025-12-01T13:17:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\"},\"wordCount\":1273,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"articleSection\":[\"Blog\",\"Elementor\",\"Neue Funktionen\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\",\"name\":\"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"datePublished\":\"2023-05-17T12:02:28+00:00\",\"dateModified\":\"2025-12-01T13:17:39+00:00\",\"description\":\"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png\",\"width\":2401,\"height\":1260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/blog-de\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid\"}]},{\"@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:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"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.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid","description":"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.","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-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/","og_locale":"de_DE","og_type":"article","og_title":"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid","og_description":"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.","og_url":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2023-05-17T12:02:28+00:00","article_modified_time":"2025-12-01T13:17:39+00:00","og_image":[{"width":2401,"height":1261,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/Container-CSS-Grid.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-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/"},"author":{"name":"Gabriella Laster","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/840e05baf69a34292aefbd48f3372a2a"},"headline":"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid","datePublished":"2023-05-17T12:02:28+00:00","dateModified":"2025-12-01T13:17:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/"},"wordCount":1273,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","articleSection":["Blog","Elementor","Neue Funktionen"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/","url":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/","name":"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","datePublished":"2023-05-17T12:02:28+00:00","dateModified":"2025-12-01T13:17:39+00:00","description":"Elementor 3.13 umfasst CSS Grid-Container, neue Styling- und Anpassungsoptionen im Men\u00fc-Widget, erweitert das Top-Bar-Experiment und bietet zus\u00e4tzliche dynamische Inhaltsoptionen f\u00fcr Post-Auszugs.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/05\/cover-3.png","width":2401,"height":1260},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/einfuehrung-von-elementor-3-13-erstellen-sie-schlanke-und-flexible-website-layouts-mit-css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/category\/blog-de\/"},{"@type":"ListItem","position":3,"name":"Einf\u00fchrung von Elementor 3.13 \u2013 Erstellen Sie schlanke und flexible Website-Layouts mit CSS Grid"}]},{"@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:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","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\/116946","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=116946"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/116946\/revisions"}],"predecessor-version":[{"id":116947,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/116946\/revisions\/116947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/146187"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=116946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=116946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=116946"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=116946"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=116946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}